Feat: Add overlay window in map

src/components/common/KakaoMap.vue

@@ -16,13 +16,20 @@ onMounted(() => {
   };
   const map = new kakao.maps.Map(mapDiv.value, options);
   const markers = computed(() =>
-    attractionList.value.map(
+    attractionList.value.map((attraction) => {
-      (attraction) =>
+      const position = new kakao.maps.LatLng(attraction.latitude, attraction.longitude);
-        new kakao.maps.Marker({
+
-          position: new kakao.maps.LatLng(attraction.latitude, attraction.longitude),
+      return new kakao.maps.Marker({ position });
-        })
+    })
-    )
   );
+  const overlays = computed(() => {
+    return attractionList.value.map((attraction) => {
+      const position = new kakao.maps.LatLng(attraction.latitude, attraction.longitude);
+      const content = `<div class="map-overlay">${attraction.title}</div>`;
+
+      return new kakao.maps.CustomOverlay({ position, content });
+    });
+  });
 
   watch(markers, (newMarkers, oldMarkers) => {
     oldMarkers.forEach((marker) => marker.setMap(null));
@@ -32,6 +39,10 @@ onMounted(() => {
       setTarget(newMarkers[0].getPosition());
     }
   });
+  watch(overlays, (newOverlays, oldOverlays) => {
+    oldOverlays.forEach((overlay) => overlay.setMap(null));
+    newOverlays.forEach((overlay) => overlay.setMap(map));
+  });
 
   watch(target, (newTarget) => {
     map.panTo(newTarget);
@@ -49,3 +60,16 @@ onMounted(() => {
   height: 100%;
 }
 </style>
+
+<style>
+.map-overlay {
+  font-size: 12px;
+  transform: translateY(8px);
+  color: black;
+  text-shadow:
+    white -1px 0px,
+    white 0px 1px,
+    white 1px 0px,
+    white 0px -1px;
+}
+</style>