feat: 환불 처리 api 연결

src/apis/domains/tickets/api.ts

@@ -37,17 +37,11 @@ export const getTicketRetrieve = async (
   }
 };
 
+type SuccessResponseVoid = components["schemas"]["SuccessResponseVoid"];
+
 // 예매자 입급 여부 수정 API (PUT)
-/*
-export interface putTicketReq {
-  performanceId: number;
-  performanceTitle: string;
-  totalScheduleCoun: number;
-  bookingList: BookingListProps[];
-}
-*/
+
 export type TicketUpdateRequest = components["schemas"]["TicketUpdateRequest"];
-type SuccessResponseVoid = components["schemas"]["SuccessResponseVoid"];
 
 //async 함수는 항상 promise로 감싸서 값을 리턴한다.
 //즉, 비동기 함수의 값을 사용하려면 추후 await이나 then 을 사용해야 한다던데..
@@ -68,18 +62,19 @@ export const putTicketUpdate = async (
   }
 };
 
-// 예매자 취소 API (PATCH)
-//이거 타입 잘못되었을 수도..? bookingList 가 number를 담은 배열로 되어 있는데, 실제로는 아니었음
-//export type TicketDeleteRequest = components["schemas"]["TicketDeleteRequest"];
+// 예매자 환불처리 (PUT)
+
+export type TicketRefundRequest = components["schemas"]["TicketRefundRequest"];
 
