[🚚change]: 메인페이지 내 상수 폴더생성하여 이동, 타입 이름 명시적으로 변경

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

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,18 +31,18 @@ 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,
     WORD: true,
   });
 
   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(() => {

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: '단어',
+};