♻️ Refactor: MallangMap 에서 마커 클릭시 setTotalData 셋터를 이용하여 모달 전체 데이터 변경,…

… 모달 출력시키기 (#27)
prgrms-web-devcourse-final-project · Dec 8, 2024 · 78cf78d · 78cf78d
1 parent f341e59
commit 78cf78d
Show file tree

Hide file tree

Showing 11 changed files with 4,838 additions and 42 deletions.
diff --git a/public/images/logo.png b/public/images/logo.png
diff --git a/public/images/temp-logo.png b/public/images/temp-logo.png
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
diff --git a/src/assets/images/marker-alpha.png b/src/assets/images/marker-alpha.png
diff --git a/src/assets/images/marker-beta.png b/src/assets/images/marker-beta.png
diff --git a/src/assets/images/marker-gamma.png b/src/assets/images/marker-gamma.png
diff --git a/src/components/MallangMap.jsx b/src/components/MallangMap.jsx
@@ -6,6 +6,10 @@ import ToolTip from './common/ToolTip';
 import AreaInfoPanel from './layout/AreaInfoPanel';
 import MarkerCategory from './layout/MarkerCategory';
 import getLatestLocation from '../utils/getLatestLocation';
+import markerLogo from '../assets/images/logo.png';
+import markerImageAlpha from '../assets/images/marker-alpha.png';
+import markerImageBeta from '../assets/images/marker-beta.png';
+import markerImageGamma from '../assets/images/marker-gamma.png';
 import tempDB from '../datas/temp-db.json'; // 임시 가라 데이터
 
 const MallangMap = () => {
@@ -33,9 +37,9 @@ const MallangMap = () => {
         return currentLocation;
     };
 
-    const toggleModal = useModalStore((state) => state.toggleModal);
-    const setModalType = useModalStore((state) => state.setModalType);
-    const setModalData = useModalStore((state) => state.setModalData);
+    const { toggleModal, setModalType, setTotalData } = useModalStore(
+        (state) => state,
+    );
 
     const handleMapDrag = (map) => {
         // 지도 드래그로 중심점 이동시 핸들러
@@ -201,16 +205,29 @@ const MallangMap = () => {
                                 lng: item.longitude,
                             }}
                             image={{
-                                src: 'https://picsum.photos/64/64',
+                                src:
+                                    item.threadType === 'places'
+                                        ? markerImageAlpha
+                                        : item.threadType === 'missing'
+                                          ? markerImageBeta
+                                          : item.threadType === 'rescue'
+                                            ? markerImageGamma
+                                            : markerLogo,
                                 size: {
                                     width: 64,
                                     height: 64,
                                 },
                             }}
                             title={item.threadTitle}
                             key={index}
-                            onClick={() => console.log(item.threadType)}
-                        />
+                            onClick={() => {
+                                setModalType(item.threadType);
+                                setTotalData(item);
+                                toggleModal(true);
+                            }}
+                        >
+                            <div>{item.threadTitle}</div>
+                        </MapMarker>
                     );
                 })}
             </Map>