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

fix(game-ui): 턴 선택기 버튼의 세로 누름 영역을 넓힘

Browse Source
This commit is contained in:
Hide_D
2026-08-16 05:41:23 +00:00
parent af31d85416
commit 45d314cbdf
2 changed files with 56 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/e2e/mainNavigation.spec.ts
+48 -2
View File
@@ -653,6 +653,9 @@ const persistArtifact = async (page: Page, name: string) => {
voteStatus: describe('.vote-status'),
autoRefresh: describe('[data-bottom-menu="auto-refresh"]'),
manualRefresh: describe('[data-bottom-menu="manual-refresh"]'),
commandPicker: describe('[data-testid="command-picker"]'),
commandCategoryButton: describe('[data-testid="command-picker"] .category-btn'),
commandItem: describe('[data-testid="command-picker"] .command-item'),
commandMenu: describe('.reserved-command-editor details[open] .menu-items'),
commandDividers: [
...document.querySelectorAll<HTMLElement>('.reserved-command-editor details[open] .menu-divider'),
@@ -671,6 +674,10 @@ const persistArtifact = async (page: Page, name: string) => {
if (await commandMenu.isVisible()) {
await commandMenu.screenshot({ path: resolve(target, `${name}-menu.png`) });
}
const commandPicker = page.getByTestId('command-picker');
if (await commandPicker.isVisible()) {
await commandPicker.screenshot({ path: resolve(target, `${name}-command-picker.png`) });
}
await Promise.all([
page.screenshot({ path: resolve(target, `${name}.png`), fullPage: true }),
writeFile(resolve(target, `${name}.json`), `${JSON.stringify(geometry, null, 2)}\n`),
@@ -1032,17 +1039,33 @@ test('main reserved-turn picker renders the Ref general category order', async (
const desktopGeometry = await picker.evaluate((element) => {
const categories = element.querySelector<HTMLElement>('.category-list');
if (!categories) throw new Error('command category list is missing');
const categoryButton = categories?.querySelector<HTMLElement>('.category-btn');
const commandButton = element.querySelector<HTMLElement>('.command-item');
if (!categories || !categoryButton || !commandButton) throw new Error('command choice geometry is missing');
const buttons = [...categories.querySelectorAll<HTMLElement>('.category-btn')];
const categoryStyle = getComputedStyle(categoryButton);
const commandStyle = getComputedStyle(commandButton);
return {
columns: getComputedStyle(categories).gridTemplateColumns,
rows: new Set(buttons.map((button) => button.getBoundingClientRect().y)).size,
horizontalOverflow: element.scrollWidth - element.clientWidth,
categoryButton: {
height: categoryButton.getBoundingClientRect().height,
paddingTop: categoryStyle.paddingTop,
paddingBottom: categoryStyle.paddingBottom,
},
commandButton: {
height: commandButton.getBoundingClientRect().height,
paddingTop: commandStyle.paddingTop,
paddingBottom: commandStyle.paddingBottom,
},
};
});
expect(desktopGeometry.columns.split(' ')).toHaveLength(3);
expect(desktopGeometry.rows).toBe(2);
expect(desktopGeometry.horizontalOverflow).toBeLessThanOrEqual(0);
expect(desktopGeometry.categoryButton).toEqual({ height: 32, paddingTop: '6px', paddingBottom: '6px' });
expect(desktopGeometry.commandButton).toEqual(desktopGeometry.categoryButton);
const strategyCategory = picker.getByRole('button', { name: '계략', exact: true });
await strategyCategory.hover();
@@ -1051,12 +1074,35 @@ test('main reserved-turn picker renders the Ref general category order', async (
await strategyCategory.click();
await expect(strategyCategory).toHaveClass(/active/);
await expect(picker.locator('.command-item')).toHaveText(['화계']);
await persistArtifact(page, `${basePath.slice(1)}-main-reserved-ref-categories-desktop-1200`);
await page.setViewportSize({ width: 500, height: 900 });
await page.getByRole('button', { name: '1턴 명령 입력', exact: true }).click();
const mobilePicker = page.getByTestId('command-picker');
await expect(mobilePicker.locator('.category-btn')).toHaveText(['개인', '내정', '군사', '인사', '계략', '국가']);
expect(await mobilePicker.evaluate((element) => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(0);
const mobileGeometry = await mobilePicker.evaluate((element) => {
const categoryButton = element.querySelector<HTMLElement>('.category-btn');
const commandButton = element.querySelector<HTMLElement>('.command-item');
if (!categoryButton || !commandButton) throw new Error('mobile command choice geometry is missing');
const categoryStyle = getComputedStyle(categoryButton);
const commandStyle = getComputedStyle(commandButton);
return {
horizontalOverflow: element.scrollWidth - element.clientWidth,
categoryButton: {
height: categoryButton.getBoundingClientRect().height,
paddingTop: categoryStyle.paddingTop,
paddingBottom: categoryStyle.paddingBottom,
},
commandButton: {
height: commandButton.getBoundingClientRect().height,
paddingTop: commandStyle.paddingTop,
paddingBottom: commandStyle.paddingBottom,
},
};
});
expect(mobileGeometry.horizontalOverflow).toBeLessThanOrEqual(0);
expect(mobileGeometry.categoryButton).toEqual({ height: 32, paddingTop: '6px', paddingBottom: '6px' });
expect(mobileGeometry.commandButton).toEqual(mobileGeometry.categoryButton);
await persistArtifact(page, `${basePath.slice(1)}-main-reserved-ref-categories-mobile-500`);
});
app/game-frontend/src/components/main/CommandSelectForm.vue
+8 -4
View File
@@ -173,12 +173,17 @@ const commandTitle = (command: CommandAvailability) =>
gap: 0;
}
.category-btn,
.command-item {
min-height: 32px;
padding-block: 6px;
}
.category-btn {
min-height: 24px;
border: 0;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
padding: 2px 4px;
padding-inline: 4px;
background: #173d27;
color: #fff;
font-size: 12px;
@@ -197,11 +202,10 @@ const commandTitle = (command: CommandAvailability) =>
}
.command-item {
min-height: 24px;
border: 0;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
padding: 2px 5px;
padding-inline: 5px;
display: flex;
align-items: center;
justify-content: center;