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

hwe/ts/components/MapCityBasic.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"
   >
@@ -41,9 +38,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", evnet: MouseEvent|TouchEvent): void;
+  (event: "click", evnet: MouseEvent | TouchEvent): void;
   (event: "mouseenter", e: MouseEvent): void;
   (event: "mouseleave", e: MouseEvent): void;
 }>();
@@ -62,8 +59,31 @@ const props = defineProps({
     required: false,
     defeault: false,
   },
+  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`,
+      };
+    }
+  },
+  { immediate: true }
+);
 
 function getCityState(): string {
   const state = city.value.state;