Merge pull request #249 from Nexters/fix/mvp-9th-qa-3

fix: 방문자, 결제 관리 고도화 QA 모음 (3)
Nexters · Nov 29, 2024 · a54b6c7 · a54b6c7
2 parents 76946d3 + 49e5516
commit a54b6c7
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 33 deletions.
diff --git a/apps/admin/src/components/EnteranceTable/index.tsx b/apps/admin/src/components/EnteranceTable/index.tsx
@@ -81,6 +81,9 @@ const EnteranceTable = ({ searchText, data, isEnteredTicket, onClickReset }: Pro
     columns,
     data,
     getCoreRowModel: getCoreRowModel(),
+    defaultColumn: {
+      minSize: undefined,
+    },
     meta: {
       searchText,
     },
@@ -91,7 +94,13 @@ const EnteranceTable = ({ searchText, data, isEnteredTicket, onClickReset }: Pro
         {table.getHeaderGroups().map((headerGroup) => (
           <Styled.HeaderRow key={headerGroup.id}>
             {headerGroup.headers.map((header) => (
-              <Styled.HeaderItem key={header.id} style={{ width: `${header.getSize()}px` }}>
+              <Styled.HeaderItem
+                key={header.id}
+                style={{
+                  width: header.column.columnDef.minSize ? 'auto' : `${header.getSize()}px`,
+                  minWidth: header.column.columnDef.minSize,
+                }}
+              >
                 {header.isPlaceholder
                   ? null
                   : flexRender(header.column.columnDef.header, header.getContext())}
@@ -120,7 +129,13 @@ 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.getSize()}px` }}>
+                <Styled.Item
+                  key={cell.id}
+                  style={{
+                    width: cell.column.columnDef.minSize ? 'auto' : `${cell.column.getSize()}px`,
+                    minWidth: cell.column.columnDef.minSize,
+                  }}
+                >
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </Styled.Item>
               ))}

diff --git a/apps/admin/src/components/ReservationTable/index.tsx b/apps/admin/src/components/ReservationTable/index.tsx
@@ -54,6 +54,18 @@ const getColumns = (ticketStatus: TicketStatus) => [
     },
     size: 140,
   }),
+  columnHelper.accessor('reservationHolderDetail', {
+    header: '방문자명',
+    id: 'reservationHolderDetailName',
+    cell: (props) => props.getValue()?.name ?? '-',
+    size: 80,
+  }),
+  columnHelper.accessor('reservationHolderDetail', {
+    header: '연락처',
+    id: 'reservationHolderDetailNamePhoneNumber',
+    cell: (props) => formatPhoneNumber(props.getValue()?.phoneNumber) ?? '-',
+    size: 140,
+  }),
   columnHelper.accessor('salesTicketType.ticketType', {
     header: '티켓종류',
     cell: (props) => {
@@ -162,6 +174,9 @@ const ReservationTable = ({
     columns: getColumns(selectedTicketStatus),
     data,
     getCoreRowModel: getCoreRowModel(),
+    defaultColumn: {
+      minSize: undefined,
+    },
     meta: {
       searchText,
     },
@@ -175,7 +190,10 @@ const ReservationTable = ({
               {headerGroup.headers.map((header) => (
                 <Styled.HeaderItem
                   key={header.id}
-                  style={{ width: `${header.getSize()}px` }}
+                  style={{
+                    width: header.column.columnDef.minSize ? 'auto' : `${header.getSize()}px`,
+                    minWidth: header.column.columnDef.minSize,
+                  }}
                   className={header.column.columnDef.id}
                 >
                   {header.isPlaceholder
@@ -206,7 +224,10 @@ const ReservationTable = ({
                 {row.getVisibleCells().map((cell) => (
                   <Styled.Item
                     key={cell.id}
-                    style={{ width: `${cell.column.getSize()}px` }}
+                    style={{
+                      width: cell.column.columnDef.minSize ? 'auto' : `${cell.column.getSize()}px`,
+                      minWidth: cell.column.columnDef.minSize,
+                    }}
                     className={cell.column.columnDef.id}
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}

diff --git a/apps/admin/src/hooks/useBodyScrollLock.ts b/apps/admin/src/hooks/useBodyScrollLock.ts
@@ -1,6 +1,6 @@
 import { useLayoutEffect } from 'react';
 
-export const useBodyScrollLock = (enabled?: boolean) => {
+export const useBodyScrollLock = (enabled: boolean = true) => {
   useLayoutEffect(() => {
     const originalStyle = window.getComputedStyle(document.body).overflow;
     if (enabled) {

diff --git a/apps/admin/src/pages/ShowEnterancePage/index.tsx b/apps/admin/src/pages/ShowEnterancePage/index.tsx
@@ -6,12 +6,10 @@ import {
   useShowEnteranceSummary,
 } from '@boolti/api';
 import { ClearIcon, SearchIcon } from '@boolti/icon';
-import { useDialog } from '@boolti/ui';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import EnteranceTable from '~/components/EnteranceTable';
-import EntranceConfirmDialogContent from '~/components/EntranceConfirmDialogContent';
 import MobileCardList from '~/components/MobileCardList';
 import Pagination from '~/components/Pagination';
 
@@ -26,7 +24,6 @@ type TicketType = 'ALL' | 'USED' | 'UNUSED';
 
 const ShowEnterancePage = () => {
   const params = useParams<{ showId: string }>();
-  const { open, close } = useDialog();
 
   const [enteranceTicketType, setEnteranceTicetType] = useState<TicketType>('ALL');
   const [searchText, setSearchText] = useState('');
@@ -106,16 +103,10 @@ const ShowEnterancePage = () => {
               <Styled.SumamryLabel bold>입장 코드 : {managerCode}</Styled.SumamryLabel>
               <Styled.QuestionTextButton
                 onClick={() => {
-                  isMobile
-                    ? window.open(
-                        'https://boolti.notion.site/d83a2f0e0b3f4b83afa7cec5b0a36d45',
-                        '_blank',
-                      )
-                    : open({
-                        title: '관객 입장 확인 방법',
-                        content: <EntranceConfirmDialogContent close={close} />,
-                        isAuto: true,
-                      });
+                  window.open(
+                    'https://boolti.notion.site/d83a2f0e0b3f4b83afa7cec5b0a36d45',
+                    '_blank',
+                  );
                 }}
               >
                 사용 방법

diff --git a/apps/admin/src/pages/ShowReservationPage/index.tsx b/apps/admin/src/pages/ShowReservationPage/index.tsx
@@ -1,7 +1,7 @@
 import {
   TicketStatus,
+  useAdminReservationSummaryV2,
   useShowDetail,
-  useShowReservationSummary,
   useShowReservationWithTickets,
 } from '@boolti/api';
 import { ClearIcon, SearchIcon } from '@boolti/icon';
@@ -41,7 +41,7 @@ const ShowReservationPage = () => {
   const isMobile = deviceWidth < parseInt(theme.breakpoint.mobile, 10);
 
   const { data: show } = useShowDetail(showId);
-  const { data: reservationSummary } = useShowReservationSummary(showId);
+  const { data: reservationSummary } = useAdminReservationSummaryV2(showId);
   const { data: reservationData, isLoading: isReservationPagesLoading } =
     useShowReservationWithTickets(
       showId,
@@ -77,17 +77,17 @@ const ShowReservationPage = () => {
   if (!show || !reservationSummary) return null;
 
   const {
-    salesTicketSoldCount,
-    totalSalesAmount,
-    totalSoldCount,
-    completeCount,
-    waitCount,
-    cancelCount,
+    totalPaymentAmount,
+    totalReservationCount,
+    totalReservedTicketCount,
+    waitedReservationCount,
+    completedReservationCount,
+    cancelledReservationCount,
   } = reservationSummary;
 
   return (
     <>
-      {totalSoldCount === 0 ? (
+      {totalReservationCount === 0 ? (
         <Styled.EmptyContainer>
           <BooltiGreyIcon />
           <Styled.EmptyTitle>
@@ -100,16 +100,16 @@ const ShowReservationPage = () => {
           <Styled.TicketSummaryContainer>
             <Styled.TicketSummary colorTheme="grey">
               <Styled.TicketSumamryLabel>결제 건수</Styled.TicketSumamryLabel>
-              <Styled.TicketSumamryValue>{salesTicketSoldCount}매</Styled.TicketSumamryValue>
+              <Styled.TicketSumamryValue>{totalReservationCount}매</Styled.TicketSumamryValue>
             </Styled.TicketSummary>
             <Styled.TicketSummary colorTheme="grey">
               <Styled.TicketSumamryLabel>발권 티켓</Styled.TicketSumamryLabel>
-              <Styled.TicketSumamryValue>{totalSoldCount}매</Styled.TicketSumamryValue>
+              <Styled.TicketSumamryValue>{totalReservedTicketCount}매</Styled.TicketSumamryValue>
             </Styled.TicketSummary>
             <Styled.TicketSummary colorTheme="red">
               <Styled.TicketSumamryLabel>결제 금액</Styled.TicketSumamryLabel>
               <Styled.TicketSumamryValue>
-                {totalSalesAmount.toLocaleString()}원
+                {totalPaymentAmount.toLocaleString()}원
               </Styled.TicketSumamryValue>
             </Styled.TicketSummary>
           </Styled.TicketSummaryContainer>
@@ -122,7 +122,7 @@ const ShowReservationPage = () => {
                 }}
                 isSelected={selectedTicketStatus === 'COMPLETE'}
               >
-                {isMobile ? '완료' : '결제 완료'} <span>{completeCount}</span>
+                {isMobile ? '완료' : '결제 완료'} <span>{completedReservationCount}</span>
               </Styled.TicketReservationSummaryButton>
               <Styled.TicketReservationSummaryButton
                 onClick={() => {
@@ -131,7 +131,7 @@ const ShowReservationPage = () => {
                 }}
                 isSelected={selectedTicketStatus === 'WAIT'}
               >
-                {isMobile ? '대기' : '결제 대기'} <span>{waitCount}</span>
+                {isMobile ? '대기' : '결제 대기'} <span>{waitedReservationCount}</span>
               </Styled.TicketReservationSummaryButton>
               <Styled.TicketReservationSummaryButton
                 onClick={() => {
@@ -140,7 +140,7 @@ const ShowReservationPage = () => {
                 }}
                 isSelected={selectedTicketStatus === 'CANCEL'}
               >
-                {isMobile ? '취소' : '결제 취소'} <span>{cancelCount}</span>
+                {isMobile ? '취소' : '결제 취소'} <span>{cancelledReservationCount}</span>
               </Styled.TicketReservationSummaryButton>
             </Styled.TicketReservationSummaryButtonContainer>
             <Styled.FilterContainer>

diff --git a/packages/api/src/queries/index.ts b/packages/api/src/queries/index.ts
@@ -39,6 +39,7 @@ import useShowReservationWithTickets from './useShowReservationWithTickets';
 import useCastTeamList from './useCastTeamList';
 import useAdminTicketList from './useAdminTicketList';
 import useAdminSalesTicketList from './useAdminSalesTicketList';
+import useAdminReservationSummaryV2 from './useAdminReservationSummaryV2';
 
 export {
   useCastTeamList,
@@ -63,6 +64,7 @@ export {
   useShowEnteranceSummary,
   useShowLastSettlementEvent,
   useShowList,
+  useAdminReservationSummaryV2,
   useShowPreview,
   useShowReservations,
   useShowReservationSummary,

diff --git a/packages/api/src/queries/useAdminReservationSummaryV2.ts b/packages/api/src/queries/useAdminReservationSummaryV2.ts
@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { queryKeys } from '../queryKey';
+
+const useAdminReservationSummaryV2 = (showId: number) =>
+  useQuery({
+    ...queryKeys.adminReservation.summaryV2(showId),
+  });
+
+export default useAdminReservationSummaryV2;
diff --git a/packages/api/src/queryKey.ts b/packages/api/src/queryKey.ts
@@ -48,6 +48,7 @@ import {
 import {
   AdminReservationSummaryResponse,
   PageAdminReservationResponse,
+  ReservationSummaryResponseV2,
 } from './types/adminReservation';
 import {
   AdminTicketSalesInfoResponse,
@@ -216,6 +217,11 @@ export const adminReservationQueryKeys = createQueryKeys('adminReservation', {
         `sa-api/v1/shows/${showId}/reservation-summaries`,
       ),
   }),
+  summaryV2: (showId: number) => ({
+    queryKey: [showId],
+    queryFn: () =>
+      fetcher.get<ReservationSummaryResponseV2>(`web/v2/shows/${showId}/reservation-summaries`),
+  }),
 });
 
 export const adminTicketQueryKeys = createQueryKeys('adminTicket', {

diff --git a/packages/api/src/types/adminReservation.ts b/packages/api/src/types/adminReservation.ts
@@ -17,3 +17,18 @@ export type AdminReservationResponse = ReservationResponse & {
   cancelReason: string;
 };
 export type PageAdminReservationResponse = PageResponse<AdminReservationResponse>;
+
+export interface ReservationSummaryResponseV2 {
+  /** 총 발권 티켓 수량 */
+  totalReservedTicketCount: number;
+  /** 총 결제 금액 */
+  totalPaymentAmount: number;
+  /** 총 예매 건수 */
+  totalReservationCount: number;
+  /** 결제 대기 예매 건수 */
+  waitedReservationCount: number;
+  /** 결제 완료 예매 건수 */
+  completedReservationCount: number;
+  /** 결제 취소 예매 건수 */
+  cancelledReservationCount: number;
+}
diff --git a/packages/api/src/types/show.ts b/packages/api/src/types/show.ts
@@ -126,6 +126,13 @@ export interface GiftResponseV2 {
   createdAt: string;
 }
 
+export interface ReservationHolderDetailResponse {
+  /** 예매자 이름 */
+  name: string;
+  /** 예매자 전화번호 */
+  phoneNumber: string;
+}
+
 export interface ReservationWithTicketsResponse {
   /** 예매 ID */
   reservationId: number;
@@ -147,6 +154,8 @@ export interface ReservationWithTicketsResponse {
   createdAt: string;
   /** 예매 수정 일시 */
   modifiedAt: string;
+  /** 예매자 정보 */
+  reservationHolderDetail: ReservationHolderDetailResponse;
 }
 
 export type PageReservationWithTicketsResponse = PageResponse<ReservationWithTicketsResponse>;