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())} ))}