Merge pull request #55 from Spaces-Place/dusqo

bookingdata 전역상태관리로 변경
Spaces-Place · Dec 4, 2024 · 78c7379 · 78c7379
2 parents 49d9240 + 5ad4ae7
commit 78c7379
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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(
-  <React.StrictMode>
+
+<React.StrictMode>
+  <Provider store={store}>
     <BrowserRouter>
-      <ThemeProvider>
-        <AuthProvider>
-          <SearchProvider>
-            <App />
-          </SearchProvider>
-        </AuthProvider>
-      </ThemeProvider>
+      <CookiesProvider>
+        <ThemeProvider>
+          <AuthProvider>
+            <SearchProvider>
+              <App />
+            </SearchProvider>
+          </AuthProvider>
+        </ThemeProvider>
+      </CookiesProvider>
     </BrowserRouter>
-  </React.StrictMode>
+  </Provider>
+</React.StrictMode>
 );
 
 // 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
@@ -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,41 +8,50 @@ 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));
     }
   };
 
   const handleSubmit = async (e) => {
     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 (
     <div className="booking_container">
@@ -105,14 +112,14 @@ export default function BookingForm() {
           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 === 3 && <BookingStep3 bookingData={bookingData} handleInputChange={handleInputChange} totalPrice={totalPrice} price={bookingInfo?.price} spaceName={bookingData.name} />}
         {step === 4 && <BookingStep4 bookingData={bookingData} bookingInfo={bookingInfo} totalPrice={totalPrice} />}
 
         <div className="booking_next-button">
           {step > 1 && step < 4 && (
             <button 
               type="button" 
-              onClick={() => setStep(prev => prev - 1)} 
+              onClick={() => dispatch(setStep(step - 1))}
               className="booking_before"
               disabled={paymentProcessing}
             >

diff --git a/src/store/bookingSlice.js b/src/store/bookingSlice.js
@@ -0,0 +1,55 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { initialBookingData } from '../constants/bookingIndex';
+
+const bookingSlice = createSlice({
+  name: 'booking',
+  initialState: {
+    bookingData: initialBookingData,
+    bookingInfo: null,
+    totalPrice: 0,
+    step: 1,
+    usageUnit: null
+  },
+  reducers: {
+    saveBookingData: (state, action) => {
+      state.bookingData = action.payload.bookingData;
+      state.bookingInfo = action.payload.bookingInfo;
+      state.totalPrice = action.payload.totalPrice;
+      state.usageUnit = action.payload.usageUnit;
+    },
+    updateBookingData: (state, action) => {
+      state.bookingData = {
+        ...state.bookingData,
+        [action.payload.name]: action.payload.value
+      };
+    },
+    setBookingInfo: (state, action) => {
+      state.bookingInfo = action.payload;
+      state.usageUnit = action.payload.usageUnit;
+    },
+    setTotalPrice: (state, action) => {
+      state.totalPrice = action.payload;
+    },
+    setStep: (state, action) => {
+      state.step = action.payload;
+    },
+    resetBooking: (state) => {
+      state.bookingData = initialBookingData;
+      state.bookingInfo = null;
+      state.totalPrice = 0;
+      state.step = 1;
+      state.usageUnit = null;
+    }
+  }
+});
+
+export const { 
+  saveBookingData, 
+  updateBookingData, 
+  setBookingInfo,
+  setTotalPrice, 
+  setStep, 
+  resetBooking 
+} = bookingSlice.actions;
+
+export default bookingSlice.reducer;
diff --git a/src/store/index.js b/src/store/index.js
@@ -0,0 +1,11 @@
+// store/index.js
+import { configureStore } from '@reduxjs/toolkit';
+import bookingReducer from './bookingSlice';
+
+export const store = configureStore({
+  reducer: {
+    booking: bookingReducer
+  }
+});
+
+export default store;