docs(sw): hover stability tests, AI rules and evidence for header / footer / home menu

Chromium and Firefox browser tests (hover position, field text, ellipsis and tooltip), AI docs and guide, report with the open Firefox Continuous 0.6px issue and the Figma difference of the home menu hover.
2026-10-20 17:48:05 +09:00
1 parent 3f7cff5473
commit 032fcdcc03
@@ -56,7 +56,7 @@ function App() {
 | 동작 | 결과 | 근거 |
 |---|---|---|
 | 로고 클릭 | 열기 / 다시 클릭하면 닫기 | Figma btn_home ON_CLICK → OVERLAY, 재클릭 닫기는 사용자 확정 |
-| 타일 Hover | Variant2: 주황 gradient 1px 테두리, 아이콘·글자 `#FF5C00`, 1px 위·왼쪽 이동 | Figma Default ON_HOVER → V2 |
+| 타일 Hover | Variant2: 주황 gradient 1px 테두리, 아이콘·글자 `#FF5C00`. 아이콘·글자 위치·크기는 Default와 같음(2026-10-20 사용자 확정: Figma의 1px 위·왼쪽 이동은 적용하지 않음) | Figma Default ON_HOVER → V2 |
 | 타일 클릭 | Variant3(Active, V2와 같은 모양) → 다시 클릭하면 Default | Figma V2 → V3 → Default |
 | 메뉴 빈 곳 클릭 | 닫기 | Figma Group ON_CLICK → CLOSE (`closeOnBackgroundClick`) |
 | Escape | 열린 패널을 먼저 닫고, 다시 누르면 메뉴를 닫은 뒤 로고로 Focus 복귀 | Figma 없음 · 접근성 (`closeOnEscape`) |
@@ -0,0 +1,46 @@
+# SW Header 필드 400 · Footer 말줄임 · Hover 위치 고정 (2026-10-20)
+
+사용자 승인(2026-10-20) 범위의 수정·검증 기록이다. 증거: [hover-stability-qa](hover-stability-qa/) (`before/` = 수정 전 빌드, `after/` = 수정 후 빌드).
+
+## 변경
+
+| 영역 | 변경 | 기준 |
+|---|---|---|
+| Header 필드 값 | `.hm-sw-header__field-value` 700 → 400 | Figma 텍스트 속성 Dotum Regular 14 · 자간 0.56px. 레이어 스타일 이름 `Dotum/bold/14`는 겹침·외곽선 표현이며 Stroke·겹침은 복제하지 않음 |
+| Footer 명령 라벨 | `text-overflow: clip` → `ellipsis`, `title`이 없으면 잘린 동안만 전체 라벨 Tooltip(Hover·Focus) | 68 × 47 칸·14px·라벨 이름 그대로, 접근성 이름 = 전체 라벨 또는 `ariaLabel`. 공개 Props 변경 없음 |
+| Home Menu 타일 | Hover·Pressed·Active의 아이콘 `translate(-1px, -1px)`, 라벨 `top: 24px` 제거 | **사용자 최종 기준: Hover에서 아이콘·텍스트 이동 0px** |
+
+## Figma와의 차이(기록, Figma 원본 변경 없음)
+
+- Home Menu 타일 Variant2/Variant3은 Figma에서 아이콘·라벨이 1px 위·왼쪽으로 이동한다. 사용자 결정(2026-10-20)으로 구현은 이동하지 않는다. 색·Hover 아이콘·주황 테두리만 바뀐다. Figma 분석 기록([analysis-report.md](figma-additional/analysis-report.md))은 Figma 사실로 보존한다.
+
+## 측정 결과
+
+| 항목 | 수정 전 | 수정 후 |
+|---|---|---|
+| Home Menu 42타일(5개 Story 위치) Hover·Active | 아이콘 (-1, -1)px, 텍스트 Y -1px | 0px (크기·간격·타일 크기 동일) |
+| Footer 명령 135칸(전체 Footer·도구 그룹·변경 예제 전 분류 + ▲ 패널) | 이동 0 | 이동 0 |
+| `0_Layer_Cludmark` 텍스트/상자 (Chromium) | 142.97 / 142 (잘림) | 126.97 / 126.97 |
+| 치수 `Standard` | 70.48 / 69 (잘림) | 62.48 / 62.48 |
+| `POLYGON` · `WIPEOUT` | 잘린 글자(clip), Tooltip 없음 | `…` + Hover·Focus `title` |
+| Header Open/More 520 ↔ 1920 (141단계) | — | 700과 400 배치 차이 0 |
+
+SVG Hover 자산 25쌍(Home Menu 15, Footer 10)은 내부 도형 좌표가 Default와 같다(캔버스 8배 측정, 차이 0).
+
+## 남은 문제
+
+1. **Firefox `Continuous` 0.6px 잘림(미해결):** Firefox 158에서 선스타일 필드 첫 칸(`.hm-sw-header__line-values > :first-child`, `flex: 0 1 auto`)의 상자가 글자보다 0.6px 작게 계산되어 `Continuo…`로 표시된다(`hover-stability-qa/firefox-continuous/`). Chromium은 정상. 열 구조 grid/flex 변경, 자간·커닝·외곽선 조정으로는 해결되지 않았고, `flex: none`은 좁은 More 칸 말줄임을 깨고 끝 여백 추가는 Chromium 배치를 바꾼다. 사용자 지시로 이번에는 레이아웃 변경을 하지 않았으며, Chromium 반응형에 영향이 없는 수정안을 별도 검토한다. 참고: 수정 전(700) Firefox는 `0.25`·`1.00`·`0_Layer_Cludmark`가 잘렸다.
+2. **`ByLayer`(가중치 38px 고정 칸):** 57.92px로 칸보다 길어 말줄임 + `title`. 사용자 결정으로 38px 칸·말줄임·Tooltip 유지.
+
+## 검증
+
+| 검사 | 결과 |
+|---|---|
+| `hover-stability.browser.mjs` (Chromium) | 201/201 PASS |
+| `hover-stability-firefox.browser.mjs` (Firefox 158, BiDi) | 58/59 — FAIL 1 = 위 남은 문제 1 |
+| footer-popup-viewer-refinement | 47/47 |
+| integrated-improvement (Open 히스테리시스 포함) | 89 PASS / 0 FAIL |
+| footer-design-review · theme-inheritance | 21/21 · 23/23 |
+| home-menu-integration | 22/23 — 기존 실패(`without homeMenu…`, 이전 보고와 동일) |
+| dropdown-consolidation | 223 PASS / 5 FAIL — 기존 스냅샷 실패(이전 보고와 동일) |
+| `typecheck:sw` · `build:sw` · `build-storybook` · `check:ai-docs` · `ai-docs.check` 37/37 | PASS |