devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hide_D
2026-09-29 08:51:05 +00:00
parent 295ecb39a3
commit 71155186b7
31 changed files with 293 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/battleSimulator.spec.ts
+16
View File
@@ -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 { dirname, resolve } from 'node:path';
@@ -618,3 +619,18 @@ test('runs 1000 battles in the Chromium worker and matches the Node processor ex
});
expect(workerUrls.some((url) => url.includes('battleSimulator.worker'))).toBe(true);
});
for (const width of [500, 1000]) {
test(`전투 시뮬레이터 요약표 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
await installApi(page, {
hasGeneral: true,
requests: [],
preparedPayloads: [],
serverResults: [],
prepareResponseBytes: [],
});
await page.setViewportSize({ width, height: 900 });
await gotoSimulator(page);
await verifyVerticalAlignment(page, testInfo, ['.summary-table th', '.summary-table td'], 'table');
});
}
app/game-frontend/e2e/commandArguments.spec.ts
+14
View File
@@ -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']);
});
}
app/game-frontend/e2e/diplomacy.spec.ts
+10
View File
@@ -1,3 +1,4 @@
import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
import { mkdir, writeFile } from 'node:fs/promises';
import { resolve } from 'node:path';
@@ -161,3 +162,12 @@ test('keeps diplomacy detail redacted below permission three', async ({ page })
await expect(page.getByText('문서 작성 권한은 군주/수뇌에게만 제공됩니다.')).toBeVisible();
await expect(page.getByRole('button', { name: '전송' })).toHaveCount(0);
});
for (const width of [500, 1000]) {
test(`외교 제목 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
await installFixture(page, 4);
await page.setViewportSize({ width, height: 900 });
await page.goto('diplomacy');
await verifyVerticalAlignment(page, testInfo, ['.panel-header']);
});
}
app/game-frontend/e2e/inGameMenus.spec.ts
+15
View File
@@ -1,3 +1,4 @@
import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
import { mkdir, readFile, writeFile } from 'node:fs/promises';
import { basename, resolve } from 'node:path';
import { expect, test, type Locator, type Page, type Route } from '@playwright/test';
@@ -2680,3 +2681,17 @@ test('감찰부 사관 연수를 채운 일반 장수는 개인 기록 거부에
await expect(page.locator('[data-log-type="battleResult"]')).toContainText('battleResult 감찰 기록');
}
});
for (const width of [500, 1000]) {
test(`내 정보의 오른쪽 수치와 왼쪽 날짜 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
await install(page, { permission: 'head', myset: 3, settingMutations: [], accessPages: [] });
await page.setViewportSize({ width, height: 900 });
await page.goto('my-page');
await verifyVerticalAlignment(page, testInfo, [
'.battle-general-extra > span',
'.battle-general-extra > strong',
'.dex-row > span',
'.dex-row > strong',
]);
});
}
app/game-frontend/e2e/nationBetting.spec.ts
+11
View File
@@ -1,3 +1,4 @@
import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
import { expect, test, type Page, type Route } from '@playwright/test';
import { gameProfile, gameTrpcRoute } from './gameTestPaths.js';
@@ -115,3 +116,13 @@ test('keeps the nation-betting amount while changing candidates, submitting, and
await expect(amount).toHaveValue('100');
await page.screenshot({ path: testInfo.outputPath('nation-betting-amount-retained.png'), fullPage: true });
});
for (const width of [500, 1000]) {
test(`국가 베팅 지급표 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
await installFixture(page);
await page.setViewportSize({ width, height: 900 });
await page.goto('nation-betting');
await page.getByRole('button', { name: /두 번째 천통국 베팅/u }).click();
await verifyVerticalAlignment(page, testInfo, ['.payout-row > div']);
});
}
app/game-frontend/e2e/nationOffices.spec.ts
+10
View File
@@ -1,3 +1,4 @@
import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
import { devices, expect, test, type Page, type Route } from '@playwright/test';
import { mkdir, readFile, writeFile } from 'node:fs/promises';
import { dirname, resolve } from 'node:path';
@@ -1089,3 +1090,12 @@ for (const width of [1365, 390]) {
await testInfo.attach('icon-dom', { body: await page.content(), contentType: 'text/html' });
});
}
for (const width of [500, 1000]) {
test(`재정 격자 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
await installFixture(page, { role: 'head', rate: 20 });
await page.setViewportSize({ width, height: 900 });
await gotoOffice(page, 'nation/finance');
await verifyVerticalAlignment(page, testInfo, ['.diplomacy-row > div', '.budget-row > span', '.blue-heading']);
});
}
app/game-frontend/e2e/npcPolicy.spec.ts
+10
View File
@@ -1,3 +1,4 @@
import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
import { devices, expect, test, type Page, type Route } from '@playwright/test';
import { mkdir, readFile } from 'node:fs/promises';
import { dirname, resolve } from 'node:path';
@@ -454,3 +455,12 @@ test('a user below secret read permission receives a recoverable page error', as
await expect(page.locator('#container')).toHaveCount(0);
await expect(page.getByRole('button', { name: '다시 시도' })).toBeVisible();
});
for (const width of [500, 1000]) {
test(`NPC 정책 제목 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
await installFixture(page, { permissionLevel: 4, mutations: [] });
await page.setViewportSize({ width, height: 900 });
await gotoPolicy(page);
await verifyVerticalAlignment(page, testInfo, ['.section_bar', '.sub_bar']);
});
}
app/game-frontend/e2e/pastPlays.spec.ts
+11
View File
@@ -1,3 +1,4 @@
import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
import { mkdir, writeFile } from 'node:fs/promises';
import { resolve } from 'node:path';
@@ -378,3 +379,13 @@ test('past plays keeps the legacy-width table scrollable on a mobile viewport',
expect(detailMetrics.hallColumns.split(' ')).toHaveLength(3);
expect(detailMetrics.recordBottom).toBeLessThanOrEqual(detailMetrics.shellBottom);
});
for (const width of [500, 1000]) {
test(`지난 플레이 전투 수치 세로 정렬 ${width}px`, async ({ page }, testInfo) => {
await installArchive(page);
await page.setViewportSize({ width, height: 900 });
await page.goto('past-plays');
await page.locator('.detail-toggle').click();
await verifyVerticalAlignment(page, testInfo, ['.hall-battle-record dt', '.hall-battle-record dd']);
});
}
app/game-frontend/e2e/typographyPolicy.spec.ts
+27
View File
@@ -1,6 +1,7 @@
import { readFile } from 'node:fs/promises';
import { resolve } from 'node:path';
import { expect, test, type Page } from '@playwright/test';
import { verifyVerticalAlignment } from '../../../tools/frontend-legacy-parity/verticalAlignment.js';
import { gameProfile, gameTrpcRoute } from './gameTestPaths.js';
// 기존 화면 fixture의 읽기 응답을 고정했다. 실제 계정이나 게임 서버에는 접근하지 않는다.
@@ -192,3 +193,29 @@ for (const width of [500, 1000]) {
await page.screenshot({ path: testInfo.outputPath('battle-log-exception.png'), fullPage: true });
});
}
for (const width of [500, 1000]) {
for (const scene of [
{
name: 'main',
route: './',
selectors: [
'.general-basic-grid > .cell-label',
'.general-basic-grid > strong',
'.city-title',
'.city-nation',
'.record-title',
'.activity-status .status-row',
],
},
{ name: 'personnel', route: 'nation/personnel', selectors: ['.nation-heading', '.personnel-change-button'] },
{ name: 'possession', route: 'join', selectors: ['.npc-token-status'] },
]) {
test(`세로 정렬은 셀 크기와 가로 정렬을 보존한다 ${scene.name} ${width}px`, async ({ page }, testInfo) => {
await page.setViewportSize({ width, height: 900 });
await install(page, scene.name, names[0].general, names[0].nation);
await page.goto(scene.route);
await verifyVerticalAlignment(page, testInfo, scene.selectors);
});
}
}