diff --git a/apps/admin/src/components/EnteranceTable/EnteranceTable.styles.ts b/apps/admin/src/components/EnteranceTable/EnteranceTable.styles.ts
index 55be2242..fa5b7c70 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,13 +44,14 @@ const Item = styled.td`
& strong {
background-color: ${({ theme }) => theme.palette.primary.o0};
}
- &:not(:last-of-type) {
- margin-right: 12px;
- }
`;
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/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 = [
아직 방문하지 않았습니다.
);
},
- 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
{header.isPlaceholder
@@ -129,13 +133,7 @@ const EnteranceTable = ({ searchText, data, isEnteredTicket, onClickReset }: Pro
{table.getRowModel().rows.map((row) => (
{row.getVisibleCells().map((cell) => (
-
+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
))}
diff --git a/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts b/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts
index 057935bd..829a30b3 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;
}
@@ -65,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;
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) => (
{row.getVisibleCells().map((cell) => (
-
+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
))}