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 09:41:39 +00:00
parent 5bafdfc1e7
commit 7c65cf60f3
43 changed files with 1347 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/commandArguments.spec.ts
+2 -2
View File
@@ -1956,8 +1956,8 @@ test('shows all 12 advanced chief turns before the actions and uses the full mob
expect(geometry.frameWidth).toBe(500);
expect(geometry.rowWidth).toBe(500);
expect(geometry.rowEdges).toEqual([
{ top: 0, bottom: 155 },
{ top: 155, bottom: 310 },
{ top: 0, bottom: 224 },
{ top: 224, bottom: 448 },
]);
expect(geometry.gutterWidths).toEqual([12, 12]);
expect(geometry.gutterEdges).toEqual([
app/game-frontend/e2e/fixtures/typography.json
+121
View File
@@ -2910,5 +2910,126 @@
}
}
}
},
"best": {
"lobby.info": {
"result": {
"data": {
"year": 197,
"month": 7,
"userCnt": 17,
"npcCnt": 31,
"nationCnt": 5,
"maxUserCnt": 50,
"turnTerm": 60,
"fictionMode": "가상",
"otherTextInfo": "표준",
"starttime": "0190-01-01T00:00:00.000Z",
"myGeneral": {
"id": 1,
"name": "가나다라마바사아자",
"troopId": 0
}
}
}
},
"auth.status": {
"result": {
"data": {
"userId": "frontend-legacy-fixture-user"
}
}
},
"ranking.getBestGeneral": {
"result": {
"data": {
"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
}
}
]
}
]
}
}
}
},
"join": {
"lobby.info": "result",
"auth.status": {
"result": {
"data": {
"ok": true
}
}
},
"join.getConfig": "result"
}
}
app/game-frontend/e2e/inGameMenus.spec.ts
+19 -7
View File
@@ -592,11 +592,17 @@ const install = async (page: Page, state: FixtureState) => {
if (type === 'generalHistory') {
return response({
type,
logs: Array.from({ length: 25 }, (_, index) => ({ id: 100 - index, text: `열전-${index}` })),
logs: Array.from({ length: 25 }, (_, index) => ({
id: 100 - index,
text: `열전-${index}`,
})),
});
}
if (type === 'generalAction') {
const firstPage = Array.from({ length: 24 }, (_, index) => ({ id: 50 - index, text: `행동-${index}` }));
const firstPage = Array.from({ length: 24 }, (_, index) => ({
id: 50 - index,
text: `행동-${index}`,
}));
return response({
type,
logs: jsonInput.beforeId ? [{ id: 26, text: '이전 행동' }] : firstPage,
@@ -1034,10 +1040,10 @@ test('메인 장수 동향과 개인 전투 기록은 Ref 행 간격·색상·
expect(geometry.battle.top).toBeCloseTo(geometry.line.top, 0);
expect(geometry.styles).toEqual({
diamondColor: 'rgb(135, 206, 235)',
namePlateFontSize: '10.5px',
namePlateFontSize: '12px',
nameCoverColor: 'rgb(255, 255, 0)',
crewPlateColor: 'rgb(255, 69, 0)',
crewPlateFontSize: '12.6px',
crewPlateFontSize: '12px',
defenseArrowColor: 'rgb(255, 0, 255)',
});
};
@@ -1317,7 +1323,7 @@ test('메인 개인 기록의 공격·수비 시각은 Ref와 같은 90% 글자
expect(measurements.map((entry) => entry.row.fontSize)).toEqual(['14px', '14px', '14px']);
expect(measurements.map((entry) => entry.row.lineHeight)).toEqual(['21px', '21px', '21px']);
expect(measurements.map((entry) => entry.row.height)).toEqual([21, 21, 21]);
expect(measurements.map((entry) => entry.time.fontSize)).toEqual(['12.6px', '12.6px', '12.6px']);
expect(measurements.map((entry) => entry.time.fontSize)).toEqual(['12px', '12px', '12px']);
expect(measurements.map((entry) => entry.timeSpanCount)).toEqual([1, 1, 1]);
expect(measurements[0]?.nameFontSize).toBe('14px');
expect(measurements[0]?.actionFontSize).toBe('14px');
@@ -1387,7 +1393,12 @@ test('접속량정보 keeps the legacy public 1016px chart geometry', async ({ p
test('내 정보 열전은 전체 표시 후 종료하고 행동 기록만 다음 페이지를 요청한다', async ({ page }) => {
const state: FixtureState = {
permission: 'head', myset: 3, settingMutations: [], accessPages: [], pagedMyLogs: true, myLogInputs: [],
permission: 'head',
myset: 3,
settingMutations: [],
accessPages: [],
pagedMyLogs: true,
myLogInputs: [],
};
await install(page, state);
await page.goto('my-page');
@@ -1414,7 +1425,8 @@ test('내 정보 열전은 전체 표시 후 종료하고 행동 기록만 다
await expect(action.getByRole('button', { name: '이전 로그 불러오기' })).toHaveCount(0);
expect(state.myLogInputs?.filter((input) => input.type === 'generalHistory')).toHaveLength(1);
expect(state.myLogInputs?.filter((input) => input.type === 'generalAction')).toEqual([
{ type: 'generalAction' }, { type: 'generalAction', beforeId: 27 },
{ type: 'generalAction' },
{ type: 'generalAction', beforeId: 27 },
]);
});
app/game-frontend/e2e/typographyPolicy.spec.ts
+101 -13
View File
@@ -92,7 +92,7 @@ for (const width of [500, 1000]) {
await page.screenshot({ path: testInfo.outputPath('main-maximum-name.png'), fullPage: true });
});
test(`네 단계와 밀집 화면 보류 계약 ${width}px ${name.label}`, async ({ page }, testInfo) => {
test(`인사부도 공통 네 단계를 사용한다 ${width}px ${name.label}`, async ({ page }, testInfo) => {
await page.setViewportSize({ width, height: 900 });
await install(page, 'personnel', name.general, name.nation);
await page.goto('nation/personnel');
@@ -100,11 +100,7 @@ for (const width of [500, 1000]) {
await expect(page.locator('.chief-entry-copy strong').first()).toHaveText(name.general);
await waitForFonts(page);
await expect(page.locator('.nation-heading')).toHaveCSS('font-size', width === 500 ? '16px' : '24px');
// 500px의 15px 이름/10px 잠금은 확대 시 표시 이름이 줄어들어 보류했다.
await expect(page.locator('.chief-entry-copy strong').first()).toHaveCSS(
'font-size',
width === 500 ? '15px' : '16px'
);
await expect(page.locator('.chief-entry-copy strong').first()).toHaveCSS('font-size', '16px');
const geometry = await page.locator('#personnel-container').evaluate((element) => ({
width: element.getBoundingClientRect().width,
scrollWidth: element.scrollWidth,
@@ -123,17 +119,17 @@ for (const width of [500, 1000]) {
});
}
test(`사령부 12턴 요약의 기존 밀도를 유지한다 ${width}px`, async ({ page }, testInfo) => {
test(`사령부 12턴 요약은 12px와 겹치지 않는 행을 사용한다 ${width}px`, async ({ page }, testInfo) => {
await page.setViewportSize({ width, height: 900 });
await install(page, 'chief', names[0].general, names[0].nation);
await page.goto('chief-center');
const row = page.locator('.chief-overview .chief-card.compact .chief-row').first();
await expect(row).toBeVisible();
await waitForFonts(page);
await expect(row).toHaveCSS('font-size', '8.8px');
await expect(row).toHaveCSS('line-height', '11.25px');
await expect(page.locator('.chief-overview .compact-name').first()).toHaveCSS('font-size', '10.4px');
expect((await row.boundingBox())?.height).toBe(11.25);
await expect(row).toHaveCSS('font-size', '12px');
await expect(row).toHaveCSS('line-height', '16px');
await expect(page.locator('.chief-overview .compact-name').first()).toHaveCSS('font-size', '12px');
expect((await row.boundingBox())?.height).toBe(16);
await page.screenshot({ path: testInfo.outputPath('chief-deferred-density.png'), fullPage: true });
});
@@ -187,8 +183,8 @@ for (const width of [500, 1000]) {
const summary = page.locator('.small_war_log').first();
await expect(summary).toContainText('【경국지색소교】');
await expect(summary).toHaveCSS('font-size', '14px');
await expect(summary.locator('.name_plate').first()).toHaveCSS('font-size', '10.5px');
await expect(summary.locator('.crew_plate').first()).toHaveCSS('font-size', '12.6px');
await expect(summary.locator('.name_plate').first()).toHaveCSS('font-size', '12px');
await expect(summary.locator('.crew_plate').first()).toHaveCSS('font-size', '12px');
await waitForFonts(page);
await page.screenshot({ path: testInfo.outputPath('battle-log-exception.png'), fullPage: true });
});
@@ -219,3 +215,95 @@ for (const width of [500, 1000]) {
});
}
}
// Actual page CSS, including the reset and scoped component rules, must implement the ladder.
test('small은 부모 단계에서 내려가고 다섯 번째 크기에서 멈춘다', async ({ page }, testInfo) => {
await install(page, 'main', names[0].general, names[0].nation);
await page.goto('./');
await expect(page.locator('.game-shell__title')).toBeVisible();
const actual = await page.evaluate(() => {
const host = document.createElement('section');
host.id = 'typography-ladder-probe';
document.body.append(host);
const result = ['title', 'emphasis', 'normal', 'small'].map((tier) => {
const parent = document.createElement('div');
parent.className = `sammo-text-${tier}`;
parent.innerHTML = '본문<small>보조<span>상속</span><small>중첩<small>최소</small></small></small>';
host.append(parent);
return [parent, ...parent.querySelectorAll('small')].map((node) => getComputedStyle(node).fontSize);
});
host.remove();
return result;
});
expect(actual).toEqual([
['24px', '16px', '14px', '12px'],
['16px', '14px', '12px', '10px'],
['14px', '12px', '10px', '10px'],
['12px', '10px', '10px', '10px'],
]);
await testInfo.attach('small-ladder', { body: JSON.stringify(actual), contentType: 'application/json' });
});
for (const width of [500, 1000]) {
for (const general of ['가나다라', names[0].general, names[1].general]) {
test(`명장 이름은 12px를 최대로 칸에 맞게 축소한다 ${width}px ${general.length}자`, async ({
page,
}, testInfo) => {
await page.setViewportSize({ width, height: 900 });
await install(page, 'best', general, names[0].nation);
await page.goto('best-general');
const label = page.locator('.hall-name .sammo-fit-text').first();
await expect(label).toHaveText(general);
await waitForFonts(page);
await expect(label).toHaveAttribute('data-font-fit-max', '12');
await expect(label).toHaveAttribute('title', general);
const measured = await label.evaluate((element) => {
const style = getComputedStyle(element);
return {
size: Number.parseFloat(style.fontSize),
overflow: style.overflow,
ellipsis: style.textOverflow,
};
});
expect(measured.size).toBeLessThanOrEqual(12);
expect(measured.size).toBeGreaterThanOrEqual(10);
if (general.length === 4) expect(measured.size).toBe(12);
if (general.length === 18) expect(measured.size).toBeLessThan(12);
expect(measured).toMatchObject({ overflow: 'hidden', ellipsis: 'ellipsis' });
await page.screenshot({ path: testInfo.outputPath('ranking-fitted-name.png'), fullPage: true });
await testInfo.attach('fitted-name', { body: JSON.stringify(measured), contentType: 'application/json' });
});
}
}
for (const width of [500, 1000]) {
test(`장수 생성의 보조 설명 class는 small 단계를 덮어쓰지 않는다 ${width}px`, async ({ page }, testInfo) => {
await page.setViewportSize({ width, height: 900 });
await install(page, 'join', names[0].general, names[0].nation);
await page.goto('join');
await expect(page.locator('.create-form')).toBeVisible();
await page.locator('.advanced-options > summary').click();
await waitForFonts(page);
const steps = await page
.locator('small')
.evaluateAll((elements) =>
elements
.filter((element) => element.checkVisibility())
.map((element) => ({
parent: getComputedStyle(element.parentElement!).fontSize,
size: getComputedStyle(element).fontSize,
}))
);
expect(steps.length).toBeGreaterThan(0);
const next: Record<string, string> = {
'24px': '16px',
'16px': '14px',
'14px': '12px',
'12px': '10px',
'10px': '10px',
};
for (const step of steps) expect(step.size).toBe(next[step.parent]);
await expect(page.locator('.primary-field small.muted')).toHaveCSS('font-size', '10px');
await testInfo.attach('join-small-steps', { body: JSON.stringify(steps), contentType: 'application/json' });
});
}