fix: FE GameSlot nth-child 대체 (Close #190)

chococookie-lol · Jan 18, 2023 · 64f1931 · 64f1931
1 parent 92bcbc5
commit 64f1931
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 32 deletions.
diff --git 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
@@ -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;