From 23678df9de10b6a2b79fbb40e5f49e303a6918fb Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Sat, 29 Aug 2026 04:36:49 +0000
Subject: [PATCH] =?UTF-8?q?fix(game-ui):=20CR=20=ED=85=8C=EB=A7=88?=
 =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EC=B6=B0=20=EB=8F=84=EC=8B=9C=20=EB=B0=B0?=
 =?UTF-8?q?=EA=B2=BD=20=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/main/MapCityDetail.vue     | 18 ++++++++++----
 .../src/components/MapPreview.vue             | 24 ++++++++++++-------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/app/game-frontend/src/components/main/MapCityDetail.vue b/app/game-frontend/src/components/main/MapCityDetail.vue
index e3d8f407..59aef444 100644
--- a/app/game-frontend/src/components/main/MapCityDetail.vue
+++ b/app/game-frontend/src/components/main/MapCityDetail.vue
@@ -40,6 +40,7 @@ const DETAIL_SIZES: DetailSize[] = [
     { bgWidth: 84, bgHeight: 60, iconWidth: 28, iconHeight: 20, flagRight: -6, flagTop: -4 },
     { bgWidth: 96, bgHeight: 72, iconWidth: 32, iconHeight: 24, flagRight: -6, flagTop: -3 },
 ];
+const CR_GRID_TILE_SIZE = 40.5;
 
 const props = defineProps<{
     city: MapCityView;
@@ -75,6 +76,15 @@ const detailSize = computed(() => {
     };
 });
 
+const cityBackgroundSize = computed(() => {
+    if (props.themeName === 'cr') {
+        const tileSize = CR_GRID_TILE_SIZE * props.mapScale;
+        return { bgWidth: tileSize, bgHeight: tileSize };
+    }
+
+    return detailSize.value;
+});
+
 const baseSize = computed(() => ({
     width: 40 * props.mapScale,
     height: 30 * props.mapScale,
@@ -92,8 +102,8 @@ const cityBgStyle = computed(() => {
         return null;
     }
     const style: Record<string, string> = {
-        width: `${detailSize.value.bgWidth}px`,
-        height: `${detailSize.value.bgHeight}px`,
+        width: `${cityBackgroundSize.value.bgWidth}px`,
+        height: `${cityBackgroundSize.value.bgHeight}px`,
     };
 
     if (props.themeName === 'cr') {
@@ -125,8 +135,8 @@ const capitalIcon = computed(() => buildAssetUrl(props.imageBaseUrl, 'event51.gi
 const cityBgWrapperStyle = computed(() => ({
     left: '50%',
     top: '50%',
-    marginLeft: `${-detailSize.value.bgWidth / 2}px`,
-    marginTop: `${-detailSize.value.bgHeight / 2}px`,
+    marginLeft: `${-cityBackgroundSize.value.bgWidth / 2}px`,
+    marginTop: `${-cityBackgroundSize.value.bgHeight / 2}px`,
 }));
 
 const cityIconStyle = computed(() => ({
diff --git a/app/gateway-frontend/src/components/MapPreview.vue b/app/gateway-frontend/src/components/MapPreview.vue
index da234f73..803e087e 100644
--- a/app/gateway-frontend/src/components/MapPreview.vue
+++ b/app/gateway-frontend/src/components/MapPreview.vue
@@ -68,6 +68,7 @@ const BASE_MAP_WIDTH = 700;
 const BASE_MAP_HEIGHT = 500;
 const CITY_BASE_WIDTH = 40;
 const CITY_BASE_HEIGHT = 30;
+const CR_GRID_TILE_SIZE = 40.5;
 const TOOLTIP_MIN_WIDTH = 120;
 const TOOLTIP_CURSOR_OFFSET = 10;
 const DETAIL_SIZES: DetailSize[] = [
@@ -211,15 +212,20 @@ const cityBaseStyle = (city: CityPreview) => ({
     width: percentOf(CITY_BASE_WIDTH, BASE_MAP_WIDTH),
     height: percentOf(CITY_BASE_HEIGHT, BASE_MAP_HEIGHT),
 });
-const cityBackgroundStyle = (city: CityPreview) => ({
-    width: percentOf(city.detailSize.bgWidth, CITY_BASE_WIDTH),
-    height: percentOf(city.detailSize.bgHeight, CITY_BASE_HEIGHT),
-    backgroundColor: props.mapLayout.mapName === 'cr' ? city.color : undefined,
-    backgroundImage:
-        props.mapLayout.mapName !== 'cr' && city.colorToken
-            ? `url('${assetUrl(`b${city.colorToken}.png`)}')`
-            : undefined,
-});
+const cityBackgroundStyle = (city: CityPreview) => {
+    const isCrTheme = props.mapLayout.mapName === 'cr';
+    const bgWidth = isCrTheme ? CR_GRID_TILE_SIZE : city.detailSize.bgWidth;
+    const bgHeight = isCrTheme ? CR_GRID_TILE_SIZE : city.detailSize.bgHeight;
+    return {
+        width: percentOf(bgWidth, CITY_BASE_WIDTH),
+        height: percentOf(bgHeight, CITY_BASE_HEIGHT),
+        backgroundColor: isCrTheme ? city.color : undefined,
+        backgroundImage:
+            !isCrTheme && city.colorToken
+                ? `url('${assetUrl(`b${city.colorToken}.png`)}')`
+                : undefined,
+    };
+};
 const cityImageStyle = (city: CityPreview) => ({
     width: percentOf(city.detailSize.iconWidth, CITY_BASE_WIDTH),
     height: percentOf(city.detailSize.iconHeight, CITY_BASE_HEIGHT),