Merge branch 'feature/gateway-detailed-map-preview-20260809'

app/gateway-frontend/e2e/public-map-tabs.spec.ts

@@ -68,6 +68,22 @@ const fulfill = async (route: Route, results: unknown[]): Promise<void> => {
     });
 };
 
+const installImageFixture = async (page: Page): Promise<Set<string> | null> => {
+    if (process.env.SAMMO_E2E_REAL_MAP_ASSETS === '1') {
+        return null;
+    }
+    const requestedAssets = new Set<string>();
+    const transparentPixel = Buffer.from(
+        'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEAQH/69aQ6wAAAABJRU5ErkJggg==',
+        'base64'
+    );
+    await page.route('https://sam-image.hided.net/game/**', async (route) => {
+        requestedAssets.add(new URL(route.request().url()).pathname);
+        await route.fulfill({ status: 200, contentType: 'image/png', body: transparentPixel });
+    });
+    return requestedAssets;
+};
+
 const installGatewayFixture = async (page: Page, fixtureProfiles: ProfileFixture[], authenticated: boolean) => {
     if (authenticated) {
         await page.addInitScript(() => window.localStorage.setItem('sammo-session-token', 'map-tab-session'));
@@ -135,9 +151,31 @@ const installGameFixture = async (page: Page, profile: ProfileFixture, userCnt:
                     myGeneral: null,
                 });
             }
-            if (operation === 'public.getMapLayout') return response({ mapName: profile.profile, cityList: [] });
+            if (operation === 'public.getMapLayout') {
+                return response({
+                    mapName: 'che',
+                    cityList: [
+                        { id: 1, name: '낙양', level: 8, region: 2, x: 350, y: 250, path: [2] },
+                        { id: 2, name: '허창', level: 1, region: 2, x: 480, y: 300, path: [1] },
+                    ],
+                    regionMap: { 2: '중원' },
+                    levelMap: { 1: '수', 8: '특' },
+                });
+            }
             if (operation === 'public.getCachedMap') {
-                return response({ year: 200, month: 1, cityList: [], nationList: [], history: [] });
+                return response({
+                    year: 200,
+                    month: 1,
+                    cityList: [
+                        [1, 8, 41, 1, 2, 1],
+                        [2, 1, 0, 2, 2, 0],
+                    ],
+                    nationList: [
+                        [1, '위', '#FF0000', 1],
+                        [2, '촉', '#0000FF', 2],
+                    ],
+                    history: [],
+                });
             }
             throw new Error(`Unhandled ${profile.profile} operation: ${operation}`);
         });
