fix: 오피스 상세정보 페이지 새로고침 시 발생하는 오류 해결

4bujak-4bujak · May 31, 2024 · 7b74b18 · 7b74b18
1 parent 5f84620
commit 7b74b18
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 18 deletions.
diff --git a/src/components/map/BranchInfo.tsx b/src/components/map/BranchInfo.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -8,20 +8,52 @@ import { Pagination } from 'swiper/modules';
 import { IoIosArrowRoundBack } from 'react-icons/io';
 import { OfficeInfoProps } from '@/api/types/branch';
 import { subwayLineColors, subwayLineAbbreviations } from '@/constant/station';
-import OfficeNotice from './OfficeNotice';
+import BranchOffice from './BranchOffice';
 
-const OfficeInfo: React.FC<OfficeInfoProps> = ({ branchName }) => {
+const BranchInfo: React.FC<OfficeInfoProps> = ({ branchName }) => {
   const router = useRouter();
 
   const address = router.query.address as string;
   const branchPhoneNumber = router.query.branchPhoneNumber as string;
   const roadFromStation = router.query.roadFromStation as string;
   const stationToBranch = router.query.stationToBranch as string;
 
+  useEffect(() => {
+    if (address && branchPhoneNumber && roadFromStation && stationToBranch) {
+      localStorage.setItem('branchInfo', JSON.stringify({
+        branchName,
+        address,
+        branchPhoneNumber,
+        roadFromStation,
+        stationToBranch
+      }));
+    }
+  }, [address, branchPhoneNumber, roadFromStation, stationToBranch]);
+
+  useEffect(() => {
+    if (!address || !branchPhoneNumber || !roadFromStation || !stationToBranch) {
+      const savedBranchInfo = localStorage.getItem('branchInfo');
+      if (savedBranchInfo) {
+        const { branchName, address, branchPhoneNumber, roadFromStation, stationToBranch } = JSON.parse(savedBranchInfo);
+        router.replace({
+          pathname: router.pathname,
+          query: {
+            name: branchName,
+            address,
+            branchPhoneNumber,
+            roadFromStation,
+            stationToBranch
+          }
+        }, undefined, { shallow: true });
+      }
+    }
+  }, []);
+
   const handleBackClick = () => {
     router.push('/map');
   };
 
+
   return (
     <section className="w-full h-full">
       <header className="top-0 left-0 right-0 bg-white z-50 shadow-md py-4 flex items-center">
@@ -104,23 +136,23 @@ const OfficeInfo: React.FC<OfficeInfoProps> = ({ branchName }) => {
               <p className="mt-2">무인택배</p>
             </div>
             <div className="flex flex-col items-center">
-              <Image src="/map/PhoneBooseImg.svg" alt="PhoneBooseImg" width={12} height={16} className="w-[40px] h-[40px my-auto"/>
+              <Image src="/map/PhoneBooseImg.svg" alt="PhoneBooseImg" width={12} height={16} className="w-[40px] h-[40px] my-auto"/>
               <p className="mt-2">폰부스</p>
             </div>
             <div className="flex flex-col items-center">
-              <Image src="/map/PrinterImg.svg" alt="PrinterImg" width={12} height={16} className="w-[40px] h-[40px my-auto"/>
+              <Image src="/map/PrinterImg.svg" alt="PrinterImg" width={12} height={16} className="w-[40px] h-[40px] my-auto"/>
               <p className="mt-2">복합기</p>
             </div>
             <div className="flex flex-col items-center">
-              <Image src="/map/SnackBarImg.svg" alt="SnackBarImg" width={12} height={16} className="w-[40px] h-[40px my-auto"/>
+              <Image src="/map/SnackBarImg.svg" alt="SnackBarImg" width={12} height={16} className="w-[40px] h-[40px] my-auto"/>
               <p className="mt-2">스낵바</p>
             </div>
             <div className="flex flex-col items-center">
-              <Image src="/map/SuppliesImg.svg" alt="SuppliesImg" width={12} height={16} className="w-[40px] h-[40px my-auto"/>
+              <Image src="/map/SuppliesImg.svg" alt="SuppliesImg" width={12} height={16} className="w-[40px] h-[40px] my-auto"/>
               <p className="mt-2">사무용품</p>
             </div>
             <div className="flex flex-col items-center">
-              <Image src="/map/CoffeeImg.svg" alt="CoffeeImg" width={12} height={16} className="w-[40px] h-[40px my-auto"/>
+              <Image src="/map/CoffeeImg.svg" alt="CoffeeImg" width={12} height={16} className="w-[40px] h-[40px] my-auto"/>
               <p className="mt-2">무제한 커피</p>
             </div>
           </div>
@@ -129,7 +161,7 @@ const OfficeInfo: React.FC<OfficeInfoProps> = ({ branchName }) => {
         <div className="px-4 py-6">
           <div className="text-black/opacity-20 text-lg font-extrabold">공지사항</div>
         </div>
-        <OfficeNotice branchName={branchName}/>
+        <BranchOffice branchName={branchName}/>
         <footer className='w-full text-center py-[30px]'>
           <button className='w-[361px] h-12 bg-indigo-700 rounded-lg border border-indigo-700 text-center text-stone-50 text-[15px] font-semibold'>예약하기</button>
         </footer>
@@ -138,4 +170,4 @@ const OfficeInfo: React.FC<OfficeInfoProps> = ({ branchName }) => {
   );
 };
 
-export default OfficeInfo;
+export default BranchInfo;
diff --git a/src/components/map/BranchModal.tsx b/src/components/map/BranchModal.tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 import { getSelectedOfficeInfo } from '@/api/map/getSelectedOffice';
 
 
-const OfficeModal: React.FC<ModalProps> = ({ isOpen, onClose, branchName, branchAddress }) => {
+const BranchModal: React.FC<ModalProps> = ({ isOpen, onClose, branchName, branchAddress }) => {
   const modalRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
 
@@ -48,6 +48,7 @@ const OfficeModal: React.FC<ModalProps> = ({ isOpen, onClose, branchName, branch
       router.push({
         pathname: `/branches/${encodeURIComponent(branchName)}`,
         query: { 
+          name: branchName, 
           address: officeInfo.branchAddress,
           branchPhoneNumber: officeInfo.branchPhoneNumber,
           roadFromStation: officeInfo.roadFromStation,
@@ -102,4 +103,4 @@ const OfficeModal: React.FC<ModalProps> = ({ isOpen, onClose, branchName, branch
   );
 };
 
-export default OfficeModal;
+export default BranchModal;
diff --git a/src/components/map/BranchOffice.tsx b/src/components/map/BranchOffice.tsx
@@ -6,7 +6,7 @@ interface OfficeNoticeProps {
   branchName: string;
 }
 
-const OfficeNotice: React.FC<OfficeNoticeProps> = ({ branchName }) => {
+const BranchOffice: React.FC<OfficeNoticeProps> = ({ branchName }) => {
     const [randomNotices, setRandomNotices] = useState<{ title: string; content: string }[]>([]);
     const [expandedNotice, setExpandedNotice] = useState<{ [key: string]: boolean }>({});
     const [currentDate, setCurrentDate] = useState<string>('');
@@ -93,4 +93,4 @@ const OfficeNotice: React.FC<OfficeNoticeProps> = ({ branchName }) => {
     );
 };
 
-export default OfficeNotice;
+export default BranchOffice;
diff --git a/src/components/map/UseMap.tsx b/src/components/map/UseMap.tsx
@@ -5,7 +5,7 @@ import MapSearchBar from './MapSearchBar';
 import MapSearchResult from './MapSearchResult';
 import { getBranchInfo } from '@/api/map/getOffice';
 import { Branch } from '@/api/types/branch';
-import OfficeModal from './OfficeModal';
+import BranchModal from './BranchModal';
 
 const UseMap: React.FC = () => {
   const mapRef = useRef<HTMLDivElement | null>(null);
@@ -210,7 +210,7 @@ const UseMap: React.FC = () => {
           currentLongitude={currentLongitude}
         />
       )}
-      <OfficeModal
+      <BranchModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
         branchName={selectedBranch?.branchName || ''}

diff --git a/src/pages/branches/[name].tsx b/src/pages/branches/[name].tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
 import MainContainer from '@/components/shared/MainContainer';
-import OfficeInfo from '@/components/map/OfficeInfo';
+import BranchInfo from '@/components/map/BranchInfo';
 
 const BranchDetailsPage = () => {
   const router = useRouter();
@@ -10,7 +10,7 @@ const BranchDetailsPage = () => {
     <MainContainer>
       <div className="flex flex-col justify-center items-center gap-[39px] h-screen">
         <div className="w-full h-full">
-          <OfficeInfo branchName={name as string} branchAddress={address as string}/>
+          <BranchInfo branchName={name as string} branchAddress={address as string}/>
         </div>
       </div>
     </MainContainer>