feat: 메인 도시 정보를 Ref와 일치

도시 소유 국가색과 태수·군사·종사를 general.me에 추가한다. 주민 영역, 반응형 grid와 국가색 대비를 Ref 카드와 같은 geometry로 맞추고 API 및 production Chromium 회귀 검증을 추가한다.

app/game-frontend/e2e/inGameMenus.spec.ts

@@ -123,6 +123,7 @@ const myGeneral = (state: FixtureState) => ({
         regionName: '중원',
         nationId: 1,
         nationName: '위',
+        nationColor: '#ffff00',
         population: 1000,
         populationMax: 2000,
         agriculture: 100,
@@ -139,6 +140,11 @@ const myGeneral = (state: FixtureState) => ({
         wallMax: 200,
         supplyState: 1,
         frontState: 0,
+        officers: {
+            4: { id: 8, name: '태수장', npcState: 0 },
+            3: { id: 9, name: '군사장', npcState: 2 },
+            2: { id: 10, name: '종사장', npcState: 6 },
+        },
     },
     nation: state.buildNationCandidateEnabled
         ? {
@@ -679,11 +685,76 @@ test('메인 카드의 국가·수도·관직·계급·병종은 Ref 출력명
     await expect(generalCard).toContainText('계급 29품관');
 
     const cityCard = page.locator('.city-card');
-    await expect(cityCard.locator('.title')).toContainText('【중원 | 특】 업');
-    await expect(cityCard.locator('.title')).toContainText('지배 국가 【 위 】');
+    await expect(cityCard.locator('.city-title')).toHaveText('【중원 | 특】 업');
+    await expect(cityCard.locator('.city-nation')).toHaveText('지배 국가 【 위 】');
     await expect(page.locator('.main-page')).not.toContainText('che_');
 });
 
+for (const viewport of [
+    { name: 'desktop', width: 1000, height: 900, columns: 4, cardWidth: 700, cardHeight: 125.390625 },
+    { name: 'mobile', width: 500, height: 900, columns: 3, cardWidth: 500, cardHeight: 147.390625 },
+] as const) {
+    test(`메인 도시 카드는 Ref의 국가색·주민 폭·도시 관직 배치를 유지한다 (${viewport.name})`, async ({ page }) => {
+        const state: FixtureState = {
+            permission: 'head',
+            myset: 3,
+            settingMutations: [],
+            accessPages: [],
+        };
+        await install(page, state);
+        await page.setViewportSize({ width: viewport.width, height: viewport.height });
+        await page.goto('');
+
+        const cityCard = page.locator('[data-city-basic-card]');
+        await expect(cityCard.locator('.city-title')).toHaveText('【중원 | 특】 업');
+        await expect(cityCard.locator('.city-nation')).toHaveText('지배 국가 【 위 】');
+        await expect(cityCard.locator('[data-city-officer="4"]')).toContainText('태수장');
+        await expect(cityCard.locator('[data-city-officer="3"]')).toContainText('군사장');
+        await expect(cityCard.locator('[data-city-officer="2"]')).toContainText('종사장');
+
+        const geometry = await cityCard.evaluate((element) => {
+            const rect = (selector: string) => element.querySelector<HTMLElement>(selector)!.getBoundingClientRect();
+            const style = (selector: string) => getComputedStyle(element.querySelector<HTMLElement>(selector)!);
+            const cardRect = element.getBoundingClientRect();
+            const populationRect = rect('[data-city-progress="주민"]');
+            const trustRect = rect('[data-city-progress="민심"]');
+            const populationBarRect = rect('[data-city-progress="주민"] [role="progressbar"]');
+            const trustBarRect = rect('[data-city-progress="민심"] [role="progressbar"]');
+            return {
+                card: { width: cardRect.width, height: cardRect.height },
+                columns: style('.city-grid').gridTemplateColumns.split(' ').length,
+                title: {
+                    backgroundColor: style('.city-title').backgroundColor,
+                    color: style('.city-title').color,
+                },
+                nation: {
+                    backgroundColor: style('.city-nation').backgroundColor,
+                    color: style('.city-nation').color,
+                },
+                populationWidth: populationRect.width,
+                trustWidth: trustRect.width,
+                populationBarWidth: populationBarRect.width,
+                trustBarWidth: trustBarRect.width,
+                officerColors: [4, 3, 2].map(
+                    (level) => style(`[data-city-officer="${level}"] .city-officer__name`).color
+                ),
+                overflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+            };
+        });
+
+        expect(geometry.columns).toBe(viewport.columns);
+        expect(geometry.card.width).toBeCloseTo(viewport.cardWidth, 0);
+        expect(geometry.card.height).toBeCloseTo(viewport.cardHeight, 0);
+        expect(geometry.title).toEqual({ backgroundColor: 'rgb(255, 255, 0)', color: 'rgb(0, 0, 0)' });
+        expect(geometry.nation).toEqual({ backgroundColor: 'rgb(255, 255, 0)', color: 'rgb(0, 0, 0)' });
+        expect(geometry.populationWidth).toBeCloseTo(geometry.trustWidth * 2, 0);
+        expect(geometry.populationBarWidth).toBeGreaterThan(geometry.trustBarWidth * 2.4);
+        expect(geometry.officerColors).toEqual(['rgb(255, 255, 255)', 'rgb(0, 255, 255)', 'rgb(102, 205, 170)']);
+        expect(geometry.overflow).toBe(0);
+        await persistParityArtifact(page, `main-city-card-${viewport.name}`, geometry);
+    });
+}
+
 test('메인 장수 동향과 개인 전투 기록은 Ref 행 간격·색상·글자 크기를 유지한다', async ({ page }) => {
     const state: FixtureState = {
         permission: 'head',

app/game-frontend/e2e/mainNavigation.spec.ts

@@ -419,8 +419,12 @@ const generalContext = (state: NavigationFixture) => ({
         id: 1,
         name: '업',
         level: 8,
+        levelName: '특',
         nationId: 1,
+        nationName: '위',
+        nationColor: state.nationColor ?? '#008000',
         region: 1,
+        regionName: '중원',
         population: 100_000,
         populationMax: 200_000,
         agriculture: 1_000,
@@ -438,6 +442,11 @@ const generalContext = (state: NavigationFixture) => ({
         supplyState: 1,
         frontState: 0,
         state: state.cityState ?? 0,
+        officers: {
+            4: { id: 8, name: '태수장', npcState: 0 },
+            3: { id: 9, name: '군사장', npcState: 2 },
+            2: { id: 10, name: '종사장', npcState: 6 },
+        },
     },
     nation: {
         id: 1,

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

@@ -3,6 +3,14 @@ import { computed } from 'vue';
 import SkeletonLines from '../ui/SkeletonLines.vue';
 import LegacyProgressBar from '../ui/LegacyProgressBar.vue';
 import { ratioPercent } from '../../utils/legacyProgress';
+import { legacyLuminanceTextColor } from '../../utils/legacyNationColor';
+import { getNpcColor } from '../../utils/npcColor';
+
+interface CityOfficer {
+    id: number;
+    name: string;
+    npcState: number;
+}
 
 interface CityInfo {
     id: number;
@@ -12,6 +20,7 @@ interface CityInfo {
     regionName: string;
     nationId: number;
     nationName: string;
+    nationColor: string;
     population: number;
     populationMax: number;
     agriculture: number;
@@ -28,6 +37,7 @@ interface CityInfo {
     wallMax: number;
     supplyState: number;
     frontState: number;
+    officers?: Partial<Record<2 | 3 | 4, CityOfficer | null>>;
 }
 
 const props = defineProps<{
@@ -59,97 +69,170 @@ const metrics = computed(() => {
         { label: '시세', percent: city.trade ? ratioPercent(city.trade - 95, 10) : 0, text: tradeText },
     ];
 });
+
+const officerRows = computed(() => {
+    const city = props.city;
+    if (!city) return [];
+    return [
+        { level: 4 as const, label: '태수', officer: city.officers?.[4] },
+        { level: 3 as const, label: '군사', officer: city.officers?.[3] },
+        { level: 2 as const, label: '종사', officer: city.officers?.[2] },
+    ];
+});
+
+const nationStyle = computed(() => {
+    const backgroundColor = props.city?.nationColor ?? '#000000';
+    return {
+        backgroundColor,
+        color: legacyLuminanceTextColor(backgroundColor),
+    };
+});
 </script>
 
 <template>
-    <div class="city-card">
+    <div class="city-card" data-city-basic-card>
         <div v-if="props.loading">
             <SkeletonLines :lines="4" />
         </div>
         <div v-else-if="!props.city" class="empty">도시 정보를 불러오지 못했습니다.</div>
-        <div v-else class="city-body">
-            <div class="title">
-                【{{ props.city.regionName }} | {{ props.city.levelName }}】 {{ props.city.name }} ·
+        <div v-else class="city-grid">
+            <div class="city-title" :style="nationStyle">
+                【{{ props.city.regionName }} | {{ props.city.levelName }}】 {{ props.city.name }}
+            </div>
+            <div class="city-nation" :style="nationStyle">
                 {{ props.city.nationId > 0 ? `지배 국가 【 ${props.city.nationName} 】` : '공 백 지' }}
             </div>
-            <div class="progress-grid">
-                <div
-                    v-for="metric of metrics"
-                    :key="metric.label"
-                    class="city-progress"
-                    :data-city-progress="metric.label"
-                >
-                    <span class="city-progress__label">{{ metric.label }}</span>
-                    <div class="city-progress__body">
-                        <LegacyProgressBar
-                            :height="7"
-                            :percent="metric.percent"
-                            :label="`${metric.label} ${metric.text}`"
-                        />
-                        <span class="city-progress__text">{{ metric.text }}</span>
-                    </div>
+            <div
+                v-for="metric of metrics"
+                :key="metric.label"
+                class="city-panel city-progress"
+                :class="{ 'city-panel--population': metric.label === '주민' }"
+                :data-city-progress="metric.label"
+            >
+                <span class="city-panel__head city-progress__label">{{ metric.label }}</span>
+                <div class="city-panel__body city-progress__body">
+                    <LegacyProgressBar
+                        :height="7"
+                        :percent="metric.percent"
+                        :label="`${metric.label} ${metric.text}`"
+                    />
+                    <span class="city-progress__text">{{ metric.text }}</span>
                 </div>
             </div>
+            <div
+                v-for="row of officerRows"
+                :key="row.level"
+                class="city-panel city-officer"
+                :class="`city-panel--officer-${row.level}`"
+                :data-city-officer="row.level"
+            >
+                <span class="city-panel__head">{{ row.label }}</span>
+                <span
+                    class="city-panel__body city-officer__name"
+                    :style="{ color: getNpcColor(row.officer?.npcState ?? 0) }"
+                >
+                    {{ row.officer?.name ?? '-' }}
+                </span>
+            </div>
         </div>
     </div>
 </template>
 
 <style scoped>
-.title {
+.city-card,
+.city-grid {
     box-sizing: border-box;
-    min-height: 20px;
-    padding: 1px 6px;
-    border-bottom: 1px solid #666;
-    background: #173d27;
-    text-align: center;
-    font-size: 12px;
-    font-weight: 600;
-}
-
-.progress-grid {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    font-size: 12px;
-}
-
-.city-progress {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
+    width: 100%;
     min-width: 0;
-    min-height: 31px;
-    border-right: 1px solid #666;
-    border-bottom: 1px solid #666;
 }
 
-.city-progress__label {
+.city-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    border-right: 1px solid gray;
+    border-bottom: 1px solid gray;
+    background-color: #172a52;
+    background-image: var(--sammo-texture-blue);
+}
+
+.city-title,
+.city-nation {
+    grid-column: 1 / -1;
+    min-width: 0;
+    border-top: 1px solid gray;
+    border-left: 1px solid gray;
+    overflow: hidden;
+    font-weight: 700;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.city-panel {
+    display: grid;
+    min-width: 0;
+    grid-template-columns: 1fr 2fr;
+    border-top: 1px solid gray;
+    border-left: 1px solid gray;
+}
+
+.city-panel--population {
+    grid-column: 1 / 3;
+    grid-template-columns: 1fr 5fr;
+}
+
+.city-panel__head {
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgb(20 75 42 / 70%);
 }
 
+.city-panel__body {
+    min-width: 0;
+}
+
 .city-progress__body {
     display: grid;
-    min-width: 0;
     align-content: center;
-    padding: 1px 3px;
 }
 
 .city-progress__text {
     overflow: hidden;
-    line-height: 14px;
+    line-height: 1.2em;
     text-align: center;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
+.city-officer__name {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .empty {
     color: rgba(232, 221, 196, 0.6);
 }
 
-@media (max-width: 939.98px) {
-    .progress-grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+@media (min-width: 940px) {
+    .city-grid {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .city-panel--officer-4 {
+        grid-column: 4 / 5;
+        grid-row: 3 / 4;
+    }
+
+    .city-panel--officer-3 {
+        grid-column: 4 / 5;
+        grid-row: 4 / 5;
+    }
+
+    .city-panel--officer-2 {
+        grid-column: 4 / 5;
+        grid-row: 5 / 6;
     }
 }
 </style>

app/game-frontend/src/views/MainView.vue

@@ -756,7 +756,12 @@ button {
     display: none;
 }
 
-[data-main-target='map'] :deep(.panel-body) {
+[data-main-target='city'] :deep(.panel-header) {
+    display: none;
+}
+
+[data-main-target='map'] :deep(.panel-body),
+[data-main-target='city'] :deep(.panel-body) {
     padding: 0;
 }