From 52112fcc69acfd74e2a9cda04351d24a456b7df2 Mon Sep 17 00:00:00 2001 From: dooohun <74540646+dooohun@users.noreply.github.com> Date: Tue, 19 Nov 2024 23:30:55 +0900 Subject: [PATCH] =?UTF-8?q?[FE]=20-=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4?= =?UTF-8?q?=EC=85=98,=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=97=90=EB=9F=AC?= =?UTF-8?q?=20(#88)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 네비게이션 변경 - 이전에 추가하지 않은 '/' 추가 * fix: 네비게이트 에러 해결 - sid 존재시 navigate 수정 * fix: 네비게이트 에러 해결 - quiz/wait에 pincode 추가 * fix: key 설정 추가 * fix: 새로운 사용자가 들어왔을 때 렌더링 되지 않는 에러 해결 * fix: 이벤트 객체를 client에서 this.server로 수정 * refactor: quiz session 페이지에 router id 추가 - host/session도 마찬가지로 추가 --- packages/client/src/app/routes/Router.tsx | 4 ++-- packages/client/src/pages/nickname/index.tsx | 4 ++-- packages/client/src/pages/quiz-list/index.tsx | 6 ++--- .../src/pages/quiz-master-session/index.tsx | 4 ++-- packages/client/src/pages/quiz-wait/index.tsx | 1 - .../server/src/module/game/game.gateway.ts | 23 +++++++++++-------- 6 files changed, 22 insertions(+), 20 deletions(-) diff --git a/packages/client/src/app/routes/Router.tsx b/packages/client/src/app/routes/Router.tsx index 5a9aebae..b20fba99 100644 --- a/packages/client/src/app/routes/Router.tsx +++ b/packages/client/src/app/routes/Router.tsx @@ -24,13 +24,13 @@ export default function Router() { } /> }> - } /> + } /> } /> } /> } /> } /> - } /> + } /> } /> ); diff --git a/packages/client/src/pages/nickname/index.tsx b/packages/client/src/pages/nickname/index.tsx index 321806b7..30f93557 100644 --- a/packages/client/src/pages/nickname/index.tsx +++ b/packages/client/src/pages/nickname/index.tsx @@ -16,7 +16,7 @@ export default function Nickname() { const sid = getCookie('sid'); if (sid) { socket.emit('participant re-entry', { pinCode: pinCode, nickname: nickname, sid: sid }); - navigate('/quiz/wait'); + navigate(`/quiz/wait/${pinCode}`); return; } socket.emit('participant entry', { pinCode: pinCode, nickname: nickname }); @@ -24,7 +24,7 @@ export default function Nickname() { socket.on('session', (response) => { setCookie('sid', response); }); - navigate(`/quiz/wait${pinCode}`); + navigate(`/quiz/wait/${pinCode}`); }; const handleKeyDown = (e: React.KeyboardEvent) => { diff --git a/packages/client/src/pages/quiz-list/index.tsx b/packages/client/src/pages/quiz-list/index.tsx index e0135f41..63e0e807 100644 --- a/packages/client/src/pages/quiz-list/index.tsx +++ b/packages/client/src/pages/quiz-list/index.tsx @@ -70,12 +70,12 @@ export default function QuizList() { const pinCode = await waitForSocketEvent('pincode', socket); setCookie('pincode', pinCode); - navigate('/quiz/wait'); + navigate(`/quiz/wait/${pinCode}`); }; return (
{quizList.map((quiz, index) => ( -
+
handleSelectQuiz(index)} @@ -102,7 +102,7 @@ export default function QuizList() { className={`flex flex-col gap-3 p-6 mt-4 border ${selectedQuizIndex === index ? 'border-secondary' : 'border-border'} rounded-base bg-white`} > {quiz.quizzes.map((quizData, index) => ( - + {index + 1}번 문제: {quizData.content} ))} diff --git a/packages/client/src/pages/quiz-master-session/index.tsx b/packages/client/src/pages/quiz-master-session/index.tsx index 961d5a83..748e0af3 100644 --- a/packages/client/src/pages/quiz-master-session/index.tsx +++ b/packages/client/src/pages/quiz-master-session/index.tsx @@ -47,7 +47,7 @@ const statisticsCardItems = [ const limitedTime = 20; export default function QuizMasterSession() { - const { quizId } = useParams(); + const { id } = useParams(); const [answerStats, setAnswerStats] = useState([ { answer: '1번', count: 10, color: '#3B82F6' }, @@ -87,7 +87,7 @@ export default function QuizMasterSession() {

실시간 통계

-

{quizId}Q. 퀴즈 제목

+

{id}Q. 퀴즈 제목

제한 시간 {time}

diff --git a/packages/client/src/pages/quiz-wait/index.tsx b/packages/client/src/pages/quiz-wait/index.tsx index 01f7679f..d0b31d81 100644 --- a/packages/client/src/pages/quiz-wait/index.tsx +++ b/packages/client/src/pages/quiz-wait/index.tsx @@ -26,7 +26,6 @@ export default function QuizWait() { const toast = toastController(); useEffect(() => { - socket.emit('nickname', { pinCode }); socket.on('nickname', (response) => { setGuests([...response]); }); diff --git a/packages/server/src/module/game/game.gateway.ts b/packages/server/src/module/game/game.gateway.ts index 072f6cd0..52073c6a 100644 --- a/packages/server/src/module/game/game.gateway.ts +++ b/packages/server/src/module/game/game.gateway.ts @@ -75,8 +75,9 @@ export class GameGateway implements OnGatewayConnection, OnGatewayDisconnect { gameInfo.participantList.push(nickname); this.redisService.set(`gameId=${pinCode}`, JSON.stringify(gameInfo)); - client.emit('nickname', gameInfo.participantList); - client.to(pinCode).emit('nickname', gameInfo.participantList); + // client.emit('nickname', gameInfo.participantList); + // client.to(pinCode).emit('nickname', gameInfo.participantList); + this.server.to(pinCode).emit('nickname', gameInfo.participantList); } @SubscribeMessage('nickname') @@ -85,8 +86,9 @@ export class GameGateway implements OnGatewayConnection, OnGatewayDisconnect { const gameInfo = JSON.parse(await this.redisService.get(`gameId=${pinCode}`)); - client.emit('nickname', gameInfo.participantList); - client.to(pinCode).emit('nickname', gameInfo.participantList); + // client.emit('nickname', gameInfo.participantList); + // client.to(pinCode).emit('nickname', gameInfo.participantList); + this.server.to(pinCode).emit('nickname', gameInfo.participantList); } @SubscribeMessage('show quiz') @@ -104,17 +106,18 @@ export class GameGateway implements OnGatewayConnection, OnGatewayDisconnect { const currentQuizData = quizData[currentOrder]; - client.emit('show quiz', currentQuizData); - client.to(pinCode).emit('show quiz', currentQuizData); + // client.emit('show quiz', currentQuizData); + // client.to(pinCode).emit('show quiz', currentQuizData); + this.server.to(pinCode).emit('show quiz', currentQuizData); - //gameInfo.currentOrder += 1; + // gameInfo.currentOrder += 1; await this.redisService.set(`gameId=${pinCode}`, JSON.stringify(gameInfo)); - // 로딩 2초 지나면, 시간잰다고 알림 // setTimeout(() => { - // client.emit('time check', { is_timestart: true }); - // this.startTimer(client, pinCode, currentQuizData['timeLimit']); + // this.startTimer(pinCode, currentQuizData.timeLimit); // }, 2000); + + // redis currentOrder + 1 } startTimer(client: Socket, pinCode: string, timeLimit: number) {