-export const patchTicketCancel = async (
-  formData: PatchFormDataProps
+export const putTicketRefund = async (
+  formData: TicketRefundRequest
 ): Promise<SuccessResponseVoid | null> => {
   try {
-    const response: AxiosResponse<ApiResponseType<SuccessResponseVoid>> = await patch(
-      "tickets",
+    const response: AxiosResponse<ApiResponseType<SuccessResponseVoid>> = await put(
+      "tickets/refund",
       formData
     );
+
     return response.data.data;
   } catch (error) {
     console.log("error", error);

src/apis/domains/tickets/queries.ts

@@ -3,8 +3,9 @@ import { PatchFormDataProps } from "@typings/deleteBookerFormatProps";
 import {
   getTicketReq,
   getTicketRetrieve,
-  patchTicketCancel,
+  putTicketRefund,
   putTicketUpdate,
+  TicketRefundRequest,
   TicketUpdateRequest,
 } from "./api";
 
@@ -37,12 +38,12 @@ export const useTicketUpdate = () => {
   });
 };
 
-// 예매자를 취소하는 API (PATCH)를 위한 쿼리 작성
-export const useTicketPatch = () => {
+// 예매자 환불 여부 수정 API (PUT)를 위한 쿼리 작성
+export const useTicketRefund = () => {
   const queryClient = new QueryClient();
 
   return useMutation({
-    mutationFn: (formData: PatchFormDataProps) => patchTicketCancel(formData),
+    mutationFn: (formData: TicketRefundRequest) => putTicketRefund(formData),
     onSuccess: (res) => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.LIST, BOOKING_QUERY_KEY.BOOKING_LIST] });
       queryClient.refetchQueries({ queryKey: [QUERY_KEY.LIST, BOOKING_QUERY_KEY.BOOKING_LIST] });

src/assets/svgs/index.tsx

@@ -1,4 +1,6 @@
 export { default as BannerBasic } from "./BannerBasic";
+export { default as BeatMapMarker } from "./BeatMapMarker";
+export { default as BtnFilter } from "./BtnFilter";
 export { default as BtnFloating } from "./BtnFloating";
 export { default as BtnModalDelete } from "./BtnModalDelete";
 export { default as ButtonDelete24 } from "./ButtonDelete24";
@@ -60,10 +62,10 @@ export { default as IconWoochaegook } from "./IconWoochaegook";
 export { default as IconWoori } from "./IconWoori";
 export { default as IconXButton } from "./IconXButton";
 export { default as IcOutlinePlace } from "./IcOutlinePlace";
-export { default as KakaoMapArrow } from "./KakaoMapArrow";
 export { default as IcRefresh } from "./IcRefresh";
+export { default as KakaoMapArrow } from "./KakaoMapArrow";
 export { default as NotFoundAsset } from "./NotFoundAsset";
 export { default as SelectionControlCheckboxSelectedOff } from "./SelectionControlCheckboxSelectedOff";
 export { default as Subtract } from "./Subtract";
 export { default as Switch } from "./Switch";
-export { default as Union } from "./Union";
+export { default as Union } from "./Union";

src/pages/ticketholderlist/TicketHolderList.tsx

@@ -1,4 +1,9 @@
-import { useTicketPatch, useTicketRetrive, useTicketUpdate } from "@apis/domains/tickets/queries";
+import {
+  useTicketPatch,
+  useTicketRefund,
+  useTicketRetrive,
+  useTicketUpdate,
+} from "@apis/domains/tickets/queries";
 import Loading from "@components/commons/loading/Loading";
 import MetaTag from "@components/commons/meta/MetaTag";
 import Toast from "@components/commons/toast/Toast";
@@ -114,7 +119,7 @@ const TicketHolderList = () => {
     closeConfirm();
     showToast();
     setTimeout(() => {
-      // window.location.reload();
+      window.location.reload();
     }, 1000);
   };
 
@@ -124,25 +129,75 @@ const TicketHolderList = () => {
       subTitle: "예매자에게 입금이 확인되었음을 알려드릴게요!",
       okText: "입금 처리하기",
       noText: "아니요",
-      okCallback: handlePaymentFixAxiosFunc,
+      okCallback: () => {
+        handlePaymentFixAxiosFunc();
+        // 혹시 테스트 과정에서 로그 확인을 위해 새로고침을 지운다면 아래 주석 해제
+        // setStatus("DEFAULT");
+        // setFilterList({ scheduleNumber: [], bookingStatus: [] });
+        // setCheckedBookingId([]);
+      },
       noCallback: closeConfirm,
     });
   };
 
+  // 환불 요청
+
+  const {
+    mutate: refundMutate,
+    mutateAsync: refundMutateAsync,
+    isPending: refundIsPending,
+  } = useTicketRefund();
+
+  const handlePaymentRefundBtn = () => {
+    openConfirm({
+      title: "환불 처리 하시겠어요?",
+      subTitle: "예매자에게 환불 금액을 보낸 뒤 처리해 주세요.",
+      okText: "환불 처리하기",
+      noText: "아니요",
+      okCallback: () => {
+        handlePaymentRefundAxiosFunc();
+        // 혹시 테스트 과정에서 로그 확인을 위해 새로고침을 지운다면 아래 주석 해제
+        // setStatus("DEFAULT");
+        // setFilterList({ scheduleNumber: [], bookingStatus: [] });
+        // setCheckedBookingId([]);
+      },
+      noCallback: closeConfirm,
+    });
+  };
+
+  const handlePaymentRefundAxiosFunc = () => {
+    if (refundIsPending) {
+      return;
+    }
+    // 환불 요청 PUT API 요청
+    // bookingId만 전달
+    const filteredPaymentData = paymentData.map(({ bookingId }) => ({
+      bookingId: checkedBookingId.includes(bookingId) && bookingId,
+    }));
+
+    refundMutate({
+      performanceId: Number(performanceId),
+      bookingList: filteredPaymentData,
+    });
+    closeConfirm();
+    showToast();
+    setTimeout(() => {
+      window.location.reload();
+    }, 1000);
+  };
+
   const actions = {
     PAYMENT: {
       text: "입금 처리하기",
-      // TODO : 예매 확정 팝업
       action: () => {
         handlePaymentFixBtn();
-        setStatus("DEFAULT"), setFilterList({ scheduleNumber: [], bookingStatus: [] });
       },
     },
     REFUND: {
       text: "환불 처리하기",
       // TODO : 환불 처리 팝업
       action: () => {
-        setStatus("DEFAULT"), setFilterList({ scheduleNumber: [], bookingStatus: [] });
+        handlePaymentRefundBtn();
       },
     },
     DELETE: {