From fca7c6f3cc5b425cb36011f24d49af5595cf1821 Mon Sep 17 00:00:00 2001
From: 071yoon <yeonggilol@gmail.com>
Date: Mon, 21 Mar 2022 14:14:25 +0900
Subject: [PATCH 1/6] [FIX] game redux updating

---
 src/Pages/Game/Components/Coin.tsx       |  0
 src/Pages/Game/Components/ScoreTable.tsx | 21 ++++-----------------
 src/Pages/Game/index.tsx                 |  8 +++++++-
 src/Pages/Room/index.tsx                 |  8 ++------
 4 files changed, 13 insertions(+), 24 deletions(-)
 create mode 100644 src/Pages/Game/Components/Coin.tsx

diff --git a/src/Pages/Game/Components/Coin.tsx b/src/Pages/Game/Components/Coin.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/Pages/Game/Components/ScoreTable.tsx b/src/Pages/Game/Components/ScoreTable.tsx
index 6d2b928..906e370 100644
--- a/src/Pages/Game/Components/ScoreTable.tsx
+++ b/src/Pages/Game/Components/ScoreTable.tsx
@@ -26,9 +26,9 @@ export default function ScoreTable() {
         </CircleContainer>
         <CircleContainer>
           {sovietTeam.redToken > 0 ? (
-            <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />
-          ) : (
             <img src='../../img/my-coin-pink.gif' alt='pink' style={{ width: '2rem', height: '2rem' }} />
+          ) : (
+            <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />
           )}
           <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />
         </CircleContainer>
@@ -45,9 +45,9 @@ export default function ScoreTable() {
         </CircleContainer>
         <CircleContainer>
           {usaTeam.redToken > 0 ? (
-            <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />
-          ) : (
             <img src='../../img/my-coin-pink.gif' alt='pink' style={{ width: '2rem', height: '2rem' }} />
+          ) : (
+            <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />
           )}
           <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />
         </CircleContainer>
@@ -73,16 +73,3 @@ const ScoreTableArea = styled.table`
 const CircleContainer = styled.td`
   text-align: center;
 `;
-
-const Circle = styled.div<{ filled: boolean; color: string }>`
-  border-radius: 8px;
-  width: 10px;
-  height: 10px;
-  border-style: solid;
-  border-color: ${(props) => props.color};
-  background-color: ${(props) => (props.filled ? props.color : 'white')};
-  display: inline-block;
-  &:first-child {
-    margin-right: 3px;
-  }
-`;
diff --git a/src/Pages/Game/index.tsx b/src/Pages/Game/index.tsx
index 78285db..ad99aa4 100644
--- a/src/Pages/Game/index.tsx
+++ b/src/Pages/Game/index.tsx
@@ -1,6 +1,9 @@
 import { useState } from 'react';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import Hints from './Components/Hints';
+import GameInterface from '../../Interfaces/Game.interface';
+import User from '../../Interfaces/User.interface';
 import RoundResult from './Components/RoundResult';
 import ScoreTable from './Components/ScoreTable';
 import Word from './Components/Word';
@@ -9,11 +12,14 @@ import RenderByStage from './Components/RenderByStage';
 import { RootState } from '../../Redux/store/rootStore';
 
 export default function Game() {
+  const game: GameInterface = useSelector((state: RootState) => state.game);
+  const user: User = useSelector((state: RootState) => state.user);
   const [resultModal, setResultModal] = useState(false);
   const toggleResult = () => {
     setResultModal((prev) => !prev);
   };
-
+  console.log('GAME PAGE USER', user);
+  console.log('🎮 GAME PAGE game 🎮', game);
   return (
     <Container>
       <Word />
diff --git a/src/Pages/Room/index.tsx b/src/Pages/Room/index.tsx
index 64cc6ed..68639bb 100644
--- a/src/Pages/Room/index.tsx
+++ b/src/Pages/Room/index.tsx
@@ -16,7 +16,6 @@ export default function Room() {
   const user: UserInterface = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  console.log('🎮 game 🎮', game);
 
   /*
     ! 방장이 게임을 시작시켰을 때 로직
@@ -40,7 +39,6 @@ export default function Room() {
 
   socket.off('ENTER_ROOM').on('ENTER_ROOM', (gameInfo) => {
     dispatch(updateDB(gameInfo));
-    console.log('Somebody entered');
   });
 
   /*
@@ -50,7 +48,6 @@ export default function Room() {
   */
   socket.off('CHANGE_TEAM').on('CHANGE_TEAM', (gameInfo) => {
     dispatch(updateDB(gameInfo));
-    console.log('somebody changed team');
   });
 
   /*
@@ -60,7 +57,6 @@ export default function Room() {
   */
   socket.off('LEAVE_ROOM').on('LEAVE_ROOM', (gameInfo) => {
     dispatch(updateDB(gameInfo));
-    console.log('somebody left the room');
   });
 
   /*
@@ -73,10 +69,10 @@ export default function Room() {
    */
   socket.off('INIT_DATA').on('INIT_DATA', (gameInfo, userInfo) => {
     dispatch(updateUser(userInfo));
-    console.log();
     dispatch(updateDB(gameInfo));
   });
-  console.log('I entered the room', user);
+  console.log('ROOM PAGE USER', user);
+  console.log('🎮 ROOM PAGE game 🎮', game);
 
   return (
     <Container>

From 15e1c16bee732427c49a5653ae1984bc81a2d5d2 Mon Sep 17 00:00:00 2001
From: Sara-Jo <sr930927@gmail.com>
Date: Mon, 21 Mar 2022 17:08:05 +0900
Subject: [PATCH 2/6] =?UTF-8?q?[FIX]=20Hint=20=EC=A0=9C=EC=B6=9C=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Pages/Game/Components/HintSubmit.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/Pages/Game/Components/HintSubmit.tsx b/src/Pages/Game/Components/HintSubmit.tsx
index 0a847b6..4b1fd74 100644
--- a/src/Pages/Game/Components/HintSubmit.tsx
+++ b/src/Pages/Game/Components/HintSubmit.tsx
@@ -3,14 +3,7 @@ import styled from 'styled-components';
 import Game from '../../../Interfaces/Game.interface';
 import socket from '../../../Utils/socket';
 import { RootState } from '../../../Redux/store/rootStore';
-
-function handleSubmit() {
-  const hintformFirst = (document.getElementById('hintform-first') as HTMLInputElement).value;
-  const hintformSecond = (document.getElementById('hintform-second') as HTMLInputElement).value;
-  const hintformThird = (document.getElementById('hintform-third') as HTMLInputElement).value;
-  const hintList: [string, string, string] = [hintformFirst, hintformSecond, hintformThird];
-  socket.emit('SUBMIT_HINT', hintList);
-}
+import useInput from '../../../Hooks/useInput';
 
 function getWords(currentTeam: string, game: Game) {
   if (currentTeam === 'sovietTeam') return game.sovietTeam.words;
@@ -22,6 +15,14 @@ export default function HintSubmit() {
   const game = useSelector((rootState: RootState) => rootState.game);
   const stage = useSelector((rootState: RootState) => rootState.game.stageNumber);
   const currentTeam = stage % 4 === 0 ? 'sovietTeam' : 'usaTeam';
+  const [firstHint, onChangeFirstHint] = useInput();
+  const [secondHint, onChangeSecondHint] = useInput();
+  const [thirdHint, onChangeThirdHint] = useInput();
+
+  const handleSubmit = () => {
+    const hintList: [string, string, string] = [firstHint, secondHint, thirdHint];
+    socket.emit('SUBMIT_HINT', hintList);
+  };
 
   const wordList = getWords(currentTeam, game);
   return (
@@ -36,6 +37,7 @@ export default function HintSubmit() {
             type='text'
             name='hints'
             id='hintform-first'
+            onChange={onChangeFirstHint}
             placeholder={`${wordList[answer[0] - 1]}의 힌트...`}
           />{' '}
           <br />
@@ -44,6 +46,7 @@ export default function HintSubmit() {
             type='text'
             name='hints'
             id='hintform-second'
+            onChange={onChangeSecondHint}
             placeholder={`${wordList[answer[1] - 1]}의 힌트...`}
           />{' '}
           <br />
@@ -52,6 +55,7 @@ export default function HintSubmit() {
             type='text'
             name='hints'
             id='hintform-third'
+            onChange={onChangeThirdHint}
             placeholder={`${wordList[answer[2] - 1]}의 힌트...`}
           />{' '}
           <br />

From 5f953a28909913421f8e411903f36e5ccd3ce123 Mon Sep 17 00:00:00 2001
From: SeoJunhwan <seojunhwan@kakao.com>
Date: Mon, 21 Mar 2022 22:10:02 +0900
Subject: [PATCH 3/6] =?UTF-8?q?=E2=9C=A8=20socket=20Event=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Interfaces/io.interface.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Interfaces/io.interface.ts b/src/Interfaces/io.interface.ts
index e35d6c7..1df2851 100644
--- a/src/Interfaces/io.interface.ts
+++ b/src/Interfaces/io.interface.ts
@@ -10,6 +10,10 @@ export interface ServerToClientEvents {
   LEAVE_ROOM: (gameInfo: Game) => void;
   GAME_START: (gameInfo: Game) => void;
   INIT_DATA: (gameInfo: Game, userData: User) => void;
+  SUBMIT_HINT: (gameInfo: Game) => void;
+  SUBMIT_CODE: () => void;
+  NEW_ROUND: (gameInfo: Game) => void;
+  SHOW_RESULT: (gameInfo: Game) => void;
 }
 
 // * 이벤트를 보낼 때
@@ -21,6 +25,7 @@ export interface ClientToServerEvents {
     done: (confirmRoomId: string) => void,
   ) => void;
   GAME_START: (done: (gameInfo: Game) => void) => void;
-  SUBMIT_HINT: (hints: [string, string, string]) => void;
-  SUBMIT_CODE: (code: number[]) => void;
+  SUBMIT_HINT: (hints: [string, string, string, string], done: (gameInfo: Game) => void) => void;
+  SUBMIT_CODE: (code: [number, number, number], done: (gameInfo: Game) => void) => void;
+  END_GAME: () => void;
 }

From d9c4112098ce77f743a935db97514b20386603cf Mon Sep 17 00:00:00 2001
From: SeoJunhwan <seojunhwan@kakao.com>
Date: Mon, 21 Mar 2022 22:12:17 +0900
Subject: [PATCH 4/6] =?UTF-8?q?=E2=9C=A8=20game=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20socket=20event=20=EC=88=98=EC=8B=A0=20=ED=95=B8?=
 =?UTF-8?q?=EB=93=A4=EB=9F=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Pages/Game/index.tsx | 40 ++++++++++++++++++++++++++++++++++------
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/Pages/Game/index.tsx b/src/Pages/Game/index.tsx
index ad99aa4..dbe2197 100644
--- a/src/Pages/Game/index.tsx
+++ b/src/Pages/Game/index.tsx
@@ -1,11 +1,13 @@
 import { useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import Hints from './Components/Hints';
 import GameInterface from '../../Interfaces/Game.interface';
 import User from '../../Interfaces/User.interface';
 import RoundResult from './Components/RoundResult';
 import ScoreTable from './Components/ScoreTable';
+import socket from '../../Utils/socket';
+import { updateDB } from '../../Redux/reducer/updateDB';
 import Word from './Components/Word';
 import Overlay from '../../Components/Common/Overlay';
 import RenderByStage from './Components/RenderByStage';
@@ -15,9 +17,39 @@ export default function Game() {
   const game: GameInterface = useSelector((state: RootState) => state.game);
   const user: User = useSelector((state: RootState) => state.user);
   const [resultModal, setResultModal] = useState(false);
+  const dispatch = useDispatch();
   const toggleResult = () => {
     setResultModal((prev) => !prev);
   };
+  socket.off('SUBMIT_HINT').on('SUBMIT_HINT', (gameInfo) => {
+    dispatch(updateDB(gameInfo));
+  });
+  socket.off('SUBMIT_CODE').on('SUBMIT_CODE', (gameInfo) => {
+    dispatch(updateDB(gameInfo));
+  });
+  socket.off('SHOW_RESULT').on('SHOW_RESULT', (gameInfo) => {
+    console.log('need to show modal');
+    dispatch(updateDB(gameInfo));
+    toggleResult();
+  });
+  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();
+    }
+  });
+  const doNothing = () => {
+    console.log('doing nothing');
+  };
   console.log('GAME PAGE USER', user);
   console.log('🎮 GAME PAGE game 🎮', game);
   return (
@@ -31,15 +63,11 @@ export default function Game() {
         <Hints team='Soviet' />
         <Hints team='usa' />
       </HintRecordArea>
-      <button name='Result' onClick={toggleResult} type='button'>
-        result
-      </button>
       {resultModal && (
-        <Overlay onClickOverlay={toggleResult}>
+        <Overlay onClickOverlay={doNothing}>
           <RoundResult />
         </Overlay>
       )}
-      {/* Will turn into Modal */}
     </Container>
   );
 }

From ebdf9e1c98bf1f2e22fa2a262f32a38082920801 Mon Sep 17 00:00:00 2001
From: SeoJunhwan <seojunhwan@kakao.com>
Date: Mon, 21 Mar 2022 22:13:31 +0900
Subject: [PATCH 5/6] =?UTF-8?q?=E2=9C=A8=20codeSubmit,=20hintSubmit=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=8F=99=EC=9E=91=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

해당 액션 실행 시 동작들 구현합니다.
---
 src/Pages/Game/Components/CodeGuess.tsx  | 40 ++++++++++++++----------
 src/Pages/Game/Components/HintSubmit.tsx | 17 +++++++---
 2 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/Pages/Game/Components/CodeGuess.tsx b/src/Pages/Game/Components/CodeGuess.tsx
index f7b2ad8..bc6a9b8 100644
--- a/src/Pages/Game/Components/CodeGuess.tsx
+++ b/src/Pages/Game/Components/CodeGuess.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { RootState } from '../../../Redux/store/rootStore';
 import socket from '../../../Utils/socket';
 
@@ -43,20 +43,26 @@ function handleChange() {
   makeNewOptions(thirdCode, possibleThirdCode, selectedIndex[2]);
 }
 
-function handleSubmit() {
-  const firstSelect = document.getElementById('guessFirstCode') as HTMLSelectElement;
-  const firstCode = Number(firstSelect.options[firstSelect.selectedIndex].value);
-  const secondSelect = document.getElementById('guessSecondCode') as HTMLSelectElement;
-  const secondCode = Number(secondSelect.options[secondSelect.selectedIndex].value);
-  const thirdSelect = document.getElementById('guessThirdCode') as HTMLSelectElement;
-  const thirdCode = Number(thirdSelect.options[thirdSelect.selectedIndex].value);
-  socket.emit('SUBMIT_CODE', [firstCode, secondCode, thirdCode]);
-}
-
 function CodeGuess() {
-  const currentTeam =
-    useSelector((rootState: RootState) => rootState.game.stageNumber) % 4 === 1 ? 'sovietTeam' : 'usaTeam';
-  const hints = useSelector((rootState: RootState) => rootState.game[currentTeam].hints);
+  const { stageNumber } = useSelector((rootState: RootState) => rootState.game);
+  const currentTeam = stageNumber % 4 === 1 ? 'sovietTeam' : 'usaTeam';
+  const { hints } = useSelector((rootState: RootState) => rootState.game[currentTeam]);
+  const { answerCode } = useSelector((rootState: RootState) => rootState.game);
+  const dispatch = useDispatch();
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const firstSelect = document.getElementById('guessFirstCode') as HTMLSelectElement;
+    const firstCode = Number(firstSelect.options[firstSelect.selectedIndex].value);
+    const secondSelect = document.getElementById('guessSecondCode') as HTMLSelectElement;
+    const secondCode = Number(secondSelect.options[secondSelect.selectedIndex].value);
+    const thirdSelect = document.getElementById('guessThirdCode') as HTMLSelectElement;
+    const thirdCode = Number(thirdSelect.options[thirdSelect.selectedIndex].value);
+    socket.emit('SUBMIT_CODE', [firstCode, secondCode, thirdCode], (gameInfo) => {
+      dispatch(gameInfo);
+    });
+  };
+
   return (
     <GuessForm onChange={handleChange} onSubmit={handleSubmit}>
       <div className='formArea'>
@@ -67,7 +73,7 @@ function CodeGuess() {
           </tr>
           <tr>
             <td className='labelArea'>
-              <label htmlFor='guessFirstCode'>{hints[0]}</label>
+              <label htmlFor='guessFirstCode'>{hints[Math.floor(stageNumber / 4)][answerCode[0] - 1]}</label>
             </td>
             <td>
               <select name='guessFirstCode' id='guessFirstCode' required>
@@ -83,7 +89,7 @@ function CodeGuess() {
           </tr>
           <tr>
             <td className='labelArea'>
-              <label htmlFor='guessSecondCode'>{hints[1]}</label>
+              <label htmlFor='guessSecondCode'>{hints[Math.floor(stageNumber / 4)][answerCode[1] - 1]}</label>
             </td>
             <td>
               <select name='guessSecondCode' id='guessSecondCode' required>
@@ -93,7 +99,7 @@ function CodeGuess() {
           </tr>
           <tr>
             <td className='labelArea'>
-              <label htmlFor='guessThirdCode'>{hints[2]}</label>
+              <label htmlFor='guessThirdCode'>{hints[Math.floor(stageNumber / 4)][answerCode[2] - 1]}</label>
             </td>
             <td>
               <select name='guessThirdCode' id='guessThirdCode' required>
diff --git a/src/Pages/Game/Components/HintSubmit.tsx b/src/Pages/Game/Components/HintSubmit.tsx
index 4b1fd74..57dd5f5 100644
--- a/src/Pages/Game/Components/HintSubmit.tsx
+++ b/src/Pages/Game/Components/HintSubmit.tsx
@@ -1,9 +1,10 @@
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import Game from '../../../Interfaces/Game.interface';
 import socket from '../../../Utils/socket';
 import { RootState } from '../../../Redux/store/rootStore';
 import useInput from '../../../Hooks/useInput';
+import { updateDB } from '../../../Redux/reducer/updateDB';
 
 function getWords(currentTeam: string, game: Game) {
   if (currentTeam === 'sovietTeam') return game.sovietTeam.words;
@@ -14,14 +15,22 @@ export default function HintSubmit() {
   const answer = useSelector((rootState: RootState) => rootState.game.answerCode);
   const game = useSelector((rootState: RootState) => rootState.game);
   const stage = useSelector((rootState: RootState) => rootState.game.stageNumber);
+  const dispatch = useDispatch();
   const currentTeam = stage % 4 === 0 ? 'sovietTeam' : 'usaTeam';
   const [firstHint, onChangeFirstHint] = useInput();
   const [secondHint, onChangeSecondHint] = useInput();
   const [thirdHint, onChangeThirdHint] = useInput();
 
-  const handleSubmit = () => {
-    const hintList: [string, string, string] = [firstHint, secondHint, thirdHint];
-    socket.emit('SUBMIT_HINT', hintList);
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    // const hintList: [string, string, string] = [firstHint, secondHint, thirdHint];
+    const hintList: [string, string, string, string] = [' ', ' ', ' ', ' '];
+    hintList[answer[0] - 1] = firstHint;
+    hintList[answer[1] - 1] = secondHint;
+    hintList[answer[2] - 1] = thirdHint;
+    socket.emit('SUBMIT_HINT', hintList, (gameInfo) => {
+      dispatch(updateDB(gameInfo));
+    });
   };
 
   const wordList = getWords(currentTeam, game);

From 4d74114a13f528cafb379a890d8b07cbfa4bb796 Mon Sep 17 00:00:00 2001
From: SeoJunhwan <seojunhwan@kakao.com>
Date: Mon, 21 Mar 2022 22:14:17 +0900
Subject: [PATCH 6/6] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Pages/Game/Components/Hints.tsx         | 24 +++++++++-------
 src/Pages/Game/Components/RenderByStage.tsx | 31 ++++++++-------------
 src/Pages/Game/Components/RoundResult.tsx   |  2 +-
 src/Pages/Game/Components/Word.tsx          |  2 --
 src/Pages/Room/Components/SetGameLength.tsx |  1 -
 5 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/src/Pages/Game/Components/Hints.tsx b/src/Pages/Game/Components/Hints.tsx
index 00724b0..a35b47c 100644
--- a/src/Pages/Game/Components/Hints.tsx
+++ b/src/Pages/Game/Components/Hints.tsx
@@ -4,16 +4,23 @@ import { RootState } from '../../../Redux/store/rootStore';
 
 function Hints({ team }: { team: string }) {
   const recordFrom = team === 'Soviet' ? 'sovietTeam' : 'usaTeam';
-  const hintRecord = useSelector((rootState: RootState) => rootState.game[recordFrom].hints);
+  let hintRecord = useSelector((rootState: RootState) => rootState.game[recordFrom].hints);
+  const stageNumber = useSelector((rootState: RootState) => rootState.game.stageNumber);
+
+  if (
+    (stageNumber % 4 === 1 && recordFrom === 'sovietTeam') ||
+    (stageNumber % 4 === 3 && recordFrom === 'usaTeam')
+  )
+    hintRecord = hintRecord.slice(0, -1);
   return (
     <Container>
       <Title>{team}</Title>
       <HintArea>
         <ItemList>
-          <Item className='num'>1</Item>
-          <Item className='num'>2</Item>
-          <Item className='num'>3</Item>
-          <Item className='num'>4</Item>
+          <Item>1</Item>
+          <Item>2</Item>
+          <Item>3</Item>
+          <Item>4</Item>
         </ItemList>
         {hintRecord.map((item: string[]) => (
           <ItemList>
@@ -31,11 +38,6 @@ function Hints({ team }: { team: string }) {
 const Container = styled.div`
   width: 35rem;
   margin: 2rem;
-
-  .num {
-    font-size: 1.5rem;
-    color: #2e3c7e;
-  }
 `;
 
 const Title = styled.p`
@@ -56,6 +58,8 @@ const Item = styled.div`
   margin-top: 5px;
   font-weight: bold;
   text-align: center;
+  font-size: 1.5rem;
+  color: #2e3c7e;
 `;
 
 const HintArea = styled.div`
diff --git a/src/Pages/Game/Components/RenderByStage.tsx b/src/Pages/Game/Components/RenderByStage.tsx
index 4388303..d8104fa 100644
--- a/src/Pages/Game/Components/RenderByStage.tsx
+++ b/src/Pages/Game/Components/RenderByStage.tsx
@@ -3,15 +3,14 @@ import styled from 'styled-components';
 import Game from '../../../Interfaces/Game.interface';
 import { RootState } from '../../../Redux/store/rootStore';
 import CodeGuess from './CodeGuess';
-import Timer from './Timer';
 import HintSubmit from './HintSubmit';
 import User from '../../../Interfaces/User.interface';
 
 // leader를 stage 로 구할 수 있는 함수.
 // leader/2 가 짝수면 soviet, 홀수면 usa, leader/4 가 해당 팀의 리더
 function getLeader(game: Game, stage: number) {
-  const { players } = stage % 2 ? game.usaTeam : game.sovietTeam;
-  return players[(stage / 2) % players.length];
+  const { players } = Math.floor(stage / 2) % 2 ? game.usaTeam : game.sovietTeam;
+  return players[Math.floor(stage / 2) % players.length];
 }
 
 export default function RenderByStage() {
@@ -19,65 +18,59 @@ export default function RenderByStage() {
   const stage = useSelector((rootState: RootState) => rootState.game.stageNumber);
   const leader = getLeader(game, stage);
   const me: User = useSelector((rootState: RootState) => rootState.user);
-
-  if (stage === 0 && leader.uid === me.uid)
+  if (stage % 4 === 0 && leader.uid === me.uid)
     return (
       <RenderingArea>
         <HintSubmit />
-        <Timer />
       </RenderingArea>
     );
-  if (stage === 0)
+  if (stage % 4 === 0)
     return (
       <RenderingArea>
         <Waiting>
           <p>Waiting...</p>
         </Waiting>{' '}
-        <Timer />
       </RenderingArea>
     );
-  if (stage === 1 && leader.uid === me.uid)
+  if (stage % 4 === 1 && leader.uid === me.uid)
     return (
       <RenderingArea>
         <Waiting>
           <p>Waiting...</p>
         </Waiting>{' '}
-        <Timer />
       </RenderingArea>
     );
-  if (stage === 1)
+  if (stage % 4 === 1)
     return (
       <RenderingArea>
-        <CodeGuess /> <Timer />
+        <CodeGuess />
       </RenderingArea>
     );
-  if (stage === 2 && leader.uid === me.uid)
+  if (stage % 4 === 2 && leader.uid === me.uid)
     return (
       <RenderingArea>
-        <HintSubmit /> <Timer />
+        <HintSubmit />
       </RenderingArea>
     );
-  if (stage === 2)
+  if (stage % 4 === 2)
     return (
       <RenderingArea>
         <Waiting>
           <p>Waiting...</p>
         </Waiting>{' '}
-        <Timer />
       </RenderingArea>
     );
-  if (stage === 3 && leader.uid === me.uid)
+  if (stage % 4 === 3 && leader.uid === me.uid)
     return (
       <RenderingArea>
         <Waiting>
           <p>Waiting...</p>
         </Waiting>{' '}
-        <Timer />
       </RenderingArea>
     );
   return (
     <RenderingArea>
-      <CodeGuess /> <Timer />
+      <CodeGuess />
     </RenderingArea>
   );
 }
diff --git a/src/Pages/Game/Components/RoundResult.tsx b/src/Pages/Game/Components/RoundResult.tsx
index 99c36ea..6247335 100644
--- a/src/Pages/Game/Components/RoundResult.tsx
+++ b/src/Pages/Game/Components/RoundResult.tsx
@@ -25,7 +25,7 @@ function RoundResult() {
         <HintContainer>
           힌트:
           {hints.map((hint: string) => (
-            <Hint key={hint}>{hint}</Hint>
+            <Hint key={hint}>{hint} </Hint>
           ))}
         </HintContainer>
       </Result>
diff --git a/src/Pages/Game/Components/Word.tsx b/src/Pages/Game/Components/Word.tsx
index c8963c3..70ecbba 100644
--- a/src/Pages/Game/Components/Word.tsx
+++ b/src/Pages/Game/Components/Word.tsx
@@ -8,11 +8,9 @@ import TV from '../../../Assets/img/tv-fullsz.gif';
 function Word() {
   const user: User = useSelector((rootState: RootState) => rootState.user);
   const game: Game = useSelector((rootState: RootState) => rootState.game);
-  console.log(game.sovietTeam.words);
   const wordList = game.sovietTeam.players.find((player) => player.uid === user.uid)
     ? game.sovietTeam.words
     : game.usaTeam.words;
-  console.log(wordList);
   return (
     <Container>
       {wordList.map((word: string, index: number) => (
diff --git a/src/Pages/Room/Components/SetGameLength.tsx b/src/Pages/Room/Components/SetGameLength.tsx
index dc89349..b73bb4d 100644
--- a/src/Pages/Room/Components/SetGameLength.tsx
+++ b/src/Pages/Room/Components/SetGameLength.tsx
@@ -9,7 +9,6 @@ export default function SetGameLength() {
 
   const onChangeTime = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const gameTime = Number(event.target.value);
-    console.log(gameTime);
     socket.emit('SET_TIMER', gameTime);
   };
   return (