fix: 지도 도시 민감도 문제 수정

- touchend는 touchmove와는 별개이므로 함께 처리

hwe/ts/components/MapCityBasic.vue

@@ -15,6 +15,8 @@
         cursor: city.clickable ? 'pointer' : 'default',
       }"
       @click="clicked"
+      @touchstart="touchstart"
+      @touchmove="touchmove"
       @touchend="touchend"
       @mouseenter="mouseenter"
       @mouseleave="mouseleave"
@@ -43,6 +45,7 @@ const emit = defineEmits<{
   (event: "click", evnet: MouseEvent | TouchEvent): void;
   (event: "mouseenter", e: MouseEvent): void;
   (event: "mouseleave", e: MouseEvent): void;
+  (event: "touchleave", e: TouchEvent): void;
 }>();
 const props = defineProps({
   city: {
@@ -117,11 +120,25 @@ function mouseleave(event: MouseEvent) {
   emit("mouseleave", event);
 }
 
-function touchend(event: TouchEvent) {
+let touchOnTrack = false;
-  event.stopPropagation();
+
-  emit("click", event);
+function touchstart() {
+  touchOnTrack = true;
 }
 
+function touchmove() {
+  touchOnTrack = false;
+}
+
+function touchend(event: TouchEvent) {
+  if (touchOnTrack) {
+    event.stopPropagation();
+    emit("click", event);
+  }
+  else{
+    emit("touchleave", event);
+  }
+}
 function silent(event: MouseEvent) {
   event.stopPropagation();
 }

hwe/ts/components/MapCityDetail.vue

@@ -23,6 +23,8 @@
         cursor: city.clickable ? 'pointer' : 'default',
       }"
       @click="clicked"
+      @touchstart="touchstart"
+      @touchmove="touchmove"
       @touchend="touchend"
       @mouseenter="mouseenter"
       @mouseleave="mouseleave"
@@ -54,6 +56,7 @@ const emit = defineEmits<{
   (event: "click", e: MouseEvent | TouchEvent): void;
   (event: "mouseenter", e: MouseEvent): void;
   (event: "mouseleave", e: MouseEvent): void;
+  (event: "touchleave", e: TouchEvent): void;
 }>();
 const props = defineProps({
   city: {
@@ -119,9 +122,24 @@ function mouseleave(event: MouseEvent) {
   emit("mouseleave", event);
 }
 
+let touchOnTrack = false;
+
+function touchstart() {
+  touchOnTrack = true;
+}
+
+function touchmove() {
+  touchOnTrack = false;
+}
+
 function touchend(event: TouchEvent) {
-  event.stopPropagation();
+  if (touchOnTrack) {
-  emit("click", event);
+    event.stopPropagation();
+    emit("click", event);
+  }
+  else{
+    emit("touchleave", event);
+  }
 }
 
 function silent(event: MouseEvent) {
@@ -130,7 +148,7 @@ function silent(event: MouseEvent) {
 </script>
 
 <style lang="scss" scoped>
-.full_width_map{
+.full_width_map {
   a,
   div,
   img,
@@ -148,7 +166,7 @@ function silent(event: MouseEvent) {
   }
 
   span {
-    line-height: 1.0;
+    line-height: 1;
     font-size: 11px;
   }
 }

hwe/ts/components/MapViewer.vue

@@ -65,8 +65,9 @@
           :isFullWidth="isFullWidth"
           :href="props.genHref?.call(city, city.id)"
           @click="cityClick(city, $event)"
+          @touchleave="pointerleave(city, $event)"
           @mouseenter="mouseenter(city, $event)"
-          @mouseleave="mouseleave(city, $event)"
+          @mouseleave="pointerleave(city, $event)"
         />
       </template>
       <template v-else
@@ -78,8 +79,9 @@
           :isFullWidth="isFullWidth"
           :href="props.genHref?.call(city, city.id)"
           @click="cityClick(city, $event)"
+          @touchleave="pointerleave(city, $event)"
           @mouseenter="mouseenter(city, $event)"
-          @mouseleave="mouseleave(city, $event)"
+          @mouseleave="pointerleave(city, $event)"
       /></template>
     </div>
     <div
@@ -484,8 +486,12 @@ function mouseenter(city: MapCityParsed, $event: MouseEvent): void {
   }
 }
 
-function mouseleave(city: MapCityParsed, $event: MouseEvent): void {
+function pointerleave(city: MapCityParsed, $event: MouseEvent|TouchEvent): void {
-  if (cursorType.value == "mouse") {
+  if (cursorType.value == "touch") {
+    activatedCity.value = undefined;
+    touchState.value = 0;
+  }
+  else if (cursorType.value == "mouse") {
     activatedCity.value = undefined;
     touchState.value = 0;
   }