fix: 메인 국가·장수 정보 헤더를 제거한다
국가와 장수 카드의 본문 및 접근 가능한 이름은 유지하면서 데스크톱과 모바일의 중복 외곽 헤더만 숨긴다. 실제 Chromium 회귀로 두 viewport의 헤더 부재와 레이아웃을 검증한다.
This commit is contained in:
@@ -1136,6 +1136,7 @@ test('desktop menus preserve ref columns, prefix-safe routes, and controlled dro
|
||||
await installFixture(page, state);
|
||||
await page.setViewportSize({ width: 1200, height: 900 });
|
||||
await waitForMain(page);
|
||||
|
||||
if (artifactRoot) await mkdir(resolve(artifactRoot), { recursive: true });
|
||||
|
||||
await expect(page.locator('.main-global-menu')).toHaveCount(3);
|
||||
@@ -1994,6 +1995,17 @@ test('main cards and command input stay inside their Ref-sized grid slots', asyn
|
||||
await page.setViewportSize({ width: 1200, height: 900 });
|
||||
await waitForMain(page);
|
||||
|
||||
for (const [target, label] of [
|
||||
['nation', '국가 정보'],
|
||||
['general', '장수 정보'],
|
||||
] as const) {
|
||||
const panel = page.locator(`.layout-desktop [data-main-target="${target}"]`);
|
||||
await expect(panel).toHaveAttribute('aria-label', label);
|
||||
await expect(panel.locator(':scope > .panel-header')).toHaveCount(0);
|
||||
await expect(panel.locator(':scope > .panel-body')).toBeVisible();
|
||||
}
|
||||
await expect(page.locator('.layout-desktop [data-main-target="city"] > .panel-header')).toContainText('도시 정보');
|
||||
|
||||
const cityBars = page.locator('[data-main-target="city"] [role="progressbar"]');
|
||||
const statBars = page.locator('[data-stat-progress] [role="progressbar"]');
|
||||
const experienceBar = page.locator('[data-experience-progress] [role="progressbar"]');
|
||||
@@ -2321,6 +2333,16 @@ test('main cards and command input stay inside their Ref-sized grid slots', asyn
|
||||
|
||||
await page.setViewportSize({ width: 500, height: 900 });
|
||||
await expect(page.locator('.layout-mobile')).toBeVisible();
|
||||
for (const [target, label] of [
|
||||
['nation', '국가 정보'],
|
||||
['general', '장수 정보'],
|
||||
] as const) {
|
||||
const panel = page.locator(`.layout-mobile [data-main-target="${target}"]`);
|
||||
await expect(panel).toHaveAttribute('aria-label', label);
|
||||
await expect(panel.locator(':scope > .panel-header')).toHaveCount(0);
|
||||
await expect(panel.locator(':scope > .panel-body')).toBeVisible();
|
||||
}
|
||||
await expect(page.locator('.layout-mobile [data-main-target="city"] > .panel-header')).toContainText('도시 정보');
|
||||
await page.locator('[data-main-target="commands"] .bottom-actions').getByRole('button', { name: '펼치기' }).click();
|
||||
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(500);
|
||||
await expect(page.locator('[data-main-target="city"] [role="progressbar"]')).toHaveCount(8);
|
||||
|
||||
@@ -2,14 +2,18 @@
|
||||
interface Props {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
hideHeader?: boolean;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
withDefaults(defineProps<Props>(), {
|
||||
subtitle: undefined,
|
||||
hideHeader: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="panel-card">
|
||||
<header class="panel-header">
|
||||
<header v-if="!hideHeader" class="panel-header">
|
||||
<div>
|
||||
<h2 class="panel-title">{{ title }}</h2>
|
||||
<p v-if="subtitle" class="panel-subtitle">{{ subtitle }}</p>
|
||||
|
||||
@@ -295,7 +295,7 @@ watch(
|
||||
</div>
|
||||
|
||||
<div v-else-if="panelId === 'nation'" class="mobile-panel" data-mobile-panel-id="nation">
|
||||
<PanelCard title="국가 정보" data-main-target="nation">
|
||||
<PanelCard title="국가 정보" hide-header aria-label="국가 정보" data-main-target="nation">
|
||||
<NationBasicCard :nation="nation" :loading="loading" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
@@ -306,7 +306,7 @@ watch(
|
||||
:class="{ 'mobile-panel--flush': isFlushMobilePanel(panelId, panelIndex) }"
|
||||
data-mobile-panel-id="general"
|
||||
>
|
||||
<PanelCard title="장수 스탯" data-main-target="general">
|
||||
<PanelCard title="장수 스탯" hide-header aria-label="장수 정보" data-main-target="general">
|
||||
<GeneralBasicCard :general="general" :loading="loading" :nation-color="nation?.color" />
|
||||
</PanelCard>
|
||||
</div>
|
||||
@@ -456,10 +456,10 @@ watch(
|
||||
<PanelCard title="도시 정보" data-main-target="city">
|
||||
<CityBasicCard :city="city" :loading="loading" />
|
||||
</PanelCard>
|
||||
<PanelCard title="국가 정보" data-main-target="nation">
|
||||
<PanelCard title="국가 정보" hide-header aria-label="국가 정보" data-main-target="nation">
|
||||
<NationBasicCard :nation="nation" :loading="loading" />
|
||||
</PanelCard>
|
||||
<PanelCard title="장수 스탯" data-main-target="general">
|
||||
<PanelCard title="장수 스탯" hide-header aria-label="장수 정보" data-main-target="general">
|
||||
<GeneralBasicCard :general="general" :loading="loading" :nation-color="nation?.color" />
|
||||
</PanelCard>
|
||||
<MainNationMenu
|
||||
|
||||
Reference in New Issue
Block a user