feat: 새 지도 모듈 마무리

hwe/scss/map.scss

@@ -642,10 +642,10 @@ $smV: calc(500 / 700);
 
       .city_state {
         position: absolute;
-        width: 10px;
-        height: 10px;
-        top: -2px;
-        left: -4px;
+        width: 8px;
+        height: 8px;
+        top: -3px;
+        left: -5px;
         background-color: white;
       }
 

hwe/ts/components/MapCityBasic.vue

@@ -80,11 +80,15 @@ watch(
         left: `${x - 20}px`,
         top: `${y - 15}px`,
       };
+    } else {
+      cityPos.value = {
+        left: `${(x * 5) / 7 - 20}px`,
+        top: `${(y * 5) / 7 - 18}px`,
+      };
     }
   },
   { immediate: true }
 );
-
 function getCityState(): string {
   const state = city.value.state;
   if (state < 10) {

hwe/ts/components/MapViewer.vue

@@ -61,6 +61,7 @@
           :image-path="imagePath"
           :is-my-city="city.id === drawableMap.myCity"
           :isFullWidth="isFullWidth"
+          :href="props.genHref?.call(city, city.id)"
           @click="cityClick(city, $event)"
           @mouseenter="mouseenter(city, $event)"
           @mouseleave="mouseleave(city, $event)"
@@ -73,6 +74,7 @@
           :city="city"
           :is-my-city="city.id === drawableMap.myCity"
           :isFullWidth="isFullWidth"
+          :href="props.genHref?.call(city, city.id)"
           @click="cityClick(city, $event)"
           @mouseenter="mouseenter(city, $event)"
           @mouseleave="mouseleave(city, $event)"
@@ -152,7 +154,6 @@ export type CityPositionMap = {
 </script>
 <script lang="ts" setup>
 import "@/../scss/map.scss";
-import type { loadMapOption } from "@/map";
 import { type PropType, toRef, inject, type Ref, ref, watch, type ComponentPublicInstance } from "vue";
 import { v4 as uuidv4 } from "uuid";
 import type { MapResult } from "@/defs";
@@ -205,14 +206,6 @@ const props = defineProps({
     default: undefined,
     required: false,
   },
-  serverNick: {
-    type: String,
-    required: true,
-  },
-  serverID: {
-    type: String,
-    required: true,
-  },
   imagePath: {
     type: String,
     required: true,
@@ -223,17 +216,11 @@ const props = defineProps({
   },
   isDetailMap: { type: Boolean, default: undefined, required: false },
   disallowClick: { type: Boolean, default: undefined, required: false },
-  hrefTemplate: { type: String, default: "#", required: false },
-  /// clickable, 소속 국가, 첩보 여부 등을 반환여부를 설정
-  neutralView: { type: Boolean, default: false, required: false },
-  ///반환 값에 본인이 위치한 도시 값을 반환하도록 설정. neutralView와 별개
-  showMe: { type: Boolean, default: true, required: false },
-
-  callback: {
-    type: Function as PropType<loadMapOption["callback"]>,
+  genHref: {
+    type: Function as PropType<(cityID: number) => string>,
     default: undefined,
+    required: false,
   },
-  startYear: { type: Number, default: undefined, required: false },
 
   cityPosition: {
     type: Object as PropType<CityPositionMap>,
@@ -456,7 +443,7 @@ function cityClick(city: MapCityParsed, $event: MouseEvent | TouchEvent): void {
 function clickOutside($event: MouseEvent): void {
   $event.preventDefault();
   $event.stopPropagation();
-  if(touchState.value == 1) {
+  if (touchState.value == 1) {
     touchState.value = 0;
     activatedCity.value = undefined;
   }
@@ -475,4 +462,4 @@ function mouseleave(city: MapCityParsed, $event: MouseEvent): void {
     touchState.value = 0;
   }
 }
-</script>
+</script>