Merge pull request #58 from Spaces-Place/dusqo

전역상태관리 수정중
Spaces-Place · Dec 4, 2024 · 4a85457 · 4a85457
2 parents cc816ac + 57ffdc8
commit 4a85457
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 39 deletions.
diff --git a/src/components/steps/BookingStep3.js b/src/components/steps/BookingStep3.js
@@ -2,39 +2,18 @@ import axios from "axios";
 import { PAYMENT_METHODS } from "../../constants/bookingIndex";
 import { useState, useEffect } from "react";
 
-const BookingStep3 = ({ bookingData, handleInputChange, price }) => {
+const BookingStep3 = ({ bookingData, handleInputChange, totalPrice  }) => {
   const [spaceName, setSpaceName] = useState("");
   const [isLoading, setIsLoading] = useState(true);
-  const [calculatedPrice, setCalculatedPrice] = useState(0)
 
   useEffect(() => {
-    const calculateTotalPrice = () => {
-      if (bookingData.start_time && bookingData.end_time) {
-        const start = new Date(bookingData.start_time);
-        const end = new Date(bookingData.end_time);
-        console.log('start: ', start)
-        console.log('end: ', end)
-        const priceNumber = parseInt(price.replace(/[^0-9]/g, ''));
-
-        // 시간 차이를 시간 단위로 계산
-        const diffHours = (end - start) / (1000 * 60 * 60);
-
-        // 전달받은 시간당 가격 사용
-       setCalculatedPrice(diffHours * priceNumber);
-
-      }
-    };
-
-    calculateTotalPrice();
     setIsLoading(false);
-  }, [bookingData.start_time, bookingData.end_time, price]);
+  }, []);
 
   if (isLoading) {
     return <div>로딩 중...</div>;
   }
 
-  console.log(bookingData)
-
   return (
     <div className="booking_step">
       <h2 className="booking_step3-info">결제 정보</h2>
@@ -56,9 +35,9 @@ const BookingStep3 = ({ bookingData, handleInputChange, price }) => {
                   hour: '2-digit'
                 })}
               </p>
-            )}
+          )}
           <p className="booking_step3-money-small-text">
-            {calculatedPrice?.toLocaleString()}원
+            {totalPrice?.toLocaleString()}원
           </p>
         </div>
 

diff --git a/src/pages/booking.js b/src/pages/booking.js
@@ -37,20 +37,27 @@ export default function BookingForm() {
     }
   }, [location.state, dispatch, bookingData, bookingInfo, totalPrice, usageUnit]);
 
-  const handleInputChange = (e) => {
-    const { name, value, type, checked } = e.target;
-    const newValue = type === 'checkbox' ? checked : value;
-
-    dispatch(updateBookingData({ name, value: newValue }));
 
-    if (name === 'start_time' || name === 'end_time') {
-      const newPrice = calculatePrice(
-        name === 'start_time' ? value : bookingData.start_time,
-        name === 'end_time' ? value : bookingData.end_time
-      );
+// BookingForm.js의 handleInputChange 수정
+const handleInputChange = (e) => {
+  const { name, value, type, checked } = e.target;
+  const newValue = type === 'checkbox' ? checked : value;
+
+  dispatch(updateBookingData({ name, value: newValue }));
+
+  if (name === 'start_time' || name === 'end_time') {
+    // 시작 시간이나 종료 시간이 변경될 때마다 가격 재계산
+    if (bookingData.start_time && bookingData.end_time) {
+      const start = new Date(name === 'start_time' ? value : bookingData.start_time);
+      const end = new Date(name === 'end_time' ? value : bookingData.end_time);
+      const diffHours = (end - start) / (1000 * 60 * 60);
+      const priceNumber = parseInt(bookingInfo.price.replace(/[^0-9]/g, ''));
+      const newPrice = diffHours * priceNumber;
+
       dispatch(setTotalPrice(newPrice));
     }
-  };
+  }
+};
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -122,9 +129,25 @@ export default function BookingForm() {
           handleInputChange={handleInputChange}
           usageUnit={usageUnit}
          />)}
-        {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  />}
+        {step === 2 &&
+         <BookingStep2 
+           bookingData={bookingData} 
+           handleInputChange={handleInputChange} />}
+        {step === 3 && 
+          <BookingStep3 
+            bookingData={bookingData} 
+            handleInputChange={handleInputChange} 
+            totalPrice={totalPrice} 
+            spaceName={bookingData.name} 
+          />
+        }
+        {step === 4 && 
+          <BookingStep4 
+            bookingData={bookingData}
+            bookingInfo={bookingInfo}
+            totalPrice={totalPrice}
+          />
+        }
 
         <div className="booking_next-button">
           {step > 1 && step < 4 && (