merge: 최신 main을 인사부 모바일 UX 작업에 통합

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

@@ -416,6 +416,22 @@ const commandTable = {
                         },
                     ],
                 },
+                {
+                    key: 'che_첩보',
+                    name: '첩보',
+                    reqArg: true,
+                    possible: true,
+                    status: 'needsInput',
+                    inputFields: [
+                        {
+                            key: 'destCityId',
+                            label: '대상 도시',
+                            kind: 'select',
+                            required: true,
+                            optionSource: 'cities',
+                        },
+                    ],
+                },
             ],
         },
     ],
@@ -921,6 +937,48 @@ test('renders and accepts every Ref strategy command at mobile width', async ({
     await picker.screenshot({ path: test.info().outputPath('all-strategy-commands-mobile.png') });
 });
 
+test('shows and reserves the Ref spy command for a user on desktop and mobile', async ({ page }) => {
+    const requests = await install(page);
+    await page.setViewportSize({ width: 1200, height: 900 });
+    await page.goto('/');
+    const editor = page.locator('[data-command-scope="general"]');
+    await editor.getByRole('button', { name: '1턴 명령 입력', exact: true }).click();
+
+    let picker = page.getByTestId('command-picker');
+    await picker.getByRole('button', { name: '군사', exact: true }).click();
+    const spy = picker.getByRole('button', { name: '첩보', exact: true });
+    await expect(spy).toBeVisible();
+    await spy.hover();
+    await spy.focus();
+    await expect(spy).toBeFocused();
+    await spy.click();
+    const form = picker.getByTestId('command-argument-form');
+    await expect(form.getByTestId('command-argument-guidance')).toContainText(
+        '선택한 도시에 첩보를 실행합니다.'
+    );
+    await expect(form.getByTestId('command-argument-guidance')).toContainText(
+        '인접 도시에서는 더 많은 정보를 얻습니다.'
+    );
+    await form.locator('select').selectOption('2');
+    await picker.screenshot({ path: test.info().outputPath('spy-command-desktop-1200.png') });
+    await picker.getByRole('button', { name: '입력', exact: true }).click();
+    await expect(editor.locator('.action-column > div').first()).toHaveText('【허창】에 첩보 실행');
+    expect(JSON.stringify(requests)).toContain('"action":"che_첩보","args":{"destCityId":2}');
+
+    await page.setViewportSize({ width: 500, height: 900 });
+    await editor.getByRole('button', { name: '2턴 명령 입력', exact: true }).click();
+    picker = page.getByTestId('command-picker');
+    await picker.getByRole('button', { name: '군사', exact: true }).click();
+    await expect(picker.getByRole('button', { name: '첩보', exact: true })).toBeVisible();
+    const geometry = await picker.evaluate((element) => ({
+        width: element.getBoundingClientRect().width,
+        horizontalOverflow: element.scrollWidth - element.clientWidth,
+    }));
+    expect(geometry.width).toBeLessThanOrEqual(500);
+    expect(geometry.horizontalOverflow).toBeLessThanOrEqual(0);
+    await picker.screenshot({ path: test.info().outputPath('spy-command-mobile-500.png') });
+});
+
 test('defaults founding to a Ref-selectable nation trait and paints color option labels', async ({
     page,
 }) => {

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

@@ -52,6 +52,8 @@ type NavigationFixture = {
     currentYear?: number;
     currentMonth?: number;
     serverId?: string;
+    profile?: string;
+    gameIdx?: number;
     scenarioTitle?: string;
     nationColor?: string;
     lastExecuted?: string | null;
@@ -529,6 +531,8 @@ const installFixture = async (page: Page, state: NavigationFixture) => {
                 return response({
                     myGeneral: { id: 7, name: '메뉴검증장수' },
                     serverId: state.serverId ?? 'che_fixture_season',
+                    profile: state.profile ?? 'che',
+                    gameIdx: state.gameIdx ?? 101,
                     year: state.currentYear ?? 185,
                     month: state.currentMonth ?? 1,
                     turnTerm: 10,
@@ -1112,7 +1116,9 @@ 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.getByRole('heading', { name: '메인 화면 검증 시나리오 체섭 101기', exact: true })).toHaveCount(
+        1
+    );
     await expect(page.locator('.game-shell__subtitle')).toHaveCount(0);
     await expect(page.locator('.legacy-game-info')).toContainText('현재: 185년 1월');
     await expect(page.locator('.legacy-game-info')).toContainText('턴: 10분');
@@ -1264,6 +1270,56 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
     await persistArtifact(page, `${basePath.slice(1)}-desktop-1200`);
 });
 
+test('shows the persisted official game index beside the scenario title without viewport overflow', async ({ page }) => {
+    const state: NavigationFixture = {
+        officerLevel: 5,
+        permission: 2,
+        nationLevel: 3,
+        stage: 0,
+        npcMode: 1,
+        profile: 'hwe',
+        gameIdx: 7,
+        scenarioTitle: '메인 화면 검증 시나리오',
+        generalMeCalls: 0,
+        operations: [],
+    };
+    await installFixture(page, state);
+    if (artifactRoot) await mkdir(resolve(artifactRoot), { recursive: true });
+
+    for (const viewport of [
+        { width: 1200, height: 900 },
+        { width: 500, height: 900 },
+    ]) {
+        await page.setViewportSize(viewport);
+        if (page.url() === 'about:blank') await waitForMain(page);
+
+        const title = page.getByRole('heading', { name: '메인 화면 검증 시나리오 훼섭 7기', exact: true });
+        await expect(title).toBeVisible();
+        const geometry = await title.evaluate((element) => {
+            const rect = element.getBoundingClientRect();
+            const mainRect = element.closest<HTMLElement>('.main-page')?.getBoundingClientRect();
+            const style = getComputedStyle(element);
+            return {
+                left: rect.left,
+                right: rect.right,
+                mainLeft: mainRect?.left,
+                mainRight: mainRect?.right,
+                fontFamily: style.fontFamily,
+                fontSize: style.fontSize,
+                lineHeight: style.lineHeight,
+                documentOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+            };
+        });
+        expect(geometry.left).toBeGreaterThanOrEqual(geometry.mainLeft ?? 0);
+        expect(geometry.right).toBeLessThanOrEqual(geometry.mainRight ?? viewport.width);
+        expect(geometry.documentOverflow).toBeLessThanOrEqual(0);
+        expect(geometry.fontSize).toBe('25.6px');
+        expect(geometry.lineHeight).toBe('38.4px');
+        expect(geometry.fontFamily).toContain('Pretendard');
+        await persistArtifact(page, `official-game-index-${viewport.width}`);
+    }
+});
+
 test('nation split buttons keep square inner corners and a single divider in every interaction state', async ({
     page,
 }, testInfo) => {
@@ -2239,7 +2295,7 @@ 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.getByRole('heading', { name: '모바일 검증 시나리오 체섭 101기', exact: true })).toHaveCount(1);
     await expect(page.locator('.game-shell__subtitle')).toHaveCount(0);
     await expect(page.locator('.legacy-game-info')).toContainText('현재: 185년 1월');
     await expect(page.locator('.legacy-game-info')).toContainText('턴: 10분');