Merge pull request #31 from 4bujak-4bujak/refactor/meetingroom

fix: 미팅룸 관련 오류 수정
4bujak-4bujak · Jun 7, 2024 · 86b7604 · 86b7604
2 parents b375817 + 1f8c61f
commit 86b7604
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 20 deletions.
diff --git a/src/components/home/CurrentOffice.tsx b/src/components/home/CurrentOffice.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useState, useEffect } from 'react';
 import SearchModal from './SearchModal';
 import SelectOfficeMap from './SelectOfficeMap';
@@ -9,6 +10,27 @@ const CurrentOffice = () => {
   const [showSelectOfficeMap, setShowSelectOfficeMap] = useState(false);
   const selectedBranch = useBranchStore((state) => state.selectedBranch);
   const setSelectedBranch = useBranchStore((state) => state.setSelectedBranch);
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  const initialBranch: Branch = {
+    branchId: 27,
+    branchName: '강남1호점',
+    branchAddress: '서울 강남구 강남대로 382 메리츠타워 17, 18층 (메인라운지 17층)',
+    branchLatitude: 37.4971261,
+    branchLongitude: 127.0287132,
+  };
+
+  useEffect(() => {
+    setIsHydrated(true);
+
+    if (!selectedBranch) {
+      setSelectedBranch(initialBranch, Date.now());
+    }
+  }, [selectedBranch, setSelectedBranch]);
+
+  useEffect(() => {
+    console.log('Current selectedBranch:', selectedBranch);
+  }, [selectedBranch]);
 
   const handleBranchSelect = (branch: Branch) => {
     setSelectedBranch(branch, Date.now());
@@ -24,9 +46,9 @@ const CurrentOffice = () => {
     setShowSelectOfficeMap(false);
   };
 
-  useEffect(() => {
-    console.log('Selected Branch Updated:', selectedBranch);
-  }, [selectedBranch]);
+  if (!isHydrated) {
+    return null;
+  }
 
   return (
     <>
@@ -37,7 +59,7 @@ const CurrentOffice = () => {
             <img src="/home/location.svg" alt="" />
           </div>
           <div className="text-white text-lg underline font-medium cursor-pointer" onClick={handleSearchClick}>
-            {selectedBranch ? selectedBranch.branchName : '지점을 설정해주세요'}
+            {selectedBranch?.branchName}
           </div>
         </div>
       </div>

diff --git a/src/components/map/BranchModal.tsx b/src/components/map/BranchModal.tsx
@@ -67,7 +67,7 @@ const BranchModal: React.FC<ModalProps> = ({ isOpen, onClose, branchName, branch
     try {
       const data = await getSelectedOfficeInfo(branchName); 
       if (data.data) {
-        setReservedBranch(data.data, Date.now());
+        setReservedBranch(data?.data, Date.now());
         router.push('/reservation/');
       }
     } catch (error) {

diff --git a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx
@@ -81,9 +81,9 @@ const MeetingRoomIndex: React.FC = () => {
   const updatedTimeReserved = useBranchStore2((state) => state.updatedTimeReserved);
 
   const currentBranch =
-    updatedTimeSelected && updatedTimeReserved && updatedTimeSelected > updatedTimeReserved
-      ? selectedBranch
-      : reservedBranch;
+  updatedTimeSelected && updatedTimeReserved && updatedTimeSelected > updatedTimeReserved
+    ? selectedBranch
+    : reservedBranch || selectedBranch;
 
   useEffect(() => {
     if (!currentBranch) return;

diff --git a/src/components/reservation/shared/CurrentRoom.tsx b/src/components/reservation/shared/CurrentRoom.tsx
@@ -52,13 +52,11 @@ const CurrentRoom = () => {
   }, [reservedBranch]);
 
   const currentBranch =
-    selectedUpdatedTime &&
-    reservedUpdatedTime &&
-    selectedUpdatedTime > reservedUpdatedTime
-      ? selectedBranch
-      : reservedBranch;
-
-  // const currentBranch = selectedBranch;
+  selectedUpdatedTime &&
+  reservedUpdatedTime &&
+  selectedUpdatedTime > reservedUpdatedTime
+    ? selectedBranch
+    : reservedBranch || selectedBranch;
 
   return (
     <>
@@ -69,7 +67,7 @@ const CurrentRoom = () => {
           <img src="/reservation/location.svg" alt="location icon" />
         </div>
         <div className="text-space-black font-semibold text-sm">
-          {currentBranch ? currentBranch.branchName : '강남1호점'}
+          {currentBranch?.branchName}
         </div>
         <div>
           <img src="/reservation/toBottom.svg" alt="dropdown icon" />

diff --git a/src/store/branch.store.ts b/src/store/branch.store.ts
@@ -1,8 +1,7 @@
-// branch.store.ts
 /* eslint-disable no-unused-vars */
 import { create } from 'zustand';
-import { Branch } from '@/api/types/branch';
 import { persist } from 'zustand/middleware';
+import { Branch } from '@/api/types/branch';
 
 interface BranchStore {
   selectedBranch: Branch | null;
@@ -14,12 +13,18 @@ export const useBranchStore = create(
   persist<BranchStore>(
     (set) => ({
       selectedBranch: null,
-      setSelectedBranch: (branch: Branch | null, time: number) =>
-        set({ selectedBranch: branch, updatedTimeSelected: time }),
+      setSelectedBranch: (branch: Branch | null, time: number) => {
+        console.log('Setting selectedBranch:', branch); 
+        set({ selectedBranch: branch, updatedTimeSelected: time });
+      },
       updatedTimeSelected: null,
     }),
     {
       name: 'selectedBranch',
+      getStorage: () => localStorage,
+      onRehydrateStorage: () => (state) => {
+        console.log('Rehydrated state:', state); 
+      },
     }
   )
 );