From 5b423c7bee1dd732759c4be1a3131cb29beebbee Mon Sep 17 00:00:00 2001
From: KangYeonbae <dusqo7951@gmail.com>
Date: Wed, 4 Dec 2024 21:26:04 +0900
Subject: [PATCH] =?UTF-8?q?step4=20=EC=A0=84=EC=97=AD=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/steps/BookingStep4.js | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/steps/BookingStep4.js b/src/components/steps/BookingStep4.js
index c970215..1926239 100644
--- a/src/components/steps/BookingStep4.js
+++ b/src/components/steps/BookingStep4.js
@@ -1,6 +1,10 @@
 import { PAYMENT_METHODS } from "../../constants/bookingIndex";
+import { useSelector } from 'react-redux';
+
+export const BookingStep4 = () => {
+  // Redux store에서 데이터 가져오기
+  const { bookingData, bookingInfo, totalPrice } = useSelector(state => state.booking);
 
-export const BookingStep4 = ({ bookingData, bookingInfo, totalPrice }) => {
   // 시간 포맷팅 함수
   const formatTime = (timeString) => {
     if (!timeString) return '-';
@@ -11,33 +15,35 @@ export const BookingStep4 = ({ bookingData, bookingInfo, totalPrice }) => {
     });
   };
 
+  // 디버깅용 콘솔 로그
   console.log('step4 bookingData : ', bookingData);
   console.log('step4 bookingInfo : ', bookingInfo);
   console.log('step4 totalPrice : ', totalPrice);
+
   return (
     <div className="booking_step">
       <h2 className="booking_step4-text">예약 확인</h2>
       <div className="booking_step4-round">
         <div>
           <h3 className="booking_step4-booking-info">예약정보</h3>
-          <p>공간: {bookingInfo.title}</p>
-          <p>날짜: {bookingData.date}</p>
-          <p>시간: {formatTime(bookingData.start_time)} ~ {formatTime(bookingData.end_time)}</p>
-          <p>인원: {bookingData.numberOfPeople}명</p>
-          {bookingData.requirements && (
+          <p>공간: {bookingInfo?.title}</p>
+          <p>날짜: {bookingData?.date}</p>
+          <p>시간: {formatTime(bookingData?.start_time)} ~ {formatTime(bookingData?.end_time)}</p>
+          <p>인원: {bookingData?.numberOfPeople}명</p>
+          {bookingData?.requirements && (
             <p>요청사항: {bookingData.requirements}</p>
           )}
         </div>
         <div>
           <h3 className="booking_step4-booking-people">예약자 정보</h3>
-          <p>이름: {bookingData.name}</p>
-          <p>연락처: {bookingData.phone}</p>
-          <p>이메일: {bookingData.email}</p>
+          <p>이름: {bookingData?.name}</p>
+          <p>연락처: {bookingData?.phone}</p>
+          <p>이메일: {bookingData?.email}</p>
         </div>
         <div>
           <h3 className="booking_step4-booking-payment">결제 정보</h3>
-          <p>결제 금액: {totalPrice.toLocaleString()}원</p>
-          <p>결제 수단: {PAYMENT_METHODS[bookingData.paymentMethod]}</p>
+          <p>결제 금액: {totalPrice?.toLocaleString()}원</p>
+          <p>결제 수단: {PAYMENT_METHODS[bookingData?.paymentMethod]}</p>
         </div>
       </div>
     </div>