Feat: 예약하기 페이지 post 요청 react-query로 수정 (#60)

src/components/loadingAnimation/LoadingAnimation.scss

@@ -3,7 +3,6 @@
 .loading-container {
   width: 100vw;
   height: 100vh;
-  background-color: #fff;
   position: fixed;
   top: 0;
   left: 0;

src/hooks/quries/usePostOrder.ts

@@ -0,0 +1,41 @@
+import { postOrderApi } from "@/api/postOrderApi";
+import { orderResultState } from "@/states/orderResultState";
+import { useMutation } from "react-query";
+import { useNavigate } from "react-router-dom";
+import { useSetRecoilState } from "recoil";
+
+export const usePostOrder = (orderData: OrderData) => {
+  const setOrderResult = useSetRecoilState(orderResultState);
+  const navigate = useNavigate();
+  const postOrderMutation = useMutation(
+    () => postOrderApi("/api/reservations", orderData),
+    {
+      onSuccess: () => {
+        navigate("/order/result?=true");
+        setOrderResult(true);
+      },
+      onError: () => {
+        navigate("/order/result?=false");
+        setOrderResult(false);
+      },
+    }
+  );
+
+  const isLoading = postOrderMutation.isLoading;
+
+  return {
+    ...postOrderMutation,
+    isLoading,
+  };
+};
+
+interface OrderData {
+  roomId: number;
+  visitorName: string;
+  visitorPhone: string;
+  startDate: string;
+  endDate: string;
+  couponId?: number;
+  totalPrice: number;
+  payMethod: string;
+}

src/pages/order/Order.tsx

@@ -1,8 +1,6 @@
 import { memo, useEffect, useState } from "react";
-import { useRecoilValue, useSetRecoilState } from "recoil";
+import { useRecoilValue } from "recoil";
 import { OrderItemTypes, orderState } from "@/states/orderState";
-import { postOrderApi } from "@/api/postOrderApi";
-import { useNavigate } from "react-router-dom";
 import _debounce from "lodash/debounce";
 
 import TermsAgreement from "@/components/termsAgreement/TermsAgreement";
@@ -23,11 +21,11 @@ import DiscountBadge from "./discountBadge/DiscountBadge";
 import "./order.scss";
 import { initialPaymentMethod } from "@/constant/initialPaymentMethod";
 import { usedCouponState } from "@/states/usedCouponState";
-import { orderResultState } from "@/states/orderResultState";
+import { usePostOrder } from "@/hooks/quries/usePostOrder";
+import LoadingAnimation from "@/components/loadingAnimation/LoadingAnimation";
 
 const Order = memo(() => {
   const [userName, setUserName] = useState("");
-  const navigate = useNavigate();
   const [userPhoneNumber, setUserPhoneNumber] = useState("");
   const [selectedMethod, setSelectedMethod] = useState(initialPaymentMethod[0]);
   const [isAllCheck, setIsAllCheck] = useState(false);
@@ -40,46 +38,39 @@ const Order = memo(() => {
       ? discountAmt
       : orderData.reduce((total, item) => total + item.price, 0);
   const usedCoupon = useRecoilValue(usedCouponState);
-  const setOrderResult = useSetRecoilState(orderResultState);
 
-  useEffect(() => {
-    localStorage.setItem("orderState", JSON.stringify(orderData));
-  }, [orderData]);
-
-  const handleClick = () => {
-    postOrderApiFromAccommodation();
+  const requestBody = {
+    roomId: orderData[0].id,
+    visitorName: userName,
+    visitorPhone: userPhoneNumber,
+    startDate: orderData[0].startDate,
+    endDate: orderData[0].endDate,
+    couponId: usedCoupon?.id,
+    totalPrice: totalOrderPrice,
+    payMethod: selectedMethod.payMethod,
   };
 
-  const postOrderApiFromAccommodation = async () => {
-    const requestBody = {
-      roomId: orderData[0].id,
-      visitorName: userName,
-      visitorPhone: userPhoneNumber,
-      startDate: orderData[0].startDate,
-      endDate: orderData[0].endDate,
-      couponId: usedCoupon?.id,
-      totalPrice: totalOrderPrice,
-      payMethod: selectedMethod.payMethod,
-    };
-    try {
-      await postOrderApi("/api/reservations", requestBody);
-      navigate("/order/result?=true");
-      setOrderResult(true);
-    } catch (error) {
-      navigate("/order/result?=false");
-      setOrderResult(false);
-    }
+  const postOrderMutation = usePostOrder(requestBody);
+  const totalPrice = orderData.reduce((sum, item) => sum + item.price, 0);
+
+  const handleClick = async () => {
+    await postOrderMutation.mutateAsync();
   };
 
+  useEffect(() => {
+    localStorage.setItem("orderState", JSON.stringify(orderData));
+  }, [orderData]);
+
   useEffect(() => {
     setIsAllValidationPass(isAllCheck && isBookerValidationPass);
   }, [isAllCheck, isBookerValidationPass]);
 
-  const totalPrice = orderData.reduce((sum, item) => sum + item.price, 0);
-
   return (
     <div className="order">
       <form>
+        {postOrderMutation.isLoading && (
+          <LoadingAnimation width="200px" height="200px" />
+        )}
         {orderData.map((orderData, index) => (
           <OrderItem key={index} orderData={orderData} />
         ))}

src/pages/orderResult/OrderResult.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
 import "./orderResult.scss";
@@ -8,10 +7,6 @@ import { orderResultState } from "@/states/orderResultState";
 const OrderResult = () => {
   const orderResult = useRecoilValue(orderResultState);
 
-  useEffect(() => {
-    console.log("orderResult", orderResult);
-  }, []);
-
   return (
     <div className="order-result">
       <h3 className="text-subtitle3">