merge: 최신 main을 개인 기록 시각 글자 크기 보정에 통합

tools/frontend-legacy-parity/dynasty-parity.spec.ts

@@ -221,19 +221,19 @@ test('dynasty list matches the ref Chromium table geometry and interactions', as
         { y: 65, height: 37 },
         { y: 112, height: 139 },
     ]);
-    expect(geometry.tables[0]!.fontFamily).toContain('Times New Roman');
-    expect(geometry.tables[0]!.fontSize).toBe('16px');
-    expect(geometry.tables[0]!.lineHeight).toBe('normal');
-    expect(geometry.button).toEqual({
+    expect(geometry.tables[0]!.fontFamily).toContain('Pretendard');
+    expect(geometry.tables[0]!.fontSize).toBe('14px');
+    expect(geometry.tables[0]!.lineHeight).toBe('18.2px');
+    expect(geometry.button.fontFamily).toContain('Pretendard');
+    expect(geometry.button).toMatchObject({
         height: 22,
         borderWidth: '2px',
         borderRadius: '0px',
         padding: '1px 6px',
-        fontFamily: 'Arial',
         fontSize: '13.3333px',
         cursor: 'default',
     });
-    expect(geometry.firstCell).toEqual({ padding: '1px', borderWidth: '0px', textAlign: 'start' });
+    expect(geometry.firstCell).toEqual({ padding: '0px', borderWidth: '1px', textAlign: 'start' });
 
     const historyLink = page.getByRole('link', { name: '역사 보기' }).last();
     await expect(historyLink).toHaveAttribute('href', '/che/yearbook?serverID=hwe_260725_u3uE');
@@ -276,17 +276,23 @@ test('dynasty detail preserves the legacy fields, old-nation table and error flo
         const first = container.querySelector<HTMLTableElement>('table')!.getBoundingClientRect();
         const emperor = container.querySelector<HTMLTableElement>('.emperor-table')!.getBoundingClientRect();
         const oldNation = container.querySelector<HTMLTableElement>('.old-nation-table')!.getBoundingClientRect();
+        const containerStyle = getComputedStyle(container);
+        const buttonStyle = getComputedStyle(container.querySelector<HTMLButtonElement>('button')!);
         return {
             container: { x: rect.x, y: rect.y, width: rect.width },
             first: { x: first.x, y: first.y, width: first.width, height: first.height },
             emperor: { x: emperor.x, y: emperor.y, width: emperor.width },
             oldNation: { x: oldNation.x, width: oldNation.width },
+            fontFamily: containerStyle.fontFamily,
+            buttonFontFamily: buttonStyle.fontFamily,
         };
     });
     expect(geometry.container).toEqual({ x: 140, y: 8, width: 1000 });
     expect(geometry.first).toEqual({ x: 140, y: 8, width: 1000, height: 47 });
     expect(geometry.emperor).toEqual({ x: 140, y: 55, width: 1000 });
     expect(geometry.oldNation).toEqual({ x: 140, width: 1000 });
+    expect(geometry.fontFamily).toContain('Pretendard');
+    expect(geometry.buttonFontFamily).toContain('Pretendard');
 
     await page.goto(`${gameOrigin}/che/dynasty/999`);
     await expect(page.getByRole('alert')).toHaveText('왕조 정보를 찾을 수 없습니다.');

tools/frontend-legacy-parity/game-font.playwright.config.mjs

@@ -0,0 +1,40 @@
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig, devices } from '@playwright/test';
+
+const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../..');
+const gamePort = process.env.FRONTEND_PARITY_GAME_PORT ?? '15126';
+const gameOrigin = `http://127.0.0.1:${gamePort}`;
+const frontendEnv =
+    'VITE_APP_BASE_PATH=/che VITE_GAME_API_URL=/che/api/trpc ' +
+    'VITE_IMAGE_PUBLIC_URL=/image VITE_GAME_ASSET_URL=/image ' +
+    'VITE_GAME_PROFILE=che VITE_GATEWAY_WEB_URL=/gateway/';
+
+export default defineConfig({
+    testDir: '.',
+    testMatch: ['dynasty-parity.spec.ts', 'map-trend.spec.ts'],
+    fullyParallel: false,
+    workers: 1,
+    timeout: 30_000,
+    expect: { timeout: 5_000 },
+    reporter: [['list']],
+    outputDir: process.env.SAMMO_TEST_OUTPUT_DIR ?? resolve(repositoryRoot, 'test-results/game-font'),
+    use: {
+        ...devices['Desktop Chrome'],
+        baseURL: `${gameOrigin}/che/`,
+        colorScheme: 'dark',
+        deviceScaleFactor: 1,
+        locale: 'ko-KR',
+        timezoneId: 'UTC',
+        trace: 'retain-on-failure',
+        screenshot: 'only-on-failure',
+    },
+    webServer: {
+        command: `${frontendEnv} pnpm --filter @sammo-ts/game-frontend build && ${frontendEnv} pnpm --filter @sammo-ts/game-frontend preview --host 127.0.0.1 --port ${gamePort}`,
+        cwd: repositoryRoot,
+        url: `${gameOrigin}/che/`,
+        reuseExistingServer: false,
+        timeout: 120_000,
+    },
+});