@@ -146,6 +184,7 @@ const installGameFixture = async (page: Page, profile: ProfileFixture, userCnt:
 };
 
 test('shows one public map panel and switches it by hover, click, and keyboard', async ({ page }, testInfo) => {
+    const requestedAssets = await installImageFixture(page);
     await installGatewayFixture(page, profiles, true);
     await installGameFixture(page, profiles[0]!, 11);
     await installGameFixture(page, profiles[1]!, 22);
@@ -163,6 +202,57 @@ test('shows one public map panel and switches it by hover, click, and keyboard',
     await expect(cheTab).toHaveAttribute('aria-selected', 'true');
     await expect(panel).toContainText('유저 11 / 500');
 
+    const roadLayer = panel.getByTestId('map-preview-road');
+    const castles = panel.getByTestId('map-preview-castle');
+    const nationBackgrounds = panel.getByTestId('map-preview-city-background');
+    await expect(panel.locator('.map-preview')).toHaveClass(/map-preview-detail/);
+    await expect(roadLayer).toBeVisible();
+    await expect(roadLayer).toHaveCSS('background-image', /map\/che\/che_road\.png/);
+    await expect(castles).toHaveCount(2);
+    await expect(castles.nth(0)).toHaveAttribute('src', /\/game\/cast_8\.gif$/);
+    await expect(castles.nth(1)).toHaveAttribute('src', /\/game\/cast_1\.gif$/);
+    await expect(nationBackgrounds).toHaveCount(2);
+    await expect(nationBackgrounds.nth(0)).toHaveCSS('background-image', /\/game\/bFF0000\.png/);
+    const mapGeometry = await panel.locator('.map-preview-body').evaluate((mapBody) => {
+        const rectOf = (element: Element | null) => {
+            if (!element) throw new Error('expected map preview element');
+            const rect = element.getBoundingClientRect();
+            return { width: rect.width, height: rect.height };
+        };
+        return {
+            body: rectOf(mapBody),
+            road: rectOf(mapBody.querySelector('[data-testid="map-preview-road"]')),
+            largeCastle: rectOf(mapBody.querySelector('[data-testid="map-preview-castle"]')),
+            largeNationBackground: rectOf(
+                mapBody.querySelector('[data-testid="map-preview-city-background"]')
+            ),
+        };
+    });
+    expect(mapGeometry).toEqual({
+        body: { width: 700, height: 500 },
+        road: { width: 700, height: 500 },
+        largeCastle: { width: 32, height: 24 },
+        largeNationBackground: { width: 96, height: 72 },
+    });
+    if (requestedAssets) {
+        await expect.poll(() => requestedAssets.has('/game/map/che/che_road.png')).toBe(true);
+        await expect.poll(() => requestedAssets.has('/game/cast_8.gif')).toBe(true);
+        await expect.poll(() => requestedAssets.has('/game/fFF0000.gif')).toBe(true);
+    } else {
+        await expect.poll(() => castles.nth(0).evaluate((image: HTMLImageElement) => image.naturalWidth)).toBe(32);
+        await expect.poll(() => castles.nth(1).evaluate((image: HTMLImageElement) => image.naturalWidth)).toBe(16);
+        await expect
+            .poll(() =>
+                page.evaluate(async () => {
+                    const image = new Image();
+                    image.src = 'https://sam-image.hided.net/game/map/che/che_road.png';
+                    await image.decode();
+                    return [image.naturalWidth, image.naturalHeight];
+                })
+            )
+            .toEqual([700, 500]);
+    }
+
     await hweTab.hover();
     await expect(hweTab).toHaveAttribute('aria-selected', 'true');
     await expect(panel).toContainText('유저 22 / 500');
@@ -189,7 +279,7 @@ test('shows one public map panel and switches it by hover, click, and keyboard',
     expect(geometry.backgroundColor).toBe('rgba(9, 9, 11, 0.498)');
     await page.screenshot({ path: testInfo.outputPath('public-map-tabs-desktop.png'), fullPage: true });
     await testInfo.attach('public-map-tabs-desktop-geometry', {
-        body: Buffer.from(`${JSON.stringify(geometry, null, 2)}\n`),
+        body: Buffer.from(`${JSON.stringify({ panel: geometry, map: mapGeometry }, null, 2)}\n`),
         contentType: 'application/json',
     });
 });
@@ -209,7 +299,14 @@ test.describe('touch navigation', () => {
         expect(box?.height).toBeGreaterThanOrEqual(34);
         await hweTab.tap();
         await expect(hweTab).toHaveAttribute('aria-selected', 'true');
-        await expect(page.getByTestId('public-map-preview-panel')).toContainText('유저 22 / 500');
+        const panel = page.getByTestId('public-map-preview-panel');
+        await expect(panel).toContainText('유저 22 / 500');
+        await expect(panel.getByTestId('map-preview-road')).toBeVisible();
+        await expect(panel.getByTestId('map-preview-castle')).toHaveCount(2);
+        const mapBox = await panel.locator('.map-preview-body').boundingBox();
+        expect(mapBox?.width).toBeGreaterThan(280);
+        expect(mapBox?.width).toBeLessThanOrEqual(366);
+        expect(mapBox?.height).toBeCloseTo((mapBox?.width ?? 0) * (5 / 7), 0);
         await page.screenshot({ path: testInfo.outputPath('public-map-tabs-mobile.png'), fullPage: true });
     });
 });

