diff --git a/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts b/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts index 18ef2cfb..509435ef 100644 --- a/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts +++ b/apps/admin/src/components/ReservationTable/ReservationTable.styles.ts @@ -117,6 +117,29 @@ const ResetButton = styled(Button)` margin-top: 18px; `; +const TooltipItemColumn = styled.ul` + display: block; +`; + +const TooltipItemRow = styled.li` + display: flex; + justify-content: space-between; + align-items: center; + & > span { + ${({ theme }) => theme.typo.c1}; + color: ${({ theme }) => theme.palette.grey.w}; + } + & > span:first-of-type { + margin-right: 16px; + } +`; + +const TooltipAnchor = styled.a` + &:hover { + color: ${({ theme }) => theme.palette.grey.g50}; + } +`; + export default { Container, HeaderItem, @@ -125,4 +148,7 @@ export default { Item, Empty, ResetButton, + TooltipItemColumn, + TooltipItemRow, + TooltipAnchor, }; diff --git a/apps/admin/src/components/ReservationTable/index.tsx b/apps/admin/src/components/ReservationTable/index.tsx index 193e4893..1e0ff72b 100644 --- a/apps/admin/src/components/ReservationTable/index.tsx +++ b/apps/admin/src/components/ReservationTable/index.tsx @@ -1,6 +1,5 @@ import { ReservationWithTicketsResponse, TicketStatus } from '@boolti/api'; import { - ColumnDef, createColumnHelper, flexRender, getCoreRowModel, @@ -12,6 +11,8 @@ import { boldText } from '~/utils/boldText'; import { formatPhoneNumber } from '~/utils/format'; import Styled from './ReservationTable.styles'; +import { Tooltip } from 'react-tooltip'; +import { palette } from '@boolti/ui'; const columnHelper = createColumnHelper(); @@ -74,6 +75,27 @@ const getColumns = (ticketStatus: TicketStatus) => [ : row.tickets[0]?.csTicketId, { header: '티켓 번호', + cell: (props) => { + const useTooltip = props.row.original.tickets.length > 1; + if (useTooltip) { + return ( + content + ' ' + ticket.csTicketId, '') + .trim() + : '' + } + > + {props.getValue()} + + ); + } + return props.getValue(); + }, }, ), ] @@ -124,45 +146,73 @@ const ReservationTable = ({ }, }); return ( - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - {header.isPlaceholder - ? null - : flexRender(header.column.columnDef.header, header.getContext())} - - ))} - - ))} - {data.length === 0 ? ( - - {isSearchResult ? ( - <> - 검색 결과가 없어요.{'\n'}방문자 이름 또는 연락처를 변경해보세요. - - 검색 초기화 - - - ) : ( - emptyText - )} - - ) : ( - <> - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - + <> + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + ))} + + ))} + {data.length === 0 ? ( + + {isSearchResult ? ( + <> + 검색 결과가 없어요.{'\n'}방문자 이름 또는 연락처를 변경해보세요. + + 검색 초기화 + + + ) : ( + emptyText + )} + + ) : ( + <> + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + ))} + + )} + + { + const ticketIds = (content ?? '').split(' '); + return ( + + {ticketIds.map((id, index) => ( + + No.{index + 1} + {id} + ))} - - ))} - - )} - + + ); + }} + /> + ); };