Design: flex 에서 gameID 의 길이를 가장 크게 설정

TheUpperPart · Oct 25, 2023 · 1ea55cf · 1ea55cf
1 parent 89a1b99
commit 1ea55cf
Showing 1 changed file with 14 additions and 9 deletions.
diff --git a/src/components/RoundCheckIn/PlayerLists.tsx b/src/components/RoundCheckIn/PlayerLists.tsx
@@ -16,6 +16,10 @@ interface CheckMine {
   isDisqualification: boolean;
 }
 
+interface FlexVal {
+  flexVal: number;
+}
+
 const PlayerLists = ({ players, checkInUsers, requestUser }: PlayerListsProps) => {
   const router = useRouter();
   const { channelLink } = router.query;
@@ -48,10 +52,10 @@ const PlayerLists = ({ players, checkInUsers, requestUser }: PlayerListsProps) =
             width: 7rem;
           `}
         ></div>
-        <MenuItem>순위</MenuItem>
-        <MenuItem>게임ID</MenuItem>
-        <MenuItem>점수</MenuItem>
-        <MenuItem>준비</MenuItem>
+        <MenuItem flexVal={1}>순위</MenuItem>
+        <MenuItem flexVal={3}>게임ID</MenuItem>
+        <MenuItem flexVal={1}>점수</MenuItem>
+        <MenuItem flexVal={1}>준비</MenuItem>
       </MenuList>
       {players.length !== 0 &&
         players.map((player) => (
@@ -71,10 +75,10 @@ const PlayerLists = ({ players, checkInUsers, requestUser }: PlayerListsProps) =
                 `}
               ></div>
             )}
-            <MenuItem># {player.matchRank}</MenuItem>
-            <MenuItem>{player.gameId}</MenuItem>
-            <MenuItem>{player.score}</MenuItem>
-            <MenuItem>
+            <MenuItem flexVal={1}># {player.matchRank}</MenuItem>
+            <MenuItem flexVal={3}>{player.gameId}</MenuItem>
+            <MenuItem flexVal={1}>{player.score}</MenuItem>
+            <MenuItem flexVal={1}>
               {checkInUsers.includes(player.matchPlayerId) ? (
                 <Icon kind='checked' color='1975FF' size={24} />
               ) : player.playerStatus === 'DISQUALIFICATION' ? (
@@ -119,12 +123,13 @@ const MenuList = styled.ul<CheckMine>`
   }
 `;
 
-const MenuItem = styled.li`
+const MenuItem = styled.li<FlexVal>`
   width: 5rem;
   text-align: center;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
+  flex: ${(props) => props.flexVal};
 `;
 
 const DisqualificationButton = styled.button`