fix(frontend): clarify main scenario status

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

@@ -34,6 +34,8 @@ type NavigationFixture = {
     largeCommandTable?: boolean;
     currentYear?: number;
     currentMonth?: number;
+    scenarioTitle?: string;
+    latestVote?: { id: number; title: string; hasVoted: boolean } | null;
     globalRecords?: Array<{ id: number; text: string }>;
     generalRecords?: Array<{ id: number; text: string }>;
     worldHistory?: Array<{ id: number; text: string }>;
@@ -309,6 +311,7 @@ const installFixture = async (page: Page, state: NavigationFixture) => {
                     year: state.currentYear ?? 185,
                     month: state.currentMonth ?? 1,
                     turnTerm: 10,
+                    scenarioTitle: state.scenarioTitle ?? '',
                 });
             }
             if (operation === 'dashboard.getContextBundleDelta') {
@@ -421,7 +424,10 @@ const installFixture = async (page: Page, state: NavigationFixture) => {
                     onlineGenerals: '메뉴검증장수',
                     nationNotice: '<p>국가 방침</p>',
                     lastExecuted: null,
-                    latestVote: { id: 9, title: '메뉴 설문', hasVoted: false },
+                    latestVote:
+                        state.latestVote === undefined
+                            ? { id: 9, title: '메뉴 설문', hasVoted: false }
+                            : state.latestVote,
                 });
             }
             if (operation === 'board.getAccess') {
@@ -576,6 +582,7 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
         nationLevel: 3,
         stage: 1,
         npcMode: 1,
+        scenarioTitle: '메인 화면 검증 시나리오',
         generalMeCalls: 0,
         operations: [],
     };
@@ -589,6 +596,45 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
     await expect(page.locator('.main-mobile-bottom')).toBeHidden();
     await expect(page.locator('.layout-desktop')).toBeVisible();
     await expect(page.locator('.layout-mobile')).toHaveCount(0);
+    await expect(page.getByRole('heading', { name: '메인 화면 검증 시나리오', exact: true })).toHaveCount(1);
+    await expect(page.locator('.game-shell__subtitle')).toHaveText('185년 1월 · 턴 10분');
+    await expect(page.locator('.game-shell__subtitle')).not.toContainText('메인 화면 검증 시나리오');
+    await expect(page.locator('.tournament-status')).toHaveText('토너먼트: 참가 모집중');
+    await expect(page.locator('.vote-status')).toHaveText('설문: 메뉴 설문');
+    const headerStatusGeometry = await page.locator('.main-page').evaluate((element) => {
+        const title = element.querySelector<HTMLElement>('.game-shell__title');
+        const subtitle = element.querySelector<HTMLElement>('.game-shell__subtitle');
+        const activity = element.querySelector<HTMLElement>('.activity-status');
+        const tournament = element.querySelector<HTMLElement>('.tournament-status');
+        const survey = element.querySelector<HTMLElement>('.vote-status');
+        if (!title || !subtitle || !activity || !tournament || !survey) {
+            throw new Error('main header status geometry is incomplete');
+        }
+        return {
+            title: title.getBoundingClientRect().toJSON(),
+            subtitle: subtitle.getBoundingClientRect().toJSON(),
+            activity: activity.getBoundingClientRect().toJSON(),
+            tournament: tournament.getBoundingClientRect().toJSON(),
+            survey: survey.getBoundingClientRect().toJSON(),
+            activityColumns: getComputedStyle(activity).gridTemplateColumns,
+        };
+    });
+    expect(headerStatusGeometry.subtitle.y).toBeGreaterThanOrEqual(headerStatusGeometry.title.bottom);
+    expect(headerStatusGeometry.activity.width).toBeCloseTo(666.67, 0);
+    expect(headerStatusGeometry.tournament.width).toBeCloseTo(333.33, 0);
+    expect(headerStatusGeometry.survey.width).toBeCloseTo(333.33, 0);
+    expect(headerStatusGeometry.activityColumns.split(' ')).toHaveLength(2);
+    const tournamentStatusLink = page.locator('.tournament-status a');
+    const surveyStatusLink = page.locator('.vote-status a');
+    await tournamentStatusLink.hover();
+    await expect
+        .poll(() => tournamentStatusLink.evaluate((element) => getComputedStyle(element).cursor))
+        .toBe('pointer');
+    await surveyStatusLink.focus();
+    await expect(surveyStatusLink).toBeFocused();
+    await expect
+        .poll(() => surveyStatusLink.evaluate((element) => getComputedStyle(element).textDecorationLine))
+        .toContain('underline');
     const contentOrder = await page
         .locator('.record-zone, [data-menu-position="middle"], .desktop-message-panel, [data-menu-position="bottom"]')
         .evaluateAll((elements) =>
@@ -642,7 +688,7 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
     await expect(gameInfoButton).toBeFocused();
 
     await gameInfoButton.click();
-    await page.getByRole('heading', { name: '전장 현황' }).click();
+    await page.getByRole('heading', { name: '메인 화면 검증 시나리오' }).click();
     await expect(gameInfoButton).toHaveAttribute('aria-expanded', 'false');
     await persistArtifact(page, `${basePath.slice(1)}-desktop-1200`);
 });