tools/frontend-legacy-parity/map-trend.spec.ts

@@ -179,6 +179,15 @@ const installMainFixture = async (page: Page, failRecords = false) => {
                     myNation: 1,
                 });
             }
+            if (operation === 'public.getMapLayout') return response(fixture.game.mapLayout);
+            if (operation === 'public.getCachedMap') {
+                return response({ ...fixture.game.map, history: cachedHistory });
+            }
+            if (operation === 'public.getWorldTrend') {
+                return response({ year: 200, month: 1, turnTerm: 10 });
+            }
+            if (operation === 'public.getNationList') return response([]);
+            if (operation === 'public.getGeneralList') return response([]);
             if (operation === 'turns.getCommandTable') return response({ general: [], nation: [] });
             if (operation === 'turns.reserved.getGeneral') return response([]);
             if (operation === 'messages.getRecent') return response(emptyMessages);
@@ -265,6 +274,40 @@ test('shows the current in-game map and all three recent record streams', async
     }
 });
 
+test('uses the shared content font for public game history on desktop and mobile', async ({ page }) => {
+    await installMainFixture(page);
+
+    for (const viewport of [
+        { width: 1200, height: 900 },
+        { width: 500, height: 900 },
+    ]) {
+        await page.setViewportSize(viewport);
+        await page.goto(gameUrl('/public'));
+        await expect(page.locator('.recent-log-list')).toContainText('유비가 촉을 건국하였습니다.');
+
+        const font = await page.locator('.recent-log-list').evaluate((element) => {
+            const style = getComputedStyle(element);
+            return { family: style.fontFamily, size: style.fontSize };
+        });
+        expect(font.family).toContain('Pretendard');
+        expect(font.size).toBe('14px');
+
+        const pretendardFont = await page.evaluate(async () => {
+            await document.fonts.load('400 14px Pretendard', '유비가 촉을 건국하였습니다.');
+            await document.fonts.ready;
+            const statuses = [...document.fonts]
+                .filter((face) => face.family.replaceAll('"', '') === 'Pretendard')
+                .map((face) => face.status);
+            return {
+                statuses,
+                koreanGlyphsLoaded: document.fonts.check('400 14px Pretendard', '유비가 촉을 건국하였습니다.'),
+            };
+        });
+        expect(pretendardFont.statuses).toContain('loaded');
+        expect(pretendardFont.koreanGlyphsLoaded).toBe(true);
+    }
+});
+
 test('keeps the current map visible when the recent record request fails', async ({ page }) => {
     await installMainFixture(page, true);
     await page.setViewportSize({ width: 1440, height: 1000 });