From 72b7be9d7c1bfcf838a20abd6d16b9013731123a Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Mon, 18 Nov 2024 17:00:21 +0900
Subject: [PATCH 01/11] =?UTF-8?q?refactor:=20=EB=B0=A9=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=EB=B0=8F=20=EB=B0=A9=20=EC=B0=B8=EC=97=AC=20API=20?=
 =?UTF-8?q?=ED=98=B8=EC=B6=9C=EC=97=90=20=EC=93=B0=EB=A1=9C=ED=8B=80?=
 =?UTF-8?q?=EB=A7=81=EC=9D=84=20=EA=B1=B8=EC=96=B4=20=EC=A4=91=EB=B3=B5=20?=
 =?UTF-8?q?=ED=98=B8=EC=B6=9C=20=EB=B0=A9=EC=A7=80=20#401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useThrottle.ts             | 19 +++++++++++++++++++
 .../NicknamePage/hooks/useMakeOrEnterRoom.ts  | 14 ++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/hooks/useThrottle.ts

diff --git a/frontend/src/hooks/useThrottle.ts b/frontend/src/hooks/useThrottle.ts
new file mode 100644
index 00000000..36c44317
--- /dev/null
+++ b/frontend/src/hooks/useThrottle.ts
@@ -0,0 +1,19 @@
+import { useRef } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const useThrottle = (func: (...args: any[]) => void, delay = 1000) => {
+  const isThrottle = useRef(false);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (...args: any[]) => {
+    if (!isThrottle.current) {
+      func(...args);
+      isThrottle.current = true;
+      setTimeout(() => {
+        isThrottle.current = false;
+      }, delay);
+    }
+  };
+};
+
+export default useThrottle;
diff --git a/frontend/src/pages/NicknamePage/hooks/useMakeOrEnterRoom.ts b/frontend/src/pages/NicknamePage/hooks/useMakeOrEnterRoom.ts
index 93ce8405..4a319243 100644
--- a/frontend/src/pages/NicknamePage/hooks/useMakeOrEnterRoom.ts
+++ b/frontend/src/pages/NicknamePage/hooks/useMakeOrEnterRoom.ts
@@ -4,6 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import { enterRoom, createRoom } from '@/apis/room';
 import { ROUTES } from '@/constants/routes';
+import useThrottle from '@/hooks/useThrottle';
 import { CreateOrEnterRoomResponse } from '@/types/room';
 import { CustomError } from '@/utils/error';
 
@@ -22,6 +23,8 @@ const useMakeOrEnterRoom = () => {
     },
   });
 
+  const throttledCreateRoom = useThrottle(createRoomMutation.mutate);
+
   const enterRoomMutation = useMutation<
     CreateOrEnterRoomResponse,
     CustomError,
@@ -33,12 +36,19 @@ const useMakeOrEnterRoom = () => {
     },
   });
 
+  const throttledEnterRoom = useThrottle(enterRoomMutation.mutate);
+
   const handleMakeOrEnterRoom = () => {
     const nickname = nicknameInputRef.current?.value || nicknameInputRef.current?.placeholder || '';
+
     if (isMaster) {
-      createRoomMutation.mutate(nickname);
+      if (createRoomMutation.isPending) return;
+
+      throttledCreateRoom(nickname);
     } else {
-      enterRoomMutation.mutate({ nickname, roomUuid: roomUuid || '' });
+      if (enterRoomMutation.isPending) return;
+
+      throttledEnterRoom({ nickname, roomUuid: roomUuid || '' });
     }
   };
 

From 7ec61ae87c93e5ab9525a45f394480f662f7b76e Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Mon, 18 Nov 2024 17:45:31 +0900
Subject: [PATCH 02/11] =?UTF-8?q?refactor:=20=EB=B0=A9=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=EA=B3=BC=20=EB=B0=A9=20=EC=B0=B8=EC=97=AC=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EB=B6=84=EB=A6=AC=20#401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/NicknamePage/NicknamePage.tsx   |  8 +--
 .../NicknameInput/NicknameInput.tsx           |  6 +-
 .../NicknameInput/hooks/useNicknameInput.ts   |  6 +-
 .../hooks/useCreateOrEnterRoom.ts             | 32 ++++++++++
 .../pages/NicknamePage/hooks/useCreateRoom.ts | 37 +++++++++++
 .../pages/NicknamePage/hooks/useEnterRoom.ts  | 42 +++++++++++++
 .../NicknamePage/hooks/useMakeOrEnterRoom.ts  | 62 -------------------
 7 files changed, 121 insertions(+), 72 deletions(-)
 create mode 100644 frontend/src/pages/NicknamePage/hooks/useCreateOrEnterRoom.ts
 create mode 100644 frontend/src/pages/NicknamePage/hooks/useCreateRoom.ts
 create mode 100644 frontend/src/pages/NicknamePage/hooks/useEnterRoom.ts
 delete mode 100644 frontend/src/pages/NicknamePage/hooks/useMakeOrEnterRoom.ts

diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx
index 99098053..a864df80 100644
--- a/frontend/src/pages/NicknamePage/NicknamePage.tsx
+++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import NicknameInput from './components/NicknameInput/NicknameInput';
-import useMakeOrEnterRoom from './hooks/useMakeOrEnterRoom';
+import useCreateOrEnterRoom from './hooks/useCreateOrEnterRoom';
 import {
   profileWrapper,
   profileImg,
@@ -21,7 +21,7 @@ import Content from '@/components/layout/Content/Content';
 import useButtonHeightOnKeyboard from '@/hooks/useButtonHeightOnKeyboard';
 
 const NicknamePage = () => {
-  const { nicknameInputRef, handleMakeOrEnterRoom, isLoading } = useMakeOrEnterRoom();
+  const { nicknameInputRef, handleCreateOrEnterRoom, isLoading } = useCreateOrEnterRoom();
   const { roomUuid } = useParams();
   const { bottomButtonHeight } = useButtonHeightOnKeyboard();
 
@@ -58,10 +58,10 @@ const NicknamePage = () => {
       <div css={nicknameContainer}>
         <NicknameInput
           nicknameInputRef={nicknameInputRef}
-          handleMakeOrEnterRoom={handleMakeOrEnterRoom}
+          handleCreateOrEnterRoom={handleCreateOrEnterRoom}
         />
         <Button
-          onClick={handleMakeOrEnterRoom}
+          onClick={handleCreateOrEnterRoom}
           disabled={isLoading}
           text={isLoading ? '접속 중...' : '확인'}
           style={{ width: '100%', bottom: bottomButtonHeight }}
diff --git a/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx b/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx
index fd39f550..01a7566a 100644
--- a/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx
+++ b/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx
@@ -9,13 +9,13 @@ import { NICKNAME_MIN_LENGTH, NICKNAME_MAX_LENGTH } from '@/constants/config';
 
 interface NicknameInputProps {
   nicknameInputRef: RefObject<HTMLInputElement>;
-  handleMakeOrEnterRoom: () => void;
+  handleCreateOrEnterRoom: () => void;
 }
 const randomNickname = createRandomNickname();
 
-const NicknameInput = ({ nicknameInputRef, handleMakeOrEnterRoom }: NicknameInputProps) => {
+const NicknameInput = ({ nicknameInputRef, handleCreateOrEnterRoom }: NicknameInputProps) => {
   const { nickname, handleChangeInput, handleKeyDown } = useNicknameInput({
-    handleMakeOrEnterRoom,
+    handleCreateOrEnterRoom,
   });
 
   const [statusMessage, setStatusMessage] = useState('');
diff --git a/frontend/src/pages/NicknamePage/components/NicknameInput/hooks/useNicknameInput.ts b/frontend/src/pages/NicknamePage/components/NicknameInput/hooks/useNicknameInput.ts
index 587a7309..43568767 100644
--- a/frontend/src/pages/NicknamePage/components/NicknameInput/hooks/useNicknameInput.ts
+++ b/frontend/src/pages/NicknamePage/components/NicknameInput/hooks/useNicknameInput.ts
@@ -3,10 +3,10 @@ import { ChangeEvent, useState } from 'react';
 import { NICKNAME_MAX_LENGTH } from '@/constants/config';
 
 interface UseNicknameInputProps {
-  handleMakeOrEnterRoom: () => void;
+  handleCreateOrEnterRoom: () => void;
 }
 
-const useNicknameInput = ({ handleMakeOrEnterRoom }: UseNicknameInputProps) => {
+const useNicknameInput = ({ handleCreateOrEnterRoom }: UseNicknameInputProps) => {
   const [nickname, setNickname] = useState('');
 
   const handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
@@ -17,7 +17,7 @@ const useNicknameInput = ({ handleMakeOrEnterRoom }: UseNicknameInputProps) => {
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
-      handleMakeOrEnterRoom();
+      handleCreateOrEnterRoom();
     }
   };
 
diff --git a/frontend/src/pages/NicknamePage/hooks/useCreateOrEnterRoom.ts b/frontend/src/pages/NicknamePage/hooks/useCreateOrEnterRoom.ts
new file mode 100644
index 00000000..cb3363bc
--- /dev/null
+++ b/frontend/src/pages/NicknamePage/hooks/useCreateOrEnterRoom.ts
@@ -0,0 +1,32 @@
+import { useRef } from 'react';
+import { useParams } from 'react-router-dom';
+
+import useCreateRoom from './useCreateRoom';
+import useEnterRoom from './useEnterRoom';
+
+const useCreateOrEnterRoom = () => {
+  const nicknameInputRef = useRef<HTMLInputElement>(null);
+  const { roomUuid } = useParams();
+
+  // roomUuId가 없다 -> 초대링크를 받지 않은 master이다.
+  const isMaster = !roomUuid;
+
+  const { createRoomMutation, handleCreateRoom } = useCreateRoom({ nicknameInputRef });
+  const { enterRoomMutation, handleEnterRoom } = useEnterRoom({ nicknameInputRef });
+
+  const handleCreateOrEnterRoom = () => {
+    if (isMaster) {
+      handleCreateRoom();
+    } else {
+      handleEnterRoom();
+    }
+  };
+
+  return {
+    nicknameInputRef,
+    handleCreateOrEnterRoom,
+    isLoading: isMaster ? createRoomMutation.isPending : enterRoomMutation.isPending,
+  };
+};
+
+export default useCreateOrEnterRoom;
diff --git a/frontend/src/pages/NicknamePage/hooks/useCreateRoom.ts b/frontend/src/pages/NicknamePage/hooks/useCreateRoom.ts
new file mode 100644
index 00000000..18083b3b
--- /dev/null
+++ b/frontend/src/pages/NicknamePage/hooks/useCreateRoom.ts
@@ -0,0 +1,37 @@
+import { useMutation } from '@tanstack/react-query';
+import { RefObject } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { createRoom } from '@/apis/room';
+import { ROUTES } from '@/constants/routes';
+import useThrottle from '@/hooks/useThrottle';
+import { CreateOrEnterRoomResponse } from '@/types/room';
+import { CustomError } from '@/utils/error';
+
+interface useCreateRoomProps {
+  nicknameInputRef: RefObject<HTMLInputElement>;
+}
+
+const useCreateRoom = ({ nicknameInputRef }: useCreateRoomProps) => {
+  const navigate = useNavigate();
+
+  const createRoomMutation = useMutation<CreateOrEnterRoomResponse, CustomError, string>({
+    mutationFn: createRoom,
+    onSuccess: (data) => {
+      navigate(ROUTES.ready(Number(data.roomId)), { replace: true });
+    },
+  });
+
+  const throttledCreateRoom = useThrottle(createRoomMutation.mutate);
+
+  const handleCreateRoom = () => {
+    if (createRoomMutation.isPending) return;
+
+    const nickname = nicknameInputRef.current?.value || nicknameInputRef.current?.placeholder || '';
+    throttledCreateRoom(nickname);
+  };
+
+  return { createRoomMutation, handleCreateRoom };
+};
+
+export default useCreateRoom;
diff --git a/frontend/src/pages/NicknamePage/hooks/useEnterRoom.ts b/frontend/src/pages/NicknamePage/hooks/useEnterRoom.ts
new file mode 100644
index 00000000..39cc49cc
--- /dev/null
+++ b/frontend/src/pages/NicknamePage/hooks/useEnterRoom.ts
@@ -0,0 +1,42 @@
+import { useMutation } from '@tanstack/react-query';
+import { RefObject } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { enterRoom } from '@/apis/room';
+import { ROUTES } from '@/constants/routes';
+import useThrottle from '@/hooks/useThrottle';
+import { CreateOrEnterRoomResponse } from '@/types/room';
+import { CustomError } from '@/utils/error';
+
+interface useCreateRoomProps {
+  nicknameInputRef: RefObject<HTMLInputElement>;
+}
+
+const useEnterRoom = ({ nicknameInputRef }: useCreateRoomProps) => {
+  const navigate = useNavigate();
+  const { roomUuid } = useParams();
+
+  const enterRoomMutation = useMutation<
+    CreateOrEnterRoomResponse,
+    CustomError,
+    { nickname: string; roomUuid: string }
+  >({
+    mutationFn: ({ nickname, roomUuid }) => enterRoom(roomUuid, nickname),
+    onSuccess: (data) => {
+      navigate(ROUTES.ready(Number(data.roomId)), { replace: true });
+    },
+  });
+
+  const throttledEnterRoom = useThrottle(enterRoomMutation.mutate);
+
+  const handleEnterRoom = () => {
+    if (enterRoomMutation.isPending) return;
+
+    const nickname = nicknameInputRef.current?.value || nicknameInputRef.current?.placeholder || '';
+    throttledEnterRoom({ nickname, roomUuid: roomUuid || '' });
+  };
+
+  return { enterRoomMutation, handleEnterRoom };
+};
+
+export default useEnterRoom;
diff --git a/frontend/src/pages/NicknamePage/hooks/useMakeOrEnterRoom.ts b/frontend/src/pages/NicknamePage/hooks/useMakeOrEnterRoom.ts
deleted file mode 100644
index 4a319243..00000000
--- a/frontend/src/pages/NicknamePage/hooks/useMakeOrEnterRoom.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import { useRef } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-
-import { enterRoom, createRoom } from '@/apis/room';
-import { ROUTES } from '@/constants/routes';
-import useThrottle from '@/hooks/useThrottle';
-import { CreateOrEnterRoomResponse } from '@/types/room';
-import { CustomError } from '@/utils/error';
-
-const useMakeOrEnterRoom = () => {
-  const nicknameInputRef = useRef<HTMLInputElement>(null);
-  const navigate = useNavigate();
-  const { roomUuid } = useParams();
-
-  // roomUuId가 없다 -> 초대링크를 받지 않은 master이다.
-  const isMaster = !roomUuid;
-
-  const createRoomMutation = useMutation<CreateOrEnterRoomResponse, CustomError, string>({
-    mutationFn: createRoom,
-    onSuccess: (data) => {
-      navigate(ROUTES.ready(Number(data.roomId)), { replace: true });
-    },
-  });
-
-  const throttledCreateRoom = useThrottle(createRoomMutation.mutate);
-
-  const enterRoomMutation = useMutation<
-    CreateOrEnterRoomResponse,
-    CustomError,
-    { nickname: string; roomUuid: string }
-  >({
-    mutationFn: ({ nickname, roomUuid }) => enterRoom(roomUuid, nickname),
-    onSuccess: (data) => {
-      navigate(ROUTES.ready(Number(data.roomId)), { replace: true });
-    },
-  });
-
-  const throttledEnterRoom = useThrottle(enterRoomMutation.mutate);
-
-  const handleMakeOrEnterRoom = () => {
-    const nickname = nicknameInputRef.current?.value || nicknameInputRef.current?.placeholder || '';
-
-    if (isMaster) {
-      if (createRoomMutation.isPending) return;
-
-      throttledCreateRoom(nickname);
-    } else {
-      if (enterRoomMutation.isPending) return;
-
-      throttledEnterRoom({ nickname, roomUuid: roomUuid || '' });
-    }
-  };
-
-  return {
-    nicknameInputRef,
-    handleMakeOrEnterRoom,
-    isLoading: isMaster ? createRoomMutation.isPending : enterRoomMutation.isPending,
-  };
-};
-
-export default useMakeOrEnterRoom;

From a60984f5b8f4ef3b9b6570b178dc0ef2108e7d40 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Mon, 18 Nov 2024 17:56:18 +0900
Subject: [PATCH 03/11] =?UTF-8?q?refactor:=20=EB=B0=A9=20=EC=B0=B8?=
 =?UTF-8?q?=EC=97=AC=20=EA=B0=80=EB=8A=A5=20=EC=97=AC=EB=B6=80=20=ED=8C=90?=
 =?UTF-8?q?=EB=8B=A8=20Query=20=EB=B6=84=EB=A6=AC=20#401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/constants/queryKeys.ts           |  1 +
 .../src/pages/NicknamePage/NicknamePage.tsx   | 14 ++++-------
 .../hooks/useIsJoinableRoomQuery.ts           | 23 +++++++++++++++++++
 3 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/pages/NicknamePage/hooks/useIsJoinableRoomQuery.ts

diff --git a/frontend/src/constants/queryKeys.ts b/frontend/src/constants/queryKeys.ts
index fe05a920..90d97f3e 100644
--- a/frontend/src/constants/queryKeys.ts
+++ b/frontend/src/constants/queryKeys.ts
@@ -8,4 +8,5 @@ export const QUERY_KEYS = {
   isRoomInitial: 'isRoomInitial',
   categoryList: 'categoryList',
   getUserInfo: 'getUserInfo',
+  isJoinable: 'isJoinable',
 } as const;
diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx
index a864df80..1f472988 100644
--- a/frontend/src/pages/NicknamePage/NicknamePage.tsx
+++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx
@@ -1,9 +1,9 @@
-import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import NicknameInput from './components/NicknameInput/NicknameInput';
 import useCreateOrEnterRoom from './hooks/useCreateOrEnterRoom';
+import useIsJoinableRoomQuery from './hooks/useIsJoinableRoomQuery';
 import {
   profileWrapper,
   profileImg,
@@ -13,7 +13,6 @@ import {
   nicknameContainer,
 } from './NicknamePage.styled';
 
-import { isJoinableRoom } from '@/apis/room';
 import AngryDdangkong from '@/assets/images/angryDdangkong.webp';
 import SillyDdangkong from '@/assets/images/sillyDdangkong.webp';
 import Button from '@/components/common/Button/Button';
@@ -21,16 +20,11 @@ import Content from '@/components/layout/Content/Content';
 import useButtonHeightOnKeyboard from '@/hooks/useButtonHeightOnKeyboard';
 
 const NicknamePage = () => {
-  const { nicknameInputRef, handleCreateOrEnterRoom, isLoading } = useCreateOrEnterRoom();
   const { roomUuid } = useParams();
+  const { nicknameInputRef, handleCreateOrEnterRoom, isLoading } = useCreateOrEnterRoom();
+  const { isJoinable, isPending: isJoinableLoading } = useIsJoinableRoomQuery({ roomUuid });
   const { bottomButtonHeight } = useButtonHeightOnKeyboard();
 
-  const { data, isLoading: isJoinableLoading } = useQuery({
-    queryKey: ['isJoinable', roomUuid],
-    queryFn: async () => isJoinableRoom(roomUuid || ''),
-    enabled: !!roomUuid,
-  });
-
   const goToHome = () => {
     window.location.href = '/';
   };
@@ -41,7 +35,7 @@ const NicknamePage = () => {
     }
   }, [roomUuid, nicknameInputRef]);
 
-  if (!isJoinableLoading && roomUuid && !data?.isJoinable)
+  if (!isJoinableLoading && roomUuid && isJoinable)
     return (
       <div css={noVoteTextContainer}>
         <img src={AngryDdangkong} alt="화난 땅콩" css={angryImage} />
diff --git a/frontend/src/pages/NicknamePage/hooks/useIsJoinableRoomQuery.ts b/frontend/src/pages/NicknamePage/hooks/useIsJoinableRoomQuery.ts
new file mode 100644
index 00000000..cd5e78fd
--- /dev/null
+++ b/frontend/src/pages/NicknamePage/hooks/useIsJoinableRoomQuery.ts
@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { isJoinableRoom } from '@/apis/room';
+import { QUERY_KEYS } from '@/constants/queryKeys';
+
+interface useIsJoinableRoomQueryProps {
+  roomUuid?: string;
+}
+
+const useIsJoinableRoomQuery = ({ roomUuid }: useIsJoinableRoomQueryProps) => {
+  const isJoinableRoomQuery = useQuery({
+    queryKey: [QUERY_KEYS.isJoinable, roomUuid],
+    queryFn: async () => isJoinableRoom(roomUuid || ''),
+    enabled: !!roomUuid,
+  });
+
+  return {
+    ...isJoinableRoomQuery,
+    isJoinable: isJoinableRoomQuery.data,
+  };
+};
+
+export default useIsJoinableRoomQuery;

From e5ca4bb3087051611138409f4088fb08112d32ca Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Mon, 18 Nov 2024 19:54:57 +0900
Subject: [PATCH 04/11] =?UTF-8?q?refactor:=20=EB=B0=A9=EC=97=90=20?=
 =?UTF-8?q?=EC=B0=B8=EC=97=AC=ED=95=A0=20=EC=88=98=20=EC=97=86=EC=9D=84=20?=
 =?UTF-8?q?=EB=95=8C=20=EC=97=90=EB=9F=AC=EB=A5=BC=20=EB=8D=98=EC=A0=B8=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=8F=B4=EB=B0=B1=20UI=EB=A1=9C=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20#401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/constants/message.ts             |  7 +++---
 .../src/pages/NicknamePage/NicknamePage.tsx   | 24 ++-----------------
 .../hooks/useIsJoinableRoomQuery.ts           |  6 +++++
 frontend/src/types/error.ts                   |  3 ++-
 frontend/src/utils/error.ts                   |  4 ++--
 5 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/frontend/src/constants/message.ts b/frontend/src/constants/message.ts
index 74f8d592..7a7f9f75 100644
--- a/frontend/src/constants/message.ts
+++ b/frontend/src/constants/message.ts
@@ -2,10 +2,11 @@ import { ErrorCode } from '@/types/error';
 
 export const ERROR_MESSAGE: Record<ErrorCode, string> = {
   // 방 관련 에러 (room)
-  NOT_READY_ROOM: '해당 방의 게임이 이미 시작되었어요. 게임이 끝날 때까지 기다려볼까요?', // 게임 시작된 방에 참가 요청할 때
+  NOT_READY_ROOM: '이미 게임이 시작되었어요. 게임이 끝날 때까지 기다려볼까요?', // 게임 시작된 방에 참가 요청할 때
   NOT_PROGRESSED_ROOM: '이미 게임이 종료되었어요. 최종 결과를 확인해볼까요?', // FIXME: 방장이 최종 결과 화면으로 넘어갔는데, 화면 안보고 있었으면 투표 화면에 갇힘
-  NOT_FINISHED_ROOM: '해당 방의 게임이 아직 종료되지 않았어요.',
-  NOT_FOUND_ROOM: '해당 방을 찾을 수 없어요. 방을 새로 만들어주세요!', // 없는 방 또는 모두 나간 방에 참여를 요청할 때
+  NOT_FINISHED_ROOM: '게임이 아직 종료되지 않았어요. 게임이 끝날 때까지 기다려볼까요?',
+  NOT_FOUND_ROOM: '방을 찾을 수 없어요. 방을 새로 만들어주세요!', // 없는 방 또는 모두 나간 방에 참여를 요청할 때
+  CAN_NOT_JOIN_ROOM: '방에 참여할 수 없어요. 방의 진행 상태를 확인해주세요!', // 게임이 대기 상태가 아닐 때 or 잘못된 링크로 접속했을 때
 
   // 유저 관련 에러 (master)
   INVALID_NICKNAME: '닉네임은 최소 1글자 이상 최대 12글자 이하여야 합니다.',
diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx
index 1f472988..1f5d00d9 100644
--- a/frontend/src/pages/NicknamePage/NicknamePage.tsx
+++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx
@@ -4,16 +4,8 @@ import { useParams } from 'react-router-dom';
 import NicknameInput from './components/NicknameInput/NicknameInput';
 import useCreateOrEnterRoom from './hooks/useCreateOrEnterRoom';
 import useIsJoinableRoomQuery from './hooks/useIsJoinableRoomQuery';
-import {
-  profileWrapper,
-  profileImg,
-  noVoteTextContainer,
-  noVoteText,
-  angryImage,
-  nicknameContainer,
-} from './NicknamePage.styled';
+import { profileWrapper, profileImg, nicknameContainer } from './NicknamePage.styled';
 
-import AngryDdangkong from '@/assets/images/angryDdangkong.webp';
 import SillyDdangkong from '@/assets/images/sillyDdangkong.webp';
 import Button from '@/components/common/Button/Button';
 import Content from '@/components/layout/Content/Content';
@@ -22,12 +14,9 @@ import useButtonHeightOnKeyboard from '@/hooks/useButtonHeightOnKeyboard';
 const NicknamePage = () => {
   const { roomUuid } = useParams();
   const { nicknameInputRef, handleCreateOrEnterRoom, isLoading } = useCreateOrEnterRoom();
-  const { isJoinable, isPending: isJoinableLoading } = useIsJoinableRoomQuery({ roomUuid });
   const { bottomButtonHeight } = useButtonHeightOnKeyboard();
 
-  const goToHome = () => {
-    window.location.href = '/';
-  };
+  useIsJoinableRoomQuery({ roomUuid });
 
   useEffect(() => {
     if (nicknameInputRef.current) {
@@ -35,15 +24,6 @@ const NicknamePage = () => {
     }
   }, [roomUuid, nicknameInputRef]);
 
-  if (!isJoinableLoading && roomUuid && isJoinable)
-    return (
-      <div css={noVoteTextContainer}>
-        <img src={AngryDdangkong} alt="화난 땅콩" css={angryImage} />
-        <span css={noVoteText}>잘못된 링크에 접속했어요 :{`)`}</span>
-        <Button onClick={goToHome} text="홈으로" size="medium" radius="medium" />
-      </div>
-    );
-
   return (
     <Content>
       <div css={profileWrapper}>
diff --git a/frontend/src/pages/NicknamePage/hooks/useIsJoinableRoomQuery.ts b/frontend/src/pages/NicknamePage/hooks/useIsJoinableRoomQuery.ts
index cd5e78fd..e6b2885d 100644
--- a/frontend/src/pages/NicknamePage/hooks/useIsJoinableRoomQuery.ts
+++ b/frontend/src/pages/NicknamePage/hooks/useIsJoinableRoomQuery.ts
@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { isJoinableRoom } from '@/apis/room';
 import { QUERY_KEYS } from '@/constants/queryKeys';
+import { CustomError } from '@/utils/error';
 
 interface useIsJoinableRoomQueryProps {
   roomUuid?: string;
@@ -11,6 +12,11 @@ const useIsJoinableRoomQuery = ({ roomUuid }: useIsJoinableRoomQueryProps) => {
   const isJoinableRoomQuery = useQuery({
     queryKey: [QUERY_KEYS.isJoinable, roomUuid],
     queryFn: async () => isJoinableRoom(roomUuid || ''),
+    select: ({ isJoinable }) => {
+      if (isJoinable === false) {
+        throw new CustomError({ errorCode: 'CAN_NOT_JOIN_ROOM', status: 400 });
+      }
+    },
     enabled: !!roomUuid,
   });
 
diff --git a/frontend/src/types/error.ts b/frontend/src/types/error.ts
index 18997ab6..7444d412 100644
--- a/frontend/src/types/error.ts
+++ b/frontend/src/types/error.ts
@@ -32,7 +32,8 @@ export type ErrorCode =
   | 'INTERNAL_SERVER_ERROR'
   | 'NOT_FOUND_COOKIE'
   | 'INVALID_COOKIE'
-  | 'INVALID_NICKNAME';
+  | 'INVALID_NICKNAME'
+  | 'CAN_NOT_JOIN_ROOM';
 
 export interface UrlParameterError extends ResponseError {
   errorCode: 'URL_PARAMETER_ERROR';
diff --git a/frontend/src/utils/error.ts b/frontend/src/utils/error.ts
index 0f680436..87e64972 100644
--- a/frontend/src/utils/error.ts
+++ b/frontend/src/utils/error.ts
@@ -3,8 +3,8 @@ import { ErrorCode } from '@/types/error';
 
 interface CustomErrorParams {
   errorCode: ErrorCode;
-  message: string;
   status: number;
+  message?: string;
 }
 
 export class CustomError extends Error {
@@ -14,8 +14,8 @@ export class CustomError extends Error {
   constructor({ errorCode, status }: CustomErrorParams) {
     super();
     this.errorCode = errorCode;
-    this.message = ERROR_MESSAGE[errorCode];
     this.status = status;
+    this.message = ERROR_MESSAGE[errorCode];
   }
 }
 

From 89083c755e9a22ac1af25080480561f04a6ef3ec Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Mon, 18 Nov 2024 20:39:48 +0900
Subject: [PATCH 05/11] =?UTF-8?q?refactor:=20=ED=88=AC=ED=91=9C=20API?=
 =?UTF-8?q?=EC=97=90=20=EC=93=B0=EB=A1=9C=ED=8B=80=EB=A7=81=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=20#401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SelectButton/SelectButton.hook.ts      |  9 +++++++--
 .../GamePage/components/SelectButton/SelectButton.tsx | 11 ++++-------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts
index cb53e714..23585792 100644
--- a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts
+++ b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts
@@ -3,11 +3,12 @@ import { useParams } from 'react-router-dom';
 
 import { voteBalanceContent } from '@/apis/balanceContent';
 import useGetUserInfo from '@/hooks/useGetUserInfo';
+import useThrottle from '@/hooks/useThrottle';
 
 interface UseSelectCompleteMutationProps {
   selectedId: number;
-  contentId?: number;
   completeSelection: () => void;
+  contentId?: number;
 }
 
 const useCompleteSelectionMutation = ({
@@ -20,7 +21,7 @@ const useCompleteSelectionMutation = ({
     member: { memberId },
   } = useGetUserInfo();
 
-  return useMutation({
+  const completeSelectionMutation = useMutation({
     mutationFn: async () => {
       if (typeof contentId === 'undefined') {
         throw new Error('contentId 가 존재하지 않습니다.');
@@ -36,6 +37,10 @@ const useCompleteSelectionMutation = ({
       completeSelection();
     },
   });
+
+  const throttledVote = useThrottle(completeSelectionMutation.mutate);
+
+  return { ...completeSelectionMutation, vote: throttledVote };
 };
 
 export default useCompleteSelectionMutation;
diff --git a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx
index 7c12282c..4f3716cb 100644
--- a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx
+++ b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx
@@ -10,21 +10,18 @@ interface SelectButtonProps {
 }
 
 const SelectButton = ({ contentId, selectedId, completeSelection }: SelectButtonProps) => {
-  const {
-    data,
-    isPending,
-    mutate: vote,
-  } = useCompleteSelectionMutation({
+  const { isSuccess, isPending, vote } = useCompleteSelectionMutation({
     selectedId,
     contentId,
     completeSelection,
   });
+
   return (
     <div css={bottomButtonLayout}>
       <Button
         bottom
-        disabled={data || !selectedId || isPending}
-        text={data || isPending ? '선택 완료' : '선택'}
+        disabled={!selectedId || isSuccess || isPending}
+        text={isSuccess || isPending ? '선택 완료' : '선택'}
         onClick={vote}
       />
     </div>

From c590db6a3a647d7747874ee483b9a28514962484 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Mon, 18 Nov 2024 21:13:42 +0900
Subject: [PATCH 06/11] =?UTF-8?q?refactor:=20=ED=88=AC=ED=91=9C=20API=20?=
 =?UTF-8?q?=EC=9A=94=EC=B2=AD=EC=9D=B4=20=EB=93=A4=EC=96=B4=EC=98=A4?=
 =?UTF-8?q?=EC=9E=90=EB=A7=88=EC=9E=90=20=EC=84=A0=ED=83=9D=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=20=EC=83=81=ED=83=9C=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?#401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../GamePage/components/SelectButton/SelectButton.hook.ts    | 3 ++-
 .../pages/GamePage/components/SelectButton/SelectButton.tsx  | 5 +++--
 .../GamePage/components/SelectContainer/SelectContainer.tsx  | 1 +
 .../components/SelectContainer/Timer/hooks/useVoteTimer.ts   | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts
index 23585792..4682ad7e 100644
--- a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts
+++ b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts
@@ -26,6 +26,7 @@ const useCompleteSelectionMutation = ({
       if (typeof contentId === 'undefined') {
         throw new Error('contentId 가 존재하지 않습니다.');
       }
+
       return await voteBalanceContent({
         roomId: Number(roomId),
         optionId: selectedId,
@@ -33,7 +34,7 @@ const useCompleteSelectionMutation = ({
         memberId: Number(memberId),
       });
     },
-    onSuccess: () => {
+    onMutate: () => {
       completeSelection();
     },
   });
diff --git a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx
index 4f3716cb..d988c87a 100644
--- a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx
+++ b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx
@@ -6,10 +6,11 @@ import { bottomButtonLayout } from '@/components/common/Button/Button.styled';
 interface SelectButtonProps {
   contentId: number;
   selectedId: number;
+  isVoted: boolean;
   completeSelection: () => void;
 }
 
-const SelectButton = ({ contentId, selectedId, completeSelection }: SelectButtonProps) => {
+const SelectButton = ({ contentId, selectedId, isVoted, completeSelection }: SelectButtonProps) => {
   const { isSuccess, isPending, vote } = useCompleteSelectionMutation({
     selectedId,
     contentId,
@@ -20,7 +21,7 @@ const SelectButton = ({ contentId, selectedId, completeSelection }: SelectButton
     <div css={bottomButtonLayout}>
       <Button
         bottom
-        disabled={!selectedId || isSuccess || isPending}
+        disabled={!selectedId || isVoted || isSuccess || isPending}
         text={isSuccess || isPending ? '선택 완료' : '선택'}
         onClick={vote}
       />
diff --git a/frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx b/frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx
index 67f7afe0..c7e7a69a 100644
--- a/frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx
+++ b/frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx
@@ -36,6 +36,7 @@ const SelectContainer = () => {
       <SelectButton
         contentId={balanceContent.contentId}
         selectedId={selectedOption.id}
+        isVoted={selectedOption.isCompleted}
         completeSelection={completeSelection}
       />
     </div>
diff --git a/frontend/src/pages/GamePage/components/SelectContainer/Timer/hooks/useVoteTimer.ts b/frontend/src/pages/GamePage/components/SelectContainer/Timer/hooks/useVoteTimer.ts
index c0688296..dd123940 100644
--- a/frontend/src/pages/GamePage/components/SelectContainer/Timer/hooks/useVoteTimer.ts
+++ b/frontend/src/pages/GamePage/components/SelectContainer/Timer/hooks/useVoteTimer.ts
@@ -17,7 +17,7 @@ const useVoteTimer = ({ roomId, selectedId, isVoted, completeSelection }: UseVot
   const { balanceContent } = useBalanceContentQuery(roomId);
   const timeLimit = convertMsecToSecond(balanceContent.timeLimit) || DEFAULT_TIME_LIMIT_SEC;
 
-  const { mutate: vote } = useCompleteSelectionMutation({
+  const { vote } = useCompleteSelectionMutation({
     selectedId,
     contentId: balanceContent.contentId,
     completeSelection,

From 58758976ca135521e3322cc1d6ac90d5cf4a37e7 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Tue, 19 Nov 2024 02:22:59 +0900
Subject: [PATCH 07/11] =?UTF-8?q?refactor:=20useThrottle=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EA=B0=95=ED=99=94=20#401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useThrottle.ts | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/hooks/useThrottle.ts b/frontend/src/hooks/useThrottle.ts
index 36c44317..781b99d2 100644
--- a/frontend/src/hooks/useThrottle.ts
+++ b/frontend/src/hooks/useThrottle.ts
@@ -1,16 +1,18 @@
 import { useRef } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const useThrottle = (func: (...args: any[]) => void, delay = 1000) => {
-  const isThrottle = useRef(false);
+const useThrottle = <T extends (...args: any[]) => void>(
+  func: T,
+  delay = 3000,
+): ((...args: Parameters<T>) => void) => {
+  const isThrottledRef = useRef(false);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return (...args: any[]) => {
-    if (!isThrottle.current) {
+  return (...args: Parameters<T>) => {
+    if (!isThrottledRef.current) {
       func(...args);
-      isThrottle.current = true;
+      isThrottledRef.current = true;
       setTimeout(() => {
-        isThrottle.current = false;
+        isThrottledRef.current = false;
       }, delay);
     }
   };

From 815ef4151a4145d45d4893124510acc731e4d7ee Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Tue, 19 Nov 2024 02:32:36 +0900
Subject: [PATCH 08/11] =?UTF-8?q?fix:=20mutation=20=EC=84=B1=EA=B3=B5?=
 =?UTF-8?q?=ED=96=88=EC=9D=84=20=EB=95=8C=EB=8F=84=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?disabled=20=EC=83=81=ED=83=9C=20=EC=B2=98=EB=A6=AC=20#401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/GameResult/FinalButton/FinalButton.tsx      | 6 +++---
 .../components/GameResult/FinalButton/FinalButton.utils.ts | 4 ++--
 frontend/src/pages/NicknamePage/NicknamePage.tsx           | 7 ++++---
 .../src/pages/NicknamePage/hooks/useCreateOrEnterRoom.ts   | 1 +
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.tsx b/frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.tsx
index 82e99511..7944de0f 100644
--- a/frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.tsx
+++ b/frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.tsx
@@ -9,7 +9,7 @@ import useGetUserInfo from '@/hooks/useGetUserInfo';
 
 const FinalButton = () => {
   const { roomId } = useParams();
-  const { mutate: resetRoom, isPending } = useResetRoomMutation(Number(roomId));
+  const { mutate: resetRoom, isPending, isSuccess } = useResetRoomMutation(Number(roomId));
   const {
     member: { isMaster },
   } = useGetUserInfo();
@@ -18,9 +18,9 @@ const FinalButton = () => {
     <div css={bottomButtonLayout}>
       <Button
         style={{ width: '100%' }}
-        text={getFinalButtonText(isMaster, isPending)}
+        text={getFinalButtonText(isMaster, isPending, isSuccess)}
         onClick={resetRoom}
-        disabled={!isMaster || isPending}
+        disabled={!isMaster || isPending || isSuccess}
       />
     </div>
   );
diff --git a/frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.utils.ts b/frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.utils.ts
index f5d24ebf..677d3697 100644
--- a/frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.utils.ts
+++ b/frontend/src/pages/GameResultPage/components/GameResult/FinalButton/FinalButton.utils.ts
@@ -1,5 +1,5 @@
-const getFinalButtonText = (isMaster: boolean, isPending: boolean) => {
-  if (isMaster && isPending) return '로딩중...';
+const getFinalButtonText = (isMaster: boolean, isPending: boolean, isSuccess: boolean) => {
+  if (isMaster && (isPending || isSuccess)) return '로딩중...';
   if (isMaster) return '대기실로 이동';
   return '방장이 진행해 주세요';
 };
diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx
index 1f5d00d9..31247e85 100644
--- a/frontend/src/pages/NicknamePage/NicknamePage.tsx
+++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx
@@ -13,7 +13,8 @@ import useButtonHeightOnKeyboard from '@/hooks/useButtonHeightOnKeyboard';
 
 const NicknamePage = () => {
   const { roomUuid } = useParams();
-  const { nicknameInputRef, handleCreateOrEnterRoom, isLoading } = useCreateOrEnterRoom();
+  const { nicknameInputRef, handleCreateOrEnterRoom, isLoading, isSuccess } =
+    useCreateOrEnterRoom();
   const { bottomButtonHeight } = useButtonHeightOnKeyboard();
 
   useIsJoinableRoomQuery({ roomUuid });
@@ -36,8 +37,8 @@ const NicknamePage = () => {
         />
         <Button
           onClick={handleCreateOrEnterRoom}
-          disabled={isLoading}
-          text={isLoading ? '접속 중...' : '확인'}
+          disabled={isLoading || isSuccess}
+          text={isLoading || isSuccess ? '접속 중...' : '확인'}
           style={{ width: '100%', bottom: bottomButtonHeight }}
           bottom
         />
diff --git a/frontend/src/pages/NicknamePage/hooks/useCreateOrEnterRoom.ts b/frontend/src/pages/NicknamePage/hooks/useCreateOrEnterRoom.ts
index cb3363bc..7a4687df 100644
--- a/frontend/src/pages/NicknamePage/hooks/useCreateOrEnterRoom.ts
+++ b/frontend/src/pages/NicknamePage/hooks/useCreateOrEnterRoom.ts
@@ -26,6 +26,7 @@ const useCreateOrEnterRoom = () => {
     nicknameInputRef,
     handleCreateOrEnterRoom,
     isLoading: isMaster ? createRoomMutation.isPending : enterRoomMutation.isPending,
+    isSuccess: createRoomMutation.isSuccess || enterRoomMutation.isSuccess,
   };
 };
 

From 63f13bf0e541018aea605d72e93c22a419a5c08a Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Tue, 19 Nov 2024 02:45:02 +0900
Subject: [PATCH 09/11] =?UTF-8?q?refactor:=20=EB=B0=A9=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=EA=B3=BC=20=EB=B0=A9=20=EC=B0=B8=EC=97=AC=20=EC=9D=B4?=
 =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=ED=95=B8=EB=93=A4=EB=9F=AC=EB=A5=BC=20?=
 =?UTF-8?q?=ED=95=98=EB=82=98=EB=A1=9C=20=EB=AC=B6=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EA=B3=A0=20isMaster=20=EB=B6=84=EA=B8=B0=EC=B2=98=EB=A6=AC?=
 =?UTF-8?q?=EB=A5=BC=20=EB=93=9C=EB=9F=AC=EB=82=B4=EA=B8=B0=20#401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/NicknamePage/NicknamePage.tsx     | 14 ++++++++------
 .../components/NicknameInput/NicknameInput.tsx  |  6 +++---
 .../NicknameInput/hooks/useNicknameInput.ts     |  6 +++---
 ...useCreateOrEnterRoom.ts => useAccessRoom.ts} | 17 +++++------------
 4 files changed, 19 insertions(+), 24 deletions(-)
 rename frontend/src/pages/NicknamePage/hooks/{useCreateOrEnterRoom.ts => useAccessRoom.ts} (75%)

diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx
index 31247e85..1280e145 100644
--- a/frontend/src/pages/NicknamePage/NicknamePage.tsx
+++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import NicknameInput from './components/NicknameInput/NicknameInput';
-import useCreateOrEnterRoom from './hooks/useCreateOrEnterRoom';
+import useAccessRoom from './hooks/useAccessRoom';
 import useIsJoinableRoomQuery from './hooks/useIsJoinableRoomQuery';
 import { profileWrapper, profileImg, nicknameContainer } from './NicknamePage.styled';
 
@@ -13,10 +13,12 @@ import useButtonHeightOnKeyboard from '@/hooks/useButtonHeightOnKeyboard';
 
 const NicknamePage = () => {
   const { roomUuid } = useParams();
-  const { nicknameInputRef, handleCreateOrEnterRoom, isLoading, isSuccess } =
-    useCreateOrEnterRoom();
+  const { nicknameInputRef, handleCreateRoom, handleEnterRoom, isLoading, isSuccess } =
+    useAccessRoom();
   const { bottomButtonHeight } = useButtonHeightOnKeyboard();
 
+  const isMaster = !roomUuid;
+
   useIsJoinableRoomQuery({ roomUuid });
 
   useEffect(() => {
@@ -33,12 +35,12 @@ const NicknamePage = () => {
       <div css={nicknameContainer}>
         <NicknameInput
           nicknameInputRef={nicknameInputRef}
-          handleCreateOrEnterRoom={handleCreateOrEnterRoom}
+          handleAccessRoom={isMaster ? handleCreateRoom : handleEnterRoom}
         />
         <Button
-          onClick={handleCreateOrEnterRoom}
-          disabled={isLoading || isSuccess}
           text={isLoading || isSuccess ? '접속 중...' : '확인'}
+          onClick={isMaster ? handleCreateRoom : handleEnterRoom}
+          disabled={isLoading || isSuccess}
           style={{ width: '100%', bottom: bottomButtonHeight }}
           bottom
         />
diff --git a/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx b/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx
index 01a7566a..0e664daa 100644
--- a/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx
+++ b/frontend/src/pages/NicknamePage/components/NicknameInput/NicknameInput.tsx
@@ -9,13 +9,13 @@ import { NICKNAME_MIN_LENGTH, NICKNAME_MAX_LENGTH } from '@/constants/config';
 
 interface NicknameInputProps {
   nicknameInputRef: RefObject<HTMLInputElement>;
-  handleCreateOrEnterRoom: () => void;
+  handleAccessRoom: () => void;
 }
 const randomNickname = createRandomNickname();
 
-const NicknameInput = ({ nicknameInputRef, handleCreateOrEnterRoom }: NicknameInputProps) => {
+const NicknameInput = ({ nicknameInputRef, handleAccessRoom }: NicknameInputProps) => {
   const { nickname, handleChangeInput, handleKeyDown } = useNicknameInput({
-    handleCreateOrEnterRoom,
+    handleAccessRoom,
   });
 
   const [statusMessage, setStatusMessage] = useState('');
diff --git a/frontend/src/pages/NicknamePage/components/NicknameInput/hooks/useNicknameInput.ts b/frontend/src/pages/NicknamePage/components/NicknameInput/hooks/useNicknameInput.ts
index 43568767..534e10ca 100644
--- a/frontend/src/pages/NicknamePage/components/NicknameInput/hooks/useNicknameInput.ts
+++ b/frontend/src/pages/NicknamePage/components/NicknameInput/hooks/useNicknameInput.ts
@@ -3,10 +3,10 @@ import { ChangeEvent, useState } from 'react';
 import { NICKNAME_MAX_LENGTH } from '@/constants/config';
 
 interface UseNicknameInputProps {
-  handleCreateOrEnterRoom: () => void;
+  handleAccessRoom: () => void;
 }
 
-const useNicknameInput = ({ handleCreateOrEnterRoom }: UseNicknameInputProps) => {
+const useNicknameInput = ({ handleAccessRoom }: UseNicknameInputProps) => {
   const [nickname, setNickname] = useState('');
 
   const handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
@@ -17,7 +17,7 @@ const useNicknameInput = ({ handleCreateOrEnterRoom }: UseNicknameInputProps) =>
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
-      handleCreateOrEnterRoom();
+      handleAccessRoom();
     }
   };
 
diff --git a/frontend/src/pages/NicknamePage/hooks/useCreateOrEnterRoom.ts b/frontend/src/pages/NicknamePage/hooks/useAccessRoom.ts
similarity index 75%
rename from frontend/src/pages/NicknamePage/hooks/useCreateOrEnterRoom.ts
rename to frontend/src/pages/NicknamePage/hooks/useAccessRoom.ts
index 7a4687df..8516484d 100644
--- a/frontend/src/pages/NicknamePage/hooks/useCreateOrEnterRoom.ts
+++ b/frontend/src/pages/NicknamePage/hooks/useAccessRoom.ts
@@ -4,9 +4,9 @@ import { useParams } from 'react-router-dom';
 import useCreateRoom from './useCreateRoom';
 import useEnterRoom from './useEnterRoom';
 
-const useCreateOrEnterRoom = () => {
-  const nicknameInputRef = useRef<HTMLInputElement>(null);
+const useAccessRoom = () => {
   const { roomUuid } = useParams();
+  const nicknameInputRef = useRef<HTMLInputElement>(null);
 
   // roomUuId가 없다 -> 초대링크를 받지 않은 master이다.
   const isMaster = !roomUuid;
@@ -14,20 +14,13 @@ const useCreateOrEnterRoom = () => {
   const { createRoomMutation, handleCreateRoom } = useCreateRoom({ nicknameInputRef });
   const { enterRoomMutation, handleEnterRoom } = useEnterRoom({ nicknameInputRef });
 
-  const handleCreateOrEnterRoom = () => {
-    if (isMaster) {
-      handleCreateRoom();
-    } else {
-      handleEnterRoom();
-    }
-  };
-
   return {
     nicknameInputRef,
-    handleCreateOrEnterRoom,
+    handleCreateRoom,
+    handleEnterRoom,
     isLoading: isMaster ? createRoomMutation.isPending : enterRoomMutation.isPending,
     isSuccess: createRoomMutation.isSuccess || enterRoomMutation.isSuccess,
   };
 };
 
-export default useCreateOrEnterRoom;
+export default useAccessRoom;

From 562cea78e50e189311a5526bfff551a9902bca5a Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Tue, 19 Nov 2024 03:44:09 +0900
Subject: [PATCH 10/11] =?UTF-8?q?refactor:=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EA=B3=B5=ED=86=B5=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EC=9E=AC=EC=82=AC=EC=9A=A9=EC=9D=84=20=EC=9C=84=ED=95=B4=20?=
 =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC=20#401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/useDefaultMutationErrorHandler.ts   | 21 +++++++++++++++++++
 .../QueryClientDefaultOptionProvider.tsx      | 17 ++++-----------
 2 files changed, 25 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/hooks/useDefaultMutationErrorHandler.ts

diff --git a/frontend/src/hooks/useDefaultMutationErrorHandler.ts b/frontend/src/hooks/useDefaultMutationErrorHandler.ts
new file mode 100644
index 00000000..4883fac4
--- /dev/null
+++ b/frontend/src/hooks/useDefaultMutationErrorHandler.ts
@@ -0,0 +1,21 @@
+import AlertModal from '@/components/AlertModal/AlertModal';
+import useModal from '@/hooks/useModal';
+import useToast from '@/hooks/useToast';
+import { CustomError, NetworkError } from '@/utils/error';
+
+const useDefaultMutationErrorHandler = () => {
+  const { show } = useToast();
+  const { show: showModal } = useModal();
+
+  return (error: unknown) => {
+    if (error instanceof NetworkError) {
+      show(error.message);
+      return;
+    }
+    if (error instanceof CustomError) {
+      showModal(AlertModal, { title: '에러', message: error.message });
+    }
+  };
+};
+
+export default useDefaultMutationErrorHandler;
diff --git a/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx b/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx
index e6075797..8e60785f 100644
--- a/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx
+++ b/frontend/src/providers/QueryClientDefaultOptionProvider/QueryClientDefaultOptionProvider.tsx
@@ -1,10 +1,8 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { PropsWithChildren } from 'react';
 
-import AlertModal from '@/components/AlertModal/AlertModal';
-import useModal from '@/hooks/useModal';
-import useToast from '@/hooks/useToast';
-import { CustomError, NetworkError } from '@/utils/error';
+import useDefaultMutationErrorHandler from '@/hooks/useDefaultMutationErrorHandler';
+import { CustomError } from '@/utils/error';
 
 const isServerError = (status: number) => status >= 500 && status !== 555;
 
@@ -12,8 +10,7 @@ const isServerError = (status: number) => status >= 500 && status !== 555;
 // 테스트 환경에서 retry 값이 있을 경우 에러 폴백 테스트가 돌지 않아 분기 처리
 const QueryClientDefaultOptionProvider = ({ children }: PropsWithChildren) => {
   const queryClient = useQueryClient();
-  const { show } = useToast();
-  const { show: showModal } = useModal();
+  const handleError = useDefaultMutationErrorHandler();
 
   queryClient.setDefaultOptions({
     queries: {
@@ -21,13 +18,7 @@ const QueryClientDefaultOptionProvider = ({ children }: PropsWithChildren) => {
       throwOnError: true,
     },
     mutations: {
-      onError: (error) => {
-        if (error instanceof NetworkError) {
-          show(error.message);
-          return;
-        }
-        showModal(AlertModal, { title: '에러', message: error.message });
-      },
+      onError: handleError,
       throwOnError: (err) => {
         const error = err as CustomError;
         return isServerError(error.status);

From d58baecc0222a867b9a0baeef3c3de6be3b65dd7 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Tue, 19 Nov 2024 03:45:24 +0900
Subject: [PATCH 11/11] =?UTF-8?q?refactor:=20=ED=88=AC=ED=91=9C=ED=95=A0?=
 =?UTF-8?q?=20=EB=95=8C=20=EC=97=90=EB=9F=AC=EA=B0=80=20=EB=B0=9C=EC=83=9D?=
 =?UTF-8?q?=ED=95=A0=20=EA=B2=BD=EC=9A=B0=20=EB=A1=A4=EB=B0=B1=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EC=B6=94=EA=B0=80=20#401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SelectButton/SelectButton.hook.ts         | 21 +++++++++++--------
 .../components/SelectButton/SelectButton.tsx  | 15 ++++++++++---
 .../SelectContainer/SelectContainer.tsx       | 11 +++++-----
 .../SelectOption/SelectOption.stories.tsx     |  6 +++---
 .../SelectOption/SelectOption.tsx             | 13 ++++--------
 .../SelectContainer/Timer/Timer.tsx           | 12 ++++++-----
 .../Timer/hooks/useVoteTimer.ts               | 10 ++++++++-
 .../SelectContainer/hooks/useSelectOption.ts  | 14 +++++++++----
 frontend/src/types/balanceContent.ts          |  5 +++++
 9 files changed, 68 insertions(+), 39 deletions(-)

diff --git a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts
index 4682ad7e..f6b34b5d 100644
--- a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts
+++ b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.hook.ts
@@ -2,41 +2,44 @@ import { useMutation } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 
 import { voteBalanceContent } from '@/apis/balanceContent';
+import useDefaultMutationErrorHandler from '@/hooks/useDefaultMutationErrorHandler';
 import useGetUserInfo from '@/hooks/useGetUserInfo';
 import useThrottle from '@/hooks/useThrottle';
 
 interface UseSelectCompleteMutationProps {
   selectedId: number;
+  contentId: number;
   completeSelection: () => void;
-  contentId?: number;
+  cancelSelection: () => void;
 }
 
 const useCompleteSelectionMutation = ({
   selectedId,
   contentId,
   completeSelection,
+  cancelSelection,
 }: UseSelectCompleteMutationProps) => {
   const { roomId } = useParams();
   const {
     member: { memberId },
   } = useGetUserInfo();
+  const handleError = useDefaultMutationErrorHandler();
 
   const completeSelectionMutation = useMutation({
-    mutationFn: async () => {
-      if (typeof contentId === 'undefined') {
-        throw new Error('contentId 가 존재하지 않습니다.');
-      }
-
-      return await voteBalanceContent({
+    mutationFn: async () =>
+      await voteBalanceContent({
         roomId: Number(roomId),
         optionId: selectedId,
         contentId,
         memberId: Number(memberId),
-      });
-    },
+      }),
     onMutate: () => {
       completeSelection();
     },
+    onError: (error) => {
+      cancelSelection();
+      handleError(error);
+    },
   });
 
   const throttledVote = useThrottle(completeSelectionMutation.mutate);
diff --git a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx
index d988c87a..3d94bf26 100644
--- a/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx
+++ b/frontend/src/pages/GamePage/components/SelectButton/SelectButton.tsx
@@ -2,19 +2,28 @@ import useCompleteSelectionMutation from './SelectButton.hook';
 
 import Button from '@/components/common/Button/Button';
 import { bottomButtonLayout } from '@/components/common/Button/Button.styled';
+import { SelectedOption } from '@/types/balanceContent';
 
 interface SelectButtonProps {
   contentId: number;
-  selectedId: number;
-  isVoted: boolean;
+  selectedOption: SelectedOption;
   completeSelection: () => void;
+  cancelSelection: () => void;
 }
 
-const SelectButton = ({ contentId, selectedId, isVoted, completeSelection }: SelectButtonProps) => {
+const SelectButton = ({
+  contentId,
+  selectedOption,
+  completeSelection,
+  cancelSelection,
+}: SelectButtonProps) => {
+  const { id: selectedId, isVoted } = selectedOption;
+
   const { isSuccess, isPending, vote } = useCompleteSelectionMutation({
     selectedId,
     contentId,
     completeSelection,
+    cancelSelection,
   });
 
   return (
diff --git a/frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx b/frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx
index c7e7a69a..802c3cb3 100644
--- a/frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx
+++ b/frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx
@@ -11,14 +11,15 @@ import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 const SelectContainer = () => {
   const { roomId } = useParams();
   const { balanceContent } = useBalanceContentQuery(Number(roomId));
-  const { selectedOption, handleClickOption, completeSelection } = useSelectOption();
+  const { selectedOption, handleClickOption, completeSelection, cancelSelection } =
+    useSelectOption();
 
   return (
     <div css={selectContainerLayout}>
       <Timer
-        selectedId={selectedOption.id}
-        isVoted={selectedOption.isCompleted}
+        selectedOption={selectedOption}
         completeSelection={completeSelection}
+        cancelSelection={cancelSelection}
       />
       <section role="radiogroup" css={selectSection}>
         <SelectOption
@@ -35,9 +36,9 @@ const SelectContainer = () => {
       </section>
       <SelectButton
         contentId={balanceContent.contentId}
-        selectedId={selectedOption.id}
-        isVoted={selectedOption.isCompleted}
+        selectedOption={selectedOption}
         completeSelection={completeSelection}
+        cancelSelection={cancelSelection}
       />
     </div>
   );
diff --git a/frontend/src/pages/GamePage/components/SelectContainer/SelectOption/SelectOption.stories.tsx b/frontend/src/pages/GamePage/components/SelectContainer/SelectOption/SelectOption.stories.tsx
index c6768ee4..026ecd4e 100644
--- a/frontend/src/pages/GamePage/components/SelectContainer/SelectOption/SelectOption.stories.tsx
+++ b/frontend/src/pages/GamePage/components/SelectContainer/SelectOption/SelectOption.stories.tsx
@@ -19,7 +19,7 @@ export const 클릭되지_않은_옵션: Story = {
     option: { name: '100억 빚 송강', optionId: 1 },
     selectedOption: {
       id: 0,
-      isCompleted: false,
+      isVoted: false,
     },
   },
 };
@@ -29,7 +29,7 @@ export const 클릭된_옵션: Story = {
     option: { name: '100억 부자 송강호', optionId: 2 },
     selectedOption: {
       id: 2,
-      isCompleted: false,
+      isVoted: false,
     },
   },
 };
@@ -39,7 +39,7 @@ export const 선택_완료된_옵션: Story = {
     option: { name: '100억 부자 송강호', optionId: 2 },
     selectedOption: {
       id: 2,
-      isCompleted: true,
+      isVoted: true,
     },
   },
 };
diff --git a/frontend/src/pages/GamePage/components/SelectContainer/SelectOption/SelectOption.tsx b/frontend/src/pages/GamePage/components/SelectContainer/SelectOption/SelectOption.tsx
index 21c0c672..afebb22e 100644
--- a/frontend/src/pages/GamePage/components/SelectContainer/SelectOption/SelectOption.tsx
+++ b/frontend/src/pages/GamePage/components/SelectContainer/SelectOption/SelectOption.tsx
@@ -1,11 +1,6 @@
 import { SelectOptionLayout } from './SelectOption.styled';
 
-import { BalanceContent } from '@/types/balanceContent';
-
-interface SelectedOption {
-  id: number;
-  isCompleted: boolean;
-}
+import { BalanceContent, SelectedOption } from '@/types/balanceContent';
 
 interface SelectOptionProps {
   option: BalanceContent['firstOption'];
@@ -14,14 +9,14 @@ interface SelectOptionProps {
 }
 
 const SelectOption = ({ option, selectedOption, handleClickOption }: SelectOptionProps) => {
-  const { id: selectedId, isCompleted } = selectedOption;
+  const { id: selectedId, isVoted } = selectedOption;
 
   return (
     <button
       role="radio"
-      css={SelectOptionLayout(selectedId === option.optionId, isCompleted)}
+      css={SelectOptionLayout(selectedId === option.optionId, isVoted)}
       onClick={() => handleClickOption(option.optionId)}
-      disabled={isCompleted}
+      disabled={isVoted}
       aria-checked={selectedId === option.optionId}
     >
       {option.name}
diff --git a/frontend/src/pages/GamePage/components/SelectContainer/Timer/Timer.tsx b/frontend/src/pages/GamePage/components/SelectContainer/Timer/Timer.tsx
index 5790bd9f..c39ae007 100644
--- a/frontend/src/pages/GamePage/components/SelectContainer/Timer/Timer.tsx
+++ b/frontend/src/pages/GamePage/components/SelectContainer/Timer/Timer.tsx
@@ -15,21 +15,23 @@ import useVoteIsFinished from '../hooks/useVoteIsFinished';
 import DdangkongTimer from '@/assets/images/ddangkongTimer.webp';
 import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
+import { SelectedOption } from '@/types/balanceContent';
 
 interface TimerProps {
-  selectedId: number;
-  isVoted: boolean;
+  selectedOption: SelectedOption;
   completeSelection: () => void;
+  cancelSelection: () => void;
 }
 
-const Timer = ({ selectedId, isVoted, completeSelection }: TimerProps) => {
+const Timer = ({ selectedOption, completeSelection, cancelSelection }: TimerProps) => {
   const { roomId } = useParams();
   const { balanceContent, isFetching } = useBalanceContentQuery(Number(roomId));
   const { leftRoundTime, isAlmostFinished, timeLimit } = useVoteTimer({
     roomId: Number(roomId),
-    selectedId,
-    isVoted,
+    selectedId: selectedOption.id,
+    isVoted: selectedOption.isVoted,
     completeSelection,
+    cancelSelection,
   });
   const screenReaderLeftRoundTime = `${leftRoundTime}초 남았습니다.`;
 
diff --git a/frontend/src/pages/GamePage/components/SelectContainer/Timer/hooks/useVoteTimer.ts b/frontend/src/pages/GamePage/components/SelectContainer/Timer/hooks/useVoteTimer.ts
index dd123940..07c36cde 100644
--- a/frontend/src/pages/GamePage/components/SelectContainer/Timer/hooks/useVoteTimer.ts
+++ b/frontend/src/pages/GamePage/components/SelectContainer/Timer/hooks/useVoteTimer.ts
@@ -11,9 +11,16 @@ interface UseVoteTimerProps {
   selectedId: number;
   isVoted: boolean;
   completeSelection: () => void;
+  cancelSelection: () => void;
 }
 
-const useVoteTimer = ({ roomId, selectedId, isVoted, completeSelection }: UseVoteTimerProps) => {
+const useVoteTimer = ({
+  roomId,
+  selectedId,
+  isVoted,
+  completeSelection,
+  cancelSelection,
+}: UseVoteTimerProps) => {
   const { balanceContent } = useBalanceContentQuery(roomId);
   const timeLimit = convertMsecToSecond(balanceContent.timeLimit) || DEFAULT_TIME_LIMIT_SEC;
 
@@ -21,6 +28,7 @@ const useVoteTimer = ({ roomId, selectedId, isVoted, completeSelection }: UseVot
     selectedId,
     contentId: balanceContent.contentId,
     completeSelection,
+    cancelSelection,
   });
 
   const { leftRoundTime, isAlmostFinished } = useTimer({
diff --git a/frontend/src/pages/GamePage/components/SelectContainer/hooks/useSelectOption.ts b/frontend/src/pages/GamePage/components/SelectContainer/hooks/useSelectOption.ts
index 9c030143..4da821d6 100644
--- a/frontend/src/pages/GamePage/components/SelectContainer/hooks/useSelectOption.ts
+++ b/frontend/src/pages/GamePage/components/SelectContainer/hooks/useSelectOption.ts
@@ -1,9 +1,11 @@
 import { useState } from 'react';
 
+import { SelectedOption } from '@/types/balanceContent';
+
 const useSelectOption = () => {
-  const [selectedOption, setSelectedOption] = useState({
+  const [selectedOption, setSelectedOption] = useState<SelectedOption>({
     id: 0,
-    isCompleted: false,
+    isVoted: false,
   });
 
   const handleClickOption = (selectedId: number) => {
@@ -11,10 +13,14 @@ const useSelectOption = () => {
   };
 
   const completeSelection = () => {
-    setSelectedOption((prev) => ({ ...prev, isCompleted: true }));
+    setSelectedOption((prev) => ({ ...prev, isVoted: true }));
+  };
+
+  const cancelSelection = () => {
+    setSelectedOption((prev) => ({ ...prev, isVoted: false }));
   };
 
-  return { selectedOption, handleClickOption, completeSelection };
+  return { selectedOption, handleClickOption, completeSelection, cancelSelection };
 };
 
 export default useSelectOption;
diff --git a/frontend/src/types/balanceContent.ts b/frontend/src/types/balanceContent.ts
index 18ee299b..b8c636ff 100644
--- a/frontend/src/types/balanceContent.ts
+++ b/frontend/src/types/balanceContent.ts
@@ -31,3 +31,8 @@ export interface MemberMatchingInfo {
   nickname: string;
   matchingPercent: number;
 }
+
+export interface SelectedOption {
+  id: number;
+  isVoted: boolean;
+}