feat,wip: 지도에 자체 700px, 500px 모드 적용

hwe/ts/components/MapCityDetail.vue

@@ -1,10 +1,7 @@
 <template>
   <div
     :class="['city_base', `city_base_${city.id}`, `city_level_${city.level}`]"
-    :style="{
-      left: `${city.x - 20}px`,
-      top: `${city.y - 15}px`,
-    }"
+    :style="cityPos"
     @mouseenter="silent"
     @mouseleave="silent"
   >
@@ -23,7 +20,7 @@
       :data-id="city.id"
       :href="props.href"
       :style="{
-        cursor: city.clickable?'pointer':'default',
+        cursor: city.clickable ? 'pointer' : 'default',
       }"
       @click="clicked"
       @touchend="touchend"
@@ -51,9 +48,9 @@
 
 <script lang="ts" setup>
 import type { MapCityParsed } from "@/map";
-import { toRef, type PropType } from "vue";
+import { ref, toRef, watch, type PropType } from "vue";
 const emit = defineEmits<{
-  (event: "click", e: MouseEvent|TouchEvent): void;
+  (event: "click", e: MouseEvent | TouchEvent): void;
   (event: "mouseenter", e: MouseEvent): void;
   (event: "mouseleave", e: MouseEvent): void;
 }>();
@@ -76,8 +73,35 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  isFullWidth: {
+    type: Boolean,
+    required: true,
+  },
 });
 const city = toRef(props, "city");
+const cityPos = ref({
+  left: "0px",
+  top: "0px",
+});
+watch(
+  () => props.isFullWidth,
+  (isFullWidth) => {
+    const { x, y } = city.value;
+    if (isFullWidth) {
+      cityPos.value = {
+        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 }
+);
+
 const imagePath = toRef(props, "imagePath");
 
 function clicked(event: MouseEvent) {
@@ -99,17 +123,32 @@ function touchend(event: TouchEvent) {
   emit("click", event);
 }
 
-function silent(event: MouseEvent){
+function silent(event: MouseEvent) {
   event.stopPropagation();
 }
 </script>
 
 <style lang="scss" scoped>
-a,
-div,
-img,
-span {
-  line-height: 1.3;
-  font-size: 14px;
+.full_width_map{
+  a,
+  div,
+  img,
+  span {
+    line-height: 1.3;
+    font-size: 14px;
+  }
+}
+.small_width_map {
+  a,
+  div,
+  img {
+    line-height: 1.3;
+    font-size: 14px;
+  }
+
+  span {
+    line-height: 1.0;
+    font-size: 11px;
+  }
 }
 </style>