[Fix] 메인화면 게임모드 필터링 체크박스로 변경, 연습모드 버튼 추가

package.json

@@ -17,6 +17,7 @@
     "@openapitools/openapi-generator-cli": "^2.9.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-form": "^0.0.3",
     "@radix-ui/react-icons": "^1.3.0",

src/pages/MainPage/CreateRoom/CreateRoomForm.tsx

@@ -13,9 +13,9 @@ import { GameModeType } from '@/types/gameMode';
 import getRandomItem from '@/utils/getRandomItem';
 import { Toast } from '@/utils/toast';
 import {
+  CREATE_ROOM_GAME_MODE_LIST,
   CREATE_ROOM_INPUT_LIST,
   CREATE_ROOM_SELECT_LIST,
-  GAME_MODE_LIST,
 } from './constants/createRoom';
 import { DEFAULT_TITLES } from './constants/defaultTitles';
 import { SettingModeType } from './CreateRoomModal';
@@ -185,7 +185,7 @@ const CreateRoomForm = ({
         </div>
         {/* 모드 설정 버튼 */}
         <article className='flex flex-col gap-[2rem] pt-[4rem]'>
-          {GAME_MODE_LIST.map(({ value, mode }) => (
+          {CREATE_ROOM_GAME_MODE_LIST.map(({ value, mode }) => (
             <button
               type='button'
               onClick={() => {

src/pages/MainPage/CreateRoom/constants/createRoom.ts

@@ -1,4 +1,5 @@
 import { GameModeType } from '@/types/gameMode';
+import { MAPPED_GAME_MODE_LIST } from '../../constants/gameMode';
 import { I_CreateRoomInput, I_CreateRoomSelect } from '../types';
 
 export const CREATE_ROOM_INPUT_LIST: I_CreateRoomInput[] = [
@@ -64,8 +65,8 @@ interface I_GameModeList {
   mode: GameModeType;
 }
 
-export const GAME_MODE_LIST: I_GameModeList[] = [
-  { value: '문장 모드', mode: 'SENTENCE' },
-  { value: '코딩 모드', mode: 'CODE' },
-  { value: '단어 모드', mode: 'WORD' },
+export const CREATE_ROOM_GAME_MODE_LIST: I_GameModeList[] = [
+  { value: `${MAPPED_GAME_MODE_LIST['SENTENCE']} 모드`, mode: 'SENTENCE' },
+  { value: `${MAPPED_GAME_MODE_LIST['CODE']} 모드`, mode: 'CODE' },
+  { value: `${MAPPED_GAME_MODE_LIST['WORD']} 모드`, mode: 'WORD' },
 ];

src/pages/MainPage/GameModeCheckBox.tsx

@@ -0,0 +1,59 @@
+import * as Checkbox from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+import { Dispatch, SetStateAction } from 'react';
+import { GAME_MODE_LIST, MAPPED_GAME_MODE_LIST } from './constants/gameMode';
+import { CheckedGameModeType, FilteredGameModeType } from './MainPage';
+
+interface GameModeCheckBoxProps {
+  setCheckedGameMode: Dispatch<SetStateAction<CheckedGameModeType>>;
+  checkedGameMode: CheckedGameModeType;
+}
+
+const GameModeCheckBox = ({
+  checkedGameMode,
+  setCheckedGameMode,
+}: GameModeCheckBoxProps) => {
+  const onCheckedChange = (mode: FilteredGameModeType) => {
+    setCheckedGameMode((prevState) => {
+      const isNewMode = !prevState[mode];
+      if (mode === 'ALL') {
+        const newState = { ...prevState };
+        let checkGameModeState: keyof CheckedGameModeType;
+        for (checkGameModeState in prevState) {
+          newState[checkGameModeState] = isNewMode;
+        }
+        return newState;
+      }
+      return { ...prevState, [mode]: isNewMode };
+    });
+  };
+  return (
+    <form className='flex gap-[3rem]'>
+      {GAME_MODE_LIST.map((mode, i) => {
+        //매 렌더링시 생성되므로 map 바깥으로 뺀다?
+        return (
+          <div
+            className='flex items-center gap-[0.5em]'
+            key={mode}>
+            <Checkbox.Root
+              checked={checkedGameMode[mode]}
+              onClick={() => onCheckedChange(mode)}
+              className='bg-white w-[3rem] h-[3rem] rounded-md flex items-center justify-center shadow-md hover:bg-gray-100/50'
+              id={`c${i}`}>
+              <Checkbox.Indicator className=''>
+                <CheckIcon className='size-[3rem]' />
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+            <label
+              className='cursor-pointer text-[2rem] font-bold'
+              htmlFor={`c${i}`}>
+              {MAPPED_GAME_MODE_LIST[mode]}
+            </label>
+          </div>
+        );
+      })}
+    </form>
+  );
+};
+
+export default GameModeCheckBox;

src/pages/MainPage/GameRoomList.tsx

@@ -1,74 +1,69 @@
 import { Fragment, useState } from 'react';
 import Divider from '@/common/Divider/Divider';
+import { GameModeType } from '@/types/gameMode';
 import GameRoomListItem from './GameRoonListItem';
-import { FilteredGameModeType } from './MainPage';
 import PrivateRoomModal from './PrivateRoomModal';
 import { I_ChangeGameRoomData } from './SseFetcher';
 
 const GAME_ROOM_LIST_CATEGORY = ['방 번호', '방 제목', '게임 모드', '인원수'];
 
 interface GameRoomListProps extends React.HTMLAttributes<HTMLDivElement> {
   data: I_ChangeGameRoomData[];
-  selectedGameMode: FilteredGameModeType;
+  checkedGameModeList: GameModeType[];
 }
 
-const GameRoomList = ({ data, selectedGameMode }: GameRoomListProps) => {
+const GameRoomList = ({ data, checkedGameModeList }: GameRoomListProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const filteredRoomList =
-    selectedGameMode !== 'ALL'
-      ? data.filter(({ gameMode }) => gameMode === selectedGameMode)
-      : data;
+  const filteredRoomList = checkedGameModeList.flatMap((mode) =>
+    data.filter(({ gameMode }) => gameMode === mode)
+  );
 
   return (
-    <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 row-start-2 col-start-1 col-span-2'>
-      <ul className='flex flex-col items-center px-[1.5rem]'>
-        <li className='flex w-full h-[5rem] py-[1rem] items-center'>
-          {GAME_ROOM_LIST_CATEGORY.map((category, i) => (
-            <Fragment key={i}>
-              <span
-                className={`text-center ${category === '방 제목' ? 'flex-[4_0_0]' : 'flex-1'}`}>
-                {category}
-              </span>
-              {i !== category.length && (
-                <Divider
-                  orientation='vertical'
-                  className='border-gray-200'
+    <ul className='flex flex-col items-center px-[1.5rem]'>
+      <li className='flex w-full h-[5rem] py-[1rem] items-center'>
+        {GAME_ROOM_LIST_CATEGORY.map((category, i) => (
+          <Fragment key={i}>
+            <span
+              className={`text-center ${category === '방 제목' ? 'flex-[4_0_0]' : 'flex-1'}`}>
+              {category}
+            </span>
+            {i !== category.length && (
+              <Divider
+                orientation='vertical'
+                className='border-gray-200'
+              />
+            )}
+          </Fragment>
+        ))}
+      </li>
+      <Divider className='border-gray-200' />
+      <li className='w-full'>
+        <ul className='w-full flex flex-col gap-[1.2rem] max-h-[50rem] overflow-y-auto py-[1rem]'>
+          {filteredRoomList.map((roomData) => (
+            <Fragment key={roomData.id}>
+              <GameRoomListItem
+                key={roomData.id}
+                setIsOpen={setIsOpen}
+                {...roomData}
+              />
+              {roomData.isPrivate && (
+                <PrivateRoomModal
+                  roomId={roomData.id}
+                  setIsOpen={setIsOpen}
+                  isOpen={isOpen}
                 />
               )}
             </Fragment>
           ))}
-        </li>
-        <Divider className='border-gray-200' />
-        <li className='w-full'>
-          <ul className='w-full flex flex-col gap-[1.2rem] max-h-[50rem] overflow-y-auto py-[1rem]'>
-            {filteredRoomList.map((roomData) => (
-              <Fragment key={roomData.id}>
-                <GameRoomListItem
-                  key={roomData.id}
-                  setIsOpen={setIsOpen}
-                  {...roomData}
-                />
-                {roomData.isPrivate && (
-                  <PrivateRoomModal
-                    roomId={roomData.id}
-                    setIsOpen={setIsOpen}
-                    isOpen={isOpen}
-                  />
-                )}
-              </Fragment>
-            ))}
-          </ul>
-          {!filteredRoomList.length && (
-            <span className='text-[2rem] font-bold w-full text-center block'>
-              {selectedGameMode === 'ALL'
-                ? '현재 생성된 게임이 없습니다!'
-                : '선택하신 모드의 방 목록이 없습니다!'}
-            </span>
-          )}
-        </li>
-      </ul>
-    </article>
+        </ul>
+        {!filteredRoomList.length && (
+          <span className='text-[2rem] font-bold w-full text-center block'>
+            방 목록이 존재하지 않아요 😫
+          </span>
+        )}
+      </li>
+    </ul>
   );
 };
 

src/pages/MainPage/MainPage.tsx

@@ -8,6 +8,7 @@ import useRoomInfoStore from '@/store/useRoomInfoStore';
 import { GameModeType } from '@/types/gameMode';
 import CreateRoomModal from './CreateRoom/CreateRoomModal';
 import EnterRoomErrorFallback from './EnterRoomErrorFallback';
+import GameModeCheckBox from './GameModeCheckBox';
 import GameRoomList from './GameRoomList';
 import SseFallback from './SseFallback';
 import SseFetcher from './SseFetcher';
@@ -16,27 +17,33 @@ import UserList from './UserList';
 
 export type FilteredGameModeType = GameModeType | 'ALL';
 
-const gameModeList: FilteredGameModeType[] = [
-  'ALL',
-  'SENTENCE',
-  'CODE',
-  'WORD',
-];
-
-const mappedGameModeList = {
-  ALL: '전체',
-  SENTENCE: '문장',
-  CODE: '코드',
-  WORD: '단어',
+export type CheckedGameModeType = {
+  [key in FilteredGameModeType]: boolean;
 };
 
+export type EntriesType<T> = {
+  [K in keyof T]: [K, T[K]];
+}[keyof T][];
+
 const MainPage = () => {
   const navigate = useNavigate();
   const { data: userList } = useOnlineUsers();
   const { data: userData, isPending, error } = useAuthCheck();
   const { roomInfo, setRoomInfo } = useRoomInfoStore();
-  const [selectedGameMode, setSelectedGameMode] =
-    useState<FilteredGameModeType>('ALL');
+
+  const [checkedGameMode, setCheckedGameMode] = useState<CheckedGameModeType>({
+    ALL: true,
+    SENTENCE: true,
+    CODE: true,
+    WORD: true,
+  });
+
+  const checkedGameModeList = (
+    Object.entries(checkedGameMode) as EntriesType<CheckedGameModeType>
+  )
+    .filter(([mode, state]) => mode !== 'ALL' && state)
+    .map(([mode]) => mode) as Exclude<keyof CheckedGameModeType, 'ALL'>[];
+
   const { setDidAdminStart } = useGameWaitingRoomStore();
   useEffect(() => {
     setDidAdminStart(false);
@@ -56,34 +63,37 @@ const MainPage = () => {
   return (
     <main className='flex gap-[3rem]'>
       <section className='flex flex-col gap-[3rem] w-[25rem] [&>article]:shadow-xl'>
-        <UserList
-          userList={[...userList.data.data!]}
-          myId={userData.data.data!.memberId}
-        />
+        <article className='flex flex-col gap-[1rem] p-[2rem] bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 h-[40rem] w-full'>
+          <UserList
+            userList={[...userList.data.data!]}
+            myId={userData.data.data!.memberId}
+          />
+        </article>
         <article
           className='flex items-center justify-center bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 h-[4.5rem] w-full cursor-pointer hover:bg-green-100 hover:text-white hover:text-[1.8rem] transition-all'
           onClick={() => navigate('/rank')}>
           <button>전체 랭킹</button>
         </article>
-        <UserCard
-          nickname={userData.data.data!.nickname}
-          isGuest={userData.data.data!.isGuest}
-          rank={userData.data.data!.rank}
-          gameCount={userData.data.data!.gameCount}
-          averageCpm={userData.data.data!.averageCpm}
-          averageAccuracy={userData.data.data!.averageAccuracy}
-        />
+        <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 h-[18rem] w-full p-[1.2rem] group relative'>
+          <UserCard
+            nickname={userData.data.data!.nickname}
+            isGuest={userData.data.data!.isGuest}
+            rank={userData.data.data!.rank}
+            gameCount={userData.data.data!.gameCount}
+            averageCpm={userData.data.data!.averageCpm}
+            averageAccuracy={userData.data.data!.averageAccuracy}
+          />
+        </article>
       </section>
-      <section className='flex-1 grid grid-cols-[3fr_1fr] grid-rows-[5rem_auto] grid-flow-col gap-[3rem]'>
+      <section className='flex-1 grid grid-cols-[3fr_1fr_1fr] grid-rows-[5rem_auto] grid-flow-col gap-[3rem]'>
         <article className='rounded-[0.5rem] flex items-center justify-between gap-[3rem]'>
-          {gameModeList.map((el) => (
-            <span
-              className={`shadow-xl flex-1 h-full font-[Giants-Inline] text-[2rem] flex items-center justify-center cursor-pointer rounded-[0.3rem] ${selectedGameMode === el ? 'bg-green-100' : 'bg-green-70'} hover:bg-green-100 hover:scale-110 transition-all`}
-              key={el}
-              onClick={() => setSelectedGameMode(el)}>
-              {mappedGameModeList[el]}
-            </span>
-          ))}
+          <GameModeCheckBox
+            checkedGameMode={checkedGameMode}
+            setCheckedGameMode={setCheckedGameMode}
+          />
+        </article>
+        <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 row-start-1 h-full flex items-center justify-center shadow-xl hover:bg-green-100 transition-all hover:text-white hover:text-[1.8rem]'>
+          <button onClick={() => alert('연습모드 클릭됨!')}>연습모드!</button>
         </article>
         <CreateRoomModal>
           <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 row-start-1 h-full flex items-center justify-center shadow-xl hover:bg-green-100 transition-all hover:text-white hover:text-[1.8rem]'>
@@ -93,11 +103,13 @@ const MainPage = () => {
         <SseFetcher fallback={() => <SseFallback />}>
           {(data) => (
             <ErrorBoundary fallbackRender={EnterRoomErrorFallback}>
-              <GameRoomList
-                data={data}
-                selectedGameMode={selectedGameMode}
-                className='shadow-xl'
-              />
+              <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 row-start-2 col-start-1 col-span-3'>
+                <GameRoomList
+                  data={data}
+                  checkedGameModeList={checkedGameModeList}
+                  className='shadow-xl'
+                />
+              </article>
             </ErrorBoundary>
           )}
         </SseFetcher>

src/pages/MainPage/UserCard.tsx

@@ -26,7 +26,7 @@ const UserCard = ({
   averageAccuracy = 0,
 }: UserCardProps) => {
   return (
-    <article className='bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 h-[18rem] w-full p-[1.2rem] group relative'>
+    <>
       {isGuest && (
         <div className='w-0 h-full z-[50] overflow-hidden p-[3rem] bg-green-100 invisible absolute top-0 left-0 transition-all group-hover:w-full  group-hover:visible group-hover:cursor-pointer'>
           <span className='text-[3rem] text-white font-bold whitespace-nowrap'>
@@ -68,7 +68,7 @@ const UserCard = ({
           <span className='bg-coral-50 w-[10rem] text-center rounded-[0.5rem] h-[2.2rem] hover:bg-coral-100'>{`완벽함 ${formatNumber(averageAccuracy)}%`}</span>
         </div>
       </div>
-    </article>
+    </>
   );
 };
 

src/pages/MainPage/UserList.tsx

@@ -8,7 +8,7 @@ interface UserListProps {
 
 const UserList = ({ userList, myId }: UserListProps) => {
   return (
-    <article className='flex flex-col gap-[1rem] p-[2rem] bg-white rounded-[0.5rem] border-solid border-[0.3rem] border-green-100 h-[40rem] w-full'>
+    <>
       <h3>현재 접속자</h3>
       <ul className='flex-1 rounded-[0.5rem] bg-green-70 p-[2rem] overflow-y-auto'>
         {userList ? (
@@ -23,7 +23,7 @@ const UserList = ({ userList, myId }: UserListProps) => {
           <span>접속중인 유저가 없습니다.</span>
         )}
       </ul>
-    </article>
+    </>
   );
 };