diff --git a/src/components/steps/BookingStep3.js b/src/components/steps/BookingStep3.js
index ea24ef9..8461015 100644
--- 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
로딩 중...
;
}
- console.log(bookingData)
-
return (
결제 정보
@@ -56,9 +35,9 @@ const BookingStep3 = ({ bookingData, handleInputChange, price }) => {
hour: '2-digit'
})}
- )}
+ )}
- {calculatedPrice?.toLocaleString()}원
+ {totalPrice?.toLocaleString()}원
diff --git a/src/pages/booking.js b/src/pages/booking.js
index 3d15b79..5538ff9 100644
--- 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 && }
- {step === 3 && }
- {step === 4 && }
+ {step === 2 &&
+ }
+ {step === 3 &&
+
+ }
+ {step === 4 &&
+
+ }
{step > 1 && step < 4 && (