지도 도시 포인터 대상을 아이콘으로 한정

app/game-frontend/src/components/main/MapCityBasic.vue

@@ -78,7 +78,12 @@ const touchend = (event: TouchEvent) => {
                 readonly: props.readonly,
             },
         ]"
-        :style="{ left: `${props.city.x}px`, top: `${props.city.y}px` }"
+        :style="{
+            left: `${props.city.x}px`,
+            top: `${props.city.y}px`,
+            width: `${size}px`,
+            height: `${size}px`,
+        }"
         @mouseenter="emit('hover', props.city.id)"
         @mouseleave="emit('leave')"
         @touchstart="touchstart"
@@ -107,10 +112,7 @@ const touchend = (event: TouchEvent) => {
 <style scoped>
 .map-city {
     position: absolute;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 2px;
+    box-sizing: border-box;
     transform: translate(-50%, -50%);
     font-size: 0.65rem;
     color: rgba(232, 221, 196, 0.8);
@@ -126,7 +128,8 @@ const touchend = (event: TouchEvent) => {
 }
 
 .city-dot {
-    position: relative;
+    position: absolute;
+    inset: 0;
     border: 1px solid rgba(232, 221, 196, 0.6);
     display: flex;
     align-items: center;
@@ -179,6 +182,7 @@ const touchend = (event: TouchEvent) => {
 .city-state {
     position: absolute;
     background: rgba(232, 221, 196, 0.8);
+    pointer-events: none;
 }
 
 .city-state.state-war {
@@ -194,6 +198,11 @@ const touchend = (event: TouchEvent) => {
 }
 
 .city-name {
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 50%;
+    pointer-events: none;
+    transform: translateX(-50%);
     white-space: nowrap;
 }
 </style>

app/game-frontend/src/components/main/MapCityDetail.vue

@@ -85,16 +85,11 @@ const cityBackgroundSize = computed(() => {
     return detailSize.value;
 });
 
-const baseSize = computed(() => ({
-    width: 40 * props.mapScale,
-    height: 30 * props.mapScale,
-}));
-
 const cityBaseStyle = computed(() => ({
     left: `${props.city.x}px`,
     top: `${props.city.y}px`,
-    width: `${baseSize.value.width}px`,
-    height: `${baseSize.value.height}px`,
+    width: `${detailSize.value.iconWidth}px`,
+    height: `${detailSize.value.iconHeight}px`,
 }));
 
 const cityBgStyle = computed(() => {
@@ -251,12 +246,14 @@ const cityStateStyle = computed(() => ({
     background-position: center;
     background-repeat: no-repeat;
     background-size: 100% 100%;
+    pointer-events: none;
 }
 
 .city-img {
     position: absolute;
     left: 50%;
     top: 50%;
+    pointer-events: none;
     transform: translate(-50%, -50%);
 }
 
@@ -317,5 +314,6 @@ const cityStateStyle = computed(() => ({
 .city-state {
     position: absolute;
     left: 0;
+    pointer-events: none;
 }
 </style>