Merge pull request #57 from Spaces-Place/dusqo

전역상태관리 수정
Spaces-Place · Dec 4, 2024 · cc816ac · cc816ac
2 parents b5fd9fd + 3d7e421
commit cc816ac
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 28 deletions.
diff --git 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 (
     <div className="booking_step">
-      <h2 className="booking_step4-text">예약 확인</h2>
+      <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>요청사항: {bookingData.requirements}</p>
-          )}
+        <div className="booking_step4-section">
+          <h3 className="booking_step4-booking-info">예약 정보</h3>
+          <div className="booking_step4-content">
+            <p>주문번호: {bookingInfo?.orderNumber || '-'}</p>
+            <p>날짜: {bookingData?.date || '-'}</p>
+            {bookingData?.start_time && (
+              <p>시간: {formatTime(bookingData?.start_time)} ~ {formatTime(bookingData?.end_time)}</p>
+            )}
+            <p>인원: {bookingData?.numberOfPeople}명</p>
+            {bookingData?.requirements && (
+              <p>요청사항: {bookingData?.requirements}</p>
+            )}
+          </div>
         </div>
-        <div>
+
+        <div className="booking_step4-section">
           <h3 className="booking_step4-booking-people">예약자 정보</h3>
-          <p>이름: {bookingData?.name}</p>
-          <p>연락처: {bookingData?.phone}</p>
-          <p>이메일: {bookingData?.email}</p>
+          <div className="booking_step4-content">
+            <p>이름: {bookingData?.name}</p>
+            <p>연락처: {bookingData?.phone}</p>
+            <p>이메일: {bookingData?.email}</p>
+          </div>
         </div>
-        <div>
+
+        <div className="booking_step4-section">
           <h3 className="booking_step4-booking-payment">결제 정보</h3>
-          <p>결제 금액: {totalPrice?.toLocaleString()}원</p>
-          <p>결제 수단: {PAYMENT_METHODS[bookingData?.paymentMethod]}</p>
+          <div className="booking_step4-content">
+            <p>결제 금액: {totalPrice?.toLocaleString()}원</p>
+            <p>결제 수단: {PAYMENT_METHODS[bookingData?.paymentMethod]}</p>
+            <p>결제 상태: 결제 완료</p>
+          </div>
         </div>
       </div>
     </div>

diff --git 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 && <BookingStep2 bookingData={bookingData} handleInputChange={handleInputChange} />}
         {step === 3 && <BookingStep3 bookingData={bookingData} handleInputChange={handleInputChange} totalPrice={totalPrice} price={bookingInfo?.price} spaceName={bookingData.name} />}
-        {step === 4 && <BookingStep4 bookingData={bookingData} bookingInfo={bookingInfo} totalPrice={totalPrice} />}
+        {step === 4 && <BookingStep4  />}
 
         <div className="booking_next-button">
           {step > 1 && step < 4 && (