From 97cda10dd22f8ebc89bd71f6f07fb8111693ec01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EA=B7=80=ED=98=84?= Date: Sun, 9 Jun 2024 14:09:55 +0900 Subject: [PATCH] [refactor] arena-css --- front-end/src/App.jsx | 2 +- front-end/src/app/store.js | 6 +- front-end/src/components/arena/HotMatch.jsx | 23 +- .../arena/Match/Competition/CompTopInfo.jsx | 24 +- .../Match/Competition/CompetitionView.jsx | 303 +++++++----------- front-end/src/components/arena/Rank.jsx | 33 +- .../src/components/arena/Statsistics.jsx | 6 +- front-end/src/components/arena/TopBanner.jsx | 147 +++------ .../modal/Competition/CompEnterModal.jsx | 7 +- .../modal/Competition/CompabstentionModal.jsx | 23 +- .../arena/modal/Main/BannerCreateModal.jsx | 17 +- .../modal/Main/MatchingCompleteModal.jsx | 44 +-- front-end/src/components/main/AboutUs.jsx | 75 ++--- front-end/src/components/main/FourElement.jsx | 13 +- front-end/src/components/main/LogoHome.jsx | 55 ++-- front-end/src/components/main/Summary.jsx | 97 +++--- front-end/src/components/navBar/navBar.jsx | 12 +- front-end/src/features/useAuthCheck.js | 4 +- front-end/src/pages/arena/match/index.jsx | 13 +- front-end/src/pages/main/index.jsx | 2 +- 20 files changed, 354 insertions(+), 552 deletions(-) diff --git a/front-end/src/App.jsx b/front-end/src/App.jsx index c1b76872..c1abae66 100644 --- a/front-end/src/App.jsx +++ b/front-end/src/App.jsx @@ -10,7 +10,7 @@ function App() { useEffect(()=> { const path = location.pathname - console.log(path); + // console.log(path); if (path.includes('game-list') && !(path === '/game-list/competition' || path === '/game-list/group') ) { setIsArena(true) } else { diff --git a/front-end/src/app/store.js b/front-end/src/app/store.js index 150391fa..66e450a6 100644 --- a/front-end/src/app/store.js +++ b/front-end/src/app/store.js @@ -1,4 +1,4 @@ -import { configureStore } from '@reduxjs/toolkit'; +import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'; import { combineReducers } from 'redux'; import { persistReducer, persistStore } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; @@ -28,7 +28,9 @@ const persistedReducer = persistReducer(persistConfig, rootReducer); export const store = configureStore({ reducer: persistedReducer, - + middleware: getDefaultMiddleware({ + serializableCheck: false, // 비직렬화 가능한 값 경고 비활성화 + }), }); export const persistor = persistStore(store); \ No newline at end of file diff --git a/front-end/src/components/arena/HotMatch.jsx b/front-end/src/components/arena/HotMatch.jsx index b1d571b0..fd533bf3 100644 --- a/front-end/src/components/arena/HotMatch.jsx +++ b/front-end/src/components/arena/HotMatch.jsx @@ -1,40 +1,25 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; -// npm install styled-components 애니메이트 기능 구현 설치 라이브러리 import styled, { keyframes } from 'styled-components'; import axios from 'axios'; -// import Oh from '../../images/arena/HotMatch/oh.png' -// import Gwi from '../../images/arena/HotMatch/gwi.png' -// import Hae from '../../images/arena/HotMatch/hae.png' -// import Kim from '../../images/arena/HotMatch/kim.png' import View from '../../images/arena/HotMatch/View.png' import VS from '../../images/arena/HotMatch/VS.png' import Fighting from '../../images/arena/HotMatch/Fighting.gif' +const fadeIn = keyframes`from {opacity: 0; transform: translateX(-50px);} to {opacity: 1;}`; +const AnimatedHeader = styled.h1`animation: ${fadeIn} 0.5s ease-in-out forwards;`; export default function HotMatch() { - // Hot Match 애니메이트 - const fadeIn = keyframes`from {opacity: 0; transform: translateX(-50px);} to {opacity: 1;}`; - const AnimatedHeader = styled.h1`animation: ${fadeIn} 0.5s ease-in-out forwards;`; - const [hotMatchs, setHotMatchs] = useState([]) useEffect(()=> { axios.get('https://codearena.shop/game/chat/hotmatch') .then((res)=> { setHotMatchs(res.data) - console.log("Hot Match 확인 :", res.data); + // console.log("Hot Match 확인 :", res.data); }) },[]) - - - - - - - - return (

diff --git a/front-end/src/components/arena/Match/Competition/CompTopInfo.jsx b/front-end/src/components/arena/Match/Competition/CompTopInfo.jsx index 893c93ad..df6c16ac 100644 --- a/front-end/src/components/arena/Match/Competition/CompTopInfo.jsx +++ b/front-end/src/components/arena/Match/Competition/CompTopInfo.jsx @@ -34,22 +34,23 @@ export default function CompTopInfo({ gameExitId, problemId, game}) { return (
{/* 왼쪽 상단 (유저 정보) */} -
-
+
+
플레이어1 이미지
@@ -107,7 +108,6 @@ export default function CompTopInfo({ gameExitId, problemId, game}) {
- {/* 나가기 버튼 */}
- - - - -
-
- {/* if there is a button in form, it will close the modal */} - -
-

배팅

-
-
-
- 플레이어1 이미지 + +
+
+ +
+

배팅

+
+
+
+ 플레이어1 이미지 +
+

{game?.userRedNickname}

-

{game?.userRedNickname}

-
-
- vs -
-
-
- 플레이어2 이미지 +
+ vs
-

{game?.userBlueNickname}

-
-
-
-
- -
-
-
- people - { - game?.gameMode === '1' ? -

{game?.userRedEffiRating}

- : -

{game?.userRedSpeedRating}

- } -
-
- people -

{betting.player1BatPeople}

-
-
- people -

{betting.player1MaxUserNickname || '-'}

-
-
- people -

{betting.player1MaxCoin || '-'}

-
-
-
-

{betting.player1Ratio}%

+
+
+ 플레이어2 이미지
+

{game?.userBlueNickname}

- - - - {!isBetting ? -
- - -
- : - null - }
-
- -
-
-

{betting.player2Ratio}%

-
-
-
- { - game?.gameMode === '1' ? -

{game?.userBlueEffiRating}

- : -

{game?.userBlueSpeedRating}

- } - people -
-
-

{betting.player2BatPeople}

- people -
-
-

{betting.player2MaxUserNickname || '-'}

- people -
-
-

{betting.player2MaxCoin || '-'}

- people +
+
+
+
+
+ people + { + game?.gameMode === '1' ? +

{game?.userRedEffiRating}

+ : +

{game?.userRedSpeedRating}

+ } +
+
+ people +

{betting.player1BatPeople}

+
+
+ people +

{betting.player1MaxUserNickname || '-'}

+
+
+ people +

{betting.player1MaxCoin || '-'}

+
+
+
+

{betting.player1Ratio}%

-
+
+ {!isBetting ? +
+ + +
+ : + null + }
- - {!isBetting ? -
- - +
+
+
+

{betting.player2Ratio}%

+
+
+
+ { + game?.gameMode === '1' ? +

{game?.userBlueEffiRating}

+ : +

{game?.userBlueSpeedRating}

+ } + people +
+
+

{betting.player2BatPeople}

+ people +
+
+

{betting.player2MaxUserNickname || '-'}

+ people +
+
+

{betting.player2MaxCoin || '-'}

+ people +
+
+
+ + {!isBetting ? +
+ + +
+ : + null + }
- : - null - }
-
-
- +
- -
); } \ No newline at end of file diff --git a/front-end/src/components/arena/Rank.jsx b/front-end/src/components/arena/Rank.jsx index d1711621..c98c1318 100644 --- a/front-end/src/components/arena/Rank.jsx +++ b/front-end/src/components/arena/Rank.jsx @@ -3,9 +3,10 @@ import { Link } from 'react-router-dom'; import axios from 'axios'; import styled, { keyframes } from 'styled-components'; +const fadeIn = keyframes`from {opacity: 0; transform: translateX(-50px);} to {opacity: 1;}`; +const AnimatedHeader = styled.h1`animation: ${fadeIn} 0.5s ease-in-out forwards;`; + export default function RankPage() { - const fadeIn = keyframes`from {opacity: 0; transform: translateX(-50px);} to {opacity: 1;}`; - const AnimatedHeader = styled.h1`animation: ${fadeIn} 0.5s ease-in-out forwards;`; const [CoinRanks, setCoinRanks] = useState([]) const [speedRanks, setSpeedRanks] = useState([]) @@ -14,16 +15,15 @@ export default function RankPage() { useEffect(()=> { axios.get('https://codearena.shop/game/rest/rank') .then((res)=> { - console.log(res); + // console.log(res); setSpeedRanks(res.data.data.speedRank) setEffRanks(res.data.data.effRank) setCoinRanks(res.data.data.pointRank) }) },[]) - // 각 모드별 전체 랭킹 리스트 - const renderRankingList = (mode, rankingList) => ( + const renderRankingList = ( mode, rankingList ) => (
{ mode === 'Speed' ? - rankingList.map((user, index) => renderRankingItem(user, index)) - : - rankingList.map((user, index) => renderRankingItem2(user, index)) + rankingList.map((user, index) => renderRankingItem(user, index)) + : + rankingList.map((user, index) => renderRankingItem2(user, index)) }
@@ -56,10 +56,9 @@ export default function RankPage() { // 각 모드별 랭킹 리스트 아이템 const renderRankingItem = (user, index) => ( -
+
@@ -71,10 +70,9 @@ export default function RankPage() { ); const renderRankingItem2 = (user, index) => ( -
+
@@ -85,8 +83,6 @@ export default function RankPage() {
); - - const BattingKingList = (mode, rankingList) => (
( -
+
@@ -127,9 +122,6 @@ export default function RankPage() {
); - - - return (
@@ -141,9 +133,6 @@ export default function RankPage() { {renderRankingList('Efficiency', effRanks)}
{/* 사이에 여백 */} {BattingKingList('Rich', CoinRanks)} - - -
); diff --git a/front-end/src/components/arena/Statsistics.jsx b/front-end/src/components/arena/Statsistics.jsx index 854369de..e1c6b6d5 100644 --- a/front-end/src/components/arena/Statsistics.jsx +++ b/front-end/src/components/arena/Statsistics.jsx @@ -32,8 +32,8 @@ export default function StatsisticsPage() { fontSize: '16px', }; - // 차트에 보이는 퍼센트 값을 직접 계산하여 표시하는 함수 - const formatPercent = (value) => `${(value * 100).toFixed(0)}%`; + // 차트에 보이는 퍼센트 값을 계산하여 표시하는 함수 + // const formatPercent = (value) => `${(value * 100).toFixed(0)}%`; useEffect(()=> { const headers = { @@ -46,7 +46,7 @@ export default function StatsisticsPage() { return {name:key.split('Count'), value:value} })) setMatchs(res.data.data.recentMatches) - console.log("record 확인 :", res.data.data.recentMatches) + // console.log("record 확인 :", res.data.data.recentMatches) }) .catch((err) => { console.log("에러!!! :", err) diff --git a/front-end/src/components/arena/TopBanner.jsx b/front-end/src/components/arena/TopBanner.jsx index a36847e6..5742c714 100644 --- a/front-end/src/components/arena/TopBanner.jsx +++ b/front-end/src/components/arena/TopBanner.jsx @@ -73,16 +73,15 @@ export default function TopBanner() { socket.current = new WebSocket('wss://codearena.shop/matching'); socket.current.addEventListener("open", function (event) { - console.log(event) + console.log("웹소켓 연결 확인", event) }) socket.current.addEventListener("message", function (event) { - console.log("Message from server ", event.data); - - const object = JSON.parse(event.data) - console.log("recive data :", object) - + // console.log("Message from server ", event.data); + const object = JSON.parse(event.data) + // console.log("recive data :", object) + if (object.type) { setType2(object.type) matchId.current = object.matchId; @@ -121,7 +120,7 @@ export default function TopBanner() { startTime: startTime.current, queueKey: queueKey.current, })); - console.log("setGameInfo를 찍었습니다 :", setGameInfo) + // console.log("setGameInfo 확인 :", setGameInfo) navigate(`/game-list/competition/play/${object.gameId}`) } @@ -145,7 +144,6 @@ export default function TopBanner() { if (socket.current.readyState === WebSocket.OPEN && type2) { startMatchingTimer(); } - }); socket.current.addEventListener("error", function (event) { @@ -158,19 +156,16 @@ export default function TopBanner() { } }; }; - - ////////////////// 위에서 websocket 통신 연결 ////////////////////////// // 1. 언어 3가지 중 하나 선택하기 const handleLanguageSelection = (lang) => { setSelectedLanguage(lang); - console.log("lang :", lang) + // console.log("lang :", lang) }; - // 2. 언어 선택 모달 활성화 const openLanguageModal = () => { - console.log('언어 선택 모달 호출함!!'); + // console.log('언어 선택 모달 호출함!!'); const languageModal = document.getElementById('language_modal'); const matchingModal = document.getElementById('matching_modal'); @@ -191,7 +186,7 @@ export default function TopBanner() { // 3. 매칭 진행 모달 const openMatchingModal = () => { - console.log('매칭 진행 모달 호출함!!'); + // console.log('매칭 진행 모달 호출함!!'); const languageModal = document.getElementById('language_modal'); const matchingModal = document.getElementById('matching_modal'); @@ -219,18 +214,16 @@ export default function TopBanner() { // 매칭 모달이 닫힐 때 타이머 중지 matchingModal.addEventListener('close', () => { - console.log("너가 아니길 빈다.... 머리아프다") clearInterval(timerInterval.current); // 타이머 중지 languageModal.close(); }); }; // 타이머 중지 - // let timerInterval/// const closeMatchingModalHandler = () => { - console.log('타이머 중지!!'); + // console.log('타이머 중지!!'); setType2(null) - console.log('진짜 마지막 타입 확인 :', type2) + // console.log('진짜 마지막 타입 확인 :', type2) // 선택된 언어 초기화 setSelectedLanguage(null); const matchingCompleteModal = document.getElementById('matching_complete_modal'); @@ -253,8 +246,6 @@ export default function TopBanner() { clearInterval(timerInterval.current); timerInterval.current = null; } - - // 언어 선택 모달 중복호출이 안되도록 }; // 4. 매칭이 돌아가면 타이머 소환 @@ -283,23 +274,16 @@ export default function TopBanner() { // 원하는 시간까지 진행 후 타이머 중지 // const desiredTimeInSeconds = 10; - console.log('Start Matching Timer type : ', type2) - + // console.log('Start Matching Timer type : ', type2) }; useEffect(()=> { - console.log('!!!!!!!!!!!!!!!타입2',type2); if (type2 && type2 === "QUERY") { const interval = timerInterval.current clearInterval(interval); timerInterval.current = interval; handleMatchingComplete(); // 수락&거절 모달 함수 호출 - } else if (type2 && type2 === 'RESPONSE') { - - } - // if (socket.current.readyState === WebSocket.OPEN && type2) { - // startMatchingTimer(); - // } + } },[type2]) const startQueryTimer = () => { @@ -313,12 +297,8 @@ export default function TopBanner() { // 타이머 초마다 상승하고 문자열로 표기 timerElements.textContent = `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`; - // if (type2 && type2 === 'CONTINUE') { - // clearInterval(timerInterval.current); // 초기화 - // } - if (seconds === 0) { - console.log("startQueryTimer의 타이머 확인@@") + // console.log("startQueryTimer의 타이머 확인@@") socket.current.send( JSON.stringify({ matchId: matchId.current, @@ -345,7 +325,7 @@ export default function TopBanner() { timerInterval.current = setInterval(updateTimer, 1000); } - // 5. "매칭 완료!" 문구와 동시에 "수락", "취소" 모달 띄우기 + // 5-1. "매칭 완료!" 문구와 동시에 "수락", "취소" 모달 띄우기 const handleMatchingComplete = () => { setMatchingState({ userImgSrc: userImgSrc.current, @@ -362,10 +342,10 @@ export default function TopBanner() { }, 1500); }; - // 5-1. 매칭 완료 후 띄워질 "수락", "취소" 마지막 모달 + // 5-2. 매칭 완료 후 띄워질 "수락", "취소" 마지막 모달 const openMatchingCompleteModal = () => { // MatchingCompleteModal 열기 - console.log("마지막 수락 거절 모달 호출되니?") + // console.log("마지막 수락 거절 모달 호출되니?") const matchingCompleteModal = document.getElementById('matching_complete_modal'); matchingCompleteModal.style.left = '50%'; matchingCompleteModal.style.top = '50%'; @@ -387,9 +367,9 @@ export default function TopBanner() { }); }; - // 마지막 모달에서 "거절" 모든 모달 닫기 (중복 호출 방지) + // 마지막 모달에서 "거절" 누를 시 모든 모달 닫기 (중복 호출 방지) const handleCancel = () => { - console.log("매칭을 거절했어요 !") + // console.log("매칭을 거절했어요 !") const send_obj = { matchId: matchId.current, userId: userId.current, @@ -429,9 +409,9 @@ export default function TopBanner() { } }; - // 마지막 "수락" 버튼을 눌렀을 때 호출될 함수.. + // 마지막 "수락" 버튼을 눌렀을 때 호출될 함수 const handleAccept = () => { - console.log("매칭을 수락했어요 !") + // console.log("매칭을 수락했어요 !") const send_obj = { matchId: matchId.current, userId: userId.current, @@ -447,23 +427,14 @@ export default function TopBanner() { type: 'YES', }; - console.log("수락 :", send_obj) - socket.current.send ( JSON.stringify (send_obj) ); - // clearInterval(timerInterval.current); - // 중복 호출 방지를 위한 선언 및 모든 모달 닫기 - // const matchingCompleteModal = document.getElementById('matching_complete_modal'); const languageModal = document.getElementById('language_modal'); const matchingModal = document.getElementById('matching_modal'); - // if (matchingCompleteModal && matchingCompleteModal.open) { - // matchingCompleteModal.close(); - // } - if (languageModal && languageModal.open) { languageModal.close(); } @@ -473,11 +444,6 @@ export default function TopBanner() { } }; - // 게임 생성 모달 닫기 - const closeModal = () => { - setIsModalOpen(false); - }; - return (
{/* 상단 배너 */}
{/* 경쟁 매칭 버튼*/} - + + > + 취 소 + -

언어를 선택하세요 !

+

언어를 선택하세요 !

{/* 언어 선택 옵션 3가지 -> 수정 */} -
+
{languageButtons.map(({ lang, label }) => ( -

매칭 중입니다...

-

잠시만 기다려주세요

+

매칭 중입니다...

+

잠시만 기다려주세요

{/* 타이머 00:00부터 1초씩 상승하기 */} -
+ +
@@ -626,37 +596,18 @@ export default function TopBanner() {
- - - {/* 게임 생성.. 자릅니다... */} - {/* - {} */} +
{/* 게임 찾기 */} - +
{/* 상단 배너 선 */}
{ axios.get(`https://codearena.shop/game/chat/enter?gameId=${competitionId}`) - .then(res=>console.log(res)) - .catch(err=>console.log(err)) + .then(res => console.log(res)) + .catch(err => console.log(err)) navigate( `/game-list/competition/view/${competitionId}`, diff --git a/front-end/src/components/arena/modal/Competition/CompabstentionModal.jsx b/front-end/src/components/arena/modal/Competition/CompabstentionModal.jsx index 5589c57a..382f1c82 100644 --- a/front-end/src/components/arena/modal/Competition/CompabstentionModal.jsx +++ b/front-end/src/components/arena/modal/Competition/CompabstentionModal.jsx @@ -1,9 +1,7 @@ -import React, { useEffect, useState, useRef } from "react"; +import React, { useRef } from "react"; import { useNavigate } from "react-router-dom" -import SockJS from 'sockjs-client'; -import { Stomp } from '@stomp/stompjs'; import { useDispatch, useSelector } from "react-redux"; -import { setStompClients, clearStompClient } from "../../../../features/arena/stompClientSlice"; +import { clearStompClient } from "../../../../features/arena/stompClientSlice"; export default function AbstentionModal() { const navigate = useNavigate(); @@ -16,18 +14,9 @@ export default function AbstentionModal() { gameId } = useSelector(state => state.game); const stompClient = useSelector(state => state.stompClient.stompClient); - - useEffect(()=> { - - console.log("useEffect stompClient :", stompClient) - - console.log("넘어온 problemId 번호 확인 :", problemId) - - },[gameId]) - // 기권할래요 동작 함수 const clickHandler = () => { - console.log('기권했어요', stompClient.send) + // console.log('기권했어요', stompClient.send) stompClient.send(`/pub/chat/leave`, {}, JSON.stringify({ gameId: gameId, userId: userId, @@ -35,7 +24,6 @@ export default function AbstentionModal() { mode : gameMode === 'speed' ? 0 : 1, type: 'PLAYER_EXIT', })) - stompClient.unsubscribe('/sub/chat/room/'+`${gameId}`); stompClient.unsubscribe('/pub/chat/leave'); stompClient.disconnect(); @@ -44,6 +32,11 @@ export default function AbstentionModal() { window.location.reload() } + // useEffect(()=> { + // console.log("useEffect stompClient :", stompClient) + // console.log("넘어온 problemId 번호 확인 :", problemId) + // },[gameId]) + return (
diff --git a/front-end/src/components/arena/modal/Main/BannerCreateModal.jsx b/front-end/src/components/arena/modal/Main/BannerCreateModal.jsx index 72584885..8c9e8c09 100644 --- a/front-end/src/components/arena/modal/Main/BannerCreateModal.jsx +++ b/front-end/src/components/arena/modal/Main/BannerCreateModal.jsx @@ -3,21 +3,16 @@ import axios from 'axios'; import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router'; -// import ChatRoom from '../match/ChatRoom'; - export default function CreateModal({ closeModal, onRoomCreated }) { const navigate = useNavigate() const userId = useSelector(state => state.auth.userId) const [roomName, setRoomName] = useState(''); - const [mode, setMode] = useState(0) - const [chatrooms, setChatrooms] = useState([]); - const [selectedRoomId, setSelectedRoomId] = useState(null); const [gameMode, setGameMode] = useState(0) const [language, setLanguage] = useState('java') const createRoom = () => { if (roomName === '') { - alert('방 제목을 입력해 주십시요.'); + alert('방 제목을 입력해 주세요.'); return; } else { const data = { @@ -29,19 +24,15 @@ export default function CreateModal({ closeModal, onRoomCreated }) { axios.post('https://codearena.shop/game/chat/gameroom/private', data) .then(response => { if (response.data.status === '200'){ - alert(`${response.data.name} 방 개설에 성공하였습니다.`); - // onRoomCreated(response.data) - // closeModal(); // 모달 닫기 + // alert(`${response.data.name} 방 개설에 성공하였습니다.`); navigate(`/game-list/group/lobby/${response.data.data}`) } }) .catch(error => { - alert('채팅방 개설에 실패하였습니다.'); - console.error('채팅방 생성 중 오류 발생:', error); + // alert('채팅방 개설에 실패하였습니다.'); + console.error('방 생성 중 오류 발생:', error); }); } - - }; return ( diff --git a/front-end/src/components/arena/modal/Main/MatchingCompleteModal.jsx b/front-end/src/components/arena/modal/Main/MatchingCompleteModal.jsx index e3118a80..1060a2cb 100644 --- a/front-end/src/components/arena/modal/Main/MatchingCompleteModal.jsx +++ b/front-end/src/components/arena/modal/Main/MatchingCompleteModal.jsx @@ -3,63 +3,34 @@ import VS from '../../../../images/arena/HotMatch/VS.png' import { useSelector } from 'react-redux/es/hooks/useSelector'; export default function MatchingCompleteModal({ matchingState, onAccept, onCancel, type, socket}) { - const [userImgSrcs, setUserImgSrcs] = useState(''); const [enemyImgSrcs, setEnemyImgSrcs] = useState(''); const [userNicknames, setUserNicknames] = useState(''); const [enemyNicknames, setEnemyNicknames] = useState(''); const [waitingText, setWaitingText] = useState(""); const [buttonsVisible, setButtonsVisible] = useState(true); - // const [propsType, setPropsType] = useState(type); const queueKey = useSelector(state => state.game.queueKey); const userId = useSelector(state => state.game.userId); const userNickname = useSelector(state => state.game.userNickname); const rating = useSelector(state => state.game.rating); - // const propsType = type; // props 받은 타입 선언 - - // 수락했을 때 작동할 함수 - - // const checkPropsType = (msgType) => { - // // 거절당하고 다시 우선순위 큐에 들어감 - // if (msgType == 'CONTINUE') { - // // console.log("msgType 확인 :", msgType) - // changeText("상대가 매칭을 거절하여 새로운 매칭을 시도하겠습니다..."); - // setButtonsVisible(false); - // } - // // 상대방과 매칭 잡혔을 때 : QUERY - // else if (msgType == 'QUERY') { - // // console.log("좀 떠라") - // changeText(''); - // setButtonsVisible(true); - // // changeText("새 매칭을 잡았어요!"); - // } - // } - const handleAccept = () => { onAccept(); - // console.log("props받은 타입 확인111 :", type.current) changeText("상대방의 수락을 기다리고 있어요!"); setButtonsVisible(false); }; useEffect(()=>{ - console.log("props받은 type 확인000 :", type) - - // console.log("useEffect !!!!") - // 거절당하고 다시 우선순위 큐에 들어감 + // 거절당하면 다시 우선순위 큐에 진입 if (type == 'CONTINUE') { - // console.log("msgType 확인 :", msgType) changeText("상대가 매칭을 거절하여 새로운 매칭을 시도하겠습니다..."); setButtonsVisible(false); } // 상대방과 매칭 잡혔을 때 : QUERY else if (type == 'QUERY') { - // console.log("좀 떠라") changeText(''); setButtonsVisible(true); - // changeText("새 매칭을 잡았어요!"); } }, [type]) @@ -69,10 +40,6 @@ export default function MatchingCompleteModal({ matchingState, onAccept, onCance } const onHandleCancle = () => { - // console.log("queuekey 확인입니다!!!!!!!!!!!!!!!!!!! :", queueKey) - // console.log("userId 확인입니다!!!!!!!!!!!!!!!!!!! :", userId) - // console.log("rating 확인입니다!!!!!!!!!!!!!!!!!!! :", rating) - // console.log("userNickname 확인입니다!!!!!!!!!!!!!!!!!!! :", userNickname) socket.send( JSON.stringify ({ type : "POP", @@ -86,17 +53,8 @@ export default function MatchingCompleteModal({ matchingState, onAccept, onCance ); socket.close(); socket = null; - } - // 거절했을 때 작동할 함수 - // const handleReject = () => { - // onCancel(); - // setShowWaitingUI(false); // 거절 시 새로운 UI 보여줌 - // setWaitingText(''); - // setRejectingText("상대가 매칭을 거절하여 새로운 매칭을 시도하겠습니다..."); // 거절 후 매칭 재시도 문구 설정 - // }; - useEffect(() => { // console.log('내려받은 유저 닉네임, 이미지 확인 :', matchingState); setUserImgSrcs(matchingState.userImgSrc); diff --git a/front-end/src/components/main/AboutUs.jsx b/front-end/src/components/main/AboutUs.jsx index 5e811aa6..8a63d743 100644 --- a/front-end/src/components/main/AboutUs.jsx +++ b/front-end/src/components/main/AboutUs.jsx @@ -4,47 +4,48 @@ import 'tailwindcss/tailwind.css'; import Introduce from '../../images/main/AboutUs/Introduce.gif'; import We from '../../images/main/AboutUs/We.gif'; -export default function AboutUs({ fromRefFourElement }) { - const [animate, setAnimate] = useState(false); // 애니메이트 상태 관리 +const frameInAnimation_gif = keyframes` + 0% { + opacity: 0; + transform: translateX(-100%); + } + 100%{ + opacity: 1; + transform: translateX(0%); + } +`; + +const AnimateContainer_gif = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + &.frame-in { + animation: ${frameInAnimation_gif} 1s forwards; + } +`; - const frameInAnimation_gif = keyframes` - 0% { - opacity: 0; - transform: translateX(-100%); - } - 100%{ - opacity: 1; - transform: translateX(0%); - } - `; +const frameInAnimation_font = keyframes` + 0% { + opacity: 0; + transform: translateX(100%); + } + 100%{ + opacity: 1; + transform: translateX(0%); + } +`; - const AnimateContainer_gif = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - &.frame-in { - animation: ${frameInAnimation_gif} 1s forwards; - } - `; +const AnimateContainer_font = styled.div` + display: flex; + &.frame-in { + animation: ${frameInAnimation_font} 1s forwards; + } +`; - const frameInAnimation_font = keyframes` - 0% { - opacity: 0; - transform: translateX(100%); - } - 100%{ - opacity: 1; - transform: translateX(0%); - } - `; +export default function AboutUs({ fromRefFourElement }) { + const [animate, setAnimate] = useState(false); // 애니메이트 상태 관리 - const AnimateContainer_font = styled.div` - display: flex; - &.frame-in { - animation: ${frameInAnimation_font} 1s forwards; - } - `; useEffect(() => { const handleScroll = () => { diff --git a/front-end/src/components/main/FourElement.jsx b/front-end/src/components/main/FourElement.jsx index 58bdb83e..52b32ade 100644 --- a/front-end/src/components/main/FourElement.jsx +++ b/front-end/src/components/main/FourElement.jsx @@ -57,6 +57,7 @@ const AnimateContainer_AU = styled.div` export default function FourElement({ fromRefLogoHome, scrollToAboutUs }) { + const navigate = useNavigate(); const [isProblemSolveHovered, setIsProblemSolveHovered] = useState(false); const [isCodeArenaHovered, setIsCodeArenaHovered] = useState(false); const [isCommunityHovered, setIsCommunityHovered] = useState(false); @@ -72,23 +73,18 @@ export default function FourElement({ fromRefLogoHome, scrollToAboutUs }) { } }; - const navigate = useNavigate(); - const handleCodeArenaClick = () => { navigate('/arena'); }; useEffect(() => { const handleScroll = () => { - console.log('스크롤 애니메이트 이벤트 발생 확인'); - // 특정 조건을 확인하여 animate 상태 토글 const shouldAnimate = window.scrollY < 1550 && window.scrollY > 450; setAnimate_PS(shouldAnimate); setAnimate_CA(shouldAnimate); }; - // 스크롤 이벤트 리스너 등록 + window.addEventListener('scroll', handleScroll); - // 클린업 함수에서 이벤트 리스너 제거 return () => { window.removeEventListener('scroll', handleScroll); }; @@ -96,15 +92,12 @@ export default function FourElement({ fromRefLogoHome, scrollToAboutUs }) { useEffect(() => { const handleScroll = () => { - console.log('스크롤 애니메이트 이벤트 발생 확인22'); - // 특정 조건을 확인하여 animate 상태 토글 const shouldAnimate = window.scrollY < 1550 && window.scrollY > 450; setAnimate_CM(shouldAnimate); setAnimate_AU(shouldAnimate); }; - // 스크롤 이벤트 리스너 등록 + window.addEventListener('scroll', handleScroll); - // 클린업 함수에서 이벤트 리스너 제거 return () => { window.removeEventListener('scroll', handleScroll); }; diff --git a/front-end/src/components/main/LogoHome.jsx b/front-end/src/components/main/LogoHome.jsx index 785f4c6b..c98834d9 100644 --- a/front-end/src/components/main/LogoHome.jsx +++ b/front-end/src/components/main/LogoHome.jsx @@ -4,38 +4,39 @@ import 'tailwindcss/tailwind.css'; import Logo from '../../images/main/LogoHome/Logo.png'; import '../css/BlinkingElement.css'; -export default function LogoHome({ scrollToFourElement }) { - const [animate, setAnimate] = useState(false); // 스크롤 애니메이트 상태 관리 +// 최초 렌더링 시에 대표 로고 나타나는 애니메이트 +const initialFadeInAnimation = keyframes` + 0% { + opacity: 0; + } - // 최초 렌더링 시에 대표 로고 나타나는 애니메이트 - const initialFadeInAnimation = keyframes` - 0% { - opacity: 0; - } + 100% { + opacity: 1; + } +`; - 100% { - opacity: 1; - } - `; +// 로고 스크롤 애니메이트 이벤트 +const frameInAnimation = keyframes` + 0% { + opacity: 0; + transform: translateY(1%); + } - // 로고 스크롤 애니메이트 이벤트 - const frameInAnimation = keyframes` - 0% { - opacity: 0; - transform: translateY(1%); - } + 100%{ + opacity: 1; + transform: translateY(0%); + } +`; - 100%{ - opacity: 1; - transform: translateY(0%); - } - `; +const AnimateContainer = styled.div` + &.frame-in { + animation: ${frameInAnimation} 1.3s forwards; + } +`; + +export default function LogoHome({ scrollToFourElement }) { + const [animate, setAnimate] = useState(false); // 스크롤 애니메이트 상태 관리 - const AnimateContainer = styled.div` - &.frame-in { - animation: ${frameInAnimation} 1.3s forwards; - } - `; const handleLogoClick = () => { if (scrollToFourElement) { diff --git a/front-end/src/components/main/Summary.jsx b/front-end/src/components/main/Summary.jsx index 38e848d5..045a8ae1 100644 --- a/front-end/src/components/main/Summary.jsx +++ b/front-end/src/components/main/Summary.jsx @@ -6,51 +6,69 @@ import Plus from '../../images/main/Summary/Plus.png'; import axios from 'axios'; import { useNavigate } from 'react-router-dom'; -export default function Summary() { - const navigate = useNavigate() - const [animate_text, setAnimate_text] = useState(false); // 텍스트 애니메이트 상태 관리 - const [animate_que, setAnimate_que] = useState(false); // 최근 추가된 문제 애니메이트 상태 관리 - const [animate_add, setAnimate_add] = useState(false); // 질문 관련 애니메이트 상태 관리 - const [popularQuestions, setPopularQuestions] = useState([]); // 질문 카드 상태 관리 - const [addProblemSolve, setaddProblemSolve] = useState([]) // 최근 추가된 문제 상태 관리 - - // 스크롤 애니메이트 이벤트 - 텍스트 - const frameInAnimation_text = keyframes` +// 스크롤 애니메이트 이벤트 - 텍스트 +const frameInAnimation_text = keyframes` 0% {opacity: 0; transform: translateY(100%);} 100%{opacity: 1; transform: translateY(0%);} - `; - const AnimateContainer_text = styled.div` +`; + +const AnimateContainer_text = styled.div` &.ease-out { animation: ${frameInAnimation_text} 1s forwards; } - `; +`; - // 스크롤 애니메이트 이벤트 - 인기 질문 - const frameInAnimation_que = keyframes` +// 스크롤 애니메이트 이벤트 - 인기 질문 +const frameInAnimation_que = keyframes` 0% {opacity: 0; transform: translateY(50%);} 100%{opacity: 1; transform: translateY(0%);} - `; - const AnimateContainer_que = styled.div` +`; +const AnimateContainer_que = styled.div` &.ease-out { animation: ${frameInAnimation_que} 1.2s forwards; } - `; +`; - // 스크롤 애니메이트 이벤트 - 최근 추가된 문제 - const frameInAnimation_add = keyframes` +// 스크롤 애니메이트 이벤트 - 최근 추가된 문제 +const frameInAnimation_add = keyframes` 0% {opacity: 0; transform: translateY(50%);} - 100%{opacity: 1; transform: translateY(0%);} - `; - const AnimateContainer_add = styled.div` + 100% {opacity: 1; transform: translateY(0%);} +`; + +const AnimateContainer_add = styled.div` &.ease-out { animation: ${frameInAnimation_add} 1.2s forwards; } - `; +`; + +export default function Summary() { + const navigate = useNavigate() + const [animate_text, setAnimate_text] = useState(false); // 텍스트 애니메이트 상태 관리 + const [animate_que, setAnimate_que] = useState(false); // 최근 추가된 문제 애니메이트 상태 관리 + const [animate_add, setAnimate_add] = useState(false); // 질문 관련 애니메이트 상태 관리 + const [popularQuestions, setPopularQuestions] = useState([]); // 질문 카드 상태 관리 + const [addProblemSolve, setaddProblemSolve] = useState([]) // 최근 추가된 문제 상태 관리 + + + // 이미지 + 제목 + const ImageAndText = ({ image, title, children }) => ( + + {title} +
+

{title}

+
+
{children}
+ + ); // 인기 질문 카드 const QuestionCard = ({ question }) => ( { @@ -63,10 +81,10 @@ export default function Summary() { ); - // 추가된 문제 카드 + // 최근 추가된 문제 카드 const ProblemCard = ({ problem }) => ( { @@ -78,21 +96,6 @@ export default function Summary() { ); - // 이미지 + 제목 - const ImageAndText = ({ image, title, children }) => ( - - {title} -
-

{title}

-
-
{children}
- - ); - useEffect(() => { // 최근 추가된 문제 조회 axios.get('https://codearena.shop/api/problem?orderBy=date&cate=&word=&pgno=1&spp=6&tag=') @@ -130,21 +133,21 @@ export default function Summary() { return (
{/* 인기 질문 */} - -
+ +
{popularQuestions.map((question, index) => ( ))}
{/* 구분선 */} -
-
+
+
{/* 최근 추가된 문제 */} -
+
{addProblemSolve.map((problem, index) => ( ))} diff --git a/front-end/src/components/navBar/navBar.jsx b/front-end/src/components/navBar/navBar.jsx index 6479ffbc..f2bc3f4f 100644 --- a/front-end/src/components/navBar/navBar.jsx +++ b/front-end/src/components/navBar/navBar.jsx @@ -1,5 +1,5 @@ -import { useState, Fragment, useEffect } from 'react' -import { Link,useNavigate, useLocation } from 'react-router-dom' +import { useState, Fragment } from 'react' +import { Link, useNavigate} from 'react-router-dom' import { Disclosure, Menu, Transition } from '@headlessui/react' import { BellIcon } from '@heroicons/react/24/outline' import Logo from '../../images/common/logo.png' @@ -21,7 +21,7 @@ function classNames(...classes) { } export default function NavBar() { - const location = useLocation() + // const location = useLocation() const isLogin = useSelector(state => state.auth.isLogin); const nickName = useSelector(state => state.auth.userNickname); const profileImg = useSelector(state => state.auth.userThumbnail) @@ -39,9 +39,9 @@ export default function NavBar() { const [showDropdown,setShowDropdown ] = useState(false) - useEffect(()=> { - console.log(location); - }, [location]) + // useEffect(()=> { + // console.log(location); + // }, [location]) return ( diff --git a/front-end/src/features/useAuthCheck.js b/front-end/src/features/useAuthCheck.js index e6d0d8d2..85e36ca6 100644 --- a/front-end/src/features/useAuthCheck.js +++ b/front-end/src/features/useAuthCheck.js @@ -23,10 +23,10 @@ export function useAuthCheck() { const authCheck = async () => { try{ let value = await checkAccess(accessToken) - console.log(value); + // console.log(value); if (value.data.status === '302') { let value2 = await auseRefresh() - console.log(value2); + // console.log(value2); if (value2.data.status === '200') { dispatch(setAccessToken(value2.headers.authorization)) await checkAccess(value2.headers.authorization) diff --git a/front-end/src/pages/arena/match/index.jsx b/front-end/src/pages/arena/match/index.jsx index 720c9be9..27152567 100644 --- a/front-end/src/pages/arena/match/index.jsx +++ b/front-end/src/pages/arena/match/index.jsx @@ -2,11 +2,10 @@ import GroupList from "../../../components/arena/match/GroupList"; import CompetitionList from "../../../components/arena/match/CompetitionList"; export default function GameList() { - - return ( -
- - -
- ); + return ( +
+ + +
+ ); } \ No newline at end of file diff --git a/front-end/src/pages/main/index.jsx b/front-end/src/pages/main/index.jsx index 3101461f..04536c35 100644 --- a/front-end/src/pages/main/index.jsx +++ b/front-end/src/pages/main/index.jsx @@ -25,7 +25,7 @@ export default function Main() { }; return ( -
+