Merge pull request #50 from 4bujak-4bujak/feature/meetingroomQA

[feat] 지도, 미팅룸 예약 추가 작업
4bujak-4bujak · Jun 11, 2024 · 0207a8c · 0207a8c
2 parents 0744ff0 + 665d0c0
commit 0207a8c
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 135 deletions.
diff --git a/src/components/home/OfficeNotice.tsx b/src/components/home/OfficeNotice.tsx
@@ -1,18 +1,39 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useNotices } from '@/hook/useNotices';
+import { getSelectedOfficeInfo } from '@/api/map/getSelectedOffice';
+import { useBranchStore } from '@/store/branch.store';
+import { useRouter } from 'next/router';
 
 const OfficeNotice: React.FC = () => {
   const { urgentNoticeTitle, urgentNoticeContent } = useNotices();
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const selectedBranch = useBranchStore((state) => state.selectedBranch);
 
-  const handleModalOpen = () => {
-    setIsModalOpen(true);
-  };
+  const router = useRouter();
 
-  const handleModalClose = () => {
-    setIsModalOpen(false);
+  const handleOfficeInfo = async () => {
+    try {
+      const data = await getSelectedOfficeInfo(selectedBranch!.branchName);
+      const officeInfo = data.data;
+      console.log(officeInfo);
+      router.push({
+        pathname: `/branches/${encodeURIComponent(selectedBranch!.branchName)}`,
+        query: {
+          name: selectedBranch!.branchName,
+          urgentNoticeTitle,
+          urgentNoticeContent,
+          address: officeInfo.branchAddress,
+          branchPhoneNumber: officeInfo.branchPhoneNumber,
+          roadFromStation: officeInfo.roadFromStation,
+          stationToBranch: officeInfo.stationToBranch.join(','),
+          branchId: officeInfo.branchId as number,
+          scrollToOffice: true
+        }
+      }, `/branches/${encodeURIComponent(selectedBranch!.branchName)}`);
+    } catch (error) {
+      console.error('Error fetching office info:', error);
+    }
   };
-
+  
   return (
     <>
       <div className="w-full h-12 mt-7 bg-gray-200 flex items-center gap-[13px] px-[13px] py-[14px] rounded shadow border border-gray-200">
@@ -25,30 +46,12 @@ const OfficeNotice: React.FC = () => {
             {urgentNoticeTitle ? urgentNoticeTitle : '긴급 공지가 없습니다.'}
           </div>
           {urgentNoticeContent && (
-            <div onClick={handleModalOpen} className="cursor-pointer">
+            <div onClick={handleOfficeInfo} className="cursor-pointer">
               <img src="/home/toNext.svg" alt="" />
             </div>
           )}
         </div>
       </div>
-      {isModalOpen && (
-        <div className="fixed w-full inset-0 flex items-center justify-center z-[99999]">
-          <div
-            className="fixed inset-0 bg-black opacity-50"
-            onClick={handleModalClose}></div>
-          <div className="bg-white p-6 rounded shadow-lg z-50 max-w-[393px] mx-[20px] px-[20px]">
-            <h2 className="text-center text-xl font-semibold mb-4">긴급 공지</h2>
-            <p>{urgentNoticeContent}</p>
-            <div className="w-full">
-              <button
-                onClick={handleModalClose}
-                className="flex mx-auto mt-4 w-[163px] h-[36px] bg-[#EDEBF8] text-[#3B268C] px-4 py-[6px] rounded-md justify-center items-center">
-                닫기
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
     </>
   );
 };

diff --git a/src/components/map/BranchInfo.tsx b/src/components/map/BranchInfo.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -32,6 +32,20 @@ const BranchInfo: React.FC = () => {
   const stationToBranch = router.query.stationToBranch as string;
   const branchId = router.query.branchId;
 
+  const { urgentNoticeTitle, urgentNoticeContent } = router.query;
+
+
+  const branchOfficeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const { scrollToOffice } = router.query;
+    if (scrollToOffice && branchOfficeRef.current) {
+      setTimeout(() => {
+        branchOfficeRef.current!.scrollIntoView({ behavior: 'smooth' });
+      }, 300); // 300ms 정도의 딜레이를 줍니다.
+    }
+  }, [router.query]);
+
   const imagePairs = [
     ['branch1-1.png', 'branch1-2.png'],
     ['branch2-1.png', 'branch2-2.png'],
@@ -351,7 +365,9 @@ const BranchInfo: React.FC = () => {
         <div className="px-4 py-6">
           <div className="text-black/opacity-20 text-lg font-extrabold">공지사항</div>
         </div>
-        <BranchOffice branchName={branchName} setUrgentNotice={setUrgentNotice} />
+        <div ref={branchOfficeRef}>
+        <BranchOffice branchName={branchName} setUrgentNotice={setUrgentNotice} urgentNoticeTitle={urgentNoticeTitle as string} urgentNoticeContent={urgentNoticeContent as string} />
+        </div>
         <footer className="fixed bottom-0 left-1/2 transform -translate-x-1/2 w-full max-w-[393px] px-4 text-center pb-[30px] bg-white no-box-shadow">
         <button
           className="reserveBtn w-[100%] mx-auto h-12 rounded-lg border border-indigo-700 text-center text-stone-50 text-[15px] font-semibold"

diff --git a/src/components/map/BranchOffice.tsx b/src/components/map/BranchOffice.tsx
@@ -3,11 +3,13 @@ import { notices } from '@/constant/selectedOfficeNotice';
 
 interface OfficeNoticeProps {
   branchName: string;
+  urgentNoticeTitle?: string;
+  urgentNoticeContent?: string;
   // eslint-disable-next-line no-unused-vars
   setUrgentNotice: (notice: { title: string; content: string } | null) => void;
 }
 
-const BranchOffice: React.FC<OfficeNoticeProps> = ({ branchName, setUrgentNotice }) => {
+const BranchOffice: React.FC<OfficeNoticeProps> = ({ branchName, urgentNoticeTitle, urgentNoticeContent, setUrgentNotice }) => {
   const [randomNotices, setRandomNotices] = useState<{ title: string; content: string }[]>([]);
   const [expandedNotice, setExpandedNotice] = useState<{ [key: string]: boolean }>({});
   const [currentDate, setCurrentDate] = useState<string>('');
@@ -55,6 +57,10 @@ const BranchOffice: React.FC<OfficeNoticeProps> = ({ branchName, setUrgentNotice
     setRandomNotices(combinedNotices);
     setUrgentNotice(randomUrgentNotice);
 
+    if (urgentNoticeTitle && urgentNoticeContent) {
+      setExpandedNotice({ [urgentNoticeTitle]: true });
+    }
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [branchName]);