From 751cd97d28c5bbde77aef1f16b4a7c9c9d1ff8c7 Mon Sep 17 00:00:00 2001
From: Minsu Kim <alstn2468_@naver.com>
Date: Sat, 30 Nov 2024 00:56:13 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EnteranceTable/EnteranceTable.styles.ts   | 26 ++++++-------------
 .../src/components/EnteranceTable/index.tsx   | 16 +++++-------
 .../ReservationTable.styles.ts                | 23 ++++------------
 .../src/components/ReservationTable/index.tsx |  9 +------
 4 files changed, 21 insertions(+), 53 deletions(-)

diff --git a/apps/admin/src/components/EnteranceTable/EnteranceTable.styles.ts b/apps/admin/src/components/EnteranceTable/EnteranceTable.styles.ts
index 55be2242..4ee710fd 100644
--- 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
index 8ba604b7..8dcf380b 100644
--- 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
index 057935bd..b480ad36 100644
--- a/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts
+++ b/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts
@@ -2,32 +2,25 @@ 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;
@@ -35,15 +28,12 @@ const HeaderItem = styled.td`
 `;
 
 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};
@@ -51,9 +41,6 @@ const Item = styled.td`
   & 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
index 92cda059..fb6d6475 100644
--- 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>
                 ))}

From 7c3cc4b6405c1876a6ce0f7b414ff32f385c1c0a Mon Sep 17 00:00:00 2001
From: Minsu Kim <alstn2468_@naver.com>
Date: Sat, 30 Nov 2024 01:00:01 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20Empty=20=EB=8C=80=EC=9D=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/EnteranceTable/EnteranceTable.styles.ts    | 4 ++++
 .../components/ReservationTable/ReservationTable.styles.ts    | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/apps/admin/src/components/EnteranceTable/EnteranceTable.styles.ts b/apps/admin/src/components/EnteranceTable/EnteranceTable.styles.ts
index 4ee710fd..fa5b7c70 100644
--- a/apps/admin/src/components/EnteranceTable/EnteranceTable.styles.ts
+++ b/apps/admin/src/components/EnteranceTable/EnteranceTable.styles.ts
@@ -47,7 +47,11 @@ const Item = styled.td`
 `;
 
 const Empty = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
   display: flex;
+  transform: translateX(-50%);
   flex-direction: column;
   flex: 1;
   justify-content: center;
diff --git a/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts b/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts
index b480ad36..829a30b3 100644
--- a/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts
+++ b/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts
@@ -52,7 +52,11 @@ const DisabledText = styled.span`
 `;
 
 const Empty = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
   display: flex;
+  transform: translateX(-50%);
   flex-direction: column;
   flex: 1;
   justify-content: center;