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

hwe/ts/components/MapCityBasic.vue

@@ -5,6 +5,8 @@
       left: `${city.x - 20}px`,
       top: `${city.y - 15}px`,
     }"
+    @mouseenter="silent"
+    @mouseleave="silent"
   >
     <a
       class="city_link"
@@ -12,7 +14,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"
@@ -36,6 +43,8 @@ import type { MapCityParsed } from "@/map";
 import { toRef, type PropType } from "vue";
 const emit = defineEmits<{
   (event: "click", evnet: MouseEvent): void;
+  (event: "mouseenter", e: MouseEvent): void;
+  (event: "mouseleave", e: MouseEvent): void;
 }>();
 const props = defineProps({
   city: {
@@ -72,6 +81,23 @@ function getCityState(): string {
 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>