feat(wip): 지도 툴팁 기능 활성화

hwe/ts/components/MapCityDetail.vue

@@ -5,6 +5,8 @@
       left: `${city.x - 20}px`,
       top: `${city.y - 15}px`,
     }"
+    @mouseenter="silent"
+    @mouseleave="silent"
   >
     <div
       v-if="city.color"
@@ -20,7 +22,12 @@
       :data-nation="city.nation"
       :data-id="city.id"
       :href="props.href"
+      :style="{
+        cursor: city.clickable?'pointer':'default',
+      }"
       @click="clicked"
+      @mouseenter="mouseenter"
+      @mouseleave="mouseleave"
     >
       <div class="city_img">
         <img :src="`${imagePath}/cast_${city.level}.gif`" />
@@ -45,7 +52,9 @@
 import type { MapCityParsed } from "@/map";
 import { toRef, type PropType } from "vue";
 const emit = defineEmits<{
-  (event: "click", evnet: MouseEvent): void;
+  (event: "click", e: MouseEvent): void;
+  (event: "mouseenter", e: MouseEvent): void;
+  (event: "mouseleave", e: MouseEvent): void;
 }>();
 const props = defineProps({
   city: {
@@ -73,6 +82,23 @@ const imagePath = toRef(props, "imagePath");
 function clicked(event: MouseEvent) {
   emit("click", event);
 }
+
+function mouseenter(event: MouseEvent) {
+  event.stopPropagation();
+  emit("mouseenter", event);
+  console.log('enter');
+}
+
+function mouseleave(event: MouseEvent) {
+  event.stopPropagation();
+  emit("mouseleave", event);
+  console.log('out');
+}
+
+function silent(event: MouseEvent){
+  event.stopPropagation();
+  console.log(city.value.name);
+}
 </script>
 
 <style lang="scss" scoped>