[FE] - 네비게이션, 렌더링 에러 (#88)

* fix: 네비게이션 변경 - 이전에 추가하지 않은 '/' 추가 * fix: 네비게이트 에러 해결 - sid 존재시 navigate 수정 * fix: 네비게이트 에러 해결 - quiz/wait에 pincode 추가 * fix: key 설정 추가 * fix: 새로운 사용자가 들어왔을 때 렌더링 되지 않는 에러 해결 * fix: 이벤트 객체를 client에서 this.server로 수정 * refactor: quiz session 페이지에 router id 추가 - host/session도 마찬가지로 추가
boostcampwm-2024 · Nov 19, 2024 · 52112fc · 52112fc
1 parent 749b560
commit 52112fc
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 20 deletions.
diff --git a/packages/client/src/app/routes/Router.tsx b/packages/client/src/app/routes/Router.tsx
@@ -24,13 +24,13 @@ export default function Router() {
         <Route path="/questions" element={<QnA />} />
       </Route>
       <Route element={<GuestLayout />}>
-        <Route path="/quiz/session/:id" element={<QuizSession />} />
+        <Route path="/quiz/session/:pinCode/:id" element={<QuizSession />} />
         <Route path="/quiz/wait/:pinCode" element={<QuizWait />} />
         <Route path="/nickname/:pinCode" element={<Nickname />} />
         <Route path="/guest/questions" element={<GuestQnA />} />
       </Route>
       <Route path="/quiz/question" element={<QuizQuestion />} />
-      <Route path="quiz/host/session/:quizId" element={<QuizMasterSession />} />
+      <Route path="quiz/session/host/:pinCode/:id" element={<QuizMasterSession />} />
       <Route path={'*'} element={<NotFound />} />
     </Routes>
   );

diff --git a/packages/client/src/pages/nickname/index.tsx b/packages/client/src/pages/nickname/index.tsx
@@ -16,15 +16,15 @@ 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 });
 
     socket.on('session', (response) => {
       setCookie('sid', response);
     });
-    navigate(`/quiz/wait${pinCode}`);
+    navigate(`/quiz/wait/${pinCode}`);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {

diff --git 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 (
     <div className="flex flex-col gap-10 w-full mt-6 mr-6">
       {quizList.map((quiz, index) => (
-        <div>
+        <div key={quiz.title}>
           <div
             className={`flex justify-between itemds-center min-w-content h-20 items-center bg-white ${selectedQuizIndex === index ? 'border-secondary' : 'border-border'}  border rounded-base p-6 cursor-pointer`}
             onClick={() => 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) => (
-                <span>
+                <span key={quizData.content}>
                   {index + 1}번 문제: {quizData.content}
                 </span>
               ))}

diff --git 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<AnswerStat[]>([
     { answer: '1번', count: 10, color: '#3B82F6' },
@@ -87,7 +87,7 @@ export default function QuizMasterSession() {
         <div className="flex justify-between">
           <div>
             <h1 className="text-xl font-bold mb-2">실시간 통계</h1>
-            <p className="text-2xl font-bold mb-2">{quizId}Q. 퀴즈 제목</p>
+            <p className="text-2xl font-bold mb-2">{id}Q. 퀴즈 제목</p>
           </div>
           <div>
             <p className="font-bold text-gray-500 mb-2">제한 시간 {time}</p>

diff --git 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
@@ -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) {