From 75adf3aa6cba3781451863dbdd83a368885cb094 Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Wed, 29 May 2024 16:56:08 +0900
Subject: [PATCH 1/6] =?UTF-8?q?design:=20=EB=84=A4=EB=B8=8C=EB=B0=94=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9=20=ED=9B=84=20=EC=9A=94=EC=86=8C=EB=93=A4=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/OfficeModal.tsx | 2 +-
 src/components/map/UseMap.tsx      | 6 +++---
 src/pages/map/index.tsx            | 2 ++
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/map/OfficeModal.tsx b/src/components/map/OfficeModal.tsx
index 1afca2e..efa152a 100644
--- a/src/components/map/OfficeModal.tsx
+++ b/src/components/map/OfficeModal.tsx
@@ -45,7 +45,7 @@ const OfficeModal: React.FC<ModalProps> = ({ isOpen, onClose, branchName, branch
   };
 
   return (
-    <aside className="w-[373px] mx-auto fixed bottom-[20px] left-0 right-0 z-50">
+    <aside className="w-[373px] mx-auto fixed bottom-[85px] left-0 right-0 z-50">
       <div ref={modalRef} className="bg-white px-4 py-6 rounded-lg shadow-lg">
         <div className='flex'>
           <div className="flex-shrink-0 w-[88px] h-[88px] bg-gray-300 rounded-md">
diff --git a/src/components/map/UseMap.tsx b/src/components/map/UseMap.tsx
index cf0e166..b3cdb9f 100644
--- a/src/components/map/UseMap.tsx
+++ b/src/components/map/UseMap.tsx
@@ -193,11 +193,11 @@ const UseMap: React.FC = () => {
       <div ref={mapRef} className="w-full h-full" />
       {showMessage && (
         <>
-          <div className={`absolute ${isModalOpen ? 'bottom-[285px]' : 'bottom-[110px]'} left-4 bg-white px-3 py-3.5 shadow-lg flex items-center`}>
+          <div className={`absolute ${isModalOpen ? 'bottom-[355px]' : 'bottom-[180px]'} left-4 bg-white px-3 py-3.5 shadow-lg flex items-center`}>
             <span>더 정확한 접속위치를 확인해보세요!</span>
             <button id="current-location-text" onClick={handleCurrentLocationTextClick} className="ml-4">X</button>
           </div>
-          <Image src='/map/triangle.svg' alt="Current Location" className={`absolute ${isModalOpen ? 'bottom-[275px]' : 'bottom-[100px]'} left-[40px]`} width={18} height={10} />
+          <Image src='/map/triangle.svg' alt="Current Location" className={`absolute ${isModalOpen ? 'bottom-[345px]' : 'bottom-[170px]'} left-[40px]`} width={18} height={10} />
         </>
       )}
       <MapSearchBar onFocus={() => setShowSearchResults(true)} onChange={handleSearchQueryChange} />
@@ -218,7 +218,7 @@ const UseMap: React.FC = () => {
       />
       <button
         id="current-location-button"
-        className={`absolute ${isModalOpen ? 'bottom-[210px]' : 'bottom-[35px]'} left-4 p-2 flex items-center justify-center`}
+        className={`absolute ${isModalOpen ? 'bottom-[280px]' : 'bottom-[105px]'} left-4 p-2 flex items-center justify-center`}
         onMouseEnter={() => setImageSrc('/map/MapLocationActive.png')}
         onMouseLeave={() => setImageSrc('/map/MapLocation.png')}
         onClick={handleCurrentLocationClick}
diff --git a/src/pages/map/index.tsx b/src/pages/map/index.tsx
index 3e428c7..8b7942a 100644
--- a/src/pages/map/index.tsx
+++ b/src/pages/map/index.tsx
@@ -1,5 +1,6 @@
 import MainContainer from '@/components/shared/MainContainer';
 import UseMap from '@/components/map/UseMap';
+import Footer from '@/components/footer/Footer';
 
 const MapPage = () => {
   return (
@@ -7,6 +8,7 @@ const MapPage = () => {
       <div className="flex flex-col justify-center items-center gap-[39px] h-screen">
         <div className="w-full h-full">
           <UseMap />
+          <Footer/>
         </div>
       </div>
     </MainContainer>

From 9f4717621f7cbbf46702c36f1a23dc9b7155e943 Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Thu, 30 May 2024 19:20:34 +0900
Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=EC=A7=80=EC=A0=90=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EC=8B=9C=20=EC=A7=80=EB=8F=84=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                       | 39 ++++++++++
 package.json                            |  1 +
 src/components/home/CurrentOffice.tsx   | 38 ++++++----
 src/components/home/SearchModal.tsx     | 84 +++++++++++++++++++++
 src/components/home/SelectOfficeMap.tsx | 98 +++++++++++++++++++++++++
 src/store/branch.store.ts               | 12 +++
 6 files changed, 258 insertions(+), 14 deletions(-)
 create mode 100644 src/components/home/SearchModal.tsx
 create mode 100644 src/components/home/SelectOfficeMap.tsx
 create mode 100644 src/store/branch.store.ts

diff --git a/package-lock.json b/package-lock.json
index e62c01f..8a5acf6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "react-id-swiper": "^4.0.0",
         "react-markdown": "^9.0.1",
         "react-query": "^3.39.3",
+        "react-router-dom": "^6.23.1",
         "react-toastify": "^10.0.5",
         "remark-gfm": "^4.0.0",
         "swiper": "^11.1.3",
@@ -2907,6 +2908,14 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -8947,6 +8956,36 @@
         }
       }
     },
+    "node_modules/react-router": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.1",
+        "react-router": "6.23.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-toastify": {
       "version": "10.0.5",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
diff --git a/package.json b/package.json
index 44efd0f..6aba817 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "react-id-swiper": "^4.0.0",
     "react-markdown": "^9.0.1",
     "react-query": "^3.39.3",
+    "react-router-dom": "^6.23.1",
     "react-toastify": "^10.0.5",
     "remark-gfm": "^4.0.0",
     "swiper": "^11.1.3",
diff --git a/src/components/home/CurrentOffice.tsx b/src/components/home/CurrentOffice.tsx
index ad0e796..87d5c75 100644
--- a/src/components/home/CurrentOffice.tsx
+++ b/src/components/home/CurrentOffice.tsx
@@ -1,28 +1,38 @@
-'use client';
-import React from 'react';
+import React, { useState } from 'react';
+import SearchModal from './SearchModal';
+import SelectOfficeMap from './SelectOfficeMap';
+import { Branch } from '@/api/types/branch';
+import { useBranchStore } from '@/store/branch.store';
 
 const CurrentOffice = () => {
+  const [showSearchModal, setShowSearchModal] = useState(false);
+  const selectedBranch = useBranchStore((state) => state.selectedBranch);
+  const setSelectedBranch = useBranchStore((state) => state.setSelectedBranch);
+
+  const handleBranchSelect = (branch: Branch) => {
+    setSelectedBranch(branch);
+    setShowSearchModal(false);
+  };
+
+  const handleSearchClick = () => {
+    setShowSearchModal(true);
+  };
+
   return (
     <>
-      <div className="flex items-center  gap-[10px] mt-6 relative">
+      <div className="flex items-center gap-[10px] mt-6 relative">
         <div className="text-white text-lg font-extralight">지금 이용중인 곳은</div>
         <div className="flex items-center justify-center gap-1">
           <div>
             <img src="/home/location.svg" alt="" />
           </div>
-          <div className="text-white text-lg underline font-medium">강남1호점</div>
-
-          {/* 현재 선택 지점과 이용중인 지점이 다를 때 */}
-          {/* <div className="absolute right-[80px] top-[25px] z-50">
-            <div className="ml-4">
-              <img src="/home/isRight.svg" alt="" />
-            </div>
-            <div className="bg-space-purple-dark-active text-white text-sm font-normal p-2 rounded">
-              이 지점이 맞나요?
-            </div>
-          </div> */}
+          <div className="text-white text-lg underline font-medium cursor-pointer" onClick={handleSearchClick}>
+            {selectedBranch ? selectedBranch.branchName : 'ㅌㅌ'}
+          </div>
         </div>
       </div>
+      {showSearchModal && <SearchModal onClose={() => setShowSearchModal(false)} onBranchSelect={handleBranchSelect} />}
+      {selectedBranch && <SelectOfficeMap branch={selectedBranch} onClose={() => setSelectedBranch(null)} />}
     </>
   );
 };
diff --git a/src/components/home/SearchModal.tsx b/src/components/home/SearchModal.tsx
new file mode 100644
index 0000000..2fd08b6
--- /dev/null
+++ b/src/components/home/SearchModal.tsx
@@ -0,0 +1,84 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Branch } from '@/api/types/branch';
+import Image from 'next/image';
+import { getBranchInfo } from '@/api/map/getOffice';
+import SelectOfficeMap from './SelectOfficeMap';
+
+interface SearchModalProps {
+  onClose: () => void;
+  onBranchSelect: (branch: Branch) => void;
+}
+
+const SearchModal: React.FC<SearchModalProps> = ({ onClose, onBranchSelect }) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [allBranches, setAllBranches] = useState<Branch[]>([]);
+  const [selectedBranch, setSelectedBranch] = useState<Branch | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const data = await getBranchInfo();
+        const branchInfo = data.data;
+        const branchesArray = Array.isArray(branchInfo) ? branchInfo : [];
+        setAllBranches(branchesArray);
+      } catch (error) {
+        console.error('Error fetching branch info:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const filteredResults = allBranches.filter(branch => branch.branchName.includes(searchTerm));
+
+  const handleItemClick = (branch: Branch) => {
+    setSelectedBranch(branch);
+    onBranchSelect(branch); 
+  };
+
+  return (
+    <div className='fixed inset-0 flex justify-center items-center'>
+      <section className="w-[393px] mx-auto h-full bg-white" style={{ zIndex: '101' }}>
+        <div className="relative p-4">
+          <input
+            type="text"
+            placeholder="지점을 검색해보세요."
+            className="w-full p-3 shadow-lg pl-10 rounded-lg"
+            style={{ backgroundColor: '#F0F0F0' }}
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.target.value)}
+            ref={inputRef}
+          />
+          <img
+            src="/map/Search.png"
+            alt="Search Icon"
+            className="absolute left-7 top-1/2 transform -translate-y-1/2 w-5 h-5"
+          />
+          <button onClick={onClose} className="absolute top-7 right-8">
+            X
+          </button>
+        </div>
+        {searchTerm && (
+          <div className="p-4">
+            {filteredResults.length === 0 ? (
+              <p className="text-gray-500">검색 결과가 없습니다.</p>
+            ) : (
+              <ul className="divide-y divide-gray-200">
+                {filteredResults.map(branch => (
+                  <li key={branch.branchName} className="flex items-center py-4 cursor-pointer hover:bg-gray-100" onClick={() => handleItemClick(branch)}>
+                    <Image src="/map/OfficeLocationSmall1.svg" alt="Location" width={12} height={16} className="mr-4" />
+                    <span>{branch.branchName}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+      </section>
+      {selectedBranch && <SelectOfficeMap branch={selectedBranch} onClose={onClose} />}
+    </div>
+  );
+};
+
+export default SearchModal;
diff --git a/src/components/home/SelectOfficeMap.tsx b/src/components/home/SelectOfficeMap.tsx
new file mode 100644
index 0000000..9c6fc07
--- /dev/null
+++ b/src/components/home/SelectOfficeMap.tsx
@@ -0,0 +1,98 @@
+import React, { useEffect, useRef } from 'react';
+import { Branch } from '@/api/types/branch';
+import Image from 'next/image';
+import { useBranchStore } from '@/store/branch.store';
+
+interface SelectOfficeMapProps {
+  branch: Branch;
+  onClose: () => void;
+}
+
+const SelectOfficeMap: React.FC<SelectOfficeMapProps> = ({ branch, onClose }) => {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const setSelectedBranch = useBranchStore((state) => state.setSelectedBranch);
+
+  const handleBranchSelection = () => {
+    setSelectedBranch(branch);
+    onClose();
+  };
+
+  useEffect(() => {
+    const { naver } = window;
+    if (naver && branch) {
+      const mapOptions = {
+        center: new naver.maps.LatLng(branch.branchLatitude, branch.branchLongitude),
+        zoom: 16,
+      };
+      const map = new naver.maps.Map(mapRef.current!, mapOptions);
+
+      new naver.maps.Marker({
+        position: new naver.maps.LatLng(branch.branchLatitude, branch.branchLongitude),
+        map,
+        icon: {
+          url: '/map/OfficeActive.svg',
+          size: new naver.maps.Size(48, 48),
+          scaledSize: new naver.maps.Size(48, 48),
+          origin: new naver.maps.Point(0, 0),
+          anchor: new naver.maps.Point(24, 24),
+        },
+      });
+    }
+  }, [branch]);
+
+  useEffect(() => {
+    console.log('branch', branch);
+  }, [branch]);
+
+  return (
+    <div className="fixed inset-0 bg-white z-50 flex items-center justify-center">
+      <div ref={mapRef} className="w-[393px] mx-auto h-full" />
+      <div className="absolute top-4 right-4">
+        <aside className="w-[373px] mx-auto fixed bottom-[85px] left-0 right-0 z-50">
+          <div className="bg-white px-4 py-6 rounded-lg shadow-lg">
+            <div className='flex'>
+              <div className="flex-shrink-0 w-[88px] h-[88px] bg-gray-300 rounded-md">
+                <Image 
+                  src="/map/OfficeDefaultImg.png" 
+                  alt="Office" 
+                  width={88}
+                  height={88}
+                  className="object-cover rounded-md w-full h-full"
+                />
+              </div>
+              <div className='ml-4 flex-1'>
+                <h2 className="text-xl font-semibold">{branch.branchName}</h2>
+                {branch.branchAddress && branch.branchLatitude && branch.branchLongitude && (
+                  <div className="flex items-start">
+                    <Image src="/map/OfficeLocationSmall1.svg" alt="Location" width={12} height={16} className="mt-[4px] mr-2" />
+                    <p className="text-sm break-words">{branch.branchAddress}</p>
+                  </div>
+                )}
+                <div className="flex">
+                  <Image src="/map/OfficeInfo.svg" alt="Location" width={12} height={12} className="mr-2" />
+                  <p className="text-sm break-words">회의실 43개 중 현재 22개 사용중</p>
+                </div>
+              </div>
+            </div>
+            <div className="flex w-full pt-[25px]">
+              <button 
+                className="flex w-[326px] h-[36px] mx-auto bg-[#EDEBF8] text-[#3B268C] px-4 py-[6px] rounded-md justify-center items-center gap-2"
+                onClick={handleBranchSelection}
+              >
+                지점 설정
+              </button>
+            </div>
+          </div>
+        </aside>
+        <button 
+          onClick={onClose} 
+          className="absolute top-4 right-4 w-8 h-8 rounded-full bg-white text-black flex items-center justify-center"
+        >
+          X
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SelectOfficeMap;
diff --git a/src/store/branch.store.ts b/src/store/branch.store.ts
new file mode 100644
index 0000000..22b5ce1
--- /dev/null
+++ b/src/store/branch.store.ts
@@ -0,0 +1,12 @@
+import { create } from 'zustand';
+import { Branch } from '@/api/types/branch';
+
+interface BranchStore {
+  selectedBranch: Branch | null;
+  setSelectedBranch: (branch: Branch | null) => void;
+}
+
+export const useBranchStore = create<BranchStore>((set) => ({
+  selectedBranch: null,
+  setSelectedBranch: (branch: Branch | null) => set({ selectedBranch: branch }),
+}));

From 6888c181edaea9b66bb3eda774c940740aa8d7ff Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Fri, 31 May 2024 16:36:06 +0900
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=EC=A7=80=EC=A0=90=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=EC=8B=9C,=20=EC=A7=80=EC=A0=90=EB=AA=85=20?=
 =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/CurrentOffice.tsx | 16 ++++++++++++++--
 src/components/home/SearchModal.tsx   |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/home/CurrentOffice.tsx b/src/components/home/CurrentOffice.tsx
index 87d5c75..b6fd49d 100644
--- a/src/components/home/CurrentOffice.tsx
+++ b/src/components/home/CurrentOffice.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import SearchModal from './SearchModal';
 import SelectOfficeMap from './SelectOfficeMap';
 import { Branch } from '@/api/types/branch';
@@ -6,18 +6,28 @@ import { useBranchStore } from '@/store/branch.store';
 
 const CurrentOffice = () => {
   const [showSearchModal, setShowSearchModal] = useState(false);
+  const [showSelectOfficeMap, setShowSelectOfficeMap] = useState(false);
   const selectedBranch = useBranchStore((state) => state.selectedBranch);
   const setSelectedBranch = useBranchStore((state) => state.setSelectedBranch);
 
   const handleBranchSelect = (branch: Branch) => {
     setSelectedBranch(branch);
     setShowSearchModal(false);
+    setShowSelectOfficeMap(true);
   };
 
   const handleSearchClick = () => {
     setShowSearchModal(true);
   };
 
+  const handleCloseSelectOfficeMap = () => {
+    setShowSelectOfficeMap(false);
+  };
+
+  useEffect(() => {
+    console.log('Selected Branch Updated:', selectedBranch);
+  }, [selectedBranch]);
+
   return (
     <>
       <div className="flex items-center gap-[10px] mt-6 relative">
@@ -32,7 +42,9 @@ const CurrentOffice = () => {
         </div>
       </div>
       {showSearchModal && <SearchModal onClose={() => setShowSearchModal(false)} onBranchSelect={handleBranchSelect} />}
-      {selectedBranch && <SelectOfficeMap branch={selectedBranch} onClose={() => setSelectedBranch(null)} />}
+      {showSelectOfficeMap && selectedBranch && (
+        <SelectOfficeMap branch={selectedBranch} onClose={handleCloseSelectOfficeMap} />
+      )}
     </>
   );
 };
diff --git a/src/components/home/SearchModal.tsx b/src/components/home/SearchModal.tsx
index 2fd08b6..eb42759 100644
--- a/src/components/home/SearchModal.tsx
+++ b/src/components/home/SearchModal.tsx
@@ -34,7 +34,7 @@ const SearchModal: React.FC<SearchModalProps> = ({ onClose, onBranchSelect }) =>
 
   const handleItemClick = (branch: Branch) => {
     setSelectedBranch(branch);
-    onBranchSelect(branch); 
+    onBranchSelect(branch);
   };
 
   return (

From 7a1ccf2e24ab3cc28b87c820933c9ddcdac85f9f Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Fri, 31 May 2024 17:11:21 +0900
Subject: [PATCH 4/6] fix: branch store persist

---
 src/components/home/CurrentOffice.tsx |  2 +-
 src/store/branch.store.ts             | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/home/CurrentOffice.tsx b/src/components/home/CurrentOffice.tsx
index b6fd49d..f3d4fcf 100644
--- a/src/components/home/CurrentOffice.tsx
+++ b/src/components/home/CurrentOffice.tsx
@@ -37,7 +37,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 ? selectedBranch.branchName : '지점을 설정해주세요'}
           </div>
         </div>
       </div>
diff --git a/src/store/branch.store.ts b/src/store/branch.store.ts
index 22b5ce1..f69a459 100644
--- a/src/store/branch.store.ts
+++ b/src/store/branch.store.ts
@@ -1,12 +1,20 @@
 import { create } from 'zustand';
 import { Branch } from '@/api/types/branch';
+import { persist } from 'zustand/middleware';
 
 interface BranchStore {
   selectedBranch: Branch | null;
   setSelectedBranch: (branch: Branch | null) => void;
 }
 
-export const useBranchStore = create<BranchStore>((set) => ({
-  selectedBranch: null,
-  setSelectedBranch: (branch: Branch | null) => set({ selectedBranch: branch }),
-}));
+export const useBranchStore = create(
+    persist<BranchStore>(
+        (set) => ({
+            selectedBranch: null,
+            setSelectedBranch: (branch: Branch | null) => set({ selectedBranch: branch }),
+        }),
+        {
+            name: 'selectedBranch'
+        }
+        )
+    );

From 5a29ce159c16cb68e15aebc0d094a3e36dc1ceff Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Fri, 31 May 2024 17:13:55 +0900
Subject: [PATCH 5/6] fix: eslint disable

---
 src/components/home/SearchModal.tsx | 1 +
 src/store/branch.store.ts           | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/home/SearchModal.tsx b/src/components/home/SearchModal.tsx
index eb42759..d249c13 100644
--- a/src/components/home/SearchModal.tsx
+++ b/src/components/home/SearchModal.tsx
@@ -6,6 +6,7 @@ import SelectOfficeMap from './SelectOfficeMap';
 
 interface SearchModalProps {
   onClose: () => void;
+  // eslint-disable-next-line no-unused-vars
   onBranchSelect: (branch: Branch) => void;
 }
 
diff --git a/src/store/branch.store.ts b/src/store/branch.store.ts
index f69a459..9eb7d74 100644
--- a/src/store/branch.store.ts
+++ b/src/store/branch.store.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import { create } from 'zustand';
 import { Branch } from '@/api/types/branch';
 import { persist } from 'zustand/middleware';

From b203034ec3cf17217042f68c8c16e71aaa560ec5 Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Fri, 31 May 2024 17:18:33 +0900
Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=EC=A7=80=EC=A0=90=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C,=20=EC=84=9C?=
 =?UTF-8?q?=EC=B9=98=EB=B0=94=20=EB=B0=94=EB=A1=9C=20=ED=98=B8=EB=B2=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/SearchModal.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/home/SearchModal.tsx b/src/components/home/SearchModal.tsx
index d249c13..66c7c7d 100644
--- a/src/components/home/SearchModal.tsx
+++ b/src/components/home/SearchModal.tsx
@@ -16,6 +16,12 @@ const SearchModal: React.FC<SearchModalProps> = ({ onClose, onBranchSelect }) =>
   const [selectedBranch, setSelectedBranch] = useState<Branch | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
   useEffect(() => {
     const fetchData = async () => {
       try {