diff --git a/src/components/steps/BookingStep4.js b/src/components/steps/BookingStep4.js index 1926239..4d974f8 100644 --- a/src/components/steps/BookingStep4.js +++ b/src/components/steps/BookingStep4.js @@ -2,48 +2,57 @@ import { PAYMENT_METHODS } from "../../constants/bookingIndex"; import { useSelector } from 'react-redux'; export const BookingStep4 = () => { - // Redux store에서 데이터 가져오기 + // Redux store에서 모든 예약 데이터 가져오기 const { bookingData, bookingInfo, totalPrice } = useSelector(state => state.booking); // 시간 포맷팅 함수 const formatTime = (timeString) => { if (!timeString) return '-'; - return new Date(timeString).toLocaleTimeString('ko-KR', { + const date = new Date(timeString); + return date.toLocaleString('ko-KR', { + month: 'long', + day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false }); }; - // 디버깅용 콘솔 로그 - console.log('step4 bookingData : ', bookingData); - console.log('step4 bookingInfo : ', bookingInfo); - console.log('step4 totalPrice : ', totalPrice); - return (
-

예약 확인

+

예약이 완료되었습니다

-
-

예약정보

-

공간: {bookingInfo?.title}

-

날짜: {bookingData?.date}

-

시간: {formatTime(bookingData?.start_time)} ~ {formatTime(bookingData?.end_time)}

-

인원: {bookingData?.numberOfPeople}명

- {bookingData?.requirements && ( -

요청사항: {bookingData.requirements}

- )} +
+

예약 정보

+
+

주문번호: {bookingInfo?.orderNumber || '-'}

+

날짜: {bookingData?.date || '-'}

+ {bookingData?.start_time && ( +

시간: {formatTime(bookingData?.start_time)} ~ {formatTime(bookingData?.end_time)}

+ )} +

인원: {bookingData?.numberOfPeople}명

+ {bookingData?.requirements && ( +

요청사항: {bookingData?.requirements}

+ )} +
-
+ +

예약자 정보

-

이름: {bookingData?.name}

-

연락처: {bookingData?.phone}

-

이메일: {bookingData?.email}

+
+

이름: {bookingData?.name}

+

연락처: {bookingData?.phone}

+

이메일: {bookingData?.email}

+
-
+ +

결제 정보

-

결제 금액: {totalPrice?.toLocaleString()}원

-

결제 수단: {PAYMENT_METHODS[bookingData?.paymentMethod]}

+
+

결제 금액: {totalPrice?.toLocaleString()}원

+

결제 수단: {PAYMENT_METHODS[bookingData?.paymentMethod]}

+

결제 상태: 결제 완료

+
diff --git a/src/pages/booking.js b/src/pages/booking.js index f3e9c46..3d15b79 100644 --- a/src/pages/booking.js +++ b/src/pages/booking.js @@ -21,10 +21,21 @@ export default function BookingForm() { // location.state에서 받은 bookingInfo를 Redux store에 저장 useEffect(() => { - if (location.state) { - dispatch(setBookingInfo(location.state)); + if (location.state?.paymentSuccess) { + // 기존 데이터를 유지하면서 결제 성공 정보만 추가 + dispatch(saveBookingData({ + bookingData, + bookingInfo: { + ...bookingInfo, + orderNumber: location.state.orderNumber, + paymentSuccess: true + }, + totalPrice, + usageUnit + })); + dispatch(setStep(4)); } - }, [location.state, dispatch]); + }, [location.state, dispatch, bookingData, bookingInfo, totalPrice, usageUnit]); const handleInputChange = (e) => { const { name, value, type, checked } = e.target; @@ -113,7 +124,7 @@ export default function BookingForm() { />)} {step === 2 && } {step === 3 && } - {step === 4 && } + {step === 4 && }
{step > 1 && step < 4 && (