shkim4
032fcdcc03
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.
3.7 KiB
3.7 KiB
SW Header 필드 400 · Footer 말줄임 · Hover 위치 고정 (2026-10-20)
사용자 승인(2026-10-20) 범위의 수정·검증 기록이다. 증거: 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 사실로 보존한다.
측정 결과
| 항목 | 수정 전 | 수정 후 |
|---|---|---|
| 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).
남은 문제
- Firefox
Continuous0.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가 잘렸다. 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 |