From f09fd39cea9a2ea618d81992eb663e0ef84f8360 Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Sun, 9 Jun 2024 23:09:10 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=98=88=EC=95=BD=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=97=90=EC=84=9C=20=EC=A7=80=EC=A0=90=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=EB=B3=B4=EA=B8=B0=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C,?=
 =?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=95=88=EB=9C=A8=EB=8A=94=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/BranchInfo.tsx  | 25 ++++++++++++++++++++-----
 src/components/map/BranchModal.tsx |  1 -
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/map/BranchInfo.tsx b/src/components/map/BranchInfo.tsx
index 5997d0b..187dd9d 100644
--- a/src/components/map/BranchInfo.tsx
+++ b/src/components/map/BranchInfo.tsx
@@ -13,6 +13,10 @@ import { getSelectedOfficeInfo } from '@/api/map/getSelectedOffice';
 import { getOfficeMeetingRoomCount } from '@/api/map/getAvailableOffice';
 import TabSection from './TapSection';
 
+const getBranchImage = (imageName: string): string => {
+  return `/branch/${imageName}`;
+};
+
 const BranchInfo: React.FC = () => {
   const router = useRouter();
   const { setReservedBranch } = useBranchStore2();
@@ -27,14 +31,25 @@ const BranchInfo: React.FC = () => {
   const roadFromStation = router.query.roadFromStation as string;
   const stationToBranch = router.query.stationToBranch as string;
   const branchId = router.query.branchId;
-  const branchImage = router.query.image as string;
+
+  const imagePairs = [
+    ['branch1-1.png', 'branch1-2.png'],
+    ['branch2-1.png', 'branch2-2.png'],
+    ['branch3-1.png', 'branch3-2.png']
+  ];
+
+  const hash = Array.from(branchName).reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);
+  const pairIndex = hash % imagePairs.length;
+
+  const selectedImagePair = imagePairs[pairIndex];
+
+  const branchImage1 = getBranchImage(selectedImagePair[0]);
+  const branchImage2 = getBranchImage(selectedImagePair[1]);
 
   const numericBranchId = Array.isArray(branchId) ? parseInt(branchId[0], 10) : parseInt(branchId as string, 10);
 
   const [activeTab, setActiveTab] = useState('meetingRoom'); 
 
-  const imagePrefix = (branchImage || '').replace('.png', '');
-
   console.log(branchId);
   console.log(numericBranchId)
 
@@ -155,7 +170,7 @@ const BranchInfo: React.FC = () => {
           onSlideChange={(swiper) => setCurrentSlide(swiper.realIndex + 1)}>
           <SwiperSlide className="flex justify-center items-center h-full relative">
             <Image
-              src={`${imagePrefix}-1.png`}
+              src={branchImage1}
               alt="Office Image 1"
               width={500}
               height={246}
@@ -167,7 +182,7 @@ const BranchInfo: React.FC = () => {
           </SwiperSlide>
           <SwiperSlide className="flex justify-center items-center h-full relative">
             <Image
-              src={`${imagePrefix}-2.png`}
+              src={branchImage2}
               alt="Office Image 2"
               width={500}
               height={246}
diff --git a/src/components/map/BranchModal.tsx b/src/components/map/BranchModal.tsx
index b8b4f79..f5cce44 100644
--- a/src/components/map/BranchModal.tsx
+++ b/src/components/map/BranchModal.tsx
@@ -60,7 +60,6 @@ const BranchModal: React.FC<ModalProps> = ({ isOpen, onClose, branchName, branch
           roadFromStation: officeInfo.roadFromStation,
           stationToBranch: officeInfo.stationToBranch.join(','),
           branchId: officeInfo.branchId as number,
-          image: getBranchImage(branchName),
         }
       }, `/branches/${encodeURIComponent(branchName)}`);
     } catch (error) {