fix: 테이블 스타일 수정

Nexters · Nov 29, 2024 · 751cd97 · 751cd97
1 parent a54b6c7
commit 751cd97
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 53 deletions.
diff --git a/apps/admin/src/components/EnteranceTable/EnteranceTable.styles.ts b/apps/admin/src/components/EnteranceTable/EnteranceTable.styles.ts
@@ -2,46 +2,39 @@ import { Button } from '@boolti/ui';
 import styled from '@emotion/styled';
 
 const Container = styled.table`
-  display: flex;
-  flex-direction: column;
+  table-layout: auto;
   margin: 16px 0;
   width: ${({ theme }) => theme.breakpoint.desktop};
   height: 547px;
 `;
 
 const HeaderRow = styled.tr`
-  display: flex;
-  flex: 0 0 auto;
-  flex-wrap: nowrap;
+  width: 100%;
   padding-left: 8px;
   background-color: ${({ theme }) => theme.palette.grey.g00};
   border-top: 1px solid ${({ theme }) => theme.palette.grey.g20};
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey.g20};
 `;
 
-const HeaderItem = styled.td`
-  display: block;
-  flex: 0 0 auto;
+const HeaderItem = styled.th`
+  white-space: nowrap;
   text-align: left;
   padding: 12px;
   ${({ theme }) => theme.typo.b2};
   color: ${({ theme }) => theme.palette.grey.g60};
-  &:not(:last-of-type) {
-    margin-right: 12px;
+  &:last-child {
+    width: 100% !important;
   }
 `;
 
 const Row = styled.tr`
-  display: flex;
-  flex-wrap: nowrap;
+  width: 100%;
   padding-left: 8px;
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey.g20};
 `;
 
 const Item = styled.td`
-  display: block;
-  flex: 0 0 auto;
-  padding: 14px 12px;
+  padding: 14px;
   text-align: left;
   ${({ theme }) => theme.typo.b2};
   color: ${({ theme }) => theme.palette.grey.g90};
@@ -51,9 +44,6 @@ const Item = styled.td`
   & strong {
     background-color: ${({ theme }) => theme.palette.primary.o0};
   }
-  &:not(:last-of-type) {
-    margin-right: 12px;
-  }
 `;
 
 const Empty = styled.div`

diff --git a/apps/admin/src/components/EnteranceTable/index.tsx b/apps/admin/src/components/EnteranceTable/index.tsx
@@ -30,6 +30,7 @@ const columns = [
       );
     },
     size: 80,
+    maxSize: 80,
   }),
   columnHelper.accessor('reservation.reservationHolder.phoneNumber', {
     header: '연락처',
@@ -44,11 +45,13 @@ const columns = [
       );
     },
     size: 140,
+    maxSize: 140,
   }),
   columnHelper.accessor('salesTicketType.ticketType', {
     header: '티켓 종류',
     cell: (props) => `${props.getValue() === 'INVITE' ? '초청' : '일반'}티켓`,
     size: 80,
+    maxSize: 80,
   }),
   columnHelper.accessor('salesTicketType.ticketName', {
     header: '티켓명',
@@ -64,7 +67,6 @@ const columns = [
         <Styled.DisabledText>아직 방문하지 않았습니다.</Styled.DisabledText>
       );
     },
-    minSize: 200,
   }),
 ];
 
@@ -83,6 +85,7 @@ const EnteranceTable = ({ searchText, data, isEnteredTicket, onClickReset }: Pro
     getCoreRowModel: getCoreRowModel(),
     defaultColumn: {
       minSize: undefined,
+      maxSize: undefined,
     },
     meta: {
       searchText,
@@ -97,8 +100,9 @@ const EnteranceTable = ({ searchText, data, isEnteredTicket, onClickReset }: Pro
               <Styled.HeaderItem
                 key={header.id}
                 style={{
-                  width: header.column.columnDef.minSize ? 'auto' : `${header.getSize()}px`,
+                  width: header.column.columnDef.minSize ?? `${header.getSize()}px`,
                   minWidth: header.column.columnDef.minSize,
+                  maxWidth: header.column.columnDef.maxSize,
                 }}
               >
                 {header.isPlaceholder
@@ -129,13 +133,7 @@ const EnteranceTable = ({ searchText, data, isEnteredTicket, onClickReset }: Pro
           {table.getRowModel().rows.map((row) => (
             <Styled.Row key={row.id}>
               {row.getVisibleCells().map((cell) => (
-                <Styled.Item
-                  key={cell.id}
-                  style={{
-                    width: cell.column.columnDef.minSize ? 'auto' : `${cell.column.getSize()}px`,
-                    minWidth: cell.column.columnDef.minSize,
-                  }}
-                >
+                <Styled.Item key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </Styled.Item>
               ))}

diff --git a/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts b/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts
@@ -2,58 +2,45 @@ import { Button } from '@boolti/ui';
 import styled from '@emotion/styled';
 
 const Container = styled.table`
-  display: flex;
-  flex-direction: column;
+  table-layout: auto;
   margin: 16px 0;
   width: ${({ theme }) => theme.breakpoint.desktop};
   height: 547px;
 `;
 
 const HeaderRow = styled.tr`
-  display: flex;
-  flex: 0 0 auto;
-  flex-wrap: nowrap;
+  width: 100%;
   padding-left: 8px;
   background-color: ${({ theme }) => theme.palette.grey.g00};
   border-top: 1px solid ${({ theme }) => theme.palette.grey.g20};
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey.g20};
 `;
 
-const HeaderItem = styled.td`
-  display: inline-block;
-  flex: 0 0 auto;
+const HeaderItem = styled.th`
   padding: 12px;
   ${({ theme }) => theme.typo.b2};
   color: ${({ theme }) => theme.palette.grey.g60};
-  &:not(:last-of-type) {
-    margin-right: 12px;
-  }
+  white-space: nowrap;
 
   &.ticket-price {
     text-align: right;
   }
 `;
 
 const Row = styled.tr`
-  display: flex;
-  flex-wrap: nowrap;
+  width: 100%;
   padding-left: 8px;
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey.g20};
 `;
 
 const Item = styled.td`
-  display: block;
-  flex: 0 0 auto;
   padding: 14px 12px;
   white-space: nowrap;
   ${({ theme }) => theme.typo.b2};
   color: ${({ theme }) => theme.palette.grey.g90};
   & strong {
     background-color: ${({ theme }) => theme.palette.primary.o0};
   }
-  &:not(:last-of-type) {
-    margin-right: 12px;
-  }
   &.ticket-price {
     text-align: right;
   }

diff --git a/apps/admin/src/components/ReservationTable/index.tsx b/apps/admin/src/components/ReservationTable/index.tsx
@@ -222,14 +222,7 @@ const ReservationTable = ({
             {table.getRowModel().rows.map((row) => (
               <Styled.Row key={row.id}>
                 {row.getVisibleCells().map((cell) => (
-                  <Styled.Item
-                    key={cell.id}
-                    style={{
-                      width: cell.column.columnDef.minSize ? 'auto' : `${cell.column.getSize()}px`,
-                      minWidth: cell.column.columnDef.minSize,
-                    }}
-                    className={cell.column.columnDef.id}
-                  >
+                  <Styled.Item key={cell.id} className={cell.column.columnDef.id}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </Styled.Item>
                 ))}