feat: 툴팁 노출 반영

Nexters · Nov 11, 2024 · 7f00428 · 7f00428
1 parent 6b791ce
commit 7f00428
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 39 deletions.
diff --git 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
@@ -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<ReservationWithTicketsResponse>();
 
@@ -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 (
+                  <Styled.TooltipAnchor
+                    className="ticket-tooltip"
+                    data-for="ticket-tooltip"
+                    data-tooltip-content={
+                      useTooltip
+                        ? props.row.original.tickets
+                            .reduce((content, ticket) => content + ' ' + ticket.csTicketId, '')
+                            .trim()
+                        : ''
+                    }
+                  >
+                    {props.getValue()}
+                  </Styled.TooltipAnchor>
+                );
+              }
+              return props.getValue();
+            },
           },
         ),
       ]
@@ -124,45 +146,73 @@ const ReservationTable = ({
     },
   });
   return (
-    <Styled.Container>
-      {table.getHeaderGroups().map((headerGroup) => (
-        <Styled.HeaderRow key={headerGroup.id}>
-          {headerGroup.headers.map((header) => (
-            <Styled.HeaderItem key={header.id}>
-              {header.isPlaceholder
-                ? null
-                : flexRender(header.column.columnDef.header, header.getContext())}
-            </Styled.HeaderItem>
-          ))}
-        </Styled.HeaderRow>
-      ))}
-      {data.length === 0 ? (
-        <Styled.Empty>
-          {isSearchResult ? (
-            <>
-              검색 결과가 없어요.{'\n'}방문자 이름 또는 연락처를 변경해보세요.
-              <Styled.ResetButton colorTheme="line" size="bold" onClick={onClickReset}>
-                검색 초기화
-              </Styled.ResetButton>
-            </>
-          ) : (
-            emptyText
-          )}
-        </Styled.Empty>
-      ) : (
-        <>
-          {table.getRowModel().rows.map((row) => (
-            <Styled.Row key={row.id}>
-              {row.getVisibleCells().map((cell) => (
-                <Styled.Item key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </Styled.Item>
+    <>
+      <Styled.Container>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <Styled.HeaderRow key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <Styled.HeaderItem key={header.id}>
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(header.column.columnDef.header, header.getContext())}
+              </Styled.HeaderItem>
+            ))}
+          </Styled.HeaderRow>
+        ))}
+        {data.length === 0 ? (
+          <Styled.Empty>
+            {isSearchResult ? (
+              <>
+                검색 결과가 없어요.{'\n'}방문자 이름 또는 연락처를 변경해보세요.
+                <Styled.ResetButton colorTheme="line" size="bold" onClick={onClickReset}>
+                  검색 초기화
+                </Styled.ResetButton>
+              </>
+            ) : (
+              emptyText
+            )}
+          </Styled.Empty>
+        ) : (
+          <>
+            {table.getRowModel().rows.map((row) => (
+              <Styled.Row key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <Styled.Item key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Styled.Item>
+                ))}
+              </Styled.Row>
+            ))}
+          </>
+        )}
+      </Styled.Container>
+      <Tooltip
+        style={{
+          opacity: 0.85,
+          backgroundColor: palette.grey.g90,
+          filter: 'drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.10))',
+          padding: '6px 8px',
+          borderRadius: '4px',
+          zIndex: 999,
+        }}
+        anchorSelect=".ticket-tooltip"
+        id="ticket-tooltip"
+        place="bottom"
+        render={({ content }) => {
+          const ticketIds = (content ?? '').split(' ');
+          return (
+            <Styled.TooltipItemColumn>
+              {ticketIds.map((id, index) => (
+                <Styled.TooltipItemRow>
+                  <span>No.{index + 1}</span>
+                  <span>{id}</span>
+                </Styled.TooltipItemRow>
               ))}
-            </Styled.Row>
-          ))}
-        </>
-      )}
-    </Styled.Container>
+            </Styled.TooltipItemColumn>
+          );
+        }}
+      />
+    </>
   );
 };