feat: marker 클릭 가능한지 아닌지 구분

#104
Gyeongdan · Jul 21, 2024 · d4f94a8 · d4f94a8
1 parent 1217b29
commit d4f94a8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/src/app/village/[id]/page.tsx b/src/app/village/[id]/page.tsx
@@ -49,11 +49,17 @@ const Page = async ({ params }: { params: { id: number } }) => {
             </Card>
           </Box>
           <Typography color={color.blue} fontSize="20px" py={2} variant="h3" />
-          <CommentCard isCharacter isChat content="위치는 여기야📍" />
+          <CommentCard isCharacter isChat content={`${village.title} 위치는 여기야`} />
           <CommentCard isChat content="다음에 같이 가보자!" />
         </Box>
-        <Box>
-          <KakaoMap initialLat={village.latitude} initialLon={village.longitude} level={7} villages={[village]} />
+        <Box style={{ alignItems: 'center' }} width={600}>
+          <KakaoMap
+            initialLat={village.latitude}
+            initialLon={village.longitude}
+            isMarkerClicked={false}
+            level={7}
+            villages={[village]}
+          />
         </Box>
       </Stack>
     </GradientBox>

diff --git a/src/app/village/page.tsx b/src/app/village/page.tsx
@@ -49,7 +49,7 @@ const Page = () => {
             <Typography gutterBottom color={color.blue} component="h1" variant="h4">
               지도에서 보는 마을
             </Typography>
-            <KakaoMap initialLat={36.5} initialLon={127.5} level={13} villages={villages} />
+            <KakaoMap isMarkerClicked initialLat={36.5} initialLon={127.5} level={13} villages={villages} />
           </Box>
           <Box>
             {villages.slice(3).map((filteredItem) => (

diff --git a/src/components/KakaoMap.tsx b/src/components/KakaoMap.tsx
@@ -22,13 +22,15 @@ interface KakaoMapProps {
   initialLon: number;
   level: number;
   villages: Village[];
+  isMarkerClicked?: boolean;
 }
 
-const KakaoMap = ({ villages, initialLat, initialLon, level }: KakaoMapProps) => {
+const KakaoMap = ({ villages, initialLat, initialLon, level, isMarkerClicked = false }: KakaoMapProps) => {
   useEffect(() => {
     const initializeMap = () => {
       const container = document.getElementById('map');
       if (!container) {
+        console.error('Map container not found');
         return;
       }
 
@@ -58,7 +60,9 @@ const KakaoMap = ({ villages, initialLat, initialLon, level }: KakaoMapProps) =>
         });
 
         window.kakao.maps.event.addListener(marker, 'click', () => {
-          window.location.href = `/village/${village.id}`;
+          if (isMarkerClicked) {
+            window.location.href = `/village/${village.id}`;
+          }
         });
       });
     };
@@ -77,15 +81,19 @@ const KakaoMap = ({ villages, initialLat, initialLon, level }: KakaoMapProps) =>
           window.kakao.maps.load(() => {
             initializeMap();
           });
+        } else {
+          console.error('Kakao maps load function is not available');
         }
       };
-      script.onerror = () => {};
+      script.onerror = () => {
+        console.error('Failed to load Kakao Maps script');
+      };
 
       document.head.appendChild(script);
     };
 
     loadKakaoMap();
-  }, [villages]);
+  }, [villages, initialLat, initialLon, level, isMarkerClicked]);
 
   return (
     <div