From 30495a6112772798bb3e94a623649f4afbc39a70 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Fri, 6 Sep 2024 11:07:00 +0900
Subject: [PATCH 01/21] =?UTF-8?q?refactor:=20SelectButton=20=EC=BF=BC?=
 =?UTF-8?q?=EB=A6=AC=20=ED=98=B8=EC=B6=9C=20=EC=A0=9C=EA=B1=B0=ED=95=98?=
 =?UTF-8?q?=EA=B3=A0=20props=EB=A1=9C=20=EB=B0=9B=EA=B8=B0=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SelectContainer/SelectContainer.tsx        |  1 +
 .../common/SelectButton/SelectButton.tsx       | 18 +++++++++---------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/SelectContainer/SelectContainer.tsx b/frontend/src/components/SelectContainer/SelectContainer.tsx
index 45d87f2ea..35771d583 100644
--- a/frontend/src/components/SelectContainer/SelectContainer.tsx
+++ b/frontend/src/components/SelectContainer/SelectContainer.tsx
@@ -36,6 +36,7 @@ const SelectContainer = () => {
         />
       </section>
       <SelectButton
+        contentId={balanceContent.contentId}
         selectedId={selectedOption.id}
         completeSelection={completeSelection}
         showModal={show}
diff --git a/frontend/src/components/common/SelectButton/SelectButton.tsx b/frontend/src/components/common/SelectButton/SelectButton.tsx
index d1e560a47..fee782ae5 100644
--- a/frontend/src/components/common/SelectButton/SelectButton.tsx
+++ b/frontend/src/components/common/SelectButton/SelectButton.tsx
@@ -1,27 +1,27 @@
-import { useParams } from 'react-router-dom';
-
 import useCompleteSelectionMutation from './SelectButton.hook';
 import Button from '../Button/Button';
 import { bottomButtonLayout } from '../Button/Button.styled';
 
-import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
-
 interface SelectButtonProps {
+  contentId: number;
   selectedId: number;
   completeSelection: () => void;
   showModal: () => void;
 }
 
-const SelectButton = ({ selectedId, completeSelection, showModal }: SelectButtonProps) => {
-  const { roomId } = useParams();
-  const { balanceContent } = useBalanceContentQuery(Number(roomId));
+const SelectButton = ({
+  contentId,
+  selectedId,
+  completeSelection,
+  showModal,
+}: SelectButtonProps) => {
   const {
     data,
     isPending,
     mutate: completeSelectionMutate,
   } = useCompleteSelectionMutation({
     selectedId,
-    contentId: balanceContent?.contentId,
+    contentId,
     completeSelection,
     showModal,
   });
@@ -29,7 +29,7 @@ const SelectButton = ({ selectedId, completeSelection, showModal }: SelectButton
   return (
     <div css={bottomButtonLayout}>
       <Button
-        bottom={true}
+        bottom
         disabled={data || !selectedId || isPending}
         text={data || isPending ? '선택 완료' : '선택'}
         onClick={completeSelectionMutate}

From b8723e82e20b1d567b974f442ac031e208b4cee0 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Fri, 6 Sep 2024 11:16:17 +0900
Subject: [PATCH 02/21] =?UTF-8?q?refactor:=20SelectContainer=20hooks=20?=
 =?UTF-8?q?=EB=94=94=EB=A0=89=ED=86=A0=EB=A6=AC=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SelectContainer/SelectContainer.hook.ts   | 73 -------------------
 .../SelectContainer/SelectContainer.tsx       |  5 +-
 .../hooks/useRoundIsFinished.ts               | 30 ++++++++
 .../hooks/useRoundIsFinishedQuery.ts          | 34 +++++++++
 .../SelectContainer/hooks/useSelectOption.ts  | 20 +++++
 5 files changed, 87 insertions(+), 75 deletions(-)
 delete mode 100644 frontend/src/components/SelectContainer/SelectContainer.hook.ts
 create mode 100644 frontend/src/components/SelectContainer/hooks/useRoundIsFinished.ts
 create mode 100644 frontend/src/components/SelectContainer/hooks/useRoundIsFinishedQuery.ts
 create mode 100644 frontend/src/components/SelectContainer/hooks/useSelectOption.ts

diff --git a/frontend/src/components/SelectContainer/SelectContainer.hook.ts b/frontend/src/components/SelectContainer/SelectContainer.hook.ts
deleted file mode 100644
index 34416b9c6..000000000
--- a/frontend/src/components/SelectContainer/SelectContainer.hook.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-
-import { fetchRoundVoteIsFinished } from '@/apis/balanceContent';
-import { QUERY_KEYS } from '@/constants/queryKeys';
-import { ROUTES } from '@/constants/routes';
-import { POLLING_DELAY } from '@/constants/time';
-
-interface UseRoundIsFinishedQueryProps {
-  contentId?: number;
-  enabled: boolean;
-}
-
-export const useRoundIsFinishedQuery = ({ contentId, enabled }: UseRoundIsFinishedQueryProps) => {
-  const { roomId } = useParams();
-
-  const roundIsFinishedQuery = useQuery({
-    queryKey: [QUERY_KEYS.roundIsFinished, Number(roomId), contentId],
-    queryFn: async () => {
-      if (typeof contentId === 'undefined') {
-        throw new Error('contentId 가 존재하지 않습니다.');
-      }
-
-      return await fetchRoundVoteIsFinished({ roomId: Number(roomId), contentId });
-    },
-    enabled,
-    refetchInterval: POLLING_DELAY,
-    refetchIntervalInBackground: true,
-    gcTime: 0,
-  });
-
-  return { ...roundIsFinishedQuery, isFinished: roundIsFinishedQuery.data?.isFinished };
-};
-
-interface UseRoundIsFinishedProps {
-  contentId?: number;
-  isFetching: boolean;
-}
-
-export const useRoundIsFinished = ({ contentId, isFetching }: UseRoundIsFinishedProps) => {
-  const navigate = useNavigate();
-  const { roomId } = useParams();
-  const { isFinished } = useRoundIsFinishedQuery({
-    contentId,
-    enabled: !!contentId && !isFetching,
-  });
-
-  useEffect(() => {
-    if (isFinished && !isFetching) {
-      navigate(ROUTES.roundResult(Number(roomId)), { replace: true });
-    }
-  }, [isFinished, navigate, roomId, isFetching]);
-
-  return { isFinished };
-};
-
-export const useSelectOption = () => {
-  const [selectedOption, setSelectedOption] = useState({
-    id: 0,
-    isCompleted: false,
-  });
-
-  const handleClickOption = (selectedId: number) => {
-    setSelectedOption((prev) => ({ ...prev, id: selectedId }));
-  };
-
-  const completeSelection = () => {
-    setSelectedOption((prev) => ({ ...prev, isCompleted: true }));
-  };
-
-  return { selectedOption, handleClickOption, completeSelection };
-};
diff --git a/frontend/src/components/SelectContainer/SelectContainer.tsx b/frontend/src/components/SelectContainer/SelectContainer.tsx
index 35771d583..f3a77cadd 100644
--- a/frontend/src/components/SelectContainer/SelectContainer.tsx
+++ b/frontend/src/components/SelectContainer/SelectContainer.tsx
@@ -1,6 +1,7 @@
 import { useParams } from 'react-router-dom';
 
-import { useRoundIsFinished, useSelectOption } from './SelectContainer.hook';
+import useRoundIsFinished from './hooks/useRoundIsFinished';
+import useSelectOption from './hooks/useSelectOption';
 import { selectContainerLayout, selectSection } from './SelectContainer.styled';
 import AlertModal from '../common/AlertModal/AlertModal';
 import SelectButton from '../common/SelectButton/SelectButton';
@@ -16,7 +17,7 @@ const SelectContainer = () => {
   const { isOpen, show, close } = useModal();
 
   useRoundIsFinished({
-    contentId: balanceContent?.contentId,
+    contentId: balanceContent.contentId,
     isFetching,
   });
 
diff --git a/frontend/src/components/SelectContainer/hooks/useRoundIsFinished.ts b/frontend/src/components/SelectContainer/hooks/useRoundIsFinished.ts
new file mode 100644
index 000000000..99017b763
--- /dev/null
+++ b/frontend/src/components/SelectContainer/hooks/useRoundIsFinished.ts
@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import useRoundIsFinishedQuery from './useRoundIsFinishedQuery';
+
+import { ROUTES } from '@/constants/routes';
+
+interface UseRoundIsFinishedProps {
+  isFetching: boolean;
+  contentId?: number;
+}
+
+const useRoundIsFinished = ({ contentId, isFetching }: UseRoundIsFinishedProps) => {
+  const navigate = useNavigate();
+  const { roomId } = useParams();
+  const { isFinished } = useRoundIsFinishedQuery({
+    contentId,
+    enabled: !!contentId && !isFetching,
+  });
+
+  useEffect(() => {
+    if (isFinished && !isFetching) {
+      navigate(ROUTES.roundResult(Number(roomId)), { replace: true });
+    }
+  }, [isFinished, navigate, roomId, isFetching]);
+
+  return { isFinished };
+};
+
+export default useRoundIsFinished;
diff --git a/frontend/src/components/SelectContainer/hooks/useRoundIsFinishedQuery.ts b/frontend/src/components/SelectContainer/hooks/useRoundIsFinishedQuery.ts
new file mode 100644
index 000000000..154911a83
--- /dev/null
+++ b/frontend/src/components/SelectContainer/hooks/useRoundIsFinishedQuery.ts
@@ -0,0 +1,34 @@
+import { useQuery } from '@tanstack/react-query';
+import { useParams } from 'react-router-dom';
+
+import { fetchRoundVoteIsFinished } from '@/apis/balanceContent';
+import { QUERY_KEYS } from '@/constants/queryKeys';
+import { POLLING_DELAY } from '@/constants/time';
+
+interface UseRoundIsFinishedQueryProps {
+  enabled: boolean;
+  contentId?: number;
+}
+
+const useRoundIsFinishedQuery = ({ contentId, enabled }: UseRoundIsFinishedQueryProps) => {
+  const { roomId } = useParams();
+
+  const roundIsFinishedQuery = useQuery({
+    queryKey: [QUERY_KEYS.roundIsFinished, Number(roomId), contentId],
+    queryFn: async () => {
+      if (typeof contentId === 'undefined') {
+        throw new Error('contentId 가 존재하지 않습니다.');
+      }
+
+      return await fetchRoundVoteIsFinished({ roomId: Number(roomId), contentId });
+    },
+    enabled,
+    refetchInterval: POLLING_DELAY,
+    refetchIntervalInBackground: true,
+    gcTime: 0,
+  });
+
+  return { ...roundIsFinishedQuery, isFinished: roundIsFinishedQuery.data?.isFinished };
+};
+
+export default useRoundIsFinishedQuery;
diff --git a/frontend/src/components/SelectContainer/hooks/useSelectOption.ts b/frontend/src/components/SelectContainer/hooks/useSelectOption.ts
new file mode 100644
index 000000000..9c0301433
--- /dev/null
+++ b/frontend/src/components/SelectContainer/hooks/useSelectOption.ts
@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+const useSelectOption = () => {
+  const [selectedOption, setSelectedOption] = useState({
+    id: 0,
+    isCompleted: false,
+  });
+
+  const handleClickOption = (selectedId: number) => {
+    setSelectedOption((prev) => ({ ...prev, id: selectedId }));
+  };
+
+  const completeSelection = () => {
+    setSelectedOption((prev) => ({ ...prev, isCompleted: true }));
+  };
+
+  return { selectedOption, handleClickOption, completeSelection };
+};
+
+export default useSelectOption;

From 7ff386646b13a16421150b8e0855535e9ca4b023 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Fri, 6 Sep 2024 11:43:18 +0900
Subject: [PATCH 03/21] =?UTF-8?q?refactor:=20=EB=9D=BC=EC=9A=B4=EB=93=9C?=
 =?UTF-8?q?=20=ED=83=80=EC=9D=B4=EB=A8=B8=EA=B0=80=20=EB=B0=94=EB=80=94=20?=
 =?UTF-8?q?=EB=95=8C=EB=A7=88=EB=8B=A4=20=EC=8B=A4=ED=96=89=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EA=B3=A0,=20=ED=83=80=EC=9D=B4=EB=A8=B8?=
 =?UTF-8?q?=EA=B0=80=20=EB=81=9D=EB=82=A0=20=EB=95=8C=EB=A7=8C=20clearTime?=
 =?UTF-8?q?out=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Timer/Timer.hook.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Timer/Timer.hook.ts b/frontend/src/components/Timer/Timer.hook.ts
index b35a09007..812a1e453 100644
--- a/frontend/src/components/Timer/Timer.hook.ts
+++ b/frontend/src/components/Timer/Timer.hook.ts
@@ -15,15 +15,17 @@ const useRoundTimer = (roomId: number) => {
 
   const [leftRoundTime, setLeftRoundTime] = useState(convertMsecToSecond(timeLimit));
   const [barWidthPercent, setBarWidthPercent] = useState(INITIAL_WIDTH);
+
+  const isVoteTimeout = leftRoundTime <= 0;
   const isAlmostFinished = leftRoundTime <= ALMOST_FINISH_SECOND;
 
   const timeout = useRef<NodeJS.Timeout>();
 
   useEffect(() => {
-    if (leftRoundTime <= 0) {
+    if (isVoteTimeout) {
       clearInterval(timeout.current);
     }
-  }, [leftRoundTime]);
+  }, [isVoteTimeout]);
 
   useEffect(() => {
     const DECREASE_RATE = INITIAL_WIDTH / convertMsecToSecond(timeLimit);
@@ -37,7 +39,7 @@ const useRoundTimer = (roomId: number) => {
     return () => {
       clearInterval(timeout.current);
     };
-  }, [balanceContent, timeLimit]);
+  }, [timeLimit]);
 
   return { leftRoundTime, barWidthPercent, isAlmostFinished };
 };

From 1b9d1bf7e8f2091f37582104ba3ee0b0f238926a Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Sat, 14 Sep 2024 21:10:59 +0900
Subject: [PATCH 04/21] =?UTF-8?q?refactor:=20Timer=20hooks=20=EB=94=94?=
 =?UTF-8?q?=EB=A0=89=ED=86=A0=EB=A6=AC=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20#26?=
 =?UTF-8?q?1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Timer/Timer.tsx                         | 2 +-
 .../components/Timer/{Timer.hook.ts => hooks/useRoundTimer.ts}  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename frontend/src/components/Timer/{Timer.hook.ts => hooks/useRoundTimer.ts} (96%)

diff --git a/frontend/src/components/Timer/Timer.tsx b/frontend/src/components/Timer/Timer.tsx
index bc101f7f0..cd5a47cac 100644
--- a/frontend/src/components/Timer/Timer.tsx
+++ b/frontend/src/components/Timer/Timer.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'react-router-dom';
 
-import useRoundTimer from './Timer.hook';
+import useRoundTimer from './hooks/useRoundTimer';
 import {
   timerIcon,
   timerIconShake,
diff --git a/frontend/src/components/Timer/Timer.hook.ts b/frontend/src/components/Timer/hooks/useRoundTimer.ts
similarity index 96%
rename from frontend/src/components/Timer/Timer.hook.ts
rename to frontend/src/components/Timer/hooks/useRoundTimer.ts
index 83449f6ff..76423beaa 100644
--- a/frontend/src/components/Timer/Timer.hook.ts
+++ b/frontend/src/components/Timer/hooks/useRoundTimer.ts
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { convertMsecToSecond } from './Timer.util';
+import { convertMsecToSecond } from '../Timer.util';
 
 import { POLLING_DELAY } from '@/constants/config';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';

From f8fa7987bd73ee00e11202a22267cb378b3de933 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Sun, 15 Sep 2024 00:08:46 +0900
Subject: [PATCH 05/21] =?UTF-8?q?refactor:=20=ED=83=80=EC=9E=84=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=EB=90=98=EB=8F=84=20=EC=84=A0=ED=83=9D=20API=EB=A5=BC?=
 =?UTF-8?q?=20=ED=98=B8=EC=B6=9C=ED=95=98=EB=8F=84=EB=A1=9D=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SelectContainer/SelectContainer.tsx       |  6 +++++
 frontend/src/components/Timer/Timer.tsx       | 15 ++++++++++--
 .../components/Timer/hooks/useRoundTimer.ts   | 23 ++++++++++++++++++-
 frontend/src/pages/GamePage/GamePage.tsx      |  2 --
 4 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/SelectContainer/SelectContainer.tsx b/frontend/src/components/SelectContainer/SelectContainer.tsx
index f3a77cadd..b9cc9f63c 100644
--- a/frontend/src/components/SelectContainer/SelectContainer.tsx
+++ b/frontend/src/components/SelectContainer/SelectContainer.tsx
@@ -5,6 +5,7 @@ import useSelectOption from './hooks/useSelectOption';
 import { selectContainerLayout, selectSection } from './SelectContainer.styled';
 import AlertModal from '../common/AlertModal/AlertModal';
 import SelectButton from '../common/SelectButton/SelectButton';
+import Timer from '../Timer/Timer';
 
 import SelectOption from '@/components/SelectOption/SelectOption';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
@@ -23,6 +24,11 @@ const SelectContainer = () => {
 
   return (
     <div css={selectContainerLayout}>
+      <Timer
+        selectedId={selectedOption.id}
+        completeSelection={completeSelection}
+        showModal={show}
+      />
       <section css={selectSection}>
         <SelectOption
           option={balanceContent.firstOption}
diff --git a/frontend/src/components/Timer/Timer.tsx b/frontend/src/components/Timer/Timer.tsx
index cd5a47cac..1a9228041 100644
--- a/frontend/src/components/Timer/Timer.tsx
+++ b/frontend/src/components/Timer/Timer.tsx
@@ -13,9 +13,20 @@ import { formatLeftRoundTime } from './Timer.util';
 
 import DdangkongTimer from '@/assets/images/ddangkongTimer.png';
 
-const Timer = () => {
+interface TimerProps {
+  selectedId: number;
+  completeSelection: () => void;
+  showModal: () => void;
+}
+
+const Timer = ({ selectedId, completeSelection, showModal }: TimerProps) => {
   const { roomId } = useParams();
-  const { barWidthPercent, leftRoundTime, isAlmostFinished } = useRoundTimer(Number(roomId));
+  const { barWidthPercent, leftRoundTime, isAlmostFinished } = useRoundTimer({
+    roomId: Number(roomId),
+    selectedId,
+    completeSelection,
+    showModal,
+  });
 
   return (
     <section css={timerLayout}>
diff --git a/frontend/src/components/Timer/hooks/useRoundTimer.ts b/frontend/src/components/Timer/hooks/useRoundTimer.ts
index 76423beaa..b1b53a2f2 100644
--- a/frontend/src/components/Timer/hooks/useRoundTimer.ts
+++ b/frontend/src/components/Timer/hooks/useRoundTimer.ts
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 
 import { convertMsecToSecond } from '../Timer.util';
 
+import useCompleteSelectionMutation from '@/components/common/SelectButton/SelectButton.hook';
 import { POLLING_DELAY } from '@/constants/config';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
@@ -9,7 +10,19 @@ const INITIAL_WIDTH = 100;
 const DEFAULT_TIME_LIMIT_MSEC = 10000;
 const ALMOST_FINISH_SECOND = 5;
 
-const useRoundTimer = (roomId: number) => {
+interface UseRoundTimerProps {
+  roomId: number;
+  selectedId: number;
+  completeSelection: () => void;
+  showModal: () => void;
+}
+
+const useRoundTimer = ({
+  roomId,
+  selectedId,
+  completeSelection,
+  showModal,
+}: UseRoundTimerProps) => {
   const { balanceContent } = useBalanceContentQuery(roomId);
   const timeLimit = balanceContent.timeLimit || DEFAULT_TIME_LIMIT_MSEC;
 
@@ -21,8 +34,16 @@ const useRoundTimer = (roomId: number) => {
 
   const timeout = useRef<NodeJS.Timeout>();
 
+  const { mutate } = useCompleteSelectionMutation({
+    selectedId,
+    contentId: balanceContent.contentId,
+    completeSelection,
+    showModal,
+  });
+
   useEffect(() => {
     if (isVoteTimeout) {
+      mutate();
       clearInterval(timeout.current);
     }
   }, [isVoteTimeout]);
diff --git a/frontend/src/pages/GamePage/GamePage.tsx b/frontend/src/pages/GamePage/GamePage.tsx
index 57196506a..eb27070df 100644
--- a/frontend/src/pages/GamePage/GamePage.tsx
+++ b/frontend/src/pages/GamePage/GamePage.tsx
@@ -3,7 +3,6 @@ import GameSkeleton from '@/components/common/Skeleton/GameSkeleton/GameSkeleton
 import Content from '@/components/layout/Content/Content';
 import { RoundHeader } from '@/components/layout/Header/Header';
 import SelectContainer from '@/components/SelectContainer/SelectContainer';
-import Timer from '@/components/Timer/Timer';
 import TopicContainer from '@/components/TopicContainer/TopicContainer';
 
 const GamePage = () => {
@@ -12,7 +11,6 @@ const GamePage = () => {
       <RoundHeader />
       <Content>
         <TopicContainer />
-        <Timer />
         <SelectContainer />
       </Content>
     </AsyncErrorBoundary>

From e8735a3b9fb5a31539eab03905dca6929471bce7 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Sun, 15 Sep 2024 00:12:51 +0900
Subject: [PATCH 06/21] =?UTF-8?q?test:=20=EA=B2=8C=EC=9E=84=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20UI=20=ED=85=8C=EC=8A=A4=ED=8A=B8=EB=A5=BC=20?=
 =?UTF-8?q?=EC=9C=84=ED=95=B4=20storybook=20=EC=9E=91=EC=84=B1=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.storybook/preview.tsx                 |  4 +++-
 frontend/src/pages/GamePage/GamePage.stories.ts | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/GamePage/GamePage.stories.ts

diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
index e2cc0f747..61f9e69fc 100644
--- a/frontend/.storybook/preview.tsx
+++ b/frontend/.storybook/preview.tsx
@@ -38,7 +38,9 @@ const preview: Preview = {
           <ThemeProvider theme={Theme}>
             <MemoryRouter initialEntries={['/']}>
               <Global styles={GlobalStyle} />
-              <Story />
+              <ToastProvider>
+                <Story />
+              </ToastProvider>
             </MemoryRouter>
           </ThemeProvider>
         </RecoilRoot>
diff --git a/frontend/src/pages/GamePage/GamePage.stories.ts b/frontend/src/pages/GamePage/GamePage.stories.ts
new file mode 100644
index 000000000..4351651d5
--- /dev/null
+++ b/frontend/src/pages/GamePage/GamePage.stories.ts
@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import GamePage from './GamePage';
+
+const meta = {
+  title: 'page/GamePage',
+  component: GamePage,
+} satisfies Meta<typeof GamePage>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const 게임_화면: Story = {};

From aa4419b82cc8c7e9b871289fc280939c4911f73e Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Sun, 15 Sep 2024 00:13:22 +0900
Subject: [PATCH 07/21] =?UTF-8?q?design:=20timer=20=EA=B5=AC=EC=A1=B0=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SelectContainer/SelectContainer.styled.ts   | 7 ++++---
 frontend/src/components/Timer/Timer.styled.ts              | 1 -
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/SelectContainer/SelectContainer.styled.ts b/frontend/src/components/SelectContainer/SelectContainer.styled.ts
index 8abad750b..d94c725f0 100644
--- a/frontend/src/components/SelectContainer/SelectContainer.styled.ts
+++ b/frontend/src/components/SelectContainer/SelectContainer.styled.ts
@@ -2,11 +2,12 @@ import { css } from '@emotion/react';
 
 export const selectContainerLayout = css`
   display: flex;
-  flex-basis: 45%;
+  flex-basis: 40%;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  gap: 5rem;
+  gap: 5.6rem;
+  width: 100%;
 `;
 
 export const selectSection = css`
diff --git a/frontend/src/components/Timer/Timer.styled.ts b/frontend/src/components/Timer/Timer.styled.ts
index 5e8dad7cb..8e7fa1b29 100644
--- a/frontend/src/components/Timer/Timer.styled.ts
+++ b/frontend/src/components/Timer/Timer.styled.ts
@@ -32,7 +32,6 @@ const shake = keyframes`
 export const timerLayout = css`
   display: flex;
   position: relative;
-  flex-basis: 5%;
   align-items: center;
   width: 100%;
   height: 3.2rem;

From 0267606484c1916e8abe30deacaf22fdea360f5c Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Sun, 15 Sep 2024 00:21:59 +0900
Subject: [PATCH 08/21] =?UTF-8?q?design:=20=EB=8C=80=EA=B8=B0=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EA=B3=B5=ED=86=B5=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=A0=81=EC=9A=A9=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CategoryContainer/CategoryContainer.styled.ts         | 1 +
 .../ReadyMembersContainer/ReadyMembersContainer.styled.ts | 1 +
 frontend/src/components/layout/Content/Content.styled.ts  | 2 +-
 frontend/src/pages/ReadyPage/ReadyPage.styled.ts          | 8 --------
 frontend/src/pages/ReadyPage/ReadyPage.tsx                | 7 +++----
 5 files changed, 6 insertions(+), 13 deletions(-)
 delete mode 100644 frontend/src/pages/ReadyPage/ReadyPage.styled.ts

diff --git a/frontend/src/components/CategoryContainer/CategoryContainer.styled.ts b/frontend/src/components/CategoryContainer/CategoryContainer.styled.ts
index a53ae1207..f5e47ccbb 100644
--- a/frontend/src/components/CategoryContainer/CategoryContainer.styled.ts
+++ b/frontend/src/components/CategoryContainer/CategoryContainer.styled.ts
@@ -8,6 +8,7 @@ export const categoryContainerLayout = css`
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
   height: 10rem;
   padding: 1.6rem 0 2.4rem;
   border-radius: ${getBorderRadius('medium')};
diff --git a/frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.styled.ts b/frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.styled.ts
index df561fe16..4ab5d51f2 100644
--- a/frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.styled.ts
+++ b/frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.styled.ts
@@ -7,6 +7,7 @@ export const readyMembersContainerLayout = css`
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  width: 100%;
 `;
 
 export const membersContainer = css`
diff --git a/frontend/src/components/layout/Content/Content.styled.ts b/frontend/src/components/layout/Content/Content.styled.ts
index f2cfffd3e..8f3ec30ad 100644
--- a/frontend/src/components/layout/Content/Content.styled.ts
+++ b/frontend/src/components/layout/Content/Content.styled.ts
@@ -5,6 +5,6 @@ export const contentLayout = css`
   flex-direction: column;
   align-items: center;
   gap: 1.6rem;
-  height: inherit;
+  height: 85vh;
   padding: 0 2.4rem;
 `;
diff --git a/frontend/src/pages/ReadyPage/ReadyPage.styled.ts b/frontend/src/pages/ReadyPage/ReadyPage.styled.ts
deleted file mode 100644
index 033b87566..000000000
--- a/frontend/src/pages/ReadyPage/ReadyPage.styled.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { css } from '@emotion/react';
-
-export const readyPageLayout = css`
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  padding: 0 2.4rem;
-`;
diff --git a/frontend/src/pages/ReadyPage/ReadyPage.tsx b/frontend/src/pages/ReadyPage/ReadyPage.tsx
index e26536b7e..4a0f61e06 100644
--- a/frontend/src/pages/ReadyPage/ReadyPage.tsx
+++ b/frontend/src/pages/ReadyPage/ReadyPage.tsx
@@ -1,19 +1,18 @@
-import { readyPageLayout } from './ReadyPage.styled';
-
 import CategoryContainer from '@/components/CategoryContainer/CategoryContainer';
 import AsyncErrorBoundary from '@/components/common/ErrorBoundary/AsyncErrorBoundary';
 import ReadySkeleton from '@/components/common/Skeleton/ReadySkeleton/ReadySkeleton';
+import Content from '@/components/layout/Content/Content';
 import ReadyMembersContainer from '@/components/ReadyMembersContainer/ReadyMembersContainer';
 import StartButtonContainer from '@/components/StartButtonContainer/StartButtonContainer';
 
 const ReadyPage = () => {
   return (
     <AsyncErrorBoundary pendingFallback={<ReadySkeleton />}>
-      <div css={readyPageLayout}>
+      <Content>
         <CategoryContainer />
         <ReadyMembersContainer />
         <StartButtonContainer />
-      </div>
+      </Content>
     </AsyncErrorBoundary>
   );
 };

From 408bec7661814e360e128b48f6125d8542956d2b Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Sun, 15 Sep 2024 00:40:37 +0900
Subject: [PATCH 09/21] =?UTF-8?q?refactor:=20=EC=8B=9C=EA=B0=84=20?=
 =?UTF-8?q?=EC=9E=AC=EB=8A=94=20=ED=83=80=EC=9D=B4=EB=A8=B8=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EB=A1=9C=EC=A7=81=EC=9D=84=20API=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=EA=B3=BC=20=EB=B6=84=EB=A6=AC=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Timer/hooks/useRoundTimer.ts   | 42 +++------------
 .../src/components/Timer/hooks/useTimer.ts    | 51 +++++++++++++++++++
 2 files changed, 58 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/components/Timer/hooks/useTimer.ts

diff --git a/frontend/src/components/Timer/hooks/useRoundTimer.ts b/frontend/src/components/Timer/hooks/useRoundTimer.ts
index b1b53a2f2..45867d809 100644
--- a/frontend/src/components/Timer/hooks/useRoundTimer.ts
+++ b/frontend/src/components/Timer/hooks/useRoundTimer.ts
@@ -1,14 +1,9 @@
-import { useEffect, useRef, useState } from 'react';
-
-import { convertMsecToSecond } from '../Timer.util';
+import useTimer from './useTimer';
 
 import useCompleteSelectionMutation from '@/components/common/SelectButton/SelectButton.hook';
-import { POLLING_DELAY } from '@/constants/config';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
-const INITIAL_WIDTH = 100;
 const DEFAULT_TIME_LIMIT_MSEC = 10000;
-const ALMOST_FINISH_SECOND = 5;
 
 interface UseRoundTimerProps {
   roomId: number;
@@ -26,41 +21,18 @@ const useRoundTimer = ({
   const { balanceContent } = useBalanceContentQuery(roomId);
   const timeLimit = balanceContent.timeLimit || DEFAULT_TIME_LIMIT_MSEC;
 
-  const [leftRoundTime, setLeftRoundTime] = useState(convertMsecToSecond(timeLimit));
-  const [barWidthPercent, setBarWidthPercent] = useState(INITIAL_WIDTH);
-
-  const isVoteTimeout = leftRoundTime <= 0;
-  const isAlmostFinished = leftRoundTime <= ALMOST_FINISH_SECOND;
-
-  const timeout = useRef<NodeJS.Timeout>();
-
-  const { mutate } = useCompleteSelectionMutation({
+  const { mutate: vote } = useCompleteSelectionMutation({
     selectedId,
     contentId: balanceContent.contentId,
     completeSelection,
     showModal,
   });
 
-  useEffect(() => {
-    if (isVoteTimeout) {
-      mutate();
-      clearInterval(timeout.current);
-    }
-  }, [isVoteTimeout]);
-
-  useEffect(() => {
-    const DECREASE_RATE = INITIAL_WIDTH / convertMsecToSecond(timeLimit);
-    setLeftRoundTime(convertMsecToSecond(timeLimit));
-
-    timeout.current = setInterval(() => {
-      setLeftRoundTime((prev) => prev - 1);
-      setBarWidthPercent((prevWidth) => (prevWidth > 0 ? prevWidth - DECREASE_RATE : 0));
-    }, POLLING_DELAY);
-
-    return () => {
-      clearInterval(timeout.current);
-    };
-  }, [timeLimit]);
+  const { leftRoundTime, barWidthPercent, isAlmostFinished } = useTimer({
+    timeLimit,
+    isSelectedOption: Boolean(selectedId),
+    vote,
+  });
 
   return { leftRoundTime, barWidthPercent, isAlmostFinished };
 };
diff --git a/frontend/src/components/Timer/hooks/useTimer.ts b/frontend/src/components/Timer/hooks/useTimer.ts
new file mode 100644
index 000000000..89508b76a
--- /dev/null
+++ b/frontend/src/components/Timer/hooks/useTimer.ts
@@ -0,0 +1,51 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { convertMsecToSecond } from '../Timer.util';
+
+import { POLLING_DELAY } from '@/constants/config';
+
+const INITIAL_WIDTH = 100;
+const ALMOST_FINISH_SECOND = 5;
+
+interface UseTimerProps {
+  timeLimit: number;
+  isSelectedOption: boolean;
+  vote: () => void;
+}
+
+const useTimer = ({ timeLimit, isSelectedOption, vote }: UseTimerProps) => {
+  const [leftRoundTime, setLeftRoundTime] = useState(convertMsecToSecond(timeLimit));
+  const [barWidthPercent, setBarWidthPercent] = useState(INITIAL_WIDTH);
+
+  const isVoteTimeout = leftRoundTime <= 0;
+  const isAlmostFinished = leftRoundTime <= ALMOST_FINISH_SECOND;
+
+  const timeout = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    if (isVoteTimeout) {
+      if (isSelectedOption) {
+        vote();
+      }
+      clearInterval(timeout.current);
+    }
+  }, [isVoteTimeout]);
+
+  useEffect(() => {
+    const DECREASE_RATE = INITIAL_WIDTH / convertMsecToSecond(timeLimit);
+    setLeftRoundTime(convertMsecToSecond(timeLimit));
+
+    timeout.current = setInterval(() => {
+      setLeftRoundTime((prev) => prev - 1);
+      setBarWidthPercent((prevWidth) => (prevWidth > 0 ? prevWidth - DECREASE_RATE : 0));
+    }, POLLING_DELAY);
+
+    return () => {
+      clearInterval(timeout.current);
+    };
+  }, [timeLimit]);
+
+  return { leftRoundTime, barWidthPercent, isAlmostFinished };
+};
+
+export default useTimer;

From ab85a2c232d7d6582db44006c5b9ee6af72f7427 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Sun, 15 Sep 2024 00:42:11 +0900
Subject: [PATCH 10/21] =?UTF-8?q?refactor:=20=ED=88=AC=ED=91=9C=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84=20=EC=B8=A1=EC=A0=95=20=ED=83=80=EC=9D=B4?=
 =?UTF-8?q?=EB=A8=B8=EC=97=90=20=EB=A7=9E=EA=B2=8C=20voteTimer=EB=A1=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EC=88=98=EC=A0=95=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Timer/Timer.tsx               |  4 ++--
 .../Timer/hooks/{useRoundTimer.ts => useVoteTimer.ts} | 11 +++--------
 2 files changed, 5 insertions(+), 10 deletions(-)
 rename frontend/src/components/Timer/hooks/{useRoundTimer.ts => useVoteTimer.ts} (83%)

diff --git a/frontend/src/components/Timer/Timer.tsx b/frontend/src/components/Timer/Timer.tsx
index 1a9228041..841132797 100644
--- a/frontend/src/components/Timer/Timer.tsx
+++ b/frontend/src/components/Timer/Timer.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'react-router-dom';
 
-import useRoundTimer from './hooks/useRoundTimer';
+import useVoteTimer from './hooks/useVoteTimer';
 import {
   timerIcon,
   timerIconShake,
@@ -21,7 +21,7 @@ interface TimerProps {
 
 const Timer = ({ selectedId, completeSelection, showModal }: TimerProps) => {
   const { roomId } = useParams();
-  const { barWidthPercent, leftRoundTime, isAlmostFinished } = useRoundTimer({
+  const { barWidthPercent, leftRoundTime, isAlmostFinished } = useVoteTimer({
     roomId: Number(roomId),
     selectedId,
     completeSelection,
diff --git a/frontend/src/components/Timer/hooks/useRoundTimer.ts b/frontend/src/components/Timer/hooks/useVoteTimer.ts
similarity index 83%
rename from frontend/src/components/Timer/hooks/useRoundTimer.ts
rename to frontend/src/components/Timer/hooks/useVoteTimer.ts
index 45867d809..599dff6c7 100644
--- a/frontend/src/components/Timer/hooks/useRoundTimer.ts
+++ b/frontend/src/components/Timer/hooks/useVoteTimer.ts
@@ -5,19 +5,14 @@ import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
 const DEFAULT_TIME_LIMIT_MSEC = 10000;
 
-interface UseRoundTimerProps {
+interface UseVoteTimerProps {
   roomId: number;
   selectedId: number;
   completeSelection: () => void;
   showModal: () => void;
 }
 
-const useRoundTimer = ({
-  roomId,
-  selectedId,
-  completeSelection,
-  showModal,
-}: UseRoundTimerProps) => {
+const useVoteTimer = ({ roomId, selectedId, completeSelection, showModal }: UseVoteTimerProps) => {
   const { balanceContent } = useBalanceContentQuery(roomId);
   const timeLimit = balanceContent.timeLimit || DEFAULT_TIME_LIMIT_MSEC;
 
@@ -37,4 +32,4 @@ const useRoundTimer = ({
   return { leftRoundTime, barWidthPercent, isAlmostFinished };
 };
 
-export default useRoundTimer;
+export default useVoteTimer;

From b22e1a679b408a6cf3070aa52f3b67e17ac33cbc Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Sun, 15 Sep 2024 00:45:36 +0900
Subject: [PATCH 11/21] =?UTF-8?q?refactor:=20=EC=84=A0=ED=83=9D=20?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=EB=A6=AC=EC=8A=A4=EB=84=88=EB=AA=85?=
 =?UTF-8?q?=20vote=EB=A1=9C=20=EC=88=98=EC=A0=95=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/SelectButton/SelectButton.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/common/SelectButton/SelectButton.tsx b/frontend/src/components/common/SelectButton/SelectButton.tsx
index fee782ae5..d9756338c 100644
--- a/frontend/src/components/common/SelectButton/SelectButton.tsx
+++ b/frontend/src/components/common/SelectButton/SelectButton.tsx
@@ -18,7 +18,7 @@ const SelectButton = ({
   const {
     data,
     isPending,
-    mutate: completeSelectionMutate,
+    mutate: vote,
   } = useCompleteSelectionMutation({
     selectedId,
     contentId,
@@ -32,7 +32,7 @@ const SelectButton = ({
         bottom
         disabled={data || !selectedId || isPending}
         text={data || isPending ? '선택 완료' : '선택'}
-        onClick={completeSelectionMutate}
+        onClick={vote}
       />
     </div>
   );

From bbd04ff31b6e17f0238eeb134039b0fc76c6e7f7 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Sun, 15 Sep 2024 01:35:13 +0900
Subject: [PATCH 12/21] =?UTF-8?q?test:=20=ED=83=80=EC=9D=B4=EB=A8=B8?=
 =?UTF-8?q?=EA=B0=80=20=EC=A2=85=EB=A3=8C=EB=90=98=EC=97=88=EC=9D=84=20?=
 =?UTF-8?q?=EB=95=8C=20=EC=84=A0=ED=83=9D=EB=90=9C=20=EC=98=B5=EC=85=98?=
 =?UTF-8?q?=EC=9D=B4=20=EC=9E=88=EC=9C=BC=EB=A9=B4=20=ED=88=AC=ED=91=9C=20?=
 =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Timer/Timer.test.tsx | 39 ++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/frontend/src/components/Timer/Timer.test.tsx b/frontend/src/components/Timer/Timer.test.tsx
index a3c634662..7f85584f5 100644
--- a/frontend/src/components/Timer/Timer.test.tsx
+++ b/frontend/src/components/Timer/Timer.test.tsx
@@ -1,3 +1,6 @@
+import { act, renderHook } from '@testing-library/react';
+
+import useTimer from './hooks/useTimer';
 import { convertMsecToSecond, formatLeftRoundTime } from './Timer.util';
 
 describe('Timer 테스트', () => {
@@ -14,4 +17,40 @@ describe('Timer 테스트', () => {
       expect(convertedTime).toBe(10);
     });
   });
+  describe('Timer 훅 테스트', () => {
+    jest.useFakeTimers();
+    const voteMock = jest.fn();
+    const timeLimit = 10000;
+
+    it('타이머가 종료되었을 때 선택 완료를 누르지 않아도 선택된 옵션이 있으면 투표한다.', () => {
+      const isSelectedOption = true;
+
+      const { result } = renderHook(() =>
+        useTimer({ timeLimit, isSelectedOption, vote: voteMock }),
+      );
+
+      // act : 인자로 받은 함수를 실행시켜서 가상의 DOM(jsdom)에 적용하는 역할
+      // 상태 변경과 그로 인한 DOM 업데이트가 모두 완료된 후에 테스트가 실행되도록 보장
+      act(() => {
+        jest.advanceTimersByTime(timeLimit);
+      });
+
+      expect(result.current.leftRoundTime).toBe(0);
+      expect(voteMock).toHaveBeenCalled();
+    });
+    it('타이머가 종료되었을 때 선택된 옵션이 없다면 투표되지 않고 기권한다.', () => {
+      const isSelectedOption = false;
+
+      const { result } = renderHook(() =>
+        useTimer({ timeLimit, isSelectedOption, vote: voteMock }),
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(timeLimit);
+      });
+
+      expect(result.current.leftRoundTime).toBe(0);
+      expect(voteMock).not.toHaveBeenCalled();
+    });
+  });
 });

From 309a7bb476e298d68081259069c91eb9c34aa970 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Sun, 15 Sep 2024 01:46:54 +0900
Subject: [PATCH 13/21] =?UTF-8?q?refactor:=20=ED=88=AC=ED=91=9C=20?=
 =?UTF-8?q?=EC=A2=85=EB=A3=8C=20=EC=97=AC=EB=B6=80=EB=A5=BC=20Timer=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EA=B0=80=20=EA=B0=80?=
 =?UTF-8?q?=EC=A7=80=EB=A9=B4=EC=84=9C=20=EB=A6=AC=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=20=EC=B5=9C=EC=A0=81=ED=99=94=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/SelectContainer/SelectContainer.tsx    | 8 +-------
 frontend/src/components/Timer/Timer.tsx                   | 8 ++++++++
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/SelectContainer/SelectContainer.tsx b/frontend/src/components/SelectContainer/SelectContainer.tsx
index b9cc9f63c..a275b125f 100644
--- a/frontend/src/components/SelectContainer/SelectContainer.tsx
+++ b/frontend/src/components/SelectContainer/SelectContainer.tsx
@@ -1,6 +1,5 @@
 import { useParams } from 'react-router-dom';
 
-import useRoundIsFinished from './hooks/useRoundIsFinished';
 import useSelectOption from './hooks/useSelectOption';
 import { selectContainerLayout, selectSection } from './SelectContainer.styled';
 import AlertModal from '../common/AlertModal/AlertModal';
@@ -13,15 +12,10 @@ import useModal from '@/hooks/useModal';
 
 const SelectContainer = () => {
   const { roomId } = useParams();
-  const { balanceContent, isFetching } = useBalanceContentQuery(Number(roomId));
+  const { balanceContent } = useBalanceContentQuery(Number(roomId));
   const { selectedOption, handleClickOption, completeSelection } = useSelectOption();
   const { isOpen, show, close } = useModal();
 
-  useRoundIsFinished({
-    contentId: balanceContent.contentId,
-    isFetching,
-  });
-
   return (
     <div css={selectContainerLayout}>
       <Timer
diff --git a/frontend/src/components/Timer/Timer.tsx b/frontend/src/components/Timer/Timer.tsx
index 841132797..3f229b31f 100644
--- a/frontend/src/components/Timer/Timer.tsx
+++ b/frontend/src/components/Timer/Timer.tsx
@@ -10,8 +10,10 @@ import {
   timerWrapper,
 } from './Timer.styled';
 import { formatLeftRoundTime } from './Timer.util';
+import useRoundIsFinished from '../SelectContainer/hooks/useRoundIsFinished';
 
 import DdangkongTimer from '@/assets/images/ddangkongTimer.png';
+import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
 interface TimerProps {
   selectedId: number;
@@ -21,6 +23,7 @@ interface TimerProps {
 
 const Timer = ({ selectedId, completeSelection, showModal }: TimerProps) => {
   const { roomId } = useParams();
+  const { balanceContent, isFetching } = useBalanceContentQuery(Number(roomId));
   const { barWidthPercent, leftRoundTime, isAlmostFinished } = useVoteTimer({
     roomId: Number(roomId),
     selectedId,
@@ -28,6 +31,11 @@ const Timer = ({ selectedId, completeSelection, showModal }: TimerProps) => {
     showModal,
   });
 
+  useRoundIsFinished({
+    contentId: balanceContent.contentId,
+    isFetching,
+  });
+
   return (
     <section css={timerLayout}>
       <div css={timerInnerLayout(barWidthPercent)}></div>

From 55cedd6bcc4116b8d79ce0e5ee3f96a5698893f3 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Sun, 15 Sep 2024 02:19:49 +0900
Subject: [PATCH 14/21] =?UTF-8?q?refactor:=20roundVoteIsFinished=20?=
 =?UTF-8?q?=EB=84=A4=EC=9D=B4=EB=B0=8D=EC=9D=84=20voteIsFinished=EB=A1=9C?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/balanceContent.ts                |  8 ++++----
 ...{useRoundIsFinished.ts => useVoteIsFinished.ts} |  6 +++---
 ...sFinishedQuery.ts => useVoteIsFinishedQuery.ts} | 14 +++++++-------
 frontend/src/components/Timer/Timer.tsx            |  4 ++--
 frontend/src/constants/url.ts                      |  4 ++--
 ...oundVoteIsFinished.json => voteIsFinished.json} |  0
 .../src/mocks/handlers/balanceContentHandler.ts    | 12 ++++++------
 frontend/src/mocks/handlers/voteHandler.ts         |  6 +++---
 8 files changed, 27 insertions(+), 27 deletions(-)
 rename frontend/src/components/SelectContainer/hooks/{useRoundIsFinished.ts => useVoteIsFinished.ts} (77%)
 rename frontend/src/components/SelectContainer/hooks/{useRoundIsFinishedQuery.ts => useVoteIsFinishedQuery.ts} (57%)
 rename frontend/src/mocks/data/{roundVoteIsFinished.json => voteIsFinished.json} (100%)

diff --git a/frontend/src/apis/balanceContent.ts b/frontend/src/apis/balanceContent.ts
index 1d4877d41..a494600ac 100644
--- a/frontend/src/apis/balanceContent.ts
+++ b/frontend/src/apis/balanceContent.ts
@@ -19,7 +19,7 @@ interface myGameStatusParams {
   currentRound: number;
 }
 
-interface RoundVoteIsFinished {
+interface VoteIsFinished {
   isFinished: boolean;
 }
 
@@ -113,12 +113,12 @@ export const fetchMatchingResult = async ({
 };
 
 // 현재 라운드가 끝났는지 여부 확인하기
-export const fetchRoundVoteIsFinished = async ({
+export const fetchVoteIsFinished = async ({
   contentId,
   roomId,
-}: ContentResultParams): Promise<RoundVoteIsFinished> => {
+}: ContentResultParams): Promise<VoteIsFinished> => {
   const res = await fetcher.get({
-    url: API_URL.roundVoteIsFinished(roomId, contentId),
+    url: API_URL.voteIsFinished(roomId, contentId),
   });
 
   const data = await res.json();
diff --git a/frontend/src/components/SelectContainer/hooks/useRoundIsFinished.ts b/frontend/src/components/SelectContainer/hooks/useVoteIsFinished.ts
similarity index 77%
rename from frontend/src/components/SelectContainer/hooks/useRoundIsFinished.ts
rename to frontend/src/components/SelectContainer/hooks/useVoteIsFinished.ts
index 99017b763..e8eb802a5 100644
--- a/frontend/src/components/SelectContainer/hooks/useRoundIsFinished.ts
+++ b/frontend/src/components/SelectContainer/hooks/useVoteIsFinished.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import useRoundIsFinishedQuery from './useRoundIsFinishedQuery';
+import useRoundIsFinishedQuery from './useVoteIsFinishedQuery';
 
 import { ROUTES } from '@/constants/routes';
 
@@ -10,7 +10,7 @@ interface UseRoundIsFinishedProps {
   contentId?: number;
 }
 
-const useRoundIsFinished = ({ contentId, isFetching }: UseRoundIsFinishedProps) => {
+const useVoteIsFinished = ({ contentId, isFetching }: UseRoundIsFinishedProps) => {
   const navigate = useNavigate();
   const { roomId } = useParams();
   const { isFinished } = useRoundIsFinishedQuery({
@@ -27,4 +27,4 @@ const useRoundIsFinished = ({ contentId, isFetching }: UseRoundIsFinishedProps)
   return { isFinished };
 };
 
-export default useRoundIsFinished;
+export default useVoteIsFinished;
diff --git a/frontend/src/components/SelectContainer/hooks/useRoundIsFinishedQuery.ts b/frontend/src/components/SelectContainer/hooks/useVoteIsFinishedQuery.ts
similarity index 57%
rename from frontend/src/components/SelectContainer/hooks/useRoundIsFinishedQuery.ts
rename to frontend/src/components/SelectContainer/hooks/useVoteIsFinishedQuery.ts
index 8c5ef6d22..b2f4809ba 100644
--- a/frontend/src/components/SelectContainer/hooks/useRoundIsFinishedQuery.ts
+++ b/frontend/src/components/SelectContainer/hooks/useVoteIsFinishedQuery.ts
@@ -1,26 +1,26 @@
 import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 
-import { fetchRoundVoteIsFinished } from '@/apis/balanceContent';
+import { fetchVoteIsFinished } from '@/apis/balanceContent';
 import { POLLING_DELAY } from '@/constants/config';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 
-interface UseRoundIsFinishedQueryProps {
+interface UseVoteIsFinishedQueryProps {
   enabled: boolean;
   contentId?: number;
 }
 
-const useRoundIsFinishedQuery = ({ contentId, enabled }: UseRoundIsFinishedQueryProps) => {
+const useVoteIsFinishedQuery = ({ contentId, enabled }: UseVoteIsFinishedQueryProps) => {
   const { roomId } = useParams();
 
-  const roundIsFinishedQuery = useQuery({
+  const voteIsFinishedQuery = useQuery({
     queryKey: [QUERY_KEYS.roundIsFinished, Number(roomId), contentId],
     queryFn: async () => {
       if (typeof contentId === 'undefined') {
         throw new Error('contentId 가 존재하지 않습니다.');
       }
 
-      return await fetchRoundVoteIsFinished({ roomId: Number(roomId), contentId });
+      return await fetchVoteIsFinished({ roomId: Number(roomId), contentId });
     },
     enabled,
     refetchInterval: POLLING_DELAY,
@@ -28,7 +28,7 @@ const useRoundIsFinishedQuery = ({ contentId, enabled }: UseRoundIsFinishedQuery
     gcTime: 0,
   });
 
-  return { ...roundIsFinishedQuery, isFinished: roundIsFinishedQuery.data?.isFinished };
+  return { ...voteIsFinishedQuery, isFinished: voteIsFinishedQuery.data?.isFinished };
 };
 
-export default useRoundIsFinishedQuery;
+export default useVoteIsFinishedQuery;
diff --git a/frontend/src/components/Timer/Timer.tsx b/frontend/src/components/Timer/Timer.tsx
index 3f229b31f..a96e0a140 100644
--- a/frontend/src/components/Timer/Timer.tsx
+++ b/frontend/src/components/Timer/Timer.tsx
@@ -10,7 +10,7 @@ import {
   timerWrapper,
 } from './Timer.styled';
 import { formatLeftRoundTime } from './Timer.util';
-import useRoundIsFinished from '../SelectContainer/hooks/useRoundIsFinished';
+import useVoteIsFinished from '../SelectContainer/hooks/useVoteIsFinished';
 
 import DdangkongTimer from '@/assets/images/ddangkongTimer.png';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
@@ -31,7 +31,7 @@ const Timer = ({ selectedId, completeSelection, showModal }: TimerProps) => {
     showModal,
   });
 
-  useRoundIsFinished({
+  useVoteIsFinished({
     contentId: balanceContent.contentId,
     isFetching,
   });
diff --git a/frontend/src/constants/url.ts b/frontend/src/constants/url.ts
index f6bdac70d..6aa537e6d 100644
--- a/frontend/src/constants/url.ts
+++ b/frontend/src/constants/url.ts
@@ -16,7 +16,7 @@ export const API_URL = {
   getRoomInfo: (roomId: number) => `${BASE_URL}/api/balances/rooms/${roomId}`,
   categoryList: `${BASE_URL}/api/balances/categories`,
   startGame: (roomId: number) => `${BASE_URL}/api/balances/rooms/${roomId}/start`,
-  roundVoteIsFinished: (roomId: number, contentId: number) =>
+  voteIsFinished: (roomId: number, contentId: number) =>
     `${BASE_URL}/api/balances/rooms/${roomId}/contents/${contentId}/vote-finished`,
   resetRoom: (roomId: number) => `${BASE_URL}/api/balances/rooms/${roomId}/reset`,
   isRoomActivate: (roomId: number) => `${BASE_URL}/api/balances/rooms/${roomId}/activate`,
@@ -40,7 +40,7 @@ export const MOCK_API_URL: Record<API_URL_KEYS, string> = {
   enterRoom: `${BASE_URL}/api/balances/rooms/:roomUuid/members`,
   getRoomInfo: `${BASE_URL}/api/balances/rooms/:roomId`,
   startGame: `${BASE_URL}/api/balances/rooms/:roomId/start`,
-  roundVoteIsFinished: `${BASE_URL}/api/balances/rooms/:roomId/contents/:contentId/vote-finished`,
+  voteIsFinished: `${BASE_URL}/api/balances/rooms/:roomId/contents/:contentId/vote-finished`,
   resetRoom: `${BASE_URL}/api/balances/rooms/:roomId/reset`,
   isRoomActivate: `${BASE_URL}/api/balances/rooms/:roomId/activate`,
   isRoomInitial: `${BASE_URL}/api/balances/rooms/:roomId/initial`,
diff --git a/frontend/src/mocks/data/roundVoteIsFinished.json b/frontend/src/mocks/data/voteIsFinished.json
similarity index 100%
rename from frontend/src/mocks/data/roundVoteIsFinished.json
rename to frontend/src/mocks/data/voteIsFinished.json
diff --git a/frontend/src/mocks/handlers/balanceContentHandler.ts b/frontend/src/mocks/handlers/balanceContentHandler.ts
index 641d4acfe..c641f1051 100644
--- a/frontend/src/mocks/handlers/balanceContentHandler.ts
+++ b/frontend/src/mocks/handlers/balanceContentHandler.ts
@@ -2,7 +2,7 @@ import { http, HttpResponse } from 'msw';
 
 import BALANCE_CONTENT from '../data/balanceContent.json';
 import MY_GAME_STATUS from '../data/myGameStatus.json';
-import ROUND_VOTE_IS_FINISHED from '../data/roundVoteIsFinished.json';
+import VOTE_IS_FINISHED from '../data/voteIsFinished.json';
 
 import { POLLING_DELAY } from '@/constants/config';
 import { MOCK_API_URL } from '@/constants/url';
@@ -12,15 +12,15 @@ const fetchBalanceContentHandler = () => {
   return HttpResponse.json<BalanceContent>(BALANCE_CONTENT);
 };
 
-const fetchIsFinishedHandler = () => {
+const fetchVoteIsFinishedHandler = () => {
   setTimeout(() => {
-    ROUND_VOTE_IS_FINISHED.isFinished = true;
+    VOTE_IS_FINISHED.isFinished = true;
   }, 10 * POLLING_DELAY);
   setTimeout(() => {
-    ROUND_VOTE_IS_FINISHED.isFinished = false;
+    VOTE_IS_FINISHED.isFinished = false;
   }, 12 * POLLING_DELAY);
 
-  return HttpResponse.json(ROUND_VOTE_IS_FINISHED);
+  return HttpResponse.json(VOTE_IS_FINISHED);
 };
 
 const getMyGameStatus = ({ request }: { request: Request }) => {
@@ -29,6 +29,6 @@ const getMyGameStatus = ({ request }: { request: Request }) => {
 
 export const contentHandler = [
   http.get(MOCK_API_URL.balanceContent, fetchBalanceContentHandler),
-  http.get(MOCK_API_URL.roundVoteIsFinished, fetchIsFinishedHandler),
+  http.get(MOCK_API_URL.voteIsFinished, fetchVoteIsFinishedHandler),
   http.get(MOCK_API_URL.myGameStatus, getMyGameStatus),
 ];
diff --git a/frontend/src/mocks/handlers/voteHandler.ts b/frontend/src/mocks/handlers/voteHandler.ts
index f2e31892e..1e7509687 100644
--- a/frontend/src/mocks/handlers/voteHandler.ts
+++ b/frontend/src/mocks/handlers/voteHandler.ts
@@ -3,15 +3,15 @@ import { http, HttpResponse } from 'msw';
 import BALANCE_CONTENT from '../data/balanceContent.json';
 import FINAL_RESULT from '../data/finalResult.json';
 import MY_GAME_STATUS from '../data/myGameStatus.json';
-import ROUND_VOTE_IS_FINISHED from '../data/roundVoteIsFinished.json';
 import VOTE_RESULT from '../data/roundVoteResult.json';
+import VOTE_IS_FINISHED from '../data/voteIsFinished.json';
 
 import { MOCK_API_URL } from '@/constants/url';
 import { RoundVoteResult } from '@/types/roundVoteResult';
 
 const voteBalanceContentHandler = async ({ request }: { request: Request }) => {
   const body = await request.json();
-  ROUND_VOTE_IS_FINISHED.isFinished = false;
+  VOTE_IS_FINISHED.isFinished = false;
   return HttpResponse.json(body, { status: 201 });
 };
 
@@ -22,7 +22,7 @@ const fetchVoteResultHandler = async () => {
 const goToNextRoundHandler = () => {
   BALANCE_CONTENT.currentRound += 1;
   MY_GAME_STATUS.isRoundFinished = true;
-  ROUND_VOTE_IS_FINISHED.isFinished = false;
+  VOTE_IS_FINISHED.isFinished = false;
   return HttpResponse.json({ state: 204 });
 };
 

From 0fa502369645db4a664877e4bfb325d81cc1d416 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Sun, 15 Sep 2024 02:22:21 +0900
Subject: [PATCH 15/21] =?UTF-8?q?refactor:=20Timer=EB=A5=BC=20SelectContai?=
 =?UTF-8?q?ner=20=ED=95=98=EC=9C=84=20=EB=94=94=EB=A0=89=ED=86=A0=EB=A6=AC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/SelectContainer/SelectContainer.tsx     | 2 +-
 .../components/{ => SelectContainer}/Timer/Timer.stories.tsx    | 0
 .../src/components/{ => SelectContainer}/Timer/Timer.styled.ts  | 0
 .../src/components/{ => SelectContainer}/Timer/Timer.test.tsx   | 0
 frontend/src/components/{ => SelectContainer}/Timer/Timer.tsx   | 2 +-
 .../src/components/{ => SelectContainer}/Timer/Timer.util.ts    | 0
 .../components/{ => SelectContainer}/Timer/hooks/useTimer.ts    | 0
 .../{ => SelectContainer}/Timer/hooks/useVoteTimer.ts           | 0
 8 files changed, 2 insertions(+), 2 deletions(-)
 rename frontend/src/components/{ => SelectContainer}/Timer/Timer.stories.tsx (100%)
 rename frontend/src/components/{ => SelectContainer}/Timer/Timer.styled.ts (100%)
 rename frontend/src/components/{ => SelectContainer}/Timer/Timer.test.tsx (100%)
 rename frontend/src/components/{ => SelectContainer}/Timer/Timer.tsx (94%)
 rename frontend/src/components/{ => SelectContainer}/Timer/Timer.util.ts (100%)
 rename frontend/src/components/{ => SelectContainer}/Timer/hooks/useTimer.ts (100%)
 rename frontend/src/components/{ => SelectContainer}/Timer/hooks/useVoteTimer.ts (100%)

diff --git a/frontend/src/components/SelectContainer/SelectContainer.tsx b/frontend/src/components/SelectContainer/SelectContainer.tsx
index a275b125f..e3fe166cf 100644
--- a/frontend/src/components/SelectContainer/SelectContainer.tsx
+++ b/frontend/src/components/SelectContainer/SelectContainer.tsx
@@ -2,9 +2,9 @@ import { useParams } from 'react-router-dom';
 
 import useSelectOption from './hooks/useSelectOption';
 import { selectContainerLayout, selectSection } from './SelectContainer.styled';
+import Timer from './Timer/Timer';
 import AlertModal from '../common/AlertModal/AlertModal';
 import SelectButton from '../common/SelectButton/SelectButton';
-import Timer from '../Timer/Timer';
 
 import SelectOption from '@/components/SelectOption/SelectOption';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
diff --git a/frontend/src/components/Timer/Timer.stories.tsx b/frontend/src/components/SelectContainer/Timer/Timer.stories.tsx
similarity index 100%
rename from frontend/src/components/Timer/Timer.stories.tsx
rename to frontend/src/components/SelectContainer/Timer/Timer.stories.tsx
diff --git a/frontend/src/components/Timer/Timer.styled.ts b/frontend/src/components/SelectContainer/Timer/Timer.styled.ts
similarity index 100%
rename from frontend/src/components/Timer/Timer.styled.ts
rename to frontend/src/components/SelectContainer/Timer/Timer.styled.ts
diff --git a/frontend/src/components/Timer/Timer.test.tsx b/frontend/src/components/SelectContainer/Timer/Timer.test.tsx
similarity index 100%
rename from frontend/src/components/Timer/Timer.test.tsx
rename to frontend/src/components/SelectContainer/Timer/Timer.test.tsx
diff --git a/frontend/src/components/Timer/Timer.tsx b/frontend/src/components/SelectContainer/Timer/Timer.tsx
similarity index 94%
rename from frontend/src/components/Timer/Timer.tsx
rename to frontend/src/components/SelectContainer/Timer/Timer.tsx
index a96e0a140..17a307e1c 100644
--- a/frontend/src/components/Timer/Timer.tsx
+++ b/frontend/src/components/SelectContainer/Timer/Timer.tsx
@@ -10,7 +10,7 @@ import {
   timerWrapper,
 } from './Timer.styled';
 import { formatLeftRoundTime } from './Timer.util';
-import useVoteIsFinished from '../SelectContainer/hooks/useVoteIsFinished';
+import useVoteIsFinished from '../hooks/useVoteIsFinished';
 
 import DdangkongTimer from '@/assets/images/ddangkongTimer.png';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
diff --git a/frontend/src/components/Timer/Timer.util.ts b/frontend/src/components/SelectContainer/Timer/Timer.util.ts
similarity index 100%
rename from frontend/src/components/Timer/Timer.util.ts
rename to frontend/src/components/SelectContainer/Timer/Timer.util.ts
diff --git a/frontend/src/components/Timer/hooks/useTimer.ts b/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
similarity index 100%
rename from frontend/src/components/Timer/hooks/useTimer.ts
rename to frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
diff --git a/frontend/src/components/Timer/hooks/useVoteTimer.ts b/frontend/src/components/SelectContainer/Timer/hooks/useVoteTimer.ts
similarity index 100%
rename from frontend/src/components/Timer/hooks/useVoteTimer.ts
rename to frontend/src/components/SelectContainer/Timer/hooks/useVoteTimer.ts

From 85ce80bdfdd01ba5cd47b352ead440bf0d76f2a6 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Mon, 16 Sep 2024 22:13:41 +0900
Subject: [PATCH 16/21] =?UTF-8?q?refactor:=20useTimer=20=EC=9D=98=EC=A1=B4?=
 =?UTF-8?q?=EC=84=B1=20=EB=B0=B0=EC=97=B4=20=EC=88=98=EC=A0=95=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/SelectContainer/Timer/hooks/useTimer.ts     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts b/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
index 89508b76a..fb5f31cad 100644
--- a/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
+++ b/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
@@ -27,9 +27,10 @@ const useTimer = ({ timeLimit, isSelectedOption, vote }: UseTimerProps) => {
       if (isSelectedOption) {
         vote();
       }
+
       clearInterval(timeout.current);
     }
-  }, [isVoteTimeout]);
+  }, [isVoteTimeout, isSelectedOption, vote]);
 
   useEffect(() => {
     const DECREASE_RATE = INITIAL_WIDTH / convertMsecToSecond(timeLimit);

From 20d4ddf518a7db883954a66d69e053ee9f4a02d7 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Mon, 16 Sep 2024 22:21:14 +0900
Subject: [PATCH 17/21] =?UTF-8?q?refactor:=20timer=20=EC=9C=A0=ED=8B=B8?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EB=B6=84=EB=A6=AC=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/SelectContainer/Timer/Timer.util.ts   | 4 ++++
 .../components/SelectContainer/Timer/hooks/useTimer.ts   | 9 +++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/SelectContainer/Timer/Timer.util.ts b/frontend/src/components/SelectContainer/Timer/Timer.util.ts
index 6d6f1727c..996bc5e3a 100644
--- a/frontend/src/components/SelectContainer/Timer/Timer.util.ts
+++ b/frontend/src/components/SelectContainer/Timer/Timer.util.ts
@@ -14,3 +14,7 @@ export const convertMsecToSecond = (msec: number) => {
   const UNIT_MSEC = POLLING_DELAY;
   return msec / UNIT_MSEC;
 };
+
+export const calculateWidthDecreasePercent = (width: number, timeLimit: number) => {
+  return width / timeLimit;
+};
diff --git a/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts b/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
index fb5f31cad..bcdbcb64d 100644
--- a/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
+++ b/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { convertMsecToSecond } from '../Timer.util';
+import { calculateWidthDecreasePercent, convertMsecToSecond } from '../Timer.util';
 
 import { POLLING_DELAY } from '@/constants/config';
 
@@ -33,12 +33,13 @@ const useTimer = ({ timeLimit, isSelectedOption, vote }: UseTimerProps) => {
   }, [isVoteTimeout, isSelectedOption, vote]);
 
   useEffect(() => {
-    const DECREASE_RATE = INITIAL_WIDTH / convertMsecToSecond(timeLimit);
-    setLeftRoundTime(convertMsecToSecond(timeLimit));
+    const timeLimitPerSecond = convertMsecToSecond(timeLimit);
+    const DECREASE_PERCENT = calculateWidthDecreasePercent(INITIAL_WIDTH, timeLimitPerSecond);
+    setLeftRoundTime(timeLimitPerSecond);
 
     timeout.current = setInterval(() => {
       setLeftRoundTime((prev) => prev - 1);
-      setBarWidthPercent((prevWidth) => (prevWidth > 0 ? prevWidth - DECREASE_RATE : 0));
+      setBarWidthPercent((prevWidth) => (prevWidth > 0 ? prevWidth - DECREASE_PERCENT : 0));
     }, POLLING_DELAY);
 
     return () => {

From 2a572d7d3d37c303c3b9d01ececb5ed20071d823 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Thu, 19 Sep 2024 16:24:08 +0900
Subject: [PATCH 18/21] =?UTF-8?q?refactor:=20=EB=AA=A8=ED=98=B8=ED=95=9C?=
 =?UTF-8?q?=20=ED=95=A8=EC=88=98=EB=AA=85=20=EC=88=98=EC=A0=95=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/SelectContainer/Timer/Timer.util.ts   | 4 ++--
 .../src/components/SelectContainer/Timer/hooks/useTimer.ts    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/SelectContainer/Timer/Timer.util.ts b/frontend/src/components/SelectContainer/Timer/Timer.util.ts
index 996bc5e3a..31883f9b2 100644
--- a/frontend/src/components/SelectContainer/Timer/Timer.util.ts
+++ b/frontend/src/components/SelectContainer/Timer/Timer.util.ts
@@ -15,6 +15,6 @@ export const convertMsecToSecond = (msec: number) => {
   return msec / UNIT_MSEC;
 };
 
-export const calculateWidthDecreasePercent = (width: number, timeLimit: number) => {
-  return width / timeLimit;
+export const calculateUnitRatio = (total: number, divisor: number) => {
+  return total / divisor;
 };
diff --git a/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts b/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
index bcdbcb64d..d2aeb874f 100644
--- a/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
+++ b/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { calculateWidthDecreasePercent, convertMsecToSecond } from '../Timer.util';
+import { calculateUnitRatio, convertMsecToSecond } from '../Timer.util';
 
 import { POLLING_DELAY } from '@/constants/config';
 
@@ -34,7 +34,7 @@ const useTimer = ({ timeLimit, isSelectedOption, vote }: UseTimerProps) => {
 
   useEffect(() => {
     const timeLimitPerSecond = convertMsecToSecond(timeLimit);
-    const DECREASE_PERCENT = calculateWidthDecreasePercent(INITIAL_WIDTH, timeLimitPerSecond);
+    const DECREASE_PERCENT = calculateUnitRatio(INITIAL_WIDTH, timeLimitPerSecond);
     setLeftRoundTime(timeLimitPerSecond);
 
     timeout.current = setInterval(() => {

From 2f8e096d60cc850b26b4ef0903dcf0931625df2d Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Thu, 19 Sep 2024 20:05:17 +0900
Subject: [PATCH 19/21] =?UTF-8?q?refactor:=20refetchInterval=20=EB=B0=8F?=
 =?UTF-8?q?=20refetchIntervalInBackground=20=EB=A5=BC=20=ED=86=B5=ED=95=B4?=
 =?UTF-8?q?=20=EA=B2=8C=EC=9E=84=20=ED=99=94=EB=A9=B4=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=95=88=EB=84=98=EC=96=B4=EA=B0=84=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SelectContainer/hooks/useVoteIsFinishedQuery.ts    |  9 +++++++--
 frontend/src/constants/config.ts                       |  1 +
 frontend/src/hooks/useGetRoomInfo.ts                   |  6 +++---
 frontend/src/hooks/useMyGameStatusQuery.ts             | 10 ++++++++--
 .../pages/GameResultPage/hooks/useCheckRoomReset.ts    | 10 ++++++++--
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/SelectContainer/hooks/useVoteIsFinishedQuery.ts b/frontend/src/components/SelectContainer/hooks/useVoteIsFinishedQuery.ts
index b2f4809ba..9a86e3ba3 100644
--- a/frontend/src/components/SelectContainer/hooks/useVoteIsFinishedQuery.ts
+++ b/frontend/src/components/SelectContainer/hooks/useVoteIsFinishedQuery.ts
@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 
 import { fetchVoteIsFinished } from '@/apis/balanceContent';
-import { POLLING_DELAY } from '@/constants/config';
+import { POLLING_DELAY, POLLING_ERROR_FAILURE_COUNT } from '@/constants/config';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 
 interface UseVoteIsFinishedQueryProps {
@@ -23,7 +23,12 @@ const useVoteIsFinishedQuery = ({ contentId, enabled }: UseVoteIsFinishedQueryPr
       return await fetchVoteIsFinished({ roomId: Number(roomId), contentId });
     },
     enabled,
-    refetchInterval: POLLING_DELAY,
+    refetchInterval: (query) => {
+      if (query.state.error && query.state.fetchFailureCount >= POLLING_ERROR_FAILURE_COUNT) {
+        return false;
+      }
+      return POLLING_DELAY;
+    },
     refetchIntervalInBackground: true,
     gcTime: 0,
   });
diff --git a/frontend/src/constants/config.ts b/frontend/src/constants/config.ts
index af490ba5f..9ca220bc5 100644
--- a/frontend/src/constants/config.ts
+++ b/frontend/src/constants/config.ts
@@ -1,2 +1,3 @@
 export const NICKNAME_MAX_LENGTH = 12;
 export const POLLING_DELAY = 1000;
+export const POLLING_ERROR_FAILURE_COUNT = 3;
diff --git a/frontend/src/hooks/useGetRoomInfo.ts b/frontend/src/hooks/useGetRoomInfo.ts
index f76fa4ff7..a09a0eb86 100644
--- a/frontend/src/hooks/useGetRoomInfo.ts
+++ b/frontend/src/hooks/useGetRoomInfo.ts
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { getRoomInfo } from '@/apis/room';
-import { POLLING_DELAY } from '@/constants/config';
+import { POLLING_DELAY, POLLING_ERROR_FAILURE_COUNT } from '@/constants/config';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 import { ROUTES } from '@/constants/routes';
 
@@ -15,12 +15,12 @@ export const useGetRoomInfo = () => {
     queryKey: [QUERY_KEYS.roomMembers, Number(roomId)],
     queryFn: () => getRoomInfo(Number(roomId)),
     refetchInterval: (query) => {
-      if (query.state.error && query.state.fetchFailureCount >= 3) {
+      if (query.state.error && query.state.fetchFailureCount >= POLLING_ERROR_FAILURE_COUNT) {
         return false;
       }
       return POLLING_DELAY;
     },
-
+    refetchIntervalInBackground: true,
     gcTime: 0,
   });
 
diff --git a/frontend/src/hooks/useMyGameStatusQuery.ts b/frontend/src/hooks/useMyGameStatusQuery.ts
index 7f3b6dac1..24365c07e 100644
--- a/frontend/src/hooks/useMyGameStatusQuery.ts
+++ b/frontend/src/hooks/useMyGameStatusQuery.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { checkMyGameStatus } from '@/apis/balanceContent';
-import { POLLING_DELAY } from '@/constants/config';
+import { POLLING_DELAY, POLLING_ERROR_FAILURE_COUNT } from '@/constants/config';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 
 interface useMyGameStatusQueryProps {
@@ -22,7 +22,13 @@ const useMyGameStatusQuery = ({ roomId, currentRound }: useMyGameStatusQueryProp
       });
     },
     enabled: !!currentRound,
-    refetchInterval: POLLING_DELAY,
+    refetchInterval: (query) => {
+      if (query.state.error && query.state.fetchFailureCount >= POLLING_ERROR_FAILURE_COUNT) {
+        return false;
+      }
+      return POLLING_DELAY;
+    },
+    refetchIntervalInBackground: true,
     gcTime: 0,
   });
 
diff --git a/frontend/src/pages/GameResultPage/hooks/useCheckRoomReset.ts b/frontend/src/pages/GameResultPage/hooks/useCheckRoomReset.ts
index 0c9762398..e8d9b34f4 100644
--- a/frontend/src/pages/GameResultPage/hooks/useCheckRoomReset.ts
+++ b/frontend/src/pages/GameResultPage/hooks/useCheckRoomReset.ts
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { isRoomInitial } from '@/apis/room';
-import { POLLING_DELAY } from '@/constants/config';
+import { POLLING_DELAY, POLLING_ERROR_FAILURE_COUNT } from '@/constants/config';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 import { ROUTES } from '@/constants/routes';
 
@@ -13,7 +13,13 @@ export const useIsRoomInitial = () => {
   const { data } = useQuery({
     queryKey: [QUERY_KEYS.isRoomInitial, Number(roomId)],
     queryFn: async () => await isRoomInitial(Number(roomId)),
-    refetchInterval: POLLING_DELAY,
+    refetchInterval: (query) => {
+      if (query.state.error && query.state.fetchFailureCount >= POLLING_ERROR_FAILURE_COUNT) {
+        return false;
+      }
+      return POLLING_DELAY;
+    },
+    refetchIntervalInBackground: true,
     gcTime: 0,
   });
 

From 70b2a9282fa44ebc6c379c1da5871f903ad357b8 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Thu, 19 Sep 2024 21:08:28 +0900
Subject: [PATCH 20/21] =?UTF-8?q?fix:=20=ED=88=AC=ED=91=9C=EB=A5=BC=20?=
 =?UTF-8?q?=ED=95=9C=20=EC=83=81=ED=83=9C=EC=97=AC=EB=8F=84=20=ED=83=80?=
 =?UTF-8?q?=EC=9D=B4=EB=A8=B8=EA=B0=80=20=EB=81=9D=EB=82=9C=20=ED=9B=84=20?=
 =?UTF-8?q?=ED=88=AC=ED=91=9C=20API=20=EC=9A=94=EC=B2=AD=EC=9D=84=20?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0=20?=
 =?UTF-8?q?#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/SelectContainer/SelectContainer.tsx |  1 +
 .../components/SelectContainer/Timer/Timer.test.tsx    |  6 ++++--
 .../src/components/SelectContainer/Timer/Timer.tsx     |  4 +++-
 .../components/SelectContainer/Timer/hooks/useTimer.ts |  7 ++++---
 .../SelectContainer/Timer/hooks/useVoteTimer.ts        | 10 +++++++++-
 5 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/SelectContainer/SelectContainer.tsx b/frontend/src/components/SelectContainer/SelectContainer.tsx
index e3fe166cf..7a1352a7a 100644
--- a/frontend/src/components/SelectContainer/SelectContainer.tsx
+++ b/frontend/src/components/SelectContainer/SelectContainer.tsx
@@ -20,6 +20,7 @@ const SelectContainer = () => {
     <div css={selectContainerLayout}>
       <Timer
         selectedId={selectedOption.id}
+        isVoted={selectedOption.isCompleted}
         completeSelection={completeSelection}
         showModal={show}
       />
diff --git a/frontend/src/components/SelectContainer/Timer/Timer.test.tsx b/frontend/src/components/SelectContainer/Timer/Timer.test.tsx
index 7f85584f5..06c37cfc4 100644
--- a/frontend/src/components/SelectContainer/Timer/Timer.test.tsx
+++ b/frontend/src/components/SelectContainer/Timer/Timer.test.tsx
@@ -24,9 +24,10 @@ describe('Timer 테스트', () => {
 
     it('타이머가 종료되었을 때 선택 완료를 누르지 않아도 선택된 옵션이 있으면 투표한다.', () => {
       const isSelectedOption = true;
+      const isVoted = false;
 
       const { result } = renderHook(() =>
-        useTimer({ timeLimit, isSelectedOption, vote: voteMock }),
+        useTimer({ timeLimit, isSelectedOption, isVoted, vote: voteMock }),
       );
 
       // act : 인자로 받은 함수를 실행시켜서 가상의 DOM(jsdom)에 적용하는 역할
@@ -40,9 +41,10 @@ describe('Timer 테스트', () => {
     });
     it('타이머가 종료되었을 때 선택된 옵션이 없다면 투표되지 않고 기권한다.', () => {
       const isSelectedOption = false;
+      const isVoted = false;
 
       const { result } = renderHook(() =>
-        useTimer({ timeLimit, isSelectedOption, vote: voteMock }),
+        useTimer({ timeLimit, isSelectedOption, isVoted, vote: voteMock }),
       );
 
       act(() => {
diff --git a/frontend/src/components/SelectContainer/Timer/Timer.tsx b/frontend/src/components/SelectContainer/Timer/Timer.tsx
index 17a307e1c..91e3d94d1 100644
--- a/frontend/src/components/SelectContainer/Timer/Timer.tsx
+++ b/frontend/src/components/SelectContainer/Timer/Timer.tsx
@@ -17,16 +17,18 @@ import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
 interface TimerProps {
   selectedId: number;
+  isVoted: boolean;
   completeSelection: () => void;
   showModal: () => void;
 }
 
-const Timer = ({ selectedId, completeSelection, showModal }: TimerProps) => {
+const Timer = ({ selectedId, isVoted, completeSelection, showModal }: TimerProps) => {
   const { roomId } = useParams();
   const { balanceContent, isFetching } = useBalanceContentQuery(Number(roomId));
   const { barWidthPercent, leftRoundTime, isAlmostFinished } = useVoteTimer({
     roomId: Number(roomId),
     selectedId,
+    isVoted,
     completeSelection,
     showModal,
   });
diff --git a/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts b/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
index d2aeb874f..20a68a2d3 100644
--- a/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
+++ b/frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts
@@ -10,10 +10,11 @@ const ALMOST_FINISH_SECOND = 5;
 interface UseTimerProps {
   timeLimit: number;
   isSelectedOption: boolean;
+  isVoted: boolean;
   vote: () => void;
 }
 
-const useTimer = ({ timeLimit, isSelectedOption, vote }: UseTimerProps) => {
+const useTimer = ({ timeLimit, isSelectedOption, isVoted, vote }: UseTimerProps) => {
   const [leftRoundTime, setLeftRoundTime] = useState(convertMsecToSecond(timeLimit));
   const [barWidthPercent, setBarWidthPercent] = useState(INITIAL_WIDTH);
 
@@ -24,13 +25,13 @@ const useTimer = ({ timeLimit, isSelectedOption, vote }: UseTimerProps) => {
 
   useEffect(() => {
     if (isVoteTimeout) {
-      if (isSelectedOption) {
+      if (isSelectedOption && !isVoted) {
         vote();
       }
 
       clearInterval(timeout.current);
     }
-  }, [isVoteTimeout, isSelectedOption, vote]);
+  }, [isVoteTimeout, isSelectedOption, isVoted, vote]);
 
   useEffect(() => {
     const timeLimitPerSecond = convertMsecToSecond(timeLimit);
diff --git a/frontend/src/components/SelectContainer/Timer/hooks/useVoteTimer.ts b/frontend/src/components/SelectContainer/Timer/hooks/useVoteTimer.ts
index 599dff6c7..96c94fbcc 100644
--- a/frontend/src/components/SelectContainer/Timer/hooks/useVoteTimer.ts
+++ b/frontend/src/components/SelectContainer/Timer/hooks/useVoteTimer.ts
@@ -8,11 +8,18 @@ const DEFAULT_TIME_LIMIT_MSEC = 10000;
 interface UseVoteTimerProps {
   roomId: number;
   selectedId: number;
+  isVoted: boolean;
   completeSelection: () => void;
   showModal: () => void;
 }
 
-const useVoteTimer = ({ roomId, selectedId, completeSelection, showModal }: UseVoteTimerProps) => {
+const useVoteTimer = ({
+  roomId,
+  selectedId,
+  isVoted,
+  completeSelection,
+  showModal,
+}: UseVoteTimerProps) => {
   const { balanceContent } = useBalanceContentQuery(roomId);
   const timeLimit = balanceContent.timeLimit || DEFAULT_TIME_LIMIT_MSEC;
 
@@ -26,6 +33,7 @@ const useVoteTimer = ({ roomId, selectedId, completeSelection, showModal }: UseV
   const { leftRoundTime, barWidthPercent, isAlmostFinished } = useTimer({
     timeLimit,
     isSelectedOption: Boolean(selectedId),
+    isVoted,
     vote,
   });
 

From b127e40dace86a0da95537a2c557b164d90aba31 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Thu, 19 Sep 2024 21:13:36 +0900
Subject: [PATCH 21/21] =?UTF-8?q?test:=20=ED=83=80=EC=9D=B4=EB=A8=B8?=
 =?UTF-8?q?=EA=B0=80=20=EC=A2=85=EB=A3=8C=EB=90=98=EC=97=88=EC=9D=84=20?=
 =?UTF-8?q?=EB=95=8C=20=EC=9D=B4=EB=AF=B8=20=ED=88=AC=ED=91=9C=EB=A5=BC=20?=
 =?UTF-8?q?=ED=96=88=EB=8B=A4=EB=A9=B4=20=EB=98=90=20=ED=88=AC=ED=91=9C?=
 =?UTF-8?q?=EB=A5=BC=20=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?#261?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SelectContainer/Timer/Timer.test.tsx          | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/components/SelectContainer/Timer/Timer.test.tsx b/frontend/src/components/SelectContainer/Timer/Timer.test.tsx
index 06c37cfc4..0e8affc6e 100644
--- a/frontend/src/components/SelectContainer/Timer/Timer.test.tsx
+++ b/frontend/src/components/SelectContainer/Timer/Timer.test.tsx
@@ -39,6 +39,21 @@ describe('Timer 테스트', () => {
       expect(result.current.leftRoundTime).toBe(0);
       expect(voteMock).toHaveBeenCalled();
     });
+    it('타이머가 종료되었을 때 이미 투표를 했다면 또 투표를 하지 않는다.', () => {
+      const isSelectedOption = true;
+      const isVoted = true;
+
+      const { result } = renderHook(() =>
+        useTimer({ timeLimit, isSelectedOption, isVoted, vote: voteMock }),
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(timeLimit);
+      });
+
+      expect(result.current.leftRoundTime).toBe(0);
+      expect(voteMock).not.toHaveBeenCalled();
+    });
     it('타이머가 종료되었을 때 선택된 옵션이 없다면 투표되지 않고 기권한다.', () => {
       const isSelectedOption = false;
       const isVoted = false;