Merge branch 'main' into feature/nation-betting-permission-parity

2026-07-26 05:35:11 +00:00
parent 59f4994ac7 47f03abeb4
commit b5bc1278ce
83 changed files with 10381 additions and 2843 deletions
@@ -75,6 +75,82 @@ export const canonicalFrontendFixture = {
                [2, '진', '#1976d2', 2],
            ],
        },
+        bestGeneral: {
+            isUnited: true,
+            sections: [
+                {
+                    title: '명 성',
+                    valueType: 'int',
+                    entries: [
+                        {
+                            id: 1,
+                            name: '유비',
+                            ownerName: '시각검증',
+                            nationName: '촉',
+                            bgColor: '#006400',
+                            fgColor: '#ffffff',
+                            picture: 'default.jpg',
+                            imageServer: 0,
+                            value: 12000,
+                            printValue: '12,000',
+                        },
+                        {
+                            id: 2,
+                            name: '조조',
+                            ownerName: '검증계정',
+                            nationName: '위',
+                            bgColor: '#8b0000',
+                            fgColor: '#ffffff',
+                            picture: 'default.jpg',
+                            imageServer: 0,
+                            value: 11000,
+                            printValue: '11,000',
+                        },
+                    ],
+                },
+                {
+                    title: '계 급',
+                    valueType: 'int',
+                    entries: [],
+                },
+            ],
+            uniqueItems: [
+                {
+                    title: '명 마',
+                    slot: 'horse',
+                    entries: [
+                        {
+                            itemKey: 'che_명마_15_적토마',
+                            itemName: '적토마',
+                            itemInfo: '최고의 명마',
+                            owner: {
+                                id: 1,
+                                name: '유비',
+                                nationName: '촉',
+                                bgColor: '#006400',
+                                fgColor: '#ffffff',
+                                picture: 'default.jpg',
+                                imageServer: 0,
+                            },
+                        },
+                        {
+                            itemKey: 'che_명마_15_적토마',
+                            itemName: '적토마',
+                            itemInfo: '최고의 명마',
+                            owner: {
+                                id: 0,
+                                name: '경매중',
+                                nationName: '-',
+                                bgColor: '#00582c',
+                                fgColor: '#ffffff',
+                                picture: null,
+                                imageServer: 0,
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
        hallOptions: [
            {
                season: 1,
@@ -0,0 +1,238 @@
+import { expect, test, type Page, type Route } from '@playwright/test';
+import { readFile } from 'node:fs/promises';
+import { dirname, extname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../..');
+const imageRoot = resolve(repositoryRoot, '../../image');
+const artifactRoot = process.env.FRONTEND_PARITY_ARTIFACT_DIR;
+const gameUrl = `http://127.0.0.1:${process.env.FRONTEND_PARITY_GAME_PORT ?? '15102'}/che/inherit`;
+
+const response = (data: unknown) => ({ result: { data } });
+
+const operations = (route: Route): string[] => {
+    const pathname = new URL(route.request().url()).pathname;
+    return decodeURIComponent(pathname.slice(pathname.lastIndexOf('/trpc/') + 6)).split(',');
+};
+
+const installImages = async (page: Page): Promise<void> => {
+    await page.route('**/image/**', async (route) => {
+        const relative = decodeURIComponent(new URL(route.request().url()).pathname).replace(/^\/image\//, '');
+        for (const candidate of [
+            resolve(imageRoot, relative),
+            resolve(imageRoot, 'game', relative),
+            resolve(imageRoot, 'icons', '22.jpg'),
+        ]) {
+            try {
+                const body = await readFile(candidate);
+                await route.fulfill({
+                    status: 200,
+                    contentType: extname(candidate).toLowerCase() === '.png' ? 'image/png' : 'image/jpeg',
+                    body,
+                });
+                return;
+            } catch {
+                // 다음 공개 image root 후보를 확인한다.
+            }
+        }
+        await route.abort('failed');
+    });
+};
+
+const statusFixture = {
+    items: {
+        previous: 12_000,
+        lived_month: 240,
+        max_domestic_critical: 80,
+        active_action: 35,
+        combat: 150,
+        sabotage: 60,
+        dex: 42,
+        unifier: 0,
+        tournament: 30,
+        betting: 20,
+        max_belong: 8,
+    },
+    totalPoint: 12_665,
+    inheritConst: {
+        minMonthToAllowInheritItem: 4,
+        inheritBornSpecialPoint: 6000,
+        inheritBornTurntimePoint: 2500,
+        inheritBornCityPoint: 1000,
+        inheritBornStatPoint: 1000,
+        inheritItemUniqueMinPoint: 5000,
+        inheritItemRandomPoint: 3000,
+        inheritBuffPoints: [0, 200, 600, 1200, 2000, 3000],
+        inheritSpecificSpecialPoint: 4000,
+        inheritResetAttrPointBase: [1000, 1000, 2000, 3000],
+        inheritCheckOwnerPoint: 1000,
+    },
+    buffLevels: {
+        warAvoidRatio: 0,
+        warCriticalRatio: 1,
+        warMagicTrialProb: 0,
+        domesticSuccessProb: 0,
+        domesticFailProb: 0,
+        warAvoidRatioOppose: 0,
+        warCriticalRatioOppose: 0,
+        warMagicTrialProbOppose: 0,
+    },
+    resetCosts: { resetSpecialWar: 1000, resetTurnTime: 1000 },
+    resetLevels: { resetSpecialWar: 0, resetTurnTime: 0 },
+    availableSpecialWar: [{ key: 'che_선봉', name: '선봉', info: '공격에 유리합니다.' }],
+    availableUnique: [
+        {
+            key: 'che_무기_12_칠성검',
+            name: '칠성검(+12)',
+            rawName: '칠성검',
+            info: '무력을 올려주는 유니크 무기입니다.',
+        },
+    ],
+    availableTargetGenerals: [{ id: 8, name: '조조' }],
+    turnTimeZones: ['00:00'],
+    isUnited: false,
+    currentSpecialWar: 'che_선봉',
+    currentStat: { leadership: 70, strength: 45, intel: 85 },
+};
+
+const installFixture = async (page: Page, options: { failBuff?: boolean } = {}) => {
+    let buffMutationCount = 0;
+    await installImages(page);
+    await page.addInitScript(() => {
+        window.localStorage.setItem('sammo-game-token', 'ga_inherit-visual-token');
+        window.localStorage.setItem('sammo-game-profile', 'che');
+    });
+    await page.route('**/che/api/trpc/**', async (route) => {
+        const names = operations(route);
+        if (options.failBuff && names.includes('inherit.buyHiddenBuff')) {
+            await route.fulfill({
+                status: 500,
+                contentType: 'application/json',
+                body: JSON.stringify({ error: { message: '의도한 유산 구입 오류' } }),
+            });
+            return;
+        }
+        const result = names.map((name) => {
+            if (name === 'inherit.getStatus') return response(statusFixture);
+            if (name === 'lobby.info') {
+                return response({
+                    profile: { id: 'che', scenario: 'default', name: '체섭' },
+                    world: { year: 200, month: 4 },
+                    myGeneral: { id: 7, name: '유비', nationId: 1 },
+                });
+            }
+            if (name === 'inherit.getLogs') {
+                return response([
+                    {
+                        id: 2,
+                        year: 200,
+                        month: 4,
+                        text: '1000 포인트로 장수 소유자 확인',
+                        createdAt: '2026-07-26T00:00:00.000Z',
+                    },
+                ]);
+            }
+            if (name === 'join.getConfig') {
+                return response({ rules: { stat: { total: 200, min: 10, max: 100 } } });
+            }
+            if (name === 'inherit.buyHiddenBuff') {
+                buffMutationCount += 1;
+                return response({ ok: true, remainPoint: 11_800 });
+            }
+            throw new Error(`Unhandled inheritance fixture operation: ${name}`);
+        });
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify(result),
+        });
+    });
+    return { buffMutationCount: () => buffMutationCount };
+};
+
+test.describe('inheritance management legacy parity', () => {
+    test('matches the ref 1000px grid and computed styles on desktop and mobile', async ({ page }) => {
+        await installFixture(page);
+        await page.setViewportSize({ width: 1280, height: 900 });
+        await page.goto(gameUrl);
+        await expect(page.locator('#container')).toBeVisible();
+        await expect(page.locator('#specific-unique')).toHaveValue('che_무기_12_칠성검');
+
+        const desktop = await page.evaluate(() => {
+            const rect = (selector: string) => {
+                const box = document.querySelector<HTMLElement>(selector)!.getBoundingClientRect();
+                return { x: box.x, width: box.width };
+            };
+            const container = getComputedStyle(document.querySelector<HTMLElement>('#container')!);
+            const title = getComputedStyle(document.querySelector<HTMLElement>('.section-title')!);
+            const button = getComputedStyle(document.querySelector<HTMLElement>('.buy-button')!);
+            return {
+                container: rect('#container'),
+                firstPoint: rect('#inherit_sum'),
+                fontFamily: container.fontFamily,
+                fontSize: container.fontSize,
+                backgroundImage: container.backgroundImage,
+                titleBackgroundImage: title.backgroundImage,
+                buttonBackground: button.backgroundColor,
+            };
+        });
+
+        expect(desktop.container.width).toBe(1000);
+        expect(desktop.container.x).toBe(140);
+        expect(desktop.firstPoint.width).toBeCloseTo(327.3, 0);
+        expect(desktop.fontFamily).toContain('Pretendard');
+        expect(desktop.fontSize).toBe('14px');
+        expect(desktop.backgroundImage).toContain('back_walnut.jpg');
+        expect(desktop.titleBackgroundImage).toContain('back_green.jpg');
+
+        const buyButton = page.locator('.buy-button').first();
+        const beforeHover = await buyButton.evaluate((element) => getComputedStyle(element).backgroundColor);
+        await buyButton.hover();
+        const afterHover = await buyButton.evaluate((element) => getComputedStyle(element).backgroundColor);
+        expect(afterHover).not.toBe(beforeHover);
+        await buyButton.focus();
+        await expect(buyButton).toBeFocused();
+
+        if (artifactRoot) {
+            await page.screenshot({ path: resolve(artifactRoot, 'inherit-core-desktop.png'), fullPage: true });
+        }
+
+        await page.setViewportSize({ width: 500, height: 900 });
+        await page.reload();
+        await expect(page.locator('#container')).toBeVisible();
+        const mobile = await page.evaluate(() => {
+            const container = document.querySelector<HTMLElement>('#container')!.getBoundingClientRect();
+            const first = document.querySelector<HTMLElement>('#inherit_sum')!.getBoundingClientRect();
+            const second = document.querySelector<HTMLElement>('#inherit_previous')!.getBoundingClientRect();
+            return {
+                containerWidth: container.width,
+                firstWidth: first.width,
+                stacked: second.y > first.y,
+            };
+        });
+        expect(mobile.containerWidth).toBe(500);
+        expect(mobile.firstWidth).toBeCloseTo(482, 0);
+        expect(mobile.stacked).toBe(true);
+    });
+
+    test('submits a legacy buff purchase and refreshes status and logs', async ({ page }) => {
+        const fixture = await installFixture(page);
+        page.on('dialog', (dialog) => dialog.accept());
+        await page.goto(gameUrl);
+        await page.locator('#buff-warAvoidRatio').fill('1');
+        await page.locator('#buff-warAvoidRatio').locator('xpath=../..').getByRole('button', { name: '구입' }).click();
+        await expect.poll(fixture.buffMutationCount).toBe(1);
+        await expect(page.locator('#inherit_previous_value')).toHaveValue('12,000');
+    });
+
+    test('keeps controls usable and renders an API mutation error', async ({ page }) => {
+        await installFixture(page, { failBuff: true });
+        page.on('dialog', (dialog) => dialog.accept());
+        await page.goto(gameUrl);
+        await page.locator('#buff-warAvoidRatio').fill('1');
+        await page.locator('#buff-warAvoidRatio').locator('xpath=../..').getByRole('button', { name: '구입' }).click();
+        await expect(page.locator('[role="alert"]')).toBeVisible();
+        await expect(page.locator('#buff-warAvoidRatio')).toHaveValue('1');
+        await expect(page.locator('#buff-warAvoidRatio')).toBeEnabled();
+    });
+});
@@ -13,6 +13,7 @@ export default defineConfig({
        'public-gaps.spec.ts',
        'instant-diplomacy-message.spec.ts',
        'tournament-betting.spec.ts',
+        'inheritance-management.spec.ts',
    ],
    fullyParallel: false,
    workers: 1,
@@ -0,0 +1,128 @@
+import { chromium } from '@playwright/test';
+import { createHash } from 'node:crypto';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+const baseUrl = process.env.REF_PARITY_URL ?? 'http://127.0.0.1:3400/sam/';
+const username = process.env.REF_PARITY_USER ?? 'refadmin';
+const passwordFile = process.env.REF_PARITY_PASSWORD_FILE;
+const artifactRoot = resolve(process.env.REF_PARITY_ARTIFACT_DIR ?? 'test-results/reference-current-city');
+
+if (!passwordFile) {
+    throw new Error('REF_PARITY_PASSWORD_FILE is required.');
+}
+
+const password = (await readFile(passwordFile, 'utf8')).trim();
+await mkdir(artifactRoot, { recursive: true });
+
+const browser = await chromium.launch({ headless: true });
+try {
+    const context = await browser.newContext({
+        viewport: { width: 1200, height: 900 },
+        deviceScaleFactor: 1,
+        locale: 'ko-KR',
+        timezoneId: 'Asia/Seoul',
+        colorScheme: 'dark',
+    });
+    const page = await context.newPage();
+    await page.goto(baseUrl, { waitUntil: 'networkidle' });
+    const globalSalt = await page.locator('#global_salt').inputValue();
+    const passwordHash = createHash('sha512')
+        .update(globalSalt + password + globalSalt)
+        .digest('hex');
+    const loginResponse = await context.request.post(new URL('api.php?path=Login/LoginByID', baseUrl).toString(), {
+        data: { username, password: passwordHash },
+    });
+    const loginResult = await loginResponse.json();
+    if (!loginResponse.ok() || loginResult.result !== true) {
+        throw new Error('Reference login failed.');
+    }
+
+    await page.goto(new URL('hwe/', baseUrl).toString(), { waitUntil: 'networkidle' });
+    const mapCity = page.locator('a[href*="b_currentCity.php?citylist="]').first();
+    const hasMapCity = await mapCity.isVisible({ timeout: 8_000 }).catch(() => false);
+    let mapInteraction;
+    if (hasMapCity) {
+        mapInteraction = await mapCity.evaluate((element) => ({
+            available: true,
+            href: element.getAttribute('href'),
+            cursor: getComputedStyle(element).cursor,
+            rect: (() => {
+                const box = element.getBoundingClientRect();
+                return { x: box.x, y: box.y, width: box.width, height: box.height };
+            })(),
+        }));
+        await mapCity.click();
+        await page.waitForLoadState('networkidle');
+        if (!page.url().includes('b_currentCity.php?citylist=')) {
+            throw new Error(`Reference map click did not open current city: ${page.url()}`);
+        }
+    } else {
+        mapInteraction = {
+            available: false,
+            pageUrl: page.url(),
+            pageTitle: await page.title(),
+        };
+        await page.goto(new URL('hwe/b_currentCity.php', baseUrl).toString(), { waitUntil: 'networkidle' });
+    }
+
+    const measurements = await page.evaluate(() => {
+        const measure = (element) => {
+            const box = element.getBoundingClientRect();
+            const style = getComputedStyle(element);
+            return {
+                rect: { x: box.x, y: box.y, width: box.width, height: box.height },
+                style: {
+                    fontFamily: style.fontFamily,
+                    fontSize: style.fontSize,
+                    lineHeight: style.lineHeight,
+                    color: style.color,
+                    backgroundColor: style.backgroundColor,
+                    backgroundImage: style.backgroundImage,
+                    borderCollapse: style.borderCollapse,
+                    padding: style.padding,
+                    textAlign: style.textAlign,
+                },
+            };
+        };
+        const tables = [...document.querySelectorAll('table')];
+        const selector = document.querySelector('#citySelector');
+        const stats = tables.find((table) => table.textContent?.includes('90병장'));
+        const generals = document.querySelector('#general_list')?.closest('table');
+        const firstIcon = document.querySelector('.generalIcon');
+        const title = stats?.querySelector('tr:first-child td');
+        return {
+            body: measure(document.body),
+            tables: tables.map(measure),
+            selector: selector ? measure(selector) : null,
+            stats: stats ? measure(stats) : null,
+            generals: generals ? measure(generals) : null,
+            firstIcon: firstIcon
+                ? {
+                      ...measure(firstIcon),
+                      naturalWidth: firstIcon.naturalWidth,
+                      naturalHeight: firstIcon.naturalHeight,
+                  }
+                : null,
+            title: title ? measure(title) : null,
+            document: {
+                width: document.documentElement.scrollWidth,
+                height: document.documentElement.scrollHeight,
+            },
+        };
+    });
+
+    await page.screenshot({
+        path: resolve(artifactRoot, 'reference-current-city-desktop.png'),
+        fullPage: true,
+        animations: 'disabled',
+    });
+    await writeFile(
+        resolve(artifactRoot, 'reference-current-city-computed-dom.json'),
+        `${JSON.stringify({ mapInteraction, currentCity: measurements }, null, 2)}\n`
+    );
+    process.stdout.write(`${JSON.stringify({ ok: true, artifactRoot })}\n`);
+    await context.close();
+} finally {
+    await browser.close();
+}
@@ -0,0 +1,91 @@
+import { chromium } from '@playwright/test';
+import { createHash } from 'node:crypto';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+const baseUrl = process.env.REF_GENERAL_URL ?? 'http://127.0.0.1:3400/sam/';
+const username = process.env.REF_GENERAL_USER ?? 'refuser1';
+const passwordFile = process.env.REF_GENERAL_PASSWORD_FILE;
+const artifactRoot = resolve(process.env.REF_GENERAL_ARTIFACT_DIR ?? 'test-results/reference-general-lists');
+if (!passwordFile) throw new Error('REF_GENERAL_PASSWORD_FILE is required.');
+const password = (await readFile(passwordFile, 'utf8')).trim();
+await mkdir(artifactRoot, { recursive: true });
+
+const measure = async (page, selectors) =>
+    page.evaluate((items) => {
+        const result = {};
+        for (const [name, selector] of Object.entries(items)) {
+            const element = document.querySelector(selector);
+            if (!element) {
+                result[name] = null;
+                continue;
+            }
+            const rect = element.getBoundingClientRect();
+            const style = getComputedStyle(element);
+            result[name] = {
+                rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+                style: {
+                    fontFamily: style.fontFamily,
+                    fontSize: style.fontSize,
+                    borderCollapse: style.borderCollapse,
+                    backgroundImage: style.backgroundImage,
+                    color: style.color,
+                },
+            };
+        }
+        return { elements: result, documentWidth: document.documentElement.scrollWidth };
+    }, selectors);
+
+const browser = await chromium.launch({ headless: true });
+try {
+    const context = await browser.newContext({
+        viewport: { width: 1200, height: 900 },
+        deviceScaleFactor: 1,
+        locale: 'ko-KR',
+        colorScheme: 'dark',
+    });
+    const page = await context.newPage();
+    await page.goto(baseUrl, { waitUntil: 'networkidle' });
+    const salt = await page.locator('#global_salt').inputValue();
+    const passwordHash = createHash('sha512')
+        .update(salt + password + salt)
+        .digest('hex');
+    const login = await context.request.post(new URL('api.php?path=Login/LoginByID', baseUrl).toString(), {
+        data: { username, password: passwordHash },
+    });
+    const loginResult = await login.json();
+    if (!login.ok() || loginResult.result !== true) throw new Error('Reference login failed.');
+
+    const output = {};
+    for (const [name, path, selectors] of [
+        [
+            'generals',
+            'hwe/b_myGenInfo.php',
+            {
+                body: 'body',
+                title: 'body > table:first-of-type',
+                list: 'body > table:nth-of-type(2)',
+                firstRow: 'body > table:nth-of-type(2) tr:nth-child(2)',
+            },
+        ],
+        [
+            'secret',
+            'hwe/b_genList.php',
+            {
+                body: 'body',
+                title: 'body > table:first-of-type',
+                summary: 'body > table:nth-of-type(2)',
+                list: '#general_list',
+                firstRow: '#general_list tbody tr:first-child',
+            },
+        ],
+    ]) {
+        await page.goto(new URL(path, baseUrl).toString(), { waitUntil: 'networkidle' });
+        output[name] = await measure(page, selectors);
+        await page.screenshot({ path: resolve(artifactRoot, `ref-${name}.png`), fullPage: true });
+    }
+    await writeFile(resolve(artifactRoot, 'computed-dom.json'), `${JSON.stringify(output, null, 2)}\n`);
+    process.stdout.write(`${JSON.stringify({ ok: true, artifactRoot, output })}\n`);
+} finally {
+    await browser.close();
+}
@@ -0,0 +1,175 @@
+import { chromium } from '@playwright/test';
+import { createHash } from 'node:crypto';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+const baseUrl = process.env.REF_MENU_URL ?? 'http://127.0.0.1:3400/sam/';
+const username = process.env.REF_MENU_USER ?? 'refuser1';
+const passwordFile = process.env.REF_MENU_PASSWORD_FILE;
+const artifactRoot = resolve(process.env.REF_MENU_ARTIFACT_DIR ?? 'test-results/reference-ingame-menus');
+
+if (!passwordFile) {
+    throw new Error('REF_MENU_PASSWORD_FILE is required.');
+}
+
+const password = (await readFile(passwordFile, 'utf8')).trim();
+await mkdir(artifactRoot, { recursive: true });
+
+const login = async (context, page) => {
+    await page.goto(baseUrl, { waitUntil: 'networkidle' });
+    const globalSalt = await page.locator('#global_salt').inputValue();
+    const passwordHash = createHash('sha512')
+        .update(globalSalt + password + globalSalt)
+        .digest('hex');
+    const response = await context.request.post(new URL('api.php?path=Login/LoginByID', baseUrl).toString(), {
+        data: { username, password: passwordHash },
+    });
+    const result = await response.json();
+    if (!response.ok() || result.result !== true) {
+        throw new Error('Reference login failed.');
+    }
+};
+
+const rectAndStyle = (element) => {
+    const rect = element.getBoundingClientRect();
+    const style = getComputedStyle(element);
+    return {
+        rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+        style: {
+            display: style.display,
+            gridTemplateColumns: style.gridTemplateColumns,
+            fontFamily: style.fontFamily,
+            fontSize: style.fontSize,
+            lineHeight: style.lineHeight,
+            color: style.color,
+            backgroundColor: style.backgroundColor,
+            backgroundImage: style.backgroundImage,
+            borderTopColor: style.borderTopColor,
+            borderTopWidth: style.borderTopWidth,
+            padding: style.padding,
+            margin: style.margin,
+            cursor: style.cursor,
+        },
+    };
+};
+
+const measure = async (page, selectors) =>
+    page.evaluate(
+        ({ selectors, measureSource }) => {
+            const measureElement = new Function(`return (${measureSource})`)();
+            const result = {};
+            for (const [name, selector] of Object.entries(selectors)) {
+                const element = document.querySelector(selector);
+                result[name] = element ? measureElement(element) : null;
+            }
+            return {
+                elements: result,
+                document: {
+                    width: document.documentElement.scrollWidth,
+                    height: document.documentElement.scrollHeight,
+                },
+            };
+        },
+        { selectors, measureSource: rectAndStyle.toString() }
+    );
+
+const browser = await chromium.launch({ headless: true });
+try {
+    const output = {};
+    for (const viewport of [
+        { name: 'desktop', width: 1000, height: 900 },
+        { name: 'mobile', width: 500, height: 900 },
+    ]) {
+        const context = await browser.newContext({
+            viewport: { width: viewport.width, height: viewport.height },
+            deviceScaleFactor: 1,
+            locale: 'ko-KR',
+            timezoneId: 'Asia/Seoul',
+            colorScheme: 'dark',
+        });
+        const page = await context.newPage();
+        const consoleErrors = [];
+        const failedResources = [];
+        page.on('console', (message) => {
+            if (message.type() === 'error') consoleErrors.push(message.text());
+        });
+        page.on('response', (response) => {
+            if (response.status() >= 400) failedResources.push(`${response.status()} ${response.url()}`);
+        });
+        await login(context, page);
+        await page.goto(new URL('hwe/', baseUrl).toString(), { waitUntil: 'networkidle' });
+
+        await page.goto(new URL('hwe/b_myPage.php', baseUrl).toString(), { waitUntil: 'networkidle' });
+        await page.locator('#container').waitFor();
+        const myPage = await measure(page, {
+            body: 'body',
+            container: '#container',
+            title: '#container > .row:first-child',
+            infoColumn: '#container > .row:nth-child(2) > .col:first-child',
+            settingsColumn: '#container > .row:nth-child(2) > .col:nth-child(2)',
+            saveButton: '#set_my_setting',
+            firstSelect: 'select',
+            customCss: '#custom_css',
+            firstLogTitle: '#generalActionPlate',
+        });
+        await page.screenshot({ path: resolve(artifactRoot, `ref-my-page-${viewport.name}.png`), fullPage: true });
+
+        await page.goto(new URL('hwe/a_traffic.php', baseUrl).toString(), { waitUntil: 'networkidle' });
+        const traffic = await measure(page, {
+            body: 'body',
+            title: 'body > table:first-of-type',
+            chartLayout: 'body > table:nth-of-type(2)',
+            refreshChart: 'body > table:nth-of-type(2) > tbody > tr > td:first-child > table',
+            onlineChart: 'body > table:nth-of-type(2) > tbody > tr > td:nth-child(2) > table',
+            firstBigBar: '.big_bar',
+            suspectTable: 'body > table:nth-of-type(3)',
+        });
+        await page.screenshot({ path: resolve(artifactRoot, `ref-traffic-${viewport.name}.png`), fullPage: true });
+
+        await page.goto(new URL('hwe/a_npcList.php', baseUrl).toString(), { waitUntil: 'networkidle' });
+        const npcList = await measure(page, {
+            body: 'body',
+            title: 'body > table:first-of-type',
+            sortSelect: 'select[name="type"]',
+            list: 'body > table:nth-of-type(2)',
+            header: 'body > table:nth-of-type(2) tr:first-child',
+            footer: 'body > table:nth-of-type(3)',
+        });
+        await page.screenshot({ path: resolve(artifactRoot, `ref-npc-list-${viewport.name}.png`), fullPage: true });
+
+        await page.goto(new URL('hwe/v_battleCenter.php', baseUrl).toString(), { waitUntil: 'networkidle' });
+        try {
+            await page.locator('#container').waitFor({ timeout: 10_000 });
+        } catch {
+            throw new Error(
+                `Reference battle center failed to mount: ${JSON.stringify({
+                    url: page.url(),
+                    text: (await page.locator('body').innerText()).slice(0, 500),
+                    html: (await page.content()).slice(-1_000),
+                    consoleErrors,
+                    failedResources,
+                })}`
+            );
+        }
+        const battleCenter = await measure(page, {
+            body: 'body',
+            container: '#container',
+            topBar: '#container > :first-child',
+            selectorRow: '#container > .row:nth-child(2)',
+            previousButton: '#container > .row:nth-child(2) button:first-child',
+            firstSelect: '#container > .row:nth-child(2) select:first-of-type',
+            generalCard: '.header-cell',
+            firstLogHeader: '.header-cell:nth-of-type(1)',
+        });
+        await page.screenshot({
+            path: resolve(artifactRoot, `ref-battle-center-${viewport.name}.png`),
+            fullPage: true,
+        });
+        output[viewport.name] = { myPage, traffic, npcList, battleCenter };
+        await context.close();
+    }
+    await writeFile(resolve(artifactRoot, 'computed-dom.json'), `${JSON.stringify(output, null, 2)}\n`);
+    process.stdout.write(`${JSON.stringify({ ok: true, artifactRoot, viewports: Object.keys(output) })}\n`);
+} finally {
+    await browser.close();
+}
@@ -0,0 +1,117 @@
+import { chromium } from '@playwright/test';
+import { createHash } from 'node:crypto';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+const baseUrl = process.env.REF_PARITY_URL ?? 'http://127.0.0.1:3400/sam/';
+const username = process.env.REF_PARITY_USER ?? 'refadmin';
+const passwordFile = process.env.REF_PARITY_PASSWORD_FILE;
+const artifactRoot = resolve(process.env.REF_PARITY_ARTIFACT_DIR ?? 'test-results/reference-npc-policy');
+
+if (!passwordFile) {
+    throw new Error('REF_PARITY_PASSWORD_FILE is required.');
+}
+
+const password = (await readFile(passwordFile, 'utf8')).trim();
+await mkdir(artifactRoot, { recursive: true });
+
+const login = async (context, page) => {
+    await page.goto(baseUrl, { waitUntil: 'networkidle' });
+    const globalSalt = await page.locator('#global_salt').inputValue();
+    const passwordHash = createHash('sha512')
+        .update(globalSalt + password + globalSalt)
+        .digest('hex');
+    const response = await context.request.post(new URL('api.php?path=Login/LoginByID', baseUrl).toString(), {
+        data: { username, password: passwordHash },
+    });
+    const result = await response.json();
+    if (!response.ok() || result.result !== true) {
+        throw new Error('Reference login failed.');
+    }
+};
+
+const browser = await chromium.launch({ headless: true });
+try {
+    const result = {};
+    for (const viewport of [
+        { name: 'desktop', width: 1000, height: 900 },
+        { name: 'mobile', width: 500, height: 900 },
+    ]) {
+        const context = await browser.newContext({
+            viewport: { width: viewport.width, height: viewport.height },
+            deviceScaleFactor: 1,
+            locale: 'ko-KR',
+            timezoneId: 'Asia/Seoul',
+            colorScheme: 'dark',
+        });
+        const page = await context.newPage();
+        await login(context, page);
+        await page.goto(new URL('hwe/', baseUrl).toString(), { waitUntil: 'networkidle' });
+        await page.goto(new URL('hwe/v_NPCControl.php', baseUrl).toString(), { waitUntil: 'networkidle' });
+        try {
+            await page.locator('#container').waitFor({ timeout: 10_000 });
+        } catch {
+            throw new Error(
+                `Reference NPC policy failed to mount: ${JSON.stringify({
+                    url: page.url(),
+                    text: (await page.locator('body').innerText()).slice(0, 500),
+                })}`
+            );
+        }
+        result[viewport.name] = await page.evaluate(() => {
+            const measure = (selector) => {
+                const element = document.querySelector(selector);
+                if (!element) return null;
+                const rect = element.getBoundingClientRect();
+                const style = getComputedStyle(element);
+                return {
+                    rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+                    style: {
+                        display: style.display,
+                        gridTemplateColumns: style.gridTemplateColumns,
+                        fontFamily: style.fontFamily,
+                        fontSize: style.fontSize,
+                        lineHeight: style.lineHeight,
+                        color: style.color,
+                        backgroundColor: style.backgroundColor,
+                        backgroundImage: style.backgroundImage,
+                        borderColor: style.borderColor,
+                        padding: style.padding,
+                        margin: style.margin,
+                        cursor: style.cursor,
+                    },
+                };
+            };
+            return {
+                body: measure('body'),
+                container: measure('#container'),
+                topBackBar: measure('body > :first-child'),
+                sectionBar: measure('.section_bar'),
+                formList: measure('.form_list'),
+                firstField: measure('.form_list > .col'),
+                firstInput: measure('input[type="number"]'),
+                firstInfoButton: measure('.form_list button'),
+                controlBar: measure('.control_bar'),
+                resetButton: measure('.reset_btn'),
+                submitButton: measure('.submit_btn'),
+                priorityGrid: measure('.half_section_left'),
+                priorityColumn: measure('.priority-list'),
+                priorityItem: measure('.priority-list .list-group-item'),
+                helpButton: measure('.priority_info button'),
+                document: {
+                    width: document.documentElement.scrollWidth,
+                    height: document.documentElement.scrollHeight,
+                },
+            };
+        });
+        await page.screenshot({
+            path: resolve(artifactRoot, `ref-npc-policy-${viewport.name}.png`),
+            fullPage: true,
+        });
+        await context.close();
+    }
+    await writeFile(resolve(artifactRoot, 'computed-dom.json'), `${JSON.stringify(result, null, 2)}\n`);
+    process.stdout.write(`${JSON.stringify({ ok: true, artifactRoot, viewports: Object.keys(result) })}\n`);
+} finally {
+    await browser.close();
+}
@@ -0,0 +1,155 @@
+import { chromium } from '@playwright/test';
+import { createHash } from 'node:crypto';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+const baseUrl = process.env.REF_RANKING_URL ?? 'https://dev-sam-ref.hided.net/sam/';
+const username = process.env.REF_RANKING_USER ?? 'refuser1';
+const passwordFile = process.env.REF_RANKING_PASSWORD_FILE;
+const artifactRoot = resolve(process.env.REF_RANKING_ARTIFACT_DIR ?? 'test-results/reference-rankings');
+
+if (!passwordFile) {
+    throw new Error('REF_RANKING_PASSWORD_FILE is required.');
+}
+
+const password = (await readFile(passwordFile, 'utf8')).trim();
+await mkdir(artifactRoot, { recursive: true });
+
+const login = async (context, page) => {
+    await page.goto(baseUrl, { waitUntil: 'networkidle', timeout: 60_000 });
+    const globalSalt = await page.locator('#global_salt').inputValue();
+    const passwordHash = createHash('sha512')
+        .update(globalSalt + password + globalSalt)
+        .digest('hex');
+    const response = await context.request.post(new URL('api.php?path=Login/LoginByID', baseUrl).toString(), {
+        data: { username, password: passwordHash },
+    });
+    const result = await response.json();
+    if (!response.ok() || result.result !== true) {
+        throw new Error('Reference login failed.');
+    }
+};
+
+const measureRanking = async (page) =>
+    page.evaluate(() => {
+        const pick = (selector) => {
+            const element = document.querySelector(selector);
+            if (!element) {
+                return null;
+            }
+            const rect = element.getBoundingClientRect();
+            const style = getComputedStyle(element);
+            return {
+                rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+                style: {
+                    fontFamily: style.fontFamily,
+                    fontSize: style.fontSize,
+                    lineHeight: style.lineHeight,
+                    backgroundImage: style.backgroundImage,
+                    backgroundColor: style.backgroundColor,
+                    color: style.color,
+                    borderTopColor: style.borderTopColor,
+                    borderTopWidth: style.borderTopWidth,
+                    borderRadius: style.borderRadius,
+                    padding: style.padding,
+                    fontWeight: style.fontWeight,
+                    cursor: style.cursor,
+                    minHeight: style.minHeight,
+                    objectFit: style.objectFit,
+                },
+            };
+        };
+        const image = document.querySelector('.generalIcon');
+        return {
+            title: document.title,
+            container: pick('#container'),
+            rankType: pick('.rankType'),
+            rankCell: pick('.rankView li'),
+            uniqueCell: pick('.rankView li.no_value'),
+            image: image
+                ? {
+                      ...pick('.generalIcon'),
+                      naturalWidth: image.naturalWidth,
+                      naturalHeight: image.naturalHeight,
+                  }
+                : null,
+            firstButton: pick('button, input[type="submit"], input[type="button"]'),
+            rankSectionCount: document.querySelectorAll('.rankView').length,
+            document: {
+                width: document.documentElement.scrollWidth,
+                height: document.documentElement.scrollHeight,
+            },
+        };
+    });
+
+const browser = await chromium.launch({ headless: true });
+try {
+    const result = {};
+    for (const viewport of [
+        { name: 'desktop', width: 1365, height: 768 },
+        { name: 'mobile', width: 390, height: 844 },
+    ]) {
+        const context = await browser.newContext({
+            viewport: { width: viewport.width, height: viewport.height },
+            deviceScaleFactor: 1,
+            locale: 'ko-KR',
+            timezoneId: 'UTC',
+            colorScheme: 'dark',
+            ignoreHTTPSErrors: true,
+        });
+        const page = await context.newPage();
+        await login(context, page);
+        await page.goto(new URL('hwe/', baseUrl).toString(), { waitUntil: 'networkidle', timeout: 60_000 });
+
+        await page.goto(new URL('hwe/a_bestGeneral.php', baseUrl).toString(), {
+            waitUntil: 'networkidle',
+            timeout: 60_000,
+        });
+        await page.locator('#container').waitFor();
+        const bestGeneral = await measureRanking(page);
+        const userButton = page.getByRole('button', { name: '유저 보기' });
+        await userButton.hover();
+        bestGeneral.userButtonHover = await userButton.evaluate((element) => {
+            const style = getComputedStyle(element);
+            return { backgroundColor: style.backgroundColor, cursor: style.cursor };
+        });
+        await userButton.focus();
+        bestGeneral.userButtonFocus = await userButton.evaluate((element) => getComputedStyle(element).outline);
+        await page.screenshot({
+            path: resolve(artifactRoot, `ref-best-general-${viewport.name}.png`),
+            fullPage: true,
+            animations: 'disabled',
+        });
+
+        await page.goto(new URL('hwe/a_hallOfFame.php', baseUrl).toString(), {
+            waitUntil: 'networkidle',
+            timeout: 60_000,
+        });
+        await page.locator('#container').waitFor();
+        const hallOfFame = await measureRanking(page);
+        const scenario = page.locator('#by_scenario');
+        hallOfFame.scenario = await scenario.evaluate((element) => {
+            const rect = element.getBoundingClientRect();
+            const style = getComputedStyle(element);
+            return {
+                rect: { width: rect.width, height: rect.height },
+                fontFamily: style.fontFamily,
+                fontSize: style.fontSize,
+            };
+        });
+        await scenario.focus();
+        hallOfFame.scenarioFocus = await scenario.evaluate((element) => getComputedStyle(element).outline);
+        await page.screenshot({
+            path: resolve(artifactRoot, `ref-hall-of-fame-${viewport.name}.png`),
+            fullPage: true,
+            animations: 'disabled',
+        });
+
+        result[viewport.name] = { bestGeneral, hallOfFame };
+        await context.close();
+    }
+    await writeFile(resolve(artifactRoot, 'computed-dom.json'), `${JSON.stringify(result, null, 2)}\n`);
+    process.stdout.write(`${JSON.stringify({ ok: true, artifactRoot, viewports: Object.keys(result) })}\n`);
+} finally {
+    await browser.close();
+}
@@ -6,7 +6,7 @@ import { fileURLToPath } from 'node:url';
 import { canonicalFrontendFixture as fixture } from './fixtures/canonical';

 const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../..');
-const imageRoot = resolve(repositoryRoot, '../../image');
+const imageRoots = [resolve(repositoryRoot, '../image'), resolve(repositoryRoot, '../../image')];
 const artifactRoot = process.env.FRONTEND_PARITY_ARTIFACT_DIR;

 const response = (data: unknown) => ({ result: { data } });
@@ -28,11 +28,11 @@ const installImages = async (page: Page): Promise<void> => {
    await page.route('**/image/**', async (route) => {
        const pathname = decodeURIComponent(new URL(route.request().url()).pathname);
        const relative = pathname.replace(/^\/image\//, '');
-        const candidates = [
+        const candidates = imageRoots.flatMap((imageRoot) => [
            resolve(imageRoot, relative),
            resolve(imageRoot, 'game', relative),
            resolve(imageRoot, 'icons', '22.jpg'),
-        ];
+        ]);
        for (const candidate of candidates) {
            try {
                const body = await readFile(candidate);
@@ -139,6 +139,7 @@ const installAuthenticatedGameFixture = async (page: Page): Promise<void> => {
                };
            }
            if (operation === 'public.getMapLayout') return fixture.game.mapLayout;
+            if (operation === 'ranking.getBestGeneral') return fixture.game.bestGeneral;
            if (operation === 'yearbook.getRange') return fixture.game.yearbookRange;
            if (operation === 'yearbook.getHistory') return fixture.game.yearbook;
            if (operation === 'vote.getVoteList') return fixture.game.surveyList;
@@ -387,6 +388,117 @@ test.describe('gateway legacy parity', () => {
    });
 });

+test.describe('best general legacy parity', () => {
+    test.beforeEach(async ({ page }) => {
+        await installAuthenticatedGameFixture(page);
+    });
+
+    for (const viewport of [
+        { name: 'desktop', width: 1365, height: 768, expectedWidth: 1000 },
+        { name: 'mobile', width: 390, height: 844, expectedWidth: 500 },
+    ]) {
+        test(`matches the ref fixed ranking grid on ${viewport.name}`, async ({ page }) => {
+            await page.setViewportSize(viewport);
+            await page.goto('http://127.0.0.1:15102/che/best-general');
+            await expect(page.getByText('유비').first()).toBeVisible();
+            await expect(page.locator('.rankView')).toHaveCount(3);
+            if (artifactRoot) {
+                await page.screenshot({
+                    path: resolve(artifactRoot, `best-general-core-${viewport.name}.png`),
+                    fullPage: true,
+                    animations: 'disabled',
+                });
+            }
+
+            const geometry = await page.evaluate(() => {
+                const container = document.querySelector<HTMLElement>('#best-general-container')!;
+                const item = document.querySelector<HTMLElement>('.rankView li')!;
+                const uniqueItem = document.querySelector<HTMLElement>('.rankView li.no-value')!;
+                const title = document.querySelector<HTMLElement>('.rankType')!;
+                const image = document.querySelector<HTMLImageElement>('.generalIcon')!;
+                return {
+                    container: {
+                        x: container.getBoundingClientRect().x,
+                        width: container.getBoundingClientRect().width,
+                        fontFamily: getComputedStyle(container).fontFamily,
+                        fontSize: getComputedStyle(container).fontSize,
+                        backgroundImage: getComputedStyle(container).backgroundImage,
+                    },
+                    item: {
+                        width: item.getBoundingClientRect().width,
+                        minHeight: getComputedStyle(item).minHeight,
+                    },
+                    uniqueItem: {
+                        minHeight: getComputedStyle(uniqueItem).minHeight,
+                    },
+                    title: {
+                        fontSize: getComputedStyle(title).fontSize,
+                        lineHeight: getComputedStyle(title).lineHeight,
+                        backgroundImage: getComputedStyle(title).backgroundImage,
+                    },
+                    image: {
+                        width: image.getBoundingClientRect().width,
+                        height: image.getBoundingClientRect().height,
+                        naturalWidth: image.naturalWidth,
+                        objectFit: getComputedStyle(image).objectFit,
+                    },
+                    closeX: document
+                        .querySelector<HTMLElement>('.legacy-ranking-title .legacy-button')!
+                        .getBoundingClientRect().x,
+                };
+            });
+
+            expect(geometry.container.width).toBe(viewport.expectedWidth);
+            expect(geometry.container.fontFamily).toContain('Pretendard');
+            expect(geometry.container.fontSize).toBe('14px');
+            expect(geometry.container.backgroundImage).toContain('back_walnut.jpg');
+            expect(geometry.closeX).toBe(geometry.container.x);
+            expect(geometry.item).toEqual({ width: 100, minHeight: '149px' });
+            expect(geometry.uniqueItem.minHeight).toBe('128px');
+            expect(geometry.title).toMatchObject({
+                fontSize: viewport.name === 'desktop' ? '28px' : '22.06px',
+                lineHeight: viewport.name === 'desktop' ? '33.6px' : '26.472px',
+            });
+            expect(geometry.title.backgroundImage).toContain('back_green.jpg');
+            expect(geometry.image).toMatchObject({ width: 64, height: 64, objectFit: 'fill' });
+            expect(geometry.image.naturalWidth).toBeGreaterThan(0);
+
+            const npcButton = page.getByRole('button', { name: 'NPC 보기' });
+            await npcButton.hover();
+            await expect(npcButton).toHaveCSS('background-color', 'rgb(107, 107, 107)');
+            await npcButton.focus();
+            await expect(npcButton).toBeFocused();
+            await npcButton.click();
+            await expect(npcButton).toHaveAttribute('aria-pressed', 'true');
+
+            const itemName = page.locator('.item-name').first();
+            await itemName.hover();
+            await expect(itemName).toHaveAttribute('title', '최고의 명마');
+        });
+    }
+
+    test('keeps the current ranking and selected user type after an API error', async ({ page }) => {
+        await page.goto('http://127.0.0.1:15102/che/best-general');
+        await expect(page.getByText('유비').first()).toBeVisible();
+        await page.route('**/che/api/trpc/**', async (route) => {
+            if (operationNames(route).includes('ranking.getBestGeneral')) {
+                await route.fulfill({
+                    status: 500,
+                    contentType: 'application/json',
+                    body: JSON.stringify({ error: { message: '명장일람 조회에 실패했습니다.' } }),
+                });
+                return;
+            }
+            await route.fallback();
+        });
+        const npcButton = page.getByRole('button', { name: 'NPC 보기' });
+        await npcButton.click();
+        await expect(page.getByRole('alert')).toBeVisible();
+        await expect(page.getByText('유비').first()).toBeVisible();
+        await expect(npcButton).toHaveAttribute('aria-pressed', 'true');
+    });
+});
+
 test.describe('hall of fame legacy parity', () => {
    test.beforeEach(async ({ page }) => {
        await installHallFixture(page);
@@ -401,6 +513,13 @@ test.describe('hall of fame legacy parity', () => {
            await page.goto('http://127.0.0.1:15102/che/hall-of-fame');
            await expect(page.getByText('유비')).toBeVisible();
            await expect(page.locator('.rankView')).toHaveCount(2);
+            if (artifactRoot) {
+                await page.screenshot({
+                    path: resolve(artifactRoot, `hall-of-fame-core-${viewport.name}.png`),
+                    fullPage: true,
+                    animations: 'disabled',
+                });
+            }

            const geometry = await page.evaluate(() => {
                const container = document.querySelector<HTMLElement>('#container')!;
@@ -409,7 +528,10 @@ test.describe('hall of fame legacy parity', () => {
                const titleStyle = getComputedStyle(document.querySelector<HTMLElement>('.rankType')!);
                const image = document.querySelector<HTMLImageElement>('.generalIcon')!;
                return {
-                    container: container.getBoundingClientRect().width,
+                    container: {
+                        x: container.getBoundingClientRect().x,
+                        width: container.getBoundingClientRect().width,
+                    },
                    containerBackgroundImage: getComputedStyle(container).backgroundImage,
                    item: {
                        width: item.getBoundingClientRect().width,
@@ -427,23 +549,57 @@ test.describe('hall of fame legacy parity', () => {
                        naturalHeight: image.naturalHeight,
                        objectFit: getComputedStyle(image).objectFit,
                    },
+                    closeX: document
+                        .querySelector<HTMLElement>('.legacy-hall-title .legacy-button')!
+                        .getBoundingClientRect().x,
                };
            });

-            expect(geometry.container).toBe(viewport.expectedWidth);
+            expect(geometry.container.width).toBe(viewport.expectedWidth);
+            expect(geometry.closeX).toBe(geometry.container.x);
            expect(geometry.containerBackgroundImage).toContain('back_walnut.jpg');
            expect(geometry.item.width).toBe(100);
            expect(geometry.title.fontFamily).toContain('Pretendard');
+            expect(geometry.title.fontSize).toBe(viewport.name === 'desktop' ? '28px' : '22.06px');
            expect(geometry.title.backgroundImage).toContain('back_green.jpg');
-            expect(geometry.image).toMatchObject({ width: 64, height: 64, objectFit: 'cover' });
+            expect(geometry.image).toMatchObject({ width: 64, height: 64, objectFit: 'fill' });
            expect(geometry.image.naturalWidth).toBeGreaterThan(0);

            const close = page.getByRole('button', { name: '창 닫기' }).first();
            await close.hover();
+            await expect(close).toHaveCSS('background-color', 'rgb(107, 107, 107)');
            await close.focus();
            await expect(close).toBeFocused();
+
+            const scenario = page.getByLabel('시나리오 검색');
+            await expect(scenario).toHaveCSS('width', '189px');
+            await scenario.focus();
+            await expect(scenario).toBeFocused();
+            await scenario.selectOption('scenario:1:22');
+            await expect(scenario).toHaveValue('scenario:1:22');
        });
    }
+
+    test('keeps the selected scenario after a hall API error', async ({ page }) => {
+        await page.goto('http://127.0.0.1:15102/che/hall-of-fame');
+        await expect(page.getByText('유비')).toBeVisible();
+        await page.route('**/che/api/trpc/**', async (route) => {
+            if (operationNames(route).includes('ranking.getHallOfFame')) {
+                await route.fulfill({
+                    status: 500,
+                    contentType: 'application/json',
+                    body: JSON.stringify({ error: { message: '명예의 전당 조회에 실패했습니다.' } }),
+                });
+                return;
+            }
+            await route.fallback();
+        });
+        const scenario = page.getByLabel('시나리오 검색');
+        await scenario.selectOption('scenario:1:22');
+        await expect(page.getByRole('alert')).toBeVisible();
+        await expect(scenario).toHaveValue('scenario:1:22');
+        await expect(page.getByText('유비')).toBeVisible();
+    });
 });

 test('game login delegates to the gateway like the ref entry point', async ({ page }) => {