[♻️refactor]: 메인페이지 내부 사용중 컴포넌트 리턴문 최상단 article을 메인페이지로 이동

Team-E2I4 · Apr 17, 2024 · f22fbd2 · f22fbd2
1 parent fba8d8d
commit f22fbd2
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 79 deletions.
diff --git a/src/pages/MainPage/GameRoomList.tsx b/src/pages/MainPage/GameRoomList.tsx
@@ -20,52 +20,50 @@ const GameRoomList = ({ data, checkedGameModeList }: GameRoomListProps) => {
   );
 
   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'>
-              방 목록이 존재하지 않아요 😫
-            </span>
-          )}
-        </li>
-      </ul>
-    </article>
+        </ul>
+        {!filteredRoomList.length && (
+          <span className='text-[2rem] font-bold w-full text-center block'>
+            방 목록이 존재하지 않아요 😫
+          </span>
+        )}
+      </li>
+    </ul>
   );
 };
 

diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
@@ -21,20 +21,6 @@ export type TestType = {
   [key in FilteredGameModeType]: boolean;
 };
 
-export const gameModeList: FilteredGameModeType[] = [
-  'ALL',
-  'SENTENCE',
-  'CODE',
-  'WORD',
-];
-
-export const mappedGameModeList = {
-  ALL: '전체',
-  SENTENCE: '문장',
-  CODE: '코드',
-  WORD: '단어',
-};
-
 export type EntriesType<T> = {
   [K in keyof T]: [K, T[K]];
 }[keyof T][];
@@ -77,44 +63,53 @@ 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]'>
           <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>연습모드!</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]'>
-            <span>방 만들기</span>
+            <button>방 만들기</button>
           </article>
         </CreateRoomModal>
         <SseFetcher fallback={() => <SseFallback />}>
           {(data) => (
             <ErrorBoundary fallbackRender={EnterRoomErrorFallback}>
-              <GameRoomList
-                data={data}
-                checkedGameModeList={checkedGameModeList}
-                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>

diff --git a/src/pages/MainPage/UserCard.tsx b/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>
+    </>
   );
 };
 

diff --git a/src/pages/MainPage/UserList.tsx b/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>
+    </>
   );
 };