diff --git a/package-lock.json b/package-lock.json index c77e071..eec1f96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "front", "version": "0.1.0", "dependencies": { + "@reduxjs/toolkit": "^2.4.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -29,6 +30,7 @@ "react-helmet": "^6.1.0", "react-icons": "^5.3.0", "react-kakao-maps-sdk": "^1.1.27", + "react-redux": "^9.1.2", "react-router-dom": "^6.27.0", "react-scripts": "5.0.1", "react-toastify": "^10.0.6", @@ -3262,6 +3264,40 @@ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" } }, + "node_modules/@reduxjs/toolkit": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.4.0.tgz", + "integrity": "sha512-wJZEuSKj14tvNfxiIiJws0tQN77/rDqucBq528ApebMIRHyWpCanJVQRxQ8WWZC19iCDKxDsGlbAir3F1layxA==", + "license": "MIT", + "dependencies": { + "immer": "^10.0.3", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.1.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, + "node_modules/@reduxjs/toolkit/node_modules/immer": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz", + "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/@remix-run/router": { "version": "1.20.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz", @@ -4390,6 +4426,12 @@ "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", "license": "MIT" }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==", + "license": "MIT" + }, "node_modules/@types/warning": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz", @@ -14748,6 +14790,29 @@ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", "license": "MIT" }, + "node_modules/react-redux": { + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz", + "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==", + "license": "MIT", + "dependencies": { + "@types/use-sync-external-store": "^0.0.3", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "@types/react": "^18.2.25", + "react": "^18.0", + "redux": "^5.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -14969,6 +15034,21 @@ "node": ">=8" } }, + "node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", + "license": "MIT" + }, + "node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "license": "MIT", + "peerDependencies": { + "redux": "^5.0.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz", @@ -15128,6 +15208,12 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "license": "MIT" }, + "node_modules/reselect": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", + "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==", + "license": "MIT" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -17440,6 +17526,15 @@ "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==", "license": "MIT" }, + "node_modules/use-sync-external-store": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", + "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", diff --git a/package.json b/package.json index 3232096..ca4b07e 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@reduxjs/toolkit": "^2.4.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -24,6 +25,7 @@ "react-helmet": "^6.1.0", "react-icons": "^5.3.0", "react-kakao-maps-sdk": "^1.1.27", + "react-redux": "^9.1.2", "react-router-dom": "^6.27.0", "react-scripts": "5.0.1", "react-toastify": "^10.0.6", diff --git a/src/index.js b/src/index.js index 570caec..5964923 100644 --- a/src/index.js +++ b/src/index.js @@ -8,20 +8,27 @@ import { CookiesProvider } from 'react-cookie'; import { AuthProvider } from './utils/AuthContext'; import { ThemeProvider } from './utils/ThemeContext'; import { SearchProvider } from './utils/SearchContext'; +import { Provider } from 'react-redux'; +import store from './store'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - + + + - - - - - - - + + + + + + + + + - + + ); // If you want to start measuring performance in your app, pass a function diff --git a/src/pages/booking.js b/src/pages/booking.js index 8f87db8..f3e9c46 100644 --- a/src/pages/booking.js +++ b/src/pages/booking.js @@ -1,5 +1,4 @@ -// BookingForm.js -import { useState, useEffect } from "react"; +import { useState, useEffect } from "react"; import { useLocation } from 'react-router-dom'; import { calculatePrice } from '../utils/timeUtils'; import { CONSTANTS, initialBookingData } from '../constants/bookingIndex'; @@ -9,33 +8,36 @@ import { BookingStep2 } from '../components/steps/BookingStep2'; import BookingStep3 from '../components/steps/BookingStep3'; import { BookingStep4 } from '../components/steps/BookingStep4'; import { initiateKakaoPayment } from '../utils/paymentService'; +import { useSelector, useDispatch } from 'react-redux'; +import { saveBookingData, updateBookingData, setBookingInfo, setTotalPrice, setStep } from '../store/bookingSlice'; import "../styles/booking.css"; export default function BookingForm() { const location = useLocation(); - const bookingInfo = location.state || {}; - const usageUnit = bookingInfo.usageUnit; + const dispatch = useDispatch(); + + const { step, bookingData, bookingInfo, totalPrice, usageUnit } = useSelector(state => state.booking); + const [paymentProcessing, setPaymentProcessing] = useState(false); - const [step, setStep] = useState(1); - const [bookingData, setBookingData] = useState(initialBookingData); - const [totalPrice, setTotalPrice] = useState(0); - const [paymentProcessing, setPaymentProcessing] = useState(false); + // location.state에서 받은 bookingInfo를 Redux store에 저장 + useEffect(() => { + if (location.state) { + dispatch(setBookingInfo(location.state)); + } + }, [location.state, dispatch]); const handleInputChange = (e) => { const { name, value, type, checked } = e.target; const newValue = type === 'checkbox' ? checked : value; - setBookingData(prev => ({ - ...prev, - [name]: newValue - })); + 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 ); - setTotalPrice(newPrice); + dispatch(setTotalPrice(newPrice)); } }; @@ -43,7 +45,13 @@ export default function BookingForm() { e.preventDefault(); if (step < 3) { - setStep(prev => prev + 1); + dispatch(setStep(step + 1)); + dispatch(saveBookingData({ + bookingData, + bookingInfo, + totalPrice, + usageUnit + })); } else if (step === 3) { if (!bookingData.agreement) { @@ -88,11 +96,10 @@ export default function BookingForm() { }; useEffect(() => { - const paymentSuccess = location.state?.paymentSuccess; - if (paymentSuccess) { - setStep(4); + if (location.state?.paymentSuccess) { + dispatch(setStep(4)); } - }, [location]); + }, [location, dispatch]); return (
@@ -105,14 +112,14 @@ export default function BookingForm() { usageUnit={usageUnit} />)} {step === 2 && } - {step === 3 && } + {step === 3 && } {step === 4 && }
{step > 1 && step < 4 && (