Feat: 예약하기 페이지 API 연결

src/api/postOrderApi.ts

@@ -13,12 +13,11 @@ export const postOrderApi = async (
   }
 };
 
-interface PostOrderApiRequestBodyType {
+export interface PostOrderApiRequestBodyType {
   visitorName: string;
   visitorPhone: string;
   roomId: number;
   startDate: string;
-  //orderItems?: OrderItemType[];
   endDate: string;
   couponId: number;
   totalPrice: number;

src/constant/discount.ts

@@ -0,0 +1,4 @@
+export const discount = [
+  { label: "10% 할인쿠폰 (5,000원 할인)", value: "10_percent" },
+  { label: "20,000원 할인쿠폰", value: "20k_coupon" },
+];

src/mocks/handlers.ts

@@ -7,7 +7,6 @@ import accommodationDetailData from "../../public/data/accommodationDetailData.j
 import couponData from "../../public/data/couponData.json";
 import successLoginData from "../../public/data/successLoginData.json";
 import failLoginData from "../../public/data/failLoginData.json";
-import reservationList from "../../public/data/reservationList.json";
 import cancelReservationList from "../../public/data/cancelReservationList.json";
 import successCancelReservation from "../../public/data/successCancelReservation.json";
 import successTokenData from "../../public/data/successTokenData.json";
@@ -49,10 +48,6 @@ const getLoginResolver = async () => {
   return HttpResponse.json(successLoginData, { status: 200 });
 };
 
-const getReservationListResolver = () => {
-  return HttpResponse.json(reservationList);
-};
-
 const getCancelReservationListResolver = () => {
   return HttpResponse.json(cancelReservationList);
 };
@@ -90,10 +85,6 @@ export const handlers = [
   ),
   http.get(`${import.meta.env.VITE_API_BASE_URL}/api/coupons`, getCouponsData),
   http.post(`/api/members/signin`, getLoginResolver),
-  http.get(
-    `${import.meta.env.VITE_API_BASE_URL}/api/reservations`,
-    getReservationListResolver
-  ),
   http.get(
     `${import.meta.env.VITE_API_BASE_URL}/api/reservations/cancel`,
     getCancelReservationListResolver

src/pages/order/Order.tsx

@@ -1,16 +1,13 @@
 import { memo, useEffect, useState } from "react";
-import { useRecoilValue, useSetRecoilState } from "recoil";
+import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
 import { OrderItemTypes, orderState } from "@/states/orderState";
-import { PostOrderApiErrorResponse } from "@/api/postOrderApi";
+import { postOrderApi } from "@/api/postOrderApi";
 import { useNavigate } from "react-router-dom";
 import _debounce from "lodash/debounce";
-
 import TermsAgreement from "@/components/termsAgreement/TermsAgreement";
-
 import numberFormat from "@/utils/numberFormat";
 import { discountState } from "@/states/discountState";
-
-import { orderErrorMsgState } from "@/states/orderErrorMsgState";
+import { couponState } from "@/states/couponState";
 import { Button } from "@/components/common";
 import {
   BookerInformation,
@@ -33,73 +30,43 @@ const Order = memo(() => {
   const [isBookerValidationPass, setIsBookerValidationPass] = useState(false);
   const [isAllValidationPass, setIsAllValidationPass] = useState(false);
   const orderData: OrderItemTypes[] = useRecoilValue(orderState);
-  const setOrderErrorMsg = useSetRecoilState(orderErrorMsgState);
-  const queryString = window.location.search;
-  const urlParams = new URLSearchParams(queryString);
-  const cartParam = urlParams.get("cart");
-  const discountAmt = useRecoilValue(discountState);
+  const [discountAmt, setDiscountAmt] = useRecoilState(discountState);
+
   const totalOrderPrice =
     discountAmt !== 0
       ? discountAmt
       : orderData.reduce((total, item) => total + item.price, 0);
 
+  const orderDetail = useRecoilValue(orderState);
+  const orderStartDate = orderDetail.length > 0 ? orderDetail[0].startDate : "";
+  const orderEndDate = orderDetail.length > 0 ? orderDetail[0].endDate : "";
+  const orderRoomId = orderDetail.length > 0 ? orderDetail[0].id : 0;
+  const [selectedCoupon, setSelectedCoupon] = useRecoilState(couponState);
+
   useEffect(() => {
     localStorage.setItem("orderState", JSON.stringify(orderData));
   }, [orderData]);
 
   const handleClick = () => {
-    if (cartParam === "true") {
-      postOrderApiFromCart();
-    }
-    if (cartParam === "false") {
-      postOrderApiFromAccommodation();
-    }
-  };
-
-  const postOrderApiFromCart = async () => {
-    const cartItemIds: number[] = orderData
-      .map(item => {
-        return item.cartItemId;
-      })
-      .filter((cartId): cartId is number => typeof cartId === "number");
-    const requestBody = {
-      ageConsent: isAllCheck,
-      reservationPersonName: userName,
-      reservationPhoneNumber: userPhoneNumber,
-      totalPrice: totalOrderPrice,
-      cartItemIds: cartItemIds,
-    };
-    try {
-      // const res = await postOrderApi("/api/orders/carts", requestBody);
-      // navigate(`/order/result?result=true&orderid=${res.data.orderId}`);
-    } catch (error) {
-      navigate("/order/result?=false");
-      const postOrderApiError = error as PostOrderApiErrorResponse;
-      setOrderErrorMsg(postOrderApiError.response.data.errorMessage);
-    }
+    postReservationsApiFromAccommodation();
   };
 
-  const postOrderApiFromAccommodation = async () => {
+  const postReservationsApiFromAccommodation = async () => {
     const requestBody = {
-      ageConsent: isAllCheck,
-      reservationPersonName: userName,
-      reservationPhoneNumber: userPhoneNumber,
-      totalPrice: totalOrderPrice,
-      orderItems: orderData.map(item => ({
-        roomId: item.id,
-        startDate: item.startDate,
-        endDate: item.endDate,
-        headCount: item.defaultCapacity,
-        orderPrice: item.price,
-      })),
+      visitorName: userName,
+      visitorPhone: userPhoneNumber,
+      roomId: orderRoomId,
+      startDate: orderStartDate,
+      endDate: orderEndDate,
+      couponId: selectedCoupon ? selectedCoupon.id : -1,
+      totalPrice: totalPrice,
     };
     try {
-      // const res = await postOrderApi("/api/orders", requestBody);
-      // navigate(`/order/result?result=true&orderid=${res.data.orderId}`);
+      const res = await postOrderApi("/api/reservations", requestBody);
+      navigate(`/`);
+      //navigate(`/order/result?result=true&orderid=${res.data.orderId}`); 결제 완료 메세지는 다른 백엔드, 프론트엔드 팀원들과 상의 후 결정
     } catch (error) {
-      navigate("/order/result?=false");
-      const postOrderApiError = error as PostOrderApiErrorResponse;
-      setOrderErrorMsg(postOrderApiError.response.data.errorMessage);
+      navigate(`/`);
     }
   };
 

src/pages/order/bookerInformation/BookerInformation.tsx

@@ -33,7 +33,7 @@ const BookerInformation = ({
   useEffect(() => {
     if (userState) {
       setUserName(userInfo?.name || "");
-      setUserPhoneNumber(userInfo?.phoneNumber || "");
+      setUserPhoneNumber(userInfo?.phone || "");
       setIsBookerValidationPass(true);
     }
   }, [userState]);

src/states/couponState.ts

@@ -0,0 +1,12 @@
+import { atom } from "recoil";
+
+type CouponType = {
+  id: number;
+  name: string;
+  price: number;
+};
+
+export const couponState = atom<CouponType | null>({
+  key: "couponState",
+  default: null,
+});

src/types/order.ts → src/types/reservation.ts

@@ -1,4 +1,4 @@
-export interface Order {
+export interface Reservation {
   orderId: number;
   orderStatus: string;
   orderDate: string;
@@ -22,9 +22,9 @@ export interface OrderItem {
   orderPrice: number;
 }
 
-export interface OrderDataTypes {
+export interface ReservationsTypes {
   status: string;
   pageSize: number;
   pageNum: number;
-  orderResponses: Order[];
+  orderResponses: Reservation[];
 }