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 && (