[BUG] 힌트 순서 이상한거랑 리더 안바꾸는거 수정 완료

src/Layouts/GameLayout.tsx

@@ -13,7 +13,6 @@ export default function GameLayout() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isPlayingBgm, setIsPlayingBgm] = useState(false);
   const bgmRef = useRef<HTMLAudioElement>(null);
-
   const toggleModal = () => {
     setIsModalOpen((prev) => !prev);
   };

src/Pages/Game/Components/RenderByStage.tsx

@@ -10,7 +10,7 @@ import User from '../../../Interfaces/User.interface';
 // leader/2 가 짝수면 soviet, 홀수면 usa, leader/4 가 해당 팀의 리더
 function getLeader(game: Game, stage: number) {
   const { players } = Math.floor(stage / 2) % 2 ? game.usaTeam : game.sovietTeam;
-  return players[Math.floor(stage / 2) % players.length];
+  return players[Math.floor(stage / 4) % players.length];
 }
 
 export default function RenderByStage() {
@@ -81,18 +81,17 @@ export default function RenderByStage() {
         </Waiting>{' '}
       </RenderingArea>
     );
-  if (stage % 4 === 3)
-    return (
-      <RenderingArea>
-        {!myTeamCode.length ? (
-          <CodeGuess />
-        ) : (
-          <Waiting>
-            <p>Waiting...</p>
-          </Waiting>
-        )}
-      </RenderingArea>
-    );
+  return (
+    <RenderingArea>
+      {!myTeamCode.length ? (
+        <CodeGuess />
+      ) : (
+        <Waiting>
+          <p>Waiting...</p>
+        </Waiting>
+      )}
+    </RenderingArea>
+  );
 }
 
 const RenderingArea = styled.div`

src/Pages/Game/Components/RoundResult.tsx

@@ -14,21 +14,14 @@ function RoundResult() {
   const guessSuccess = answerCode.toString() === codeGuess.toString();
   const stealTeamName = stealTeam === 'sovietTeam' ? '소련' : '미국';
   const guessTeamName = stealTeamName === '소련' ? '미국' : '소련';
-  const hints = useSelector((rootState: RootState) => rootState.game[guessTeam].hints);
-  console.log(hints);
   return (
     <Container>
       <Result>
         <h1>이번 라운드의 결과입니다.</h1>
         <h2>
           정답 코드: <AnswerCode>{answerCode.join(' - ')}</AnswerCode>{' '}
         </h2>
-        <HintContainer>
-          힌트:
-          {hints.map((hint: string) => <Hint key={hint}>{hint} </Hint>).join('-')}
-        </HintContainer>
       </Result>
-
       <TeamResultContainer>
         <TeamResult isSuccess={stealSuccess} successColor='green' failureColor='grey'>
           <h2>
@@ -94,19 +87,6 @@ const AnswerCode = styled(Code)`
 
 const SubmitCode = styled(Code)``;
 
-const HintContainer = styled.div`
-  margin-bottom: 2rem;
-`;
-
-const Hint = styled.span`
-  display: inline-block;
-  min-width: 4rem;
-  color: white;
-  padding: 0.5rem;
-  border-radius: 5rem;
-  background-color: #005666;
-`;
-
 const TeamResultContainer = styled.div`
   display: flex;
   gap: 2rem;

src/Pages/Game/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import Hints from './Components/Hints';
 import GameInterface from '../../Interfaces/Game.interface';
@@ -21,6 +22,10 @@ export default function Game() {
   const toggleResult = () => {
     setResultModal((prev) => !prev);
   };
+  const navigate = useNavigate();
+  const myTeam = game.sovietTeam.players.some((player: User) => player.uid === user.uid)
+    ? 'sovietTeam'
+    : 'usaTeam';
   socket.off('SUBMIT_HINT').on('SUBMIT_HINT', (gameInfo) => {
     dispatch(updateDB(gameInfo));
   });
@@ -34,26 +39,30 @@ export default function Game() {
   });
   socket.off('NEW_ROUND').on('NEW_ROUND', (gameInfo) => {
     dispatch(updateDB(gameInfo));
-    if (
-      game.sovietTeam.greenToken === 2 ||
-      game.sovietTeam.redToken === 2 ||
-      game.usaTeam.greenToken === 2 ||
-      game.usaTeam.redToken === 2
-    ) {
-      socket.emit('END_GAME');
-      if (game.sovietTeam.greenToken === 2 || game.usaTeam.redToken === 2) alert('SOVIET WINS!!');
-      else alert('USA WINS!!!');
-    } else {
-      toggleResult();
-    }
+    toggleResult();
   });
+  if (
+    game.sovietTeam.greenToken === 2 ||
+    game.sovietTeam.redToken === 2 ||
+    game.usaTeam.greenToken === 2 ||
+    game.usaTeam.redToken === 2
+  ) {
+    console.log('END GAME');
+    socket.emit('END_GAME');
+    if (game.sovietTeam.greenToken === 2 || game.usaTeam.redToken === 2) alert('SOVIET WINS!!');
+    else alert('USA WINS!!!');
+    navigate(`/`);
+  }
   const doNothing = () => {
     console.log('doing nothing');
   };
   console.log('GAME PAGE USER', user);
   console.log('🎮 GAME PAGE game 🎮', game);
   return (
     <Container>
+      <ShowTeam>
+        <img alt='img' src={myTeam === 'sovietTeam' ? '../../img/soviet.png' : '../../img/usa.png'} />{' '}
+      </ShowTeam>
       <Word />
       <HintTokenArea>
         <RenderByStage />
@@ -87,12 +96,16 @@ export default function Game() {
   -----> 결과
 */
 
+const ShowTeam = styled.div`
+  text-align: left;
+  font-size: 5rem;
+`;
+
 const Container = styled.div`
   color: black;
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: #2e3c7e;
   justify-content: center;
 `;