@@ -1121,6 +1167,8 @@ test('the 939/940 boundary switches to the Ref-style 500px single document', asy
         nationLevel: 3,
         stage: 6,
         npcMode: 1,
+        scenarioTitle: '모바일 검증 시나리오',
+        latestVote: null,
         generalMeCalls: 0,
         operations: [],
     };
@@ -1139,6 +1187,27 @@ test('the 939/940 boundary switches to the Ref-style 500px single document', asy
     await expect(page.locator('.main-mobile-bottom')).toBeVisible();
 
     await page.setViewportSize({ width: 500, height: 900 });
+    await expect(page.getByRole('heading', { name: '모바일 검증 시나리오', exact: true })).toHaveCount(1);
+    await expect(page.locator('.game-shell__subtitle')).toHaveText('185년 1월 · 턴 10분');
+    await expect(page.locator('.tournament-status')).toHaveText('토너먼트: 베팅 진행중');
+    await expect(page.locator('.vote-status')).toHaveText('설문: 진행 중인 설문 없음');
+    const activityGeometry = await page.locator('.activity-status').evaluate((element) => {
+        const tournament = element.querySelector<HTMLElement>('.tournament-status');
+        const survey = element.querySelector<HTMLElement>('.vote-status');
+        if (!tournament || !survey) throw new Error('activity status is incomplete');
+        return {
+            width: element.getBoundingClientRect().width,
+            tournamentWidth: tournament.getBoundingClientRect().width,
+            surveyWidth: survey.getBoundingClientRect().width,
+            columns: getComputedStyle(element).gridTemplateColumns,
+        };
+    });
+    expect(activityGeometry).toMatchObject({
+        width: 500,
+        tournamentWidth: 250,
+        surveyWidth: 250,
+        columns: '250px 250px',
+    });
     await expect
         .poll(() =>
             page

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

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue';
+import { resolveTournamentStageName } from '../../utils/tournamentStatus';
+
+const props = defineProps<{
+    tournamentStage: number;
     status: {
         onlineUserCount: number;
         onlineNations: string;
@@ -13,15 +17,24 @@ defineProps<{
         } | null;
     } | null;
 }>();
+
+const tournamentStatus = computed(() => resolveTournamentStageName(props.tournamentStage));
 </script>
 
 <template>
     <section class="front-status" aria-label="접속 현황과 국가 방침">
-        <div class="status-row vote-status">
+        <div class="activity-status" aria-label="설문과 토너먼트 진행 현황">
-            <RouterLink v-if="status?.latestVote" to="/survey">
+            <div class="status-row tournament-status">
-                <span class="vote-label">설문 진행 중: </span>{{ status.latestVote.title }}
+                <RouterLink to="/tournament">
-            </RouterLink>
+                    <span class="tournament-label">토너먼트: </span>{{ tournamentStatus }}
-            <span v-else class="vote-empty">진행중인 설문 없음</span>
+                </RouterLink>
+            </div>
+            <div class="status-row vote-status">
+                <RouterLink v-if="status?.latestVote" to="/survey">
+                    <span class="vote-label">설문: </span>{{ status.latestVote.title }}
+                </RouterLink>
+                <span v-else class="vote-empty">설문: 진행 중인 설문 없음</span>
+            </div>
         </div>
         <div class="status-row online-nations">접속중인 국가: {{ status?.onlineNations ?? '' }}</div>
         <div class="status-row online-users">【 접속자 】 {{ status?.onlineGenerals ?? '' }}</div>
@@ -71,19 +84,28 @@ defineProps<{
     margin: 0;
 }
 
-.vote-status {
+.activity-status {
-    width: 33.333333%;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    width: 66.666667%;
     margin-left: auto;
+}
+
+.activity-status .status-row {
     padding-right: 0;
     padding-left: 0;
     text-align: center;
 }
 
-.vote-status a {
+.activity-status a {
     color: #fff;
     text-decoration: gray underline;
 }
 
+.tournament-label {
+    color: #ffc107;
+}
+
 .vote-label {
     color: cyan;
 }
@@ -93,8 +115,8 @@ defineProps<{
 }
 
 @media (max-width: 991px) {
-    .vote-status {
+    .activity-status {
-        width: 50%;
+        width: 100%;
     }
 }
 </style>

app/game-frontend/src/utils/tournamentStatus.ts

@@ -0,0 +1,15 @@
+export const tournamentStageNames = [
+    '경기 없음',
+    '참가 모집중',
+    '예선 진행중',
+    '본선 추첨중',
+    '본선 진행중',
+    '16강 배정중',
+    '베팅 진행중',
+    '16강 진행중',
+    '8강 진행중',
+    '4강 진행중',
+    '결승 진행중',
+] as const;
+
+export const resolveTournamentStageName = (stage: number): string => tournamentStageNames[stage] ?? '상태 확인 중';

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

@@ -148,13 +148,9 @@ watch(
         <header class="game-shell__header">
             <div>
                 <h1 class="game-shell__title">
-                    {{ isMobile ? '전장 현황' : lobbyInfo?.scenarioTitle || '전장 현황' }}
+                    {{ lobbyInfo?.scenarioTitle || '전장 현황' }}
                 </h1>
-                <p class="game-shell__subtitle">
+                <p class="game-shell__subtitle">{{ statusLine }}</p>
-                    {{
-                        !isMobile && lobbyInfo?.scenarioTitle ? `${lobbyInfo.scenarioTitle} ${statusLine}` : statusLine
-                    }}
-                </p>
             </div>
             <div class="game-shell__actions desktop-action-controls">
                 <button
@@ -197,7 +193,7 @@ watch(
         </div>
 
         <div data-main-target="policy">
-            <MainFrontStatus :status="frontStatus" />
+            <MainFrontStatus :status="frontStatus" :tournament-stage="tournamentStage" />
         </div>
 
         <aside v-if="surveyNotice" class="survey-notice" role="status" aria-live="polite">

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

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from 'vue';
 import TournamentBracket from '../components/tournament/TournamentBracket.vue';
 import { trpc } from '../utils/trpc';
+import { resolveTournamentStageName } from '../utils/tournamentStatus';
 
 type Snapshot = Awaited<ReturnType<typeof trpc.tournament.getSnapshot.query>>;
 
@@ -14,20 +15,6 @@ const actionMessage = ref<string | null>(null);
 const adminEnabled = ref(false);
 
 const typeNames = ['전력전', '통솔전', '일기토', '설전'];
-const stageNames = [
-    '경기 없음',
-    '참가 모집중',
-    '예선 진행중',
-    '본선 추첨중',
-    '본선 진행중',
-    '16강 배정중',
-    '베팅 진행중',
-    '16강 진행중',
-    '8강 진행중',
-    '4강 진행중',
-    '결승 진행중',
-];
-
 const errorText = (value: unknown) => (value instanceof Error ? value.message : String(value));
 
 const load = async () => {
@@ -152,7 +139,7 @@ const start = async () => {
         <section class="operator-row bg0">운영자 메세지 : <span></span></section>
         <section class="state-row bg0">
             <span class="type">{{ typeNames[snapshot?.state?.type ?? 0] }}</span>
-            ({{ stageNames[snapshot?.state?.stage ?? 0] ?? '상태 확인 중' }}, 개막시간 {{ openingTime }}, 경기당
+            ({{ resolveTournamentStageName(snapshot?.state?.stage ?? 0) }}, 개막시간 {{ openingTime }}, 경기당
             {{ snapshot?.state?.termSeconds ?? '-' }}초)
         </section>
         <section class="section-title bg2">16강 승자전</section>

app/game-frontend/test/tournamentStatus.test.ts

@@ -0,0 +1,17 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { resolveTournamentStageName } from '../src/utils/tournamentStatus.ts';
+
+void describe('tournament status labels', () => {
+    void it('describes inactive and active tournament stages', () => {
+        assert.equal(resolveTournamentStageName(0), '경기 없음');
+        assert.equal(resolveTournamentStageName(1), '참가 모집중');
+        assert.equal(resolveTournamentStageName(6), '베팅 진행중');
+        assert.equal(resolveTournamentStageName(10), '결승 진행중');
+    });
+
+    void it('uses a safe fallback for an unknown stage', () => {
+        assert.equal(resolveTournamentStageName(11), '상태 확인 중');
+        assert.equal(resolveTournamentStageName(-1), '상태 확인 중');
+    });
+});

tools/frontend-legacy-parity/main-front-status.spec.ts

@@ -293,11 +293,14 @@ test('renders actual online, nation policy, and survey data with ref geometry an
     await expect(status).toContainText(marker);
     await expect(page.locator('.online-users')).toContainText('현황검증장수');
     await expect(page.locator('.survey-notice')).toContainText('새로운 설문조사가 있습니다.');
+    await expect(page.locator('.tournament-status')).toHaveText('토너먼트: 경기 없음');
+    await expect(page.locator('.vote-status')).toHaveText('설문: 검증 설문');
     const desktop = await status.evaluate((element) => {
         const style = getComputedStyle(element);
         const onlineRow = element.querySelector<HTMLElement>('.online-nations');
         const voteRow = element.querySelector<HTMLElement>('.vote-status');
-        if (!onlineRow || !voteRow) throw new Error('status row missing');
+        const tournamentRow = element.querySelector<HTMLElement>('.tournament-status');
+        if (!onlineRow || !voteRow || !tournamentRow) throw new Error('status row missing');
         return {
             rect: element.getBoundingClientRect().toJSON(),
             fontSize: style.fontSize,
@@ -308,6 +311,7 @@ test('renders actual online, nation policy, and survey data with ref geometry an
                 borderTop: getComputedStyle(onlineRow).borderTop,
                 padding: getComputedStyle(onlineRow).padding,
             },
+            tournamentRow: tournamentRow.getBoundingClientRect().toJSON(),
             voteRow: voteRow.getBoundingClientRect().toJSON(),
         };
     });
@@ -321,6 +325,9 @@ test('renders actual online, nation policy, and survey data with ref geometry an
         },
     });
     expect(desktop.onlineRow.rect.height).toBeCloseTo(36, 0);
+    expect(desktop.tournamentRow.x).toBeCloseTo(333.33, 0);
+    expect(desktop.tournamentRow.width).toBeCloseTo(333.33, 0);
+    expect(desktop.tournamentRow.height).toBeCloseTo(36, 0);
     expect(desktop.voteRow.x).toBeCloseTo(666.67, 0);
     expect(desktop.voteRow.width).toBeCloseTo(333.33, 0);
     expect(desktop.voteRow.height).toBeCloseTo(36, 0);
@@ -328,6 +335,7 @@ test('renders actual online, nation policy, and survey data with ref geometry an
 
     await page.setViewportSize({ width: 500, height: 900 });
     await expect(status).toHaveCSS('width', '500px');
+    await expect(page.locator('.tournament-status')).toHaveCSS('width', '250px');
     await expect(page.locator('.vote-status')).toHaveCSS('width', '250px');
 
     failStatus = true;