fix: 정보 화면 버튼을 공통 Lumen 계열로 통일

세력도시·세력정보·현재도시·내 정보·인사부·외교부의 raised control을 공통 semantic button family에 연결한다. 화면별 크기와 색상은 유지하고 실제 Chromium 상태 geometry 회귀를 추가한다.
2026-08-21 17:34:45 +00:00
parent 24afa7f466
commit 71ce057318
13 changed files with 393 additions and 160 deletions
@@ -0,0 +1,66 @@
+import { expect, type Locator, type Page } from '@playwright/test';
+
+type ButtonGeometry = {
+    top: number;
+    bottom: number;
+    height: number;
+    marginTop: string;
+    borderBottomWidth: string;
+    borderRadius: string;
+    backgroundColor: string;
+};
+
+const measure = (control: Locator): Promise<ButtonGeometry> =>
+    control.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return {
+            top: rect.top,
+            bottom: rect.bottom,
+            height: rect.height,
+            marginTop: style.marginTop,
+            borderBottomWidth: style.borderBottomWidth,
+            borderRadius: style.borderRadius,
+            backgroundColor: style.backgroundColor,
+        };
+    });
+
+export const expectLumenButtonStates = async (
+    page: Page,
+    control: Locator,
+    expectedBackground: string
+): Promise<{ base: ButtonGeometry; hover: ButtonGeometry; active: ButtonGeometry }> => {
+    await expect(control).toBeVisible();
+    await page.mouse.move(0, 0);
+    const base = await measure(control);
+    expect(base).toMatchObject({
+        marginTop: '0px',
+        borderBottomWidth: '4px',
+        borderRadius: '5.25px',
+        backgroundColor: expectedBackground,
+    });
+
+    await control.hover();
+    const hover = await measure(control);
+    expect(hover).toMatchObject({ marginTop: '1px', borderBottomWidth: '3px' });
+    expect(hover.top).toBeCloseTo(base.top + 1, 1);
+    expect(hover.bottom).toBeCloseTo(base.bottom, 1);
+
+    const box = await control.boundingBox();
+    if (!box) throw new Error('Lumen button is not measurable');
+    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+    await page.mouse.down();
+    const active = await measure(control);
+    expect(active).toMatchObject({ marginTop: '2px', borderBottomWidth: '2px' });
+    expect(active.top).toBeCloseTo(base.top + 2, 1);
+    expect(active.bottom).toBeCloseTo(base.bottom, 1);
+    await page.mouse.move(0, 0);
+    await page.mouse.up();
+
+    await page.keyboard.press('Tab');
+    await control.focus();
+    await expect(control).toBeFocused();
+    await expect.poll(() => control.evaluate((element) => getComputedStyle(element).boxShadow)).not.toBe('none');
+
+    return { base, hover, active };
+};