app/gateway-frontend/src/components/MapPreview.vue

@@ -24,24 +24,75 @@ interface MapLayout {
     cityList: MapLayoutCity[];
 }
 
-interface CityDot {
+type DetailSize = {
+    bgWidth: number;
+    bgHeight: number;
+    iconWidth: number;
+    iconHeight: number;
+    flagRight: number;
+    flagTop: number;
+};
+
+interface CityPreview {
     id: number;
     name: string;
+    level: number;
+    state: number;
+    nationId: number;
+    color: string;
+    colorToken: string | null;
+    supply: boolean;
+    isCapital: boolean;
     x: number;
     y: number;
-    color: string;
-    isCapital: boolean;
+    detailSize: DetailSize;
 }
 
-const props = defineProps<{
-    mapData: MapSummary;
-    mapLayout: MapLayout;
-}>();
+const props = withDefaults(
+    defineProps<{
+        mapData: MapSummary;
+        mapLayout: MapLayout;
+        mode?: 'basic' | 'detail';
+    }>(),
+    {
+        mode: 'detail',
+    }
+);
 
 const BASE_MAP_WIDTH = 700;
 const BASE_MAP_HEIGHT = 500;
+const CITY_BASE_WIDTH = 40;
+const CITY_BASE_HEIGHT = 30;
+const DETAIL_SIZES: DetailSize[] = [
+    { bgWidth: 48, bgHeight: 45, iconWidth: 16, iconHeight: 15, flagRight: -8, flagTop: -4 },
+    { bgWidth: 60, bgHeight: 42, iconWidth: 20, iconHeight: 14, flagRight: -8, flagTop: -4 },
+    { bgWidth: 42, bgHeight: 42, iconWidth: 14, iconHeight: 14, flagRight: -8, flagTop: -4 },
+    { bgWidth: 60, bgHeight: 45, iconWidth: 20, iconHeight: 15, flagRight: -6, flagTop: -3 },
+    { bgWidth: 72, bgHeight: 48, iconWidth: 24, iconHeight: 16, flagRight: -6, flagTop: -4 },
+    { bgWidth: 78, bgHeight: 54, iconWidth: 26, iconHeight: 18, flagRight: -6, flagTop: -4 },
+    { 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 BASIC_SIZES: ReadonlyArray<readonly [number, number]> = [
+    [12, 12],
+    [12, 12],
+    [14, 14],
+    [16, 14],
+    [18, 16],
+    [20, 16],
+    [22, 18],
+    [24, 18],
+];
 
 const assetBase = computed(configuredGameAssetUrl);
+const assetUrl = (path: string): string => `${assetBase.value}/${path.replace(/^\/+/, '')}`;
+const normalizeColorToken = (color: string): string | null => {
+    const token = color.trim().replace(/^#/, '').toUpperCase();
+    return token || null;
+};
+const clampedLevelIndex = (level: number): number => Math.min(Math.max(level, 1), DETAIL_SIZES.length) - 1;
+const percentOf = (value: number, total: number): string => `${(value / total) * 100}%`;
+
 const season = computed(() => {
     if (props.mapData.month <= 3) return 'spring';
     if (props.mapData.month <= 6) return 'summer';
@@ -50,67 +101,194 @@ const season = computed(() => {
 });
 const mapBackground = computed(() => {
     const theme = props.mapLayout.mapName;
-    if (theme === 'ludo_rathowm') return `${assetBase.value}/map/ludo_rathowm/back.jpg`;
-    if (theme === 'chess') return `${assetBase.value}/map/chess/chessboard.png`;
-    if (theme === 'pokemon_v1') return `${assetBase.value}/map/pokemon_v1/back_pal8.png`;
-    if (theme === 'cr') return `${assetBase.value}/map/cr/bg-fs8.png`;
-    return `${assetBase.value}/map/che/bg_${season.value}.jpg`;
+    if (theme === 'ludo_rathowm') return assetUrl('map/ludo_rathowm/back.jpg');
+    if (theme === 'chess') return assetUrl('map/chess/chessboard.png');
+    if (theme === 'pokemon_v1') return assetUrl('map/pokemon_v1/back_pal8.png');
+    if (theme === 'cr') return assetUrl('map/cr/bg-fs8.png');
+    return assetUrl(`map/che/bg_${season.value}.jpg`);
+});
+const mapRoad = computed(() => {
+    const theme = props.mapLayout.mapName;
+    if (theme === 'che') return assetUrl('map/che/che_road.png');
+    if (theme === 'miniche' || theme === 'miniche_b' || theme === 'miniche_clean') {
+        return assetUrl('map/che/miniche_road.png');
+    }
+    if (theme === 'ludo_rathowm') return assetUrl('map/ludo_rathowm/road.png');
+    return null;
 });
 
 const nationById = computed(() => {
-    const map = new Map<number, { name: string; color: string; capitalCityId: number }>();
-    for (const nation of props.mapData.nationList) {
-        const [id, name, color, capitalCityId] = nation;
-        map.set(id, {
-            name,
-            color,
-            capitalCityId,
-        });
+    const map = new Map<number, { color: string; capitalCityId: number }>();
+    for (const [id, , color, capitalCityId] of props.mapData.nationList) {
+        map.set(id, { color, capitalCityId });
     }
     return map;
 });
 
 const dynamicCityById = computed(() => {
     const map = new Map<number, [number, number, number, number, number]>();
-    for (const entry of props.mapData.cityList) {
-        const [id, level, state, nationId, region, supplyFlag] = entry;
+    for (const [id, level, state, nationId, region, supplyFlag] of props.mapData.cityList) {
         map.set(id, [level, state, nationId, region, supplyFlag]);
     }
     return map;
 });
 
-const cityDots = computed<CityDot[]>(() => {
-    return props.mapLayout.cityList.map((layoutCity) => {
+const cities = computed<CityPreview[]>(() =>
+    props.mapLayout.cityList.map((layoutCity) => {
         const dynamic = dynamicCityById.value.get(layoutCity.id);
-        const [, , nationId = 0] = dynamic ?? [];
+        const [level = layoutCity.level, state = 0, nationId = 0, , supplyFlag = 0] = dynamic ?? [];
         const nation = nationById.value.get(nationId);
+        const color = nation?.color ?? '#ffffff';
         return {
             id: layoutCity.id,
             name: layoutCity.name,
-            x: (layoutCity.x / BASE_MAP_WIDTH) * 100,
-            y: (layoutCity.y / BASE_MAP_HEIGHT) * 100,
-            color: nation?.color ?? '#666666',
+            level,
+            state,
+            nationId,
+            color,
+            colorToken: normalizeColorToken(color),
+            supply: supplyFlag > 0,
             isCapital: nation?.capitalCityId === layoutCity.id,
+            x: layoutCity.x,
+            y: layoutCity.y,
+            detailSize: DETAIL_SIZES[clampedLevelIndex(level)]!,
         };
-    });
+    })
+);
+
+const cityBaseStyle = (city: CityPreview) => ({
+    left: percentOf(city.x, BASE_MAP_WIDTH),
+    top: percentOf(city.y, BASE_MAP_HEIGHT),
+    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 cityImageStyle = (city: CityPreview) => ({
+    width: percentOf(city.detailSize.iconWidth, CITY_BASE_WIDTH),
+    height: percentOf(city.detailSize.iconHeight, CITY_BASE_HEIGHT),
+});
+const flagStyle = (city: CityPreview) => ({
+    width: percentOf(12, city.detailSize.iconWidth),
+    height: percentOf(12, city.detailSize.iconHeight),
+    right: percentOf(city.detailSize.flagRight, city.detailSize.iconWidth),
+    top: percentOf(city.detailSize.flagTop, city.detailSize.iconHeight),
+});
+const cityNameStyle = (city: CityPreview) => ({
+    bottom: percentOf(-10, city.detailSize.iconHeight),
+});
+const basicCityStyle = (city: CityPreview) => {
+    const [width, height] = BASIC_SIZES[clampedLevelIndex(city.level)]!;
+    return {
+        width: percentOf(width, CITY_BASE_WIDTH),
+        height: percentOf(height, CITY_BASE_HEIGHT),
+        backgroundColor: city.color,
+    };
+};
+const basicCitySize = (city: CityPreview): readonly [number, number] => BASIC_SIZES[clampedLevelIndex(city.level)]!;
+const basicCapitalStyle = (city: CityPreview) => {
+    const [width, height] = basicCitySize(city);
+    return {
+        width: percentOf(5, width),
+        height: percentOf(5, height),
+        top: percentOf(-2, height),
+        right: percentOf(-2, width),
+    };
+};
+const basicStateStyle = (city: CityPreview) => {
+    const [width, height] = basicCitySize(city);
+    return {
+        width: percentOf(10, width),
+        height: percentOf(10, height),
+        top: percentOf(-2, height),
+        left: percentOf(-4, width),
+    };
+};
+const basicCityNameStyle = (city: CityPreview) => {
+    const [, height] = basicCitySize(city);
+    return {
+        bottom: percentOf(-10, height),
+    };
+};
+const stateClass = (state: number): string => {
+    if (state < 10) return 'state-good';
+    if (state < 40) return 'state-bad';
+    if (state < 50) return 'state-war';
+    return 'state-wrong';
+};
 </script>
 
 <template>
-    <div class="map-preview">
+    <div class="map-preview" :class="`map-preview-${props.mode}`">
         <div class="map-preview-header">
             <span class="map-preview-title">{{ props.mapLayout.mapName }}</span>
             <span class="map-preview-date">{{ props.mapData.year }}년 {{ props.mapData.month }}월</span>
         </div>
         <div class="map-preview-body" :style="{ backgroundImage: `url('${mapBackground}')` }">
             <div
-                v-for="city in cityDots"
-                :key="city.id"
-                class="city-dot"
-                :class="{ capital: city.isCapital }"
-                :title="city.name"
-                :style="{ left: `${city.x}%`, top: `${city.y}%`, backgroundColor: city.color }"
+                v-if="mapRoad"
+                class="map-preview-road"
+                data-testid="map-preview-road"
+                :style="{ backgroundImage: `url('${mapRoad}')` }"
             />
+            <div
+                v-for="city in cities"
+                :key="city.id"
+                class="city-base"
+                :class="[`city-level-${city.level}`, { capital: city.isCapital }]"
+                :title="city.name"
+                :style="cityBaseStyle(city)"
+                data-testid="map-preview-city"
+            >
+                <template v-if="props.mode === 'detail'">
+                    <div
+                        v-if="city.nationId > 0"
+                        class="city-bg"
+                        :class="{ 'city-bg-cr': props.mapLayout.mapName === 'cr' }"
+                        :style="cityBackgroundStyle(city)"
+                        data-testid="map-preview-city-background"
+                    />
+                    <div class="city-image" :style="cityImageStyle(city)">
+                        <img
+                            class="castle-image"
+                            :src="assetUrl(`cast_${city.level}.gif`)"
+                            alt=""
+                            data-testid="map-preview-castle"
+                        />
+                        <div v-if="city.nationId > 0 && city.colorToken" class="city-flag" :style="flagStyle(city)">
+                            <img
+                                :src="assetUrl(`${city.supply ? 'f' : 'd'}${city.colorToken}.gif`)"
+                                alt=""
+                            />
+                            <img v-if="city.isCapital" class="capital-image" :src="assetUrl('event51.gif')" alt="" />
+                        </div>
+                        <span class="city-name" :style="cityNameStyle(city)">{{ city.name }}</span>
+                    </div>
+                    <img
+                        v-if="city.state > 0"
+                        class="city-state-image"
+                        :src="assetUrl(`event${city.state}.gif`)"
+                        alt=""
+                    />
+                </template>
+                <div v-else class="basic-city" :style="basicCityStyle(city)">
+                    <span v-if="city.isCapital" class="basic-capital" :style="basicCapitalStyle(city)" />
+                    <span
+                        v-if="city.state > 0"
+                        class="basic-state"
+                        :class="stateClass(city.state)"
+                        :style="basicStateStyle(city)"
+                    />
+                    <span class="city-name" :style="basicCityNameStyle(city)">{{ city.name }}</span>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -118,7 +296,8 @@ const cityDots = computed<CityDot[]>(() => {
 <style scoped>
 .map-preview {
     display: flex;
-    width: 100%;
+    width: min(100%, 700px);
+    margin-inline: auto;
     flex-direction: column;
     gap: 6px;
 }
@@ -139,24 +318,112 @@ const cityDots = computed<CityDot[]>(() => {
     width: 100%;
     aspect-ratio: 7 / 5;
     overflow: hidden;
-    border: 1px solid #444;
     background-color: #080808;
     background-position: center;
     background-size: 100% 100%;
 }
 
-.city-dot {
+.map-preview-road {
     position: absolute;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    border: 1px solid rgba(0, 0, 0, 0.5);
+    z-index: 1;
+    inset: 0;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
 }
 
-.city-dot.capital {
-    width: 8px;
-    height: 8px;
-    box-shadow: 0 0 6px rgba(255, 221, 164, 0.7);
-    border-color: rgba(255, 221, 164, 0.8);
+.city-base {
+    position: absolute;
+    z-index: 2;
+    transform: translate(-50%, -50%);
+}
+
+.city-bg,
+.city-image,
+.basic-city {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.city-bg {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.city-bg-cr {
+    opacity: 0.5;
+}
+
+.castle-image,
+.city-flag > img:first-child,
+.capital-image,
+.city-state-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.city-flag {
+    position: absolute;
+}
+
+.capital-image {
+    position: absolute;
+    top: 0;
+    right: -8.333%;
+    width: 83.333%;
+    height: 83.333%;
+}
+
+.city-state-image {
+    position: absolute;
+    left: 0;
+    top: 16.667%;
+    width: 37.5%;
+    height: 50%;
+}
+
+.city-name {
+    position: absolute;
+    left: 70%;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    font-size: clamp(6px, 1.43vw, 10px);
+    line-height: 1;
+    white-space: nowrap;
+}
+
+.basic-city {
+    min-width: 1px;
+    min-height: 1px;
+}
+
+.basic-capital,
+.basic-state {
+    position: absolute;
+    display: block;
+}
+
+.basic-capital {
+    background: yellow;
+}
+
+.basic-state {
+    background: #fff;
+}
+
+.basic-state.state-good {
+    background: blue;
+}
+
+.basic-state.state-bad {
+    background: orange;
+}
+
+.basic-state.state-war {
+    background: red;
 }
 </style>

app/gateway-frontend/src/views/HomeView.vue

@@ -182,7 +182,7 @@ const handlePasswordReset = async (): Promise<void> => {
                     <span>{{ dateText }}</span>
                 </header>
                 <div v-if="mapData && mapLayout" class="map-frame">
-                    <MapPreview :map-data="mapData" :map-layout="mapLayout" />
+                    <MapPreview :map-data="mapData" :map-layout="mapLayout" mode="detail" />
                 </div>
                 <div v-else class="status-message">
                     {{ statusLoading ? '현황을 불러오는 중…' : statusError }}

app/gateway-frontend/src/views/LobbyView.vue

@@ -565,6 +565,7 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => {
                             <MapPreview
                                 :map-data="selectedMapPreview.mapData"
                                 :map-layout="selectedMapPreview.mapLayout"
+                                mode="detail"
                             />
                             <div v-if="profileDetails[selectedMapProfile.profileName]" class="text-xs text-zinc-400 mt-2">
                                 유저 {{ profileDetails[selectedMapProfile.profileName]?.userCnt ?? '-' }} /