feat: useMutation 예시 코드 추가

src/apis/domains/bookings/api.ts

@@ -0,0 +1,47 @@
+import { get, post } from "@apis/index";
+import { components } from "@typings/api/schema";
+import { ApiResponseType } from "@typings/commonType";
+import { AxiosResponse } from "axios";
+
+export interface postGuestReq {
+  scheduleId: number;
+  purchaseTicketCount: number;
+  scheduleNumber: string;
+  bookerName: string;
+  bookerPhoneNumber: string;
+  birthDate: string;
+  password: string;
+  totalPaymentAmount: number;
+  isPaymentCompleted: boolean;
+}
+
+type GuestBookingResponse = components["schemas"]["GuestBookingResponse"];
+
+// 1. API 요청 함수 작성 및 타입 추가
+export const postGuestBook = async (
+  formData: postGuestReq
+): Promise<GuestBookingResponse | null> => {
+  try {
+    const response: AxiosResponse<ApiResponseType<GuestBookingResponse>> = await post(
+      "/bookings/guest",
+      formData
+    );
+
+    return response.data.data;
+  } catch (error) {
+    console.error("error", error);
+
+    return null;
+  }
+};
+
+export const getGuestBookingList = async () => {
+  try {
+    const response = await get("/bookings/guest/retrieve");
+
+    console.log(response.data);
+    return response;
+  } catch (error) {
+    console.error("error", error);
+  }
+};

src/apis/domains/bookings/queries.ts

@@ -0,0 +1,28 @@
+import { QueryClient, useMutation, useQuery } from "@tanstack/react-query";
+import { getGuestBookingList, postGuestBook, postGuestReq } from "./api";
+
+export const QUERY_KEY = {
+  LIST: "list",
+};
+
+// 2. 쿼리 작성
+export const useGuestBook = () => {
+  const queryClient = new QueryClient();
+
+  return useMutation({
+    mutationFn: (formData: postGuestReq) => postGuestBook(formData), // API 요청 함수
+    onSuccess: (res) => {
+      // 성공 시, 호출
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.LIST] });
+    },
+  });
+};
+
+export const useGetGuestBookingList = () => {
+  return useQuery({
+    queryKey: [QUERY_KEY.LIST],
+    queryFn: () => getGuestBookingList(),
+    staleTime: 1000 * 60 * 60,
+    gcTime: 1000 * 60 * 60 * 24,
+  });
+};

src/pages/test/TestPage.tsx

@@ -1,3 +1,4 @@
+import { useGuestBook } from "@apis/domains/bookings/queries";
 import { IconCheck, IconTextfiedlDelete } from "@assets/svgs";
 import Button from "@components/commons/button/Button";
 import Chip from "@components/commons/chip/Chip";
@@ -7,11 +8,10 @@ import Spacing from "@components/commons/spacing/Spacing";
 import Stepper from "@components/commons/stepper/Stepper";
 import TimePicker from "@components/commons/timepicker/TimePicker";
 import Toast from "@components/commons/toast/Toast";
-import Loading from "@components/commons/loading/Loading";
 import useToast from "@hooks/useToast";
-import { ChangeEvent, useState } from "react";
-import { nameFilter, numericFilter } from "@utils/useInputFilter";
+import { nameFilter } from "@utils/useInputFilter";
 import { Dayjs } from "dayjs";
+import { ChangeEvent, useState } from "react";
 
 const TestPage = () => {
   const [inputValue, setInputValue] = useState("");
@@ -36,10 +36,33 @@ const TestPage = () => {
   const handleDateChange = (value: Dayjs | null) => {
     setSelectedDate(value);
   };
-  console.log(inputValue);
+
+  // 3. 훅 불러와서 사용
+  const { mutate, mutateAsync } = useGuestBook();
+
+  const handleClick = () => {
+    const formData = {
+      scheduleId: 1,
+      purchaseTicketCount: 2,
+      scheduleNumber: "FIRST",
+      bookerName: "도영",
+      bookerPhoneNumber: "010-8627-3460",
+      birthDate: "000909",
+      password: "1461",
+      totalPaymentAmount: 20000,
+      isPaymentCompleted: true,
+    };
+
+    mutate(formData);
+
+    // 비동기의 경우
+    // mutateAsync(formData);
+
+    console.log("신지바보");
+  };
+
   return (
     <>
-      <Loading />
       <div style={{ display: "flex", flexDirection: "column", gap: "3rem", alignItems: "center" }}>
         <div style={{ display: "flex", flexDirection: "column" }}>
           <TextField
@@ -73,6 +96,8 @@ const TestPage = () => {
         <Toast icon={<IconCheck />} isVisible={isToastVisible} toastBottom={30}>
           클립보드에 복사되었습니다!
         </Toast>
+        <Spacing marginBottom="3" />
+        <Button onClick={handleClick}>제출</Button>
       </div>
     </>
   );