From 1ea55cf3b5befc06ab104c0a3cbb3561661257bc Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Thu, 26 Oct 2023 03:18:06 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20flex=20=EC=97=90=EC=84=9C=20gameID=20?=
 =?UTF-8?q?=EC=9D=98=20=EA=B8=B8=EC=9D=B4=EB=A5=BC=20=EA=B0=80=EC=9E=A5=20?=
 =?UTF-8?q?=ED=81=AC=EA=B2=8C=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RoundCheckIn/PlayerLists.tsx | 23 +++++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/RoundCheckIn/PlayerLists.tsx b/src/components/RoundCheckIn/PlayerLists.tsx
index 3492fc7..fd60d55 100644
--- 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`