From aa66f2701dc79afdd372e61ff92fc56410f53acc Mon Sep 17 00:00:00 2001 From: hided62 Date: Mon, 17 Aug 2026 16:04:33 +0000 Subject: [PATCH] =?UTF-8?q?fix:=20=EA=B3=B5=EA=B0=9C=20=EC=A7=80=EB=8F=84?= =?UTF-8?q?=20=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EC=A0=95=EB=B3=B4?= =?UTF-8?q?=EB=A5=BC=20=EA=B0=84=EA=B2=B0=ED=95=98=EA=B2=8C=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 서버 탭 아래 중복 이름과 내부 지도 테마명을 제거하고 런타임 상태를 하단 요약으로 옮긴다. 연월은 레거시 지도 제목과 같은 20px 중앙 띠로 표시하고 데스크톱·모바일 Chromium 검증을 보강한다. --- .../e2e/public-map-tabs.spec.ts | 49 +++++++++++++++++-- .../src/components/MapPreview.vue | 21 ++++---- app/gateway-frontend/src/views/LobbyView.vue | 42 +++++++++++----- 3 files changed, 88 insertions(+), 24 deletions(-) diff --git a/app/gateway-frontend/e2e/public-map-tabs.spec.ts b/app/gateway-frontend/e2e/public-map-tabs.spec.ts index 16920a46..091d3a15 100644 --- a/app/gateway-frontend/e2e/public-map-tabs.spec.ts +++ b/app/gateway-frontend/e2e/public-map-tabs.spec.ts @@ -219,7 +219,13 @@ test('shows one public map panel and switches it by hover, click, and keyboard', await expect(tablist.getByRole('tab', { name: '퀘섭' })).toHaveCount(0); await expect(panel).toHaveCount(1); await expect(cheTab).toHaveAttribute('aria-selected', 'true'); - await expect(panel).toContainText('유저 11 / 500'); + await expect(panel.getByText('체섭', { exact: true })).toHaveCount(0); + await expect(panel.locator('.map-preview-title')).toHaveCount(0); + const dateBar = panel.locator('.map-preview-date-bar'); + await expect(dateBar).toHaveText('200년 1월'); + const summary = panel.getByTestId('public-map-preview-summary'); + await expect(summary).toContainText('RUNNING'); + await expect(summary).toContainText('유저 11 / 500'); const roadLayer = panel.getByTestId('map-preview-road'); const castles = panel.getByTestId('map-preview-castle'); @@ -251,6 +257,32 @@ test('shows one public map panel and switches it by hover, click, and keyboard', largeCastle: { width: 32, height: 24 }, largeNationBackground: { width: 96, height: 72 }, }); + const dateGeometry = await dateBar.evaluate((element) => { + const rect = element.getBoundingClientRect(); + const bodyRect = element.nextElementSibling?.getBoundingClientRect(); + const style = getComputedStyle(element); + const textStyle = getComputedStyle(element.firstElementChild!); + return { + width: rect.width, + height: rect.height, + bottom: rect.bottom, + bodyTop: bodyRect?.top, + backgroundColor: style.backgroundColor, + justifyContent: style.justifyContent, + fontSize: textStyle.fontSize, + lineHeight: textStyle.lineHeight, + }; + }); + expect(dateGeometry).toEqual({ + width: 700, + height: 20, + bottom: dateGeometry.bodyTop, + bodyTop: dateGeometry.bodyTop, + backgroundColor: 'rgb(0, 0, 0)', + justifyContent: 'center', + fontSize: '14px', + lineHeight: '20px', + }); if (requestedAssets) { await expect.poll(() => requestedAssets.has('/game/map/che/che_road.png')).toBe(true); await expect.poll(() => requestedAssets.has('/game/cast_8.gif')).toBe(true); @@ -297,7 +329,9 @@ test('shows one public map panel and switches it by hover, click, and keyboard', await hweTab.hover(); await expect(hweTab).toHaveAttribute('aria-selected', 'true'); - await expect(panel).toContainText('유저 22 / 500'); + await expect(panel.getByText('훼섭', { exact: true })).toHaveCount(0); + await expect(summary).toContainText('PAUSED'); + await expect(summary).toContainText('유저 22 / 500'); await cheTab.click(); await expect(cheTab).toHaveAttribute('aria-selected', 'true'); @@ -322,7 +356,7 @@ test('shows one public map panel and switches it by hover, click, and keyboard', await page.screenshot({ path: testInfo.outputPath('public-map-tabs-desktop.png'), fullPage: true }); await testInfo.attach('public-map-tabs-desktop-geometry', { body: Buffer.from( - `${JSON.stringify({ panel: geometry, map: mapGeometry, tooltip: tooltipGeometry }, null, 2)}\n` + `${JSON.stringify({ panel: geometry, date: dateGeometry, map: mapGeometry, tooltip: tooltipGeometry }, null, 2)}\n` ), contentType: 'application/json', }); @@ -344,13 +378,20 @@ test.describe('touch navigation', () => { await hweTab.tap(); await expect(hweTab).toHaveAttribute('aria-selected', 'true'); const panel = page.getByTestId('public-map-preview-panel'); - await expect(panel).toContainText('유저 22 / 500'); + await expect(panel.getByText('훼섭', { exact: true })).toHaveCount(0); + await expect(panel.locator('.map-preview-title')).toHaveCount(0); + await expect(panel.locator('.map-preview-date-bar')).toHaveText('200년 1월'); + const summary = panel.getByTestId('public-map-preview-summary'); + await expect(summary).toContainText('PAUSED'); + await expect(summary).toContainText('유저 22 / 500'); await expect(panel.getByTestId('map-preview-road')).toBeVisible(); await expect(panel.getByTestId('map-preview-castle')).toHaveCount(2); const mapBox = await panel.locator('.map-preview-body').boundingBox(); expect(mapBox?.width).toBeGreaterThan(280); expect(mapBox?.width).toBeLessThanOrEqual(366); expect(mapBox?.height).toBeCloseTo((mapBox?.width ?? 0) * (5 / 7), 0); + const horizontalOverflow = await panel.evaluate((element) => element.scrollWidth - element.clientWidth); + expect(horizontalOverflow).toBe(0); const rightCity = panel.getByTestId('map-preview-city').nth(1); await rightCity.hover(); const tooltip = panel.getByTestId('map-preview-city-tooltip'); diff --git a/app/gateway-frontend/src/components/MapPreview.vue b/app/gateway-frontend/src/components/MapPreview.vue index 90a0711f..da234f73 100644 --- a/app/gateway-frontend/src/components/MapPreview.vue +++ b/app/gateway-frontend/src/components/MapPreview.vue @@ -276,8 +276,7 @@ const stateClass = (state: number): string => {