From 45d314cbdf1dd525adf258bf36676782cc090b89 Mon Sep 17 00:00:00 2001 From: hided62 Date: Sun, 16 Aug 2026 05:41:23 +0000 Subject: [PATCH] =?UTF-8?q?fix(game-ui):=20=ED=84=B4=20=EC=84=A0=ED=83=9D?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=EC=9D=98=20=EC=84=B8=EB=A1=9C=20?= =?UTF-8?q?=EB=88=84=EB=A6=84=20=EC=98=81=EC=97=AD=EC=9D=84=20=EB=84=93?= =?UTF-8?q?=ED=9E=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/game-frontend/e2e/mainNavigation.spec.ts | 50 ++++++++++++++++++- .../src/components/main/CommandSelectForm.vue | 12 +++-- 2 files changed, 56 insertions(+), 6 deletions(-) diff --git a/app/game-frontend/e2e/mainNavigation.spec.ts b/app/game-frontend/e2e/mainNavigation.spec.ts index ff5750a3..e8d98c34 100644 --- a/app/game-frontend/e2e/mainNavigation.spec.ts +++ b/app/game-frontend/e2e/mainNavigation.spec.ts @@ -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('.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('.category-list'); - if (!categories) throw new Error('command category list is missing'); + const categoryButton = categories?.querySelector('.category-btn'); + const commandButton = element.querySelector('.command-item'); + if (!categories || !categoryButton || !commandButton) throw new Error('command choice geometry is missing'); const buttons = [...categories.querySelectorAll('.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('.category-btn'); + const commandButton = element.querySelector('.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`); }); diff --git a/app/game-frontend/src/components/main/CommandSelectForm.vue b/app/game-frontend/src/components/main/CommandSelectForm.vue index 8d1714ff..50ab4929 100644 --- a/app/game-frontend/src/components/main/CommandSelectForm.vue +++ b/app/game-frontend/src/components/main/CommandSelectForm.vue @@ -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;