feat: 예매자 삭제 api 연결

TEAM-BEAT · Jul 16, 2024 · 6b38209 · 6b38209
1 parent 6ed589b
commit 6b38209
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 24 deletions.
diff --git a/src/apis/domains/tickets/api.ts b/src/apis/domains/tickets/api.ts
@@ -1,6 +1,7 @@
 import { del, get, put } from "@apis/index";
 import { components } from "@typings/api/schema";
 import { ApiResponseType } from "@typings/commonType";
+import { DeleteFormDataProps } from "@typings/deleteBookerFormatProps";
 import { AxiosResponse } from "axios";
 
 // 예매자 목록 조회 API (GET)
@@ -60,10 +61,11 @@ export const putTicketUpdate = async (
 };
 
 // 예매자 삭제 API (DELETE)
-export type TicketDeleteRequest = components["schemas"]["TicketDeleteRequest"];
+//이거 타입 잘못되었을 수도..? bookingList 가 number를 담은 배열로 되어 있는데, 실제로는 아니었음
+//export type TicketDeleteRequest = components["schemas"]["TicketDeleteRequest"];
 
 export const deleteTicketDelete = async (
-  formData: TicketDeleteRequest
+  formData: DeleteFormDataProps
 ): Promise<SuccessResponseVoid | null> => {
   try {
     const response: AxiosResponse<ApiResponseType<SuccessResponseVoid>> = await del(

diff --git a/src/apis/domains/tickets/queries.ts b/src/apis/domains/tickets/queries.ts
@@ -1,10 +1,10 @@
 import { QueryClient, useMutation, useQuery } from "@tanstack/react-query";
+import { DeleteFormDataProps } from "@typings/deleteBookerFormatProps";
 import {
   deleteTicketDelete,
   getTicketReq,
   getTicketRetrieve,
   putTicketUpdate,
-  TicketDeleteRequest,
   TicketUpdateRequest,
 } from "./api";
 // 예매자 목록 조회 API (GET)를 위한 쿼리 작성
@@ -38,7 +38,7 @@ export const useTicketDelete = () => {
   const queryClient = new QueryClient();
 
   return useMutation({
-    mutationFn: (formData: TicketDeleteRequest) => deleteTicketDelete(formData),
+    mutationFn: (formData: DeleteFormDataProps) => deleteTicketDelete(formData),
     onSuccess: (res) => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.LIST] });
     },

diff --git a/src/pages/ticketholderlist/TicketHolderList.tsx b/src/pages/ticketholderlist/TicketHolderList.tsx
@@ -1,4 +1,4 @@
-import { useTicketRetrive, useTicketUpdate } from "@apis/domains/tickets/queries";
+import { useTicketDelete, useTicketRetrive, useTicketUpdate } from "@apis/domains/tickets/queries";
 import Button from "@components/commons/button/Button";
 import { NAVIGATION_STATE } from "@constants/navigationState";
 import { useHeader } from "@hooks/useHeader";
@@ -43,6 +43,7 @@ const TicketHolderList = () => {
 
   const { openConfirm, closeConfirm } = useModal();
   const { mutate, mutateAsync } = useTicketUpdate();
+  const { mutate: deleteMutate, mutateAsync: deleteMutateAsync } = useTicketDelete();
   const handlePaymentFixAxiosFunc = () => {
     //PUT API 요청
     mutate({
@@ -64,9 +65,15 @@ const TicketHolderList = () => {
     });
   };
 
-  const handleBookerDeleteAxiosFunc = () => {
-    //나중에 api 요청 작성할 예정
+  //(추후 삭제 요청을 보내기 위한 formData - 타입 정의가 필요할 수도..?
+  const [deleteFormData, setDeleteFormData] = useState<DeleteFormDataProps>({
+    performanceId: Number(performanceId),
+    bookingList: [],
+  });
 
+  const handleBookerDeleteAxiosFunc = () => {
+    //나중에 DELETE api 요청 작성할 예정
+    deleteMutate(deleteFormData);
     closeConfirm();
     window.location.reload();
   };
@@ -81,15 +88,7 @@ const TicketHolderList = () => {
       noCallback: closeConfirm,
     });
   };
-  //(추후 삭제 요청을 보내기 위한 formData - 타입 정의가 필요할 수도..?
-  const [formData, setFormData] = useState<DeleteFormDataProps>({
-    performanceId: Number(performanceId),
-    bookingList: [
-      {
-        bookingId: -1,
-      },
-    ],
-  });
+
   const navigate = useNavigate();
 
   const handleNavigateBack = () => {
@@ -226,8 +225,8 @@ const TicketHolderList = () => {
           {filteredData?.map((obj, index) => (
             <ManagerCard
               key={`managerCard-${index}`}
-              formData={formData}
-              setFormData={setFormData}
+              deleteFormData={deleteFormData}
+              setDeleteFormData={setDeleteFormData}
               isDeleteMode={isDeleteMode}
               bookingId={obj.bookingId}
               isPaid={obj.isPaymentCompleted}

diff --git a/src/pages/ticketholderlist/components/managercard/ManagerCard.tsx b/src/pages/ticketholderlist/components/managercard/ManagerCard.tsx
@@ -4,8 +4,8 @@ import SelectIcon from "../selectIcon/SelectIcon";
 import * as S from "./ManagerCard.styled";
 
 const ManagerCard = ({
-  formData,
-  setFormData,
+  deleteFormData,
+  setDeleteFormData,
   isDeleteMode,
   bookingId,
   isPaid,
@@ -17,8 +17,8 @@ const ManagerCard = ({
   bookerPhoneNumber,
   createAt,
 }: {
-  formData: DeleteFormDataProps;
-  setFormData: Dispatch<SetStateAction<DeleteFormDataProps>>;
+  deleteFormData: DeleteFormDataProps;
+  setDeleteFormData: Dispatch<SetStateAction<DeleteFormDataProps>>;
   isDeleteMode: boolean;
   bookingId?: number;
   isPaid?: boolean;
@@ -34,7 +34,7 @@ const ManagerCard = ({
   //만약 체크해제를 할 경우 삭제할 목록에 포함되어 있던 해당 bookingId를 삭제하는 로직 구현
   //사용하기 위해서는 한번 더 감싸야 함.
   const handleCheckBox = (managerBookingId: number) => {
-    setFormData((prevFormData) => {
+    setDeleteFormData((prevFormData) => {
       const isAlreadyChecked = prevFormData.bookingList.some(
         (obj) => obj.bookingId === managerBookingId
       );
@@ -68,7 +68,7 @@ const ManagerCard = ({
       {isDeleteMode && (
         <SelectIcon
           onClick={() => handleCheckBox(bookingId as number)}
-          isChecked={formData.bookingList.some((obj) => obj.bookingId === bookingId)}
+          isChecked={deleteFormData.bookingList.some((obj) => obj.bookingId === bookingId)}
         />
       )}
       <S.ManagerCardLayout $isDeleteMode={isDeleteMode} $isDetail={isDetail}>