[REFACTOR] 게임화면에서 선택 버튼을 누르지 않아도 옵션이 선택되도록 리팩토링

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>

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();

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')};

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`

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`

frontend/src/components/SelectContainer/SelectContainer.tsx

@@ -1,7 +1,8 @@
 import { useParams } from 'react-router-dom';
 
-import { useRoundIsFinished, useSelectOption } from './SelectContainer.hook';
+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';
 
@@ -11,17 +12,17 @@ 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
+        selectedId={selectedOption.id}
+        completeSelection={completeSelection}
+        showModal={show}
+      />
       <section css={selectSection}>
         <SelectOption
           option={balanceContent.firstOption}
@@ -36,6 +37,7 @@ const SelectContainer = () => {
         />
       </section>
       <SelectButton
+        contentId={balanceContent.contentId}
         selectedId={selectedOption.id}
         completeSelection={completeSelection}
         showModal={show}

frontend/src/components/Timer/Timer.styled.ts → frontend/src/components/SelectContainer/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;

frontend/src/components/SelectContainer/Timer/Timer.test.tsx

@@ -0,0 +1,56 @@
+import { act, renderHook } from '@testing-library/react';
+
+import useTimer from './hooks/useTimer';
+import { convertMsecToSecond, formatLeftRoundTime } from './Timer.util';
+
+describe('Timer 테스트', () => {
+  describe('formatTimer 유틸 함수 테스트', () => {
+    it('30초의 제한시간을 입력받으면 00:30 으로 포맷팅한 string값을 반환한다.', () => {
+      const formattedTimer = formatLeftRoundTime(30);
+
+      expect(formattedTimer).toBe('00:30');
+    });
+
+    it('10000 밀리초의 제한시간을 입력받으면 10초를 number 타입으로 반환한다.', () => {
+      const convertedTime = convertMsecToSecond(10000);
+
+      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();
+    });
+  });
+});

frontend/src/components/Timer/Timer.tsx → frontend/src/components/SelectContainer/Timer/Timer.tsx

@@ -1,6 +1,6 @@
 import { useParams } from 'react-router-dom';
 
-import useRoundTimer from './Timer.hook';
+import useVoteTimer from './hooks/useVoteTimer';
 import {
   timerIcon,
   timerIconShake,
@@ -10,12 +10,31 @@ import {
   timerWrapper,
 } from './Timer.styled';
 import { formatLeftRoundTime } from './Timer.util';
+import useVoteIsFinished from '../hooks/useVoteIsFinished';
 
 import DdangkongTimer from '@/assets/images/ddangkongTimer.png';
+import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
-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 { balanceContent, isFetching } = useBalanceContentQuery(Number(roomId));
+  const { barWidthPercent, leftRoundTime, isAlmostFinished } = useVoteTimer({
+    roomId: Number(roomId),
+    selectedId,
+    completeSelection,
+    showModal,
+  });
+
+  useVoteIsFinished({
+    contentId: balanceContent.contentId,
+    isFetching,
+  });
 
   return (
     <section css={timerLayout}>

frontend/src/components/Timer/Timer.hook.ts → frontend/src/components/SelectContainer/Timer/hooks/useTimer.ts

@@ -1,29 +1,35 @@
 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';
 
 const INITIAL_WIDTH = 100;
-const DEFAULT_TIME_LIMIT_MSEC = 10000;
 const ALMOST_FINISH_SECOND = 5;
 
-const useRoundTimer = (roomId: number) => {
-  const { balanceContent } = useBalanceContentQuery(roomId);
-  const timeLimit = balanceContent.timeLimit || DEFAULT_TIME_LIMIT_MSEC;
+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 (leftRoundTime <= 0) {
+    if (isVoteTimeout) {
+      if (isSelectedOption) {
+        vote();
+      }
       clearInterval(timeout.current);
     }
-  }, [leftRoundTime]);
+  }, [isVoteTimeout]);
 
   useEffect(() => {
     const DECREASE_RATE = INITIAL_WIDTH / convertMsecToSecond(timeLimit);
@@ -37,9 +43,9 @@ const useRoundTimer = (roomId: number) => {
     return () => {
       clearInterval(timeout.current);
     };
-  }, [balanceContent, timeLimit]);
+  }, [timeLimit]);
 
   return { leftRoundTime, barWidthPercent, isAlmostFinished };
 };
 
-export default useRoundTimer;
+export default useTimer;

frontend/src/components/SelectContainer/Timer/hooks/useVoteTimer.ts

@@ -0,0 +1,35 @@
+import useTimer from './useTimer';
+
+import useCompleteSelectionMutation from '@/components/common/SelectButton/SelectButton.hook';
+import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
+
+const DEFAULT_TIME_LIMIT_MSEC = 10000;
+
+interface UseVoteTimerProps {
+  roomId: number;
+  selectedId: number;
+  completeSelection: () => void;
+  showModal: () => void;
+}
+
+const useVoteTimer = ({ roomId, selectedId, completeSelection, showModal }: UseVoteTimerProps) => {
+  const { balanceContent } = useBalanceContentQuery(roomId);
+  const timeLimit = balanceContent.timeLimit || DEFAULT_TIME_LIMIT_MSEC;
+
+  const { mutate: vote } = useCompleteSelectionMutation({
+    selectedId,
+    contentId: balanceContent.contentId,
+    completeSelection,
+    showModal,
+  });
+
+  const { leftRoundTime, barWidthPercent, isAlmostFinished } = useTimer({
+    timeLimit,
+    isSelectedOption: Boolean(selectedId),
+    vote,
+  });
+
+  return { leftRoundTime, barWidthPercent, isAlmostFinished };
+};
+
+export default useVoteTimer;