From fa55ae992280629ce75df822d48292e76fa50344 Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Wed, 17 Apr 2024 21:43:39 +0900
Subject: [PATCH] =?UTF-8?q?[=F0=9F=9A=9Achange]:=20=EB=A9=94=EC=9D=B8?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=B4=20=EC=83=81=EC=88=98=20?=
 =?UTF-8?q?=ED=8F=B4=EB=8D=94=EC=83=9D=EC=84=B1=ED=95=98=EC=97=AC=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99,=20=ED=83=80=EC=9E=85=20=EC=9D=B4=EB=A6=84?=
 =?UTF-8?q?=20=EB=AA=85=EC=8B=9C=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MainPage/GameModeCheckBox.tsx   | 13 +++++++------
 src/pages/MainPage/MainPage.tsx           |  8 ++++----
 src/pages/MainPage/constants/gameMode.tsx | 15 +++++++++++++++
 3 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/MainPage/constants/gameMode.tsx

diff --git a/src/pages/MainPage/GameModeCheckBox.tsx b/src/pages/MainPage/GameModeCheckBox.tsx
index 4b23c626..1551cb88 100644
--- a/src/pages/MainPage/GameModeCheckBox.tsx
+++ b/src/pages/MainPage/GameModeCheckBox.tsx
@@ -1,11 +1,12 @@
 import * as Checkbox from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
 import { Dispatch, SetStateAction } from 'react';
-import { gameModeList, mappedGameModeList, TestType } from './MainPage';
+import { GAME_MODE_LIST, MAPPED_GAME_MODE_LIST } from './constants/gameMode';
+import { CheckedGameModeType } from './MainPage';
 
 interface GameModeCheckBoxProps {
-  setCheckedGameMode: Dispatch<SetStateAction<TestType>>;
-  checkedGameMode: TestType;
+  setCheckedGameMode: Dispatch<SetStateAction<CheckedGameModeType>>;
+  checkedGameMode: CheckedGameModeType;
 }
 
 const GameModeCheckBox = ({
@@ -14,14 +15,14 @@ const GameModeCheckBox = ({
 }: GameModeCheckBoxProps) => {
   return (
     <form className='flex gap-[3rem]'>
-      {gameModeList.map((mode, i) => {
+      {GAME_MODE_LIST.map((mode, i) => {
         //매 렌더링시 생성되므로 map 바깥으로 뺀다?
         const onCheckedChange = () => {
           setCheckedGameMode((prevState) => {
             const isNewMode = !prevState[mode];
             if (mode === 'ALL') {
               const newState = { ...prevState };
-              let checkGameModeState: keyof TestType;
+              let checkGameModeState: keyof CheckedGameModeType;
               for (checkGameModeState in prevState) {
                 newState[checkGameModeState] = isNewMode;
               }
@@ -46,7 +47,7 @@ const GameModeCheckBox = ({
             <label
               className='cursor-pointer text-[2rem] font-bold'
               htmlFor={`c${i}`}>
-              {mappedGameModeList[mode]}
+              {MAPPED_GAME_MODE_LIST[mode]}
             </label>
           </div>
         );
diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
index 7398f490..f7f2daa0 100644
--- a/src/pages/MainPage/MainPage.tsx
+++ b/src/pages/MainPage/MainPage.tsx
@@ -17,7 +17,7 @@ import UserList from './UserList';
 
 export type FilteredGameModeType = GameModeType | 'ALL';
 
-export type TestType = {
+export type CheckedGameModeType = {
   [key in FilteredGameModeType]: boolean;
 };
 
@@ -31,7 +31,7 @@ const MainPage = () => {
   const { data: userData, isPending, error } = useAuthCheck();
   const { roomInfo, setRoomInfo } = useRoomInfoStore();
 
-  const [checkedGameMode, setCheckedGameMode] = useState<TestType>({
+  const [checkedGameMode, setCheckedGameMode] = useState<CheckedGameModeType>({
     ALL: true,
     SENTENCE: true,
     CODE: true,
@@ -39,10 +39,10 @@ const MainPage = () => {
   });
 
   const checkedGameModeList = (
-    Object.entries(checkedGameMode) as EntriesType<TestType>
+    Object.entries(checkedGameMode) as EntriesType<CheckedGameModeType>
   )
     .filter(([mode, state]) => mode !== 'ALL' && state)
-    .map(([mode]) => mode) as Exclude<keyof TestType, 'ALL'>[];
+    .map(([mode]) => mode) as Exclude<keyof CheckedGameModeType, 'ALL'>[];
 
   const { setDidAdminStart } = useGameWaitingRoomStore();
   useEffect(() => {
diff --git a/src/pages/MainPage/constants/gameMode.tsx b/src/pages/MainPage/constants/gameMode.tsx
new file mode 100644
index 00000000..6e673525
--- /dev/null
+++ b/src/pages/MainPage/constants/gameMode.tsx
@@ -0,0 +1,15 @@
+import { FilteredGameModeType } from '../MainPage';
+
+export const GAME_MODE_LIST: FilteredGameModeType[] = [
+  'ALL',
+  'SENTENCE',
+  'CODE',
+  'WORD',
+];
+
+export const MAPPED_GAME_MODE_LIST = {
+  ALL: '전체',
+  SENTENCE: '문장',
+  CODE: '코드',
+  WORD: '단어',
+};