From 64f1931d0fcb6bab3355b71f46c99f80eac34463 Mon Sep 17 00:00:00 2001
From: dolphinlmg <dolphinlmg@naver.com>
Date: Wed, 18 Jan 2023 17:54:37 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20FE=20GameSlot=20nth-child=20=EB=8C=80?=
 =?UTF-8?q?=EC=B2=B4=20(Close=20#190)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/GameSlot/index.tsx | 14 +++++------
 client/components/GameSlot/style.ts  | 35 ++++++++--------------------
 2 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/client/components/GameSlot/index.tsx b/client/components/GameSlot/index.tsx
index 518da17..bb6dd11 100644
--- a/client/components/GameSlot/index.tsx
+++ b/client/components/GameSlot/index.tsx
@@ -49,15 +49,15 @@ function GameSlotTable({ version, win, teamId, participants }: GameSlotTableProp
     <table css={detailStyle.tableContainer(theme, teamId, win)}>
       <thead>
         <tr>
-          <th>
+          <th css={detailStyle.thFirst(theme, win)}>
             <span>{win ? '승리' : '패배'}</span> ({teamId === 100 ? '블루' : '레드'}팀)
           </th>
-          <th>룬</th>
-          <th>KDA</th>
-          <th>빌드</th>
-          <th>준 피해량</th>
-          <th>받은 피해량</th>
-          <th>딜 유형</th>
+          <th css={detailStyle.width('4.1%')}>룬</th>
+          <th css={detailStyle.width('6%')}>KDA</th>
+          <th css={detailStyle.width('19%')}>빌드</th>
+          <th css={detailStyle.width('16%')}>준 피해량</th>
+          <th css={detailStyle.width('16%')}>받은 피해량</th>
+          <th css={detailStyle.width('16%')}>딜 유형</th>
         </tr>
       </thead>
       <tbody>
diff --git a/client/components/GameSlot/style.ts b/client/components/GameSlot/style.ts
index eb7bc0f..4d782f5 100644
--- a/client/components/GameSlot/style.ts
+++ b/client/components/GameSlot/style.ts
@@ -137,32 +137,17 @@ export const detailStyle = {
     th {
       height: 22px;
     }
-    th:nth-child(1) {
-      text-align: left;
-      color: ${theme.foreground};
-      span {
-        color: ${win ? theme.blue2 : theme.red2};
-      }
-      width: 22%;
-    }
-    th:nth-child(2) {
-      width: 4.1%;
-    }
-    th:nth-child(3) {
-      width: 6%;
-    }
-    th:nth-child(4) {
-      width: 19%;
-    }
-    th:nth-child(5) {
-      width: 16%;
-    }
-    th:nth-child(6) {
-      width: 16%;
-    }
-    th:nth-child(7) {
-      width: 16%;
+  `,
+  thFirst: (theme: Theme, win: boolean) => css`
+    text-align: left;
+    color: ${theme.foreground};
+    span {
+      color: ${win ? theme.blue2 : theme.red2};
     }
+    width: 22%;
+  `,
+  width: (width: string) => css`
+    width: ${width};
   `,
   container: css`
     position: relative;