diff --git a/src/api/getOrderApi.ts b/src/api/getOrderApi.ts deleted file mode 100644 index 0a4b50e7..00000000 --- a/src/api/getOrderApi.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { OrderDataTypes } from "../types/order"; -import instance from "./instanceApi"; - -export const getOrderApi = async () => { - try { - const res = await instance.get("/api/orders"); - const orderData = res.data.data.orders; - - const reservedOrders = - orderData.find((order: OrderDataTypes) => order.status === "reserved") - ?.orderResponses || []; - - const usedOrders = - orderData.find((order: OrderDataTypes) => order.status === "used") - ?.orderResponses || []; - - const canceledOrders = - orderData.find((order: OrderDataTypes) => order.status === "canceled") - ?.orderResponses || []; - return { orderData, reservedOrders, usedOrders, canceledOrders }; - } catch (error) { - console.error(error); - throw new Error("데이터를 불러올 수 없습니다."); - } -}; diff --git a/src/api/postOrderApi.ts b/src/api/postOrderApi.ts index 2ba70b47..9686cc4a 100644 --- a/src/api/postOrderApi.ts +++ b/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; diff --git a/src/constant/discount.ts b/src/constant/discount.ts new file mode 100644 index 00000000..560ea2f5 --- /dev/null +++ b/src/constant/discount.ts @@ -0,0 +1,4 @@ +export const discount = [ + { label: "10% 할인쿠폰 (5,000원 할인)", value: "10_percent" }, + { label: "20,000원 할인쿠폰", value: "20k_coupon" }, +]; diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index 5a0de6d3..2586099d 100644 --- a/src/mocks/handlers.ts +++ b/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 diff --git a/src/pages/order/Order.tsx b/src/pages/order/Order.tsx index f8b995a5..91f59711 100644 --- a/src/pages/order/Order.tsx +++ b/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(`/`); } }; diff --git a/src/pages/order/bookerInformation/BookerInformation.tsx b/src/pages/order/bookerInformation/BookerInformation.tsx index 0c68bedb..2737e679 100644 --- a/src/pages/order/bookerInformation/BookerInformation.tsx +++ b/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]); diff --git a/src/states/couponState.ts b/src/states/couponState.ts new file mode 100644 index 00000000..cb5744d4 --- /dev/null +++ b/src/states/couponState.ts @@ -0,0 +1,12 @@ +import { atom } from "recoil"; + +type CouponType = { + id: number; + name: string; + price: number; +}; + +export const couponState = atom({ + key: "couponState", + default: null, +}); diff --git a/src/types/order.ts b/src/types/reservation.ts similarity index 83% rename from src/types/order.ts rename to src/types/reservation.ts index 72fb55cb..ee7b256c 100644 --- a/src/types/order.ts +++ b/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[]; }