짧은 UI 텍스트의 세로 정렬과 두 축 정렬 원칙을 적용한다

2026-09-29 08:51:05 +00:00
parent 295ecb39a3
commit 71155186b7
31 changed files with 293 additions and 3 deletions
@@ -1,3 +1,4 @@
+import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
 import { expect, test, type Page, type Route } from '@playwright/test';
 import { readFile, writeFile } from 'node:fs/promises';
 import {
@@ -5037,3 +5038,16 @@ for (const width of [1200, 390]) {
        await expect.poll(() => JSON.stringify(requests)).toContain('"nationType":"che_덕가"');
    });
 }
+
+for (const width of [500, 1000]) {
+    test(`징병 현황 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
+        await install(page);
+        await page.setViewportSize({ width, height: 900 });
+        await page.goto('/');
+        await page.getByRole('button', { name: '1턴 명령 입력', exact: true }).click();
+        const picker = page.getByTestId('command-picker');
+        await picker.getByRole('button', { name: '내정', exact: true }).click();
+        await picker.getByRole('button', { name: '징병', exact: true }).click();
+        await verifyVerticalAlignment(page, testInfo, ['.recruitment-status > span']);
+    });
+}