[FIX] 방장이 아닌 사용자가 카운트다운 후 게임 시작 안되는 오류 해결

frontend/src/components/StartButtonContainer/StartButton/StartButton.tsx

@@ -4,11 +4,10 @@ import Button from '@/components/common/Button/Button';
 
 interface StartButtonProps {
   show: () => void;
-  startCountdown: () => void;
 }
 
-const StartButton = ({ show, startCountdown }: StartButtonProps) => {
-  const { memberInfo, handleGameStart } = useGameStart({ showModal: show, startCountdown });
+const StartButton = ({ show }: StartButtonProps) => {
+  const { memberInfo, handleGameStart } = useGameStart({ showModal: show });
 
   return (
     <Button

frontend/src/components/StartButtonContainer/StartButton/hooks/useGameStart.ts

@@ -11,10 +11,9 @@ const isServerError = (status: number) => status >= 500 && status !== 555;
 
 interface UseGameStartProps {
   showModal: () => void;
-  startCountdown: () => void;
 }
 
-export const useGameStart = ({ showModal, startCountdown }: UseGameStartProps) => {
+export const useGameStart = ({ showModal }: UseGameStartProps) => {
   const [memberInfo, setMemberInfo] = useRecoilState(memberInfoState);
   const { roomId } = useParams();
   const { show } = useToast();
@@ -36,7 +35,6 @@ export const useGameStart = ({ showModal, startCountdown }: UseGameStartProps) =
   const handleGameStart = () => {
     if (memberInfo.isMaster) {
       startGameMutation.mutate();
-      startCountdown();
     }
   };
 

frontend/src/components/StartButtonContainer/StartButtonContainer.tsx

@@ -3,16 +3,18 @@ import useCountdown from './hooks/useCountdown';
 import StartButton from './StartButton/StartButton';
 import AlertModal from '../common/AlertModal/AlertModal';
 
+import { useGetRoomInfo } from '@/hooks/useGetRoomInfo';
 import useModal from '@/hooks/useModal';
 
 const StartButtonContainer = () => {
   const { isOpen, show, close } = useModal();
-  const { isCountdownStart, startCountdown, goToGame } = useCountdown();
+  const { isGameStart } = useGetRoomInfo();
+  const { isCountdownStart, goToGame } = useCountdown({ isGameStart });
 
   return (
     <>
       {isCountdownStart && <Countdown goToGame={goToGame} />}
-      <StartButton show={show} startCountdown={startCountdown} />
+      <StartButton show={show} />
       <AlertModal
         isOpen={isOpen}
         onClose={close}

frontend/src/components/StartButtonContainer/hooks/useCountdown.ts

@@ -1,9 +1,13 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { ROUTES } from '@/constants/routes';
 
-const useCountdown = () => {
+interface UseCountdownProps {
+  isGameStart: boolean;
+}
+
+const useCountdown = ({ isGameStart }: UseCountdownProps) => {
   const navigate = useNavigate();
   const { roomId } = useParams();
   const [isCountdownStart, setIsCountdownStart] = useState(false);
@@ -16,7 +20,13 @@ const useCountdown = () => {
     navigate(ROUTES.game(Number(roomId)));
   };
 
-  return { isCountdownStart, startCountdown, goToGame };
+  useEffect(() => {
+    if (isGameStart) {
+      startCountdown();
+    }
+  }, [isGameStart]);
+
+  return { isCountdownStart, goToGame };
 };
 
 export default useCountdown;

frontend/src/hooks/useGetRoomInfo.ts

@@ -25,5 +25,6 @@ export const useGetRoomInfo = () => {
     members: data?.members,
     roomSetting: data?.roomSetting,
     master: data?.master,
+    isGameStart: data?.isGameStart,
   };
 };