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

hwe/ts/components/StaticMapTemplate.vue

@@ -7,6 +7,7 @@
       drawableMap ? '' : 'draw_required',
       props.isDetailMap ? 'map_detail' : 'map_basic',
       hideMapCityName ? 'hide_cityname' : '',
+      isFullWidth ? 'full_width_map' : 'small_width_map',
       getMapSeasonClassName(),
     ]"
   >
@@ -59,6 +60,7 @@
           :city="city"
           :image-path="imagePath"
           :is-my-city="city.id === drawableMap.myCity"
+          :isFullWidth="isFullWidth"
           @click="cityClick(city, $event)"
           @mouseenter="mouseenter(city, $event)"
           @mouseleave="mouseleave(city, $event)"
@@ -70,6 +72,7 @@
           :key="city.id"
           :city="city"
           :is-my-city="city.id === drawableMap.myCity"
+          :isFullWidth="isFullWidth"
           @click="cityClick(city, $event)"
           @mouseenter="mouseenter(city, $event)"
           @mouseleave="mouseleave(city, $event)"
@@ -82,7 +85,7 @@
         display: isOutside || !activatedCity ? 'none' : 'block',
         position: 'absolute',
         left: `${(() => {
-          if (cursorX + tooltipWidth + 10 > 700) {
+          if (cursorX + tooltipWidth + 10 > (isFullWidth ? 700 : 500)) {
             return cursorX - tooltipWidth - 5;
           }
           return cursorX + 10;
@@ -148,7 +151,7 @@ export type CityPositionMap = {
 };
 </script>
 <script lang="ts" setup>
-import "@/../css/map.css";
+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";
@@ -165,6 +168,7 @@ import MapCityDetail from "./MapCityDetail.vue";
 import { convertDictById } from "@/common_legacy";
 import { useElementSize, useMouse, useMouseInElement } from "@vueuse/core";
 import { hideMapCityName, toggleSingleTap } from "@/state/mapViewer";
+import { is1000pxMode } from "@/state/is1000pxMode";
 const uuid = uuidv4();
 const gameConstStore = unwrap_err(
   inject<Ref<GameConstStore>>("gameConstStore"),
@@ -182,7 +186,25 @@ const emit = defineEmits<{
   (event: "parsed", drawable: MapCityDrawable): void;
 }>();
 
+const isFullWidth = ref(true);
+
+function setWidthMode([widthMode, is1000pxMode]: ["auto" | "full" | "small" | undefined, boolean]): void {
+  if (widthMode == "full") {
+    isFullWidth.value = true;
+  }
+  if (widthMode == "small") {
+    isFullWidth.value = false;
+  }
+  isFullWidth.value = is1000pxMode;
+}
+watch([() => props.width, is1000pxMode], setWidthMode, { immediate: true });
+
 const props = defineProps({
+  width: {
+    type: String as PropType<"full" | "small" | "auto" | undefined>,
+    default: undefined,
+    required: false,
+  },
   serverNick: {
     type: String,
     required: true,