From 15cb8cc481940d9e2eb4862cbc4dbed6083dea69 Mon Sep 17 00:00:00 2001 From: hided62 Date: Mon, 24 Aug 2026 03:15:00 +0000 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=98=88=EC=95=BD=20=EA=B3=B5=EC=A7=80?= =?UTF-8?q?=20=EB=B3=B8=EB=AC=B8=EA=B3=BC=20=EC=84=9C=EB=B2=84=20=ED=96=89?= =?UTF-8?q?=20=EA=B5=AC=EB=B6=84=EC=9D=84=20=EB=B0=94=EB=A1=9C=EC=9E=A1?= =?UTF-8?q?=EB=8A=94=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 선공개와 일반 가오픈 공지를 공유 컴포넌트로 렌더링해 드래그 문자열을 일치시킨다. 예약 공지 배지에는 실제 빌드 시작 시각 툴팁만 제공하고 서버별 행 경계를 강화한다. --- .../e2e/lobby-game-auth.spec.ts | 103 +++++--- .../components/ProfilePreopenAnnouncement.vue | 216 ++++++++++++++++ app/gateway-frontend/src/views/LobbyView.vue | 231 ++++-------------- 3 files changed, 336 insertions(+), 214 deletions(-) create mode 100644 app/gateway-frontend/src/components/ProfilePreopenAnnouncement.vue diff --git a/app/gateway-frontend/e2e/lobby-game-auth.spec.ts b/app/gateway-frontend/e2e/lobby-game-auth.spec.ts index 24d57871..ecd34de9 100644 --- a/app/gateway-frontend/e2e/lobby-game-auth.spec.ts +++ b/app/gateway-frontend/e2e/lobby-game-auth.spec.ts @@ -502,7 +502,7 @@ test('does not contact a STOPPED game runtime and labels it inaccessible', async await page.screenshot({ path: testInfo.outputPath('gateway-stopped-profile-lobby.png'), fullPage: true }); }); -test('shows a compact upcoming reset announcement without contacting the stopped runtime', async ({ +test('matches the normal preopen copy text and labels an immediate announcement with its build time', async ({ page, }, testInfo) => { const gameOperations = await installFixture(page, { @@ -525,15 +525,15 @@ test('shows a compact upcoming reset announcement without contacting the stopped options: ['develop', 'battle'], }, }, + includeStoppedProfile: true, }); await page.setViewportSize({ width: 1200, height: 900 }); await page.goto('lobby'); const row = page.locator('tbody tr').filter({ hasText: '체섭' }); const announcement = row.getByTestId('upcoming-reset-announcement'); - const marker = announcement.getByTestId('upcoming-reset-options-marker'); - const swatch = announcement.getByTestId('upcoming-reset-options-swatch'); - const tooltip = announcement.getByTestId('upcoming-reset-options-tooltip'); + const badge = announcement.getByTestId('reserved-announcement-badge'); + const tooltip = announcement.getByTestId('reserved-announcement-build-tooltip'); await expect(row.getByTestId('upcoming-reset-phase')).toHaveCount(0); await expect(row.getByTestId('upcoming-reset-scheduled-at')).toHaveCount(0); await expect(row.getByTestId('upcoming-reset-preopen-at')).toHaveText('- 가오픈 일시 : 2026-08-27 14:30:00 -'); @@ -542,14 +542,15 @@ test('shows a compact upcoming reset announcement without contacting the stopped await expect( row.getByTestId('upcoming-reset-scenario-announcement').locator(':scope > .text-green-400') ).toHaveText('60분 턴 서버'); - expect( - (await announcement.evaluate((element) => (element as HTMLElement).innerText)).replace(/\s+/g, ' ').trim() - ).toBe( - '- 가오픈 일시 : 2026-08-27 14:30:00 - - 오픈 일시 : 2026-08-27 20:00:00 - 【가상】황건적의 난 60분 턴 서버' + await expect(announcement.locator('.profile-announcement-settings')).toHaveText( + '(상성 설정:가상), (빙의 여부:가능), (최대 스탯:70), ' + + '(기타 설정:랜덤 임관, 자율행동[내정, 출병, 24시간 유효])' ); await expect(tooltip).toBeHidden(); - await expect(marker).toHaveAttribute('aria-label', '초기화 옵션 보기'); - await expect(swatch).toHaveCSS('background-color', 'rgb(217, 119, 6)'); + await expect(badge).toHaveText(/예약 공지/); + await expect(badge).toHaveAttribute('aria-label', '예약 공지의 실제 빌드 시작 시각 보기'); + await expect(badge).toHaveCSS('user-select', 'none'); + await expect(badge).toHaveCSS('border-top-color', 'rgb(217, 119, 6)'); await expect(row).not.toContainText('서버 중지 · 접근 불가'); await expect(row).not.toContainText('정보를 불러오는 중'); await expect(row.getByRole('button', { name: '입장' })).toHaveCount(0); @@ -557,39 +558,63 @@ test('shows a compact upcoming reset announcement without contacting the stopped expect(gameOperations).toEqual([]); const desktopGeometry = await announcement.evaluate((element) => { - const marker = element.querySelector('[data-testid="upcoming-reset-options-marker"]'); - const swatch = element.querySelector('[data-testid="upcoming-reset-options-swatch"]'); - if (!marker || !swatch) throw new Error('expected upcoming reset option marker'); + const badge = element.querySelector('[data-testid="reserved-announcement-badge"]'); + if (!badge) throw new Error('expected reserved announcement badge'); return { announcement: element.getBoundingClientRect().toJSON(), cell: element.parentElement?.getBoundingClientRect().toJSON(), - marker: marker.getBoundingClientRect().toJSON(), - swatch: swatch.getBoundingClientRect().toJSON(), + badge: badge.getBoundingClientRect().toJSON(), documentWidth: document.documentElement.scrollWidth, viewportWidth: window.innerWidth, }; }); expect(desktopGeometry.announcement.left).toBeGreaterThanOrEqual(desktopGeometry.cell?.left ?? 0); expect(desktopGeometry.announcement.right).toBeLessThanOrEqual(desktopGeometry.cell?.right ?? 0); - expect(desktopGeometry.marker.width).toBe(18); - expect(desktopGeometry.marker.height).toBe(18); - expect(desktopGeometry.swatch.width).toBe(8); - expect(desktopGeometry.swatch.height).toBe(8); - await marker.hover(); + expect(desktopGeometry.badge.width).toBeGreaterThan(40); + expect(desktopGeometry.badge.height).toBe(18); + const desktopRowDivider = await page + .locator('tbody tr') + .first() + .evaluate((element) => { + const style = getComputedStyle(element); + return { color: style.borderBottomColor, width: style.borderBottomWidth }; + }); + expect(desktopRowDivider).toEqual({ color: 'rgb(82, 82, 91)', width: '1px' }); + await badge.hover(); await expect(tooltip).toBeVisible(); - await expect(tooltip).toContainText('초기화 옵션'); - await expect(tooltip).toContainText('상성 설정: 가상 · 빙의 여부: 가능 · 최대 스탯: 70'); - await expect(tooltip).toContainText('기타 설정: 랜덤 임관 · 자율행동: 내정, 출병, 24시간 유효'); - await expect(tooltip).not.toContainText('초기화 시작'); - await expect(tooltip).not.toContainText('빌드 대기'); + await expect(tooltip).toHaveText('실제 빌드 시작 : 2026-08-27 14:00:00'); + await expect(tooltip).not.toContainText('초기화 옵션'); const desktopTooltipGeometry = await tooltip.evaluate((element) => element.getBoundingClientRect().toJSON()); expect(desktopTooltipGeometry.left).toBeGreaterThanOrEqual(8); expect(desktopTooltipGeometry.right).toBeLessThanOrEqual(desktopGeometry.viewportWidth - 8); expect(desktopTooltipGeometry.top).toBeGreaterThanOrEqual(desktopGeometry.cell?.top ?? 0); expect(desktopTooltipGeometry.bottom).toBeLessThanOrEqual(desktopGeometry.cell?.bottom ?? 0); - await marker.focus(); - await expect(marker).toBeFocused(); - await expect(marker).toHaveCSS('outline-width', '2px'); + await badge.focus(); + await expect(badge).toBeFocused(); + await expect(badge).toHaveCSS('outline-width', '2px'); + + await page.mouse.click(8, 8); + const selectionStart = await announcement.getByTestId('upcoming-reset-preopen-at').boundingBox(); + const selectionEnd = await announcement.locator('.profile-announcement-settings').boundingBox(); + if (!selectionStart || !selectionEnd) throw new Error('expected upcoming announcement selection geometry'); + await page.mouse.move(selectionStart.x + 1, selectionStart.y + selectionStart.height / 2); + await page.mouse.down(); + await page.mouse.move(selectionEnd.x + selectionEnd.width - 1, selectionEnd.y + selectionEnd.height / 2, { + steps: 24, + }); + await page.mouse.up(); + const compactSelection = (await page.evaluate(() => window.getSelection()?.toString() ?? '')) + .replace(/\s+/g, ' ') + .trim(); + expect(compactSelection).toBe( + '- 가오픈 일시 : 2026-08-27 14:30:00 - - 오픈 일시 : 2026-08-27 20:00:00 - ' + + '【가상】황건적의 난 60분 턴 서버 ' + + '(상성 설정:가상), (빙의 여부:가능), (최대 스탯:70), ' + + '(기타 설정:랜덤 임관, 자율행동[내정, 출병, 24시간 유효])' + ); + expect(compactSelection).not.toContain('예약 공지'); + expect(compactSelection).not.toContain('실제 빌드 시작'); + await page.evaluate(() => window.getSelection()?.removeAllRanges()); await page.screenshot({ path: testInfo.outputPath('gateway-upcoming-reset-desktop.png'), fullPage: true }); await page.setViewportSize({ width: 390, height: 844 }); @@ -606,7 +631,7 @@ test('shows a compact upcoming reset announcement without contacting the stopped expect(mobileGeometry.left).toBeGreaterThanOrEqual(0); expect(mobileGeometry.right).toBeLessThanOrEqual(mobileGeometry.viewportWidth); expect(mobileGeometry.documentWidth).toBe(mobileGeometry.viewportWidth); - await marker.hover(); + await badge.hover(); await expect(tooltip).toBeVisible(); const mobileTooltipGeometry = await tooltip.evaluate((element) => element.getBoundingClientRect().toJSON()); expect(mobileTooltipGeometry.left).toBeGreaterThanOrEqual(8); @@ -636,12 +661,14 @@ test('keeps the announcement through the RESERVED handoff after the build comple await page.goto('lobby'); const row = page.locator('tbody tr').filter({ hasText: 'hwe섭' }); - const marker = row.getByTestId('upcoming-reset-options-marker'); + const badge = row.getByTestId('reserved-announcement-badge'); await expect(row.getByTestId('upcoming-reset-phase')).toHaveCount(0); await expect(row.getByTestId('upcoming-reset-scenario-title')).toHaveText('【가상】황건적의 난'); - await marker.hover(); - await expect(row.getByTestId('upcoming-reset-options-tooltip')).toContainText('초기화 옵션'); - await expect(row.getByTestId('upcoming-reset-options-tooltip')).not.toContainText('오픈 준비 완료'); + await badge.hover(); + await expect(row.getByTestId('reserved-announcement-build-tooltip')).toHaveText( + '실제 빌드 시작 : 2026-08-27 14:00:00' + ); + await expect(row.getByTestId('reserved-announcement-build-tooltip')).not.toContainText('오픈 준비 완료'); await expect(row).not.toContainText('준 비 중 · 접근 불가'); await expect(row.getByRole('button', { name: '입장' })).toHaveCount(0); expect(gameOperations).toEqual([]); @@ -690,6 +717,8 @@ test('uses two-row mobile server cards without horizontal scrolling and keeps re const rowRect = row.getBoundingClientRect(); const buttonRect = button.getBoundingClientRect(); const style = getComputedStyle(button); + const bodyStyle = getComputedStyle(scrollElement.querySelector('tbody')!); + const firstRowStyle = getComputedStyle(rows[0]!); const rect = (element: Element) => { const value = element.getBoundingClientRect(); return { top: value.top, right: value.right, bottom: value.bottom, left: value.left, width: value.width }; @@ -715,6 +744,10 @@ test('uses two-row mobile server cards without horizontal scrolling and keeps re viewportWidth: window.innerWidth, outlineStyle: style.outlineStyle, outlineWidth: style.outlineWidth, + rowGap: bodyStyle.rowGap, + dividerBackground: bodyStyle.backgroundColor, + firstRowBorderColor: firstRowStyle.borderBottomColor, + firstRowBorderWidth: firstRowStyle.borderBottomWidth, }; }); expect(geometry.pageScrollWidth).toBe(geometry.viewportWidth); @@ -724,6 +757,10 @@ test('uses two-row mobile server cards without horizontal scrolling and keeps re expect(geometry.rows).toHaveLength(2); expect(geometry.rows[0]?.bottom).toBeLessThanOrEqual(geometry.rows[1]?.top ?? 0); expect(geometry.rows.every((item) => item.width === geometry.scroll.clientWidth)).toBe(true); + expect(geometry.rowGap).toBe('2px'); + expect(geometry.dividerBackground).toBe('rgb(63, 63, 70)'); + expect(geometry.firstRowBorderColor).toBe('rgb(82, 82, 91)'); + expect(geometry.firstRowBorderWidth).toBe('1px'); expect(geometry.button.left).toBeGreaterThanOrEqual(geometry.scroll.left); expect(geometry.button.right).toBeLessThanOrEqual(geometry.scroll.right); expect(geometry.cells.server.top).toBeCloseTo(geometry.cells.info.top, 0); diff --git a/app/gateway-frontend/src/components/ProfilePreopenAnnouncement.vue b/app/gateway-frontend/src/components/ProfilePreopenAnnouncement.vue new file mode 100644 index 00000000..870db45e --- /dev/null +++ b/app/gateway-frontend/src/components/ProfilePreopenAnnouncement.vue @@ -0,0 +1,216 @@ + + + + + diff --git a/app/gateway-frontend/src/views/LobbyView.vue b/app/gateway-frontend/src/views/LobbyView.vue index c63087e9..57851bc7 100644 --- a/app/gateway-frontend/src/views/LobbyView.vue +++ b/app/gateway-frontend/src/views/LobbyView.vue @@ -7,6 +7,7 @@ import type { AppRouter } from '@sammo-ts/gateway-api'; import { writeGameSessionTransfer } from '@sammo-ts/common/auth/gameSessionTransfer'; import DefaultLayout from '../layouts/DefaultLayout.vue'; import MapPreview from '../components/MapPreview.vue'; +import ProfilePreopenAnnouncement from '../components/ProfilePreopenAnnouncement.vue'; import { useToast } from '../composables/useToast'; import { trpc } from '../utils/trpc'; import { createGameTrpc } from '../utils/gameTrpc'; @@ -106,11 +107,8 @@ const handleMapTabKeydown = (event: KeyboardEvent, profileName: string): void => const formatGraceEndsAt = (value: string | null | undefined): string => formatServerDateTime(value); const serverSeasonStatus = (info: LobbyInfo) => resolveServerSeasonStatus(info); -const formatAnnouncementDate = (value: string | null | undefined): string => - formatServerDateTime(value, { fallback: '-' }); const profileScenarioTitle = (profileName: string): string => profileDetails.value[profileName]?.scenarioTitle.trim() || '-'; -const npcModeText = (mode: number): string => ['불가', '가능', '선택 생성'][mode] ?? '불가'; const autorunDetailText = (autorun: LobbyInfo['autorunUser']): string => { if (!autorun) return ''; @@ -133,10 +131,8 @@ const autorunDetailText = (autorun: LobbyInfo['autorunUser']): string => { labels.push(limit); return labels.join(', '); }; -const autorunTooltipId = (profileName: string, scope = 'current'): string => - 'profile-autorun-' + scope + '-' + profileName.replaceAll(/[^a-zA-Z0-9_-]/g, '-'); -const upcomingResetOptionsTooltipId = (profileName: string): string => - 'upcoming-reset-options-' + profileName.replaceAll(/[^a-zA-Z0-9_-]/g, '-'); +const autorunTooltipId = (profileName: string): string => + 'profile-autorun-current-' + profileName.replaceAll(/[^a-zA-Z0-9_-]/g, '-'); const isProfileRuntimeAvailable = (profile: LobbyProfile): boolean => profile.lifecycle.userAccessible; const unavailableProfileText = (profile: LobbyProfile): string => { if (!profile.lifecycle.dataInitialized) return '- DB 초기화 전 · 접근 불가 -'; @@ -453,7 +449,7 @@ const handleEnter = async (profile: LobbyProfile, targetPath: string) => { 선 택 - + { -
-
- - 가오픈 일시 : - {{ formatAnnouncementDate(profile.upcomingReset.preopenAt) }} - -
-
- - 오픈 일시 : {{ formatAnnouncementDate(profile.upcomingReset.openAt) }} - -
-
- - {{ profile.upcomingReset.scenarioTitle }} {{ ' ' }} - - {{ profile.upcomingReset.turnTermMinutes }}분 턴 서버 - - - - - 초기화 옵션 - 상성 설정: {{ profile.upcomingReset.fictionMode }} · 빙의 여부: - {{ npcModeText(profile.upcomingReset.npcMode) }} · 최대 스탯: - {{ profile.upcomingReset.defaultStatTotal }} - 기타 설정: {{ profile.upcomingReset.otherTextInfo || '없음' - }} - - -
-
+ :profile-name="profile.profileName" + :preopen-at="profile.upcomingReset.preopenAt" + :open-at="profile.upcomingReset.openAt" + :scenario-title="profile.upcomingReset.scenarioTitle" + :turn-term-minutes="profile.upcomingReset.turnTermMinutes" + :fiction-mode="profile.upcomingReset.fictionMode" + :npc-mode="profile.upcomingReset.npcMode" + :default-stat-total="profile.upcomingReset.defaultStatTotal" + :other-text-info="profile.upcomingReset.otherTextInfo" + :autorun-user="profile.upcomingReset.autorunUser" + :scheduled-at="profile.upcomingReset.scheduledAt" + test-id-prefix="upcoming-reset" + />