Files
HMDesign/docs/sw/sw-header-switch-footer-tabs-2026-10-22.md
T
shkim4 aa8b7f8df1
Deploy Storybook / deploy (push) Successful in 4m4s
test(sw): approve the fc65b2e header switch and footer tab baseline
Test-only approval commit after the user-approved 449398e and fc65b2e
commits on main (sw-test-regression-baseline section 9); no protected path
changes, no Story change.
- approvedMainCommit 8cb98b3 -> fc65b2e.
- public-api.approved.json kept: the public .d.ts files are byte-identical.
- docs/sw/sw-header-switch-footer-tabs-2026-10-22.md: change and verification.
2026-10-22 15:35:44 +09:00

3.9 KiB

SW 헤더 스위치 · 푸터 탭 Bold 9-slice · 뷰어 패널 하단 경계 승인 (2026-10-22)

사용자 승인으로 main에 직접 Commit한 SW 변경 두 건과 그 승인 기준 갱신 기록입니다. 모두 CSS·AI 문서·테스트 변경이고 공개 API(.d.ts)와 Story 목록은 그대로입니다.

1. Commit

항목 값
헤더 스위치 449398e style(sw): calmer viewer header switches without the yellow face
푸터 탭·패널 하단 fc65b2e feat(sw): bold 9-slice footer tabs and viewer panel bottom edge
승인 기준 Commit 이 보고서와 같은 테스트 전용 Commit (approvedMainCommit 8cb98b3 → fc65b2e)

2. 변경 내용

영역 내용
뷰어 헤더 스위치(2.5D·어두운 배경) OFF 트랙 #020A07·원 #5F7A71, ON 트랙 --hm-sw-viewer-hover #266651·원 --hm-sw-viewer-muted #BDDFD4. 노란 면·테두리 없음. 크기·이동·bevel·Disabled 60% 유지, 패널 스위치·--hm-sw-viewer-accent 불변
푸터 Model/Layout 탭 글자 라벨 12px 700(모든 상태), 자간 -5%. 이름 편집 입력은 400
푸터 사선·Model 탭 폭 기존 SVG를 border-image 9-slice로 그림. 97px(라벨 57px)·73px가 최소, 사선 21px·모서리는 고정하고 가운데만 늘어남. 라벨 최대 12em 이후 말줄임(둥근 탭과 같은 기준). Hover 주황 면은 같은 자산의 합집합 mask(mask-border 미사용)
뷰어 패널 본문 하단 스크롤 영역 안의 7px 하단 여백 → 스크롤 영역 밖 2px 투명 경계. 행이 프레임 테두리 2px 위에서 잘림. 일반 SWPopup은 7px 유지
AI 문서 DESIGN_RULES.md(헤더 스위치 토큰, Layout/Model 탭), AI_USAGE.md(Weight 범위), FOOTER.md(탭 글자·폭), VIEWER.md(본문 하단 경계)
테스트 text-weight.browser.mjs·footer-design-review.browser.mjs: 탭 라벨 700, Model 면은 9-slice ::before에서 읽음

3. 승인 기준 갱신 (sw-test-regression-baseline-2026-10-20.md §9)

  • approvedMainCommit: 8cb98b3 → fc65b2e. Story 추가·삭제·이동·태그 변경이 없어 다른 승인 목록은 바꾸지 않았습니다.
  • public-api.approved.json 유지: fc65b2e clean build(dirty: false)의 공개 .d.ts가 승인 스냅샷(8cb98b3)과 바이트 동일합니다.

4. 검증 결과 (Node 22.23.2, 증거는 저장소 밖 임시 폴더)

검사 결과
npm run build:sw(fc65b2e, dirty: false) · typecheck:sw · npm run typecheck 성공
npm run build-storybook 성공
Public API Guard 7/7 PASS (172 Export, .d.ts 바이트 동일)
home-menu-integration 23/23 PASS
overview / overview overlays 53/53, 20/20 PASS
storybook-unused-removal (Source Guard) 94/94 PASS
check:ai-docs · ai-docs.check.mjs PASS · 46/46 PASS
footer-design-review · footer-popup-viewer-refinement 21/21 · 47/47 PASS
실제 마우스 Hover·긴 이름 편집·8px 연결·패널 하단 경계·Bold (Chromium) 10/10 PASS
9-slice 기본 폭 vs 이전 고정 폭 그림, 17개 탭 상태 픽셀 비교 Chromium 0px · Firefox 0px 차이
긴 라벨(Chromium·Firefox) 사선 97 → 126px, Model 73 → 105px, 잘림 없음, 모든 상태 모양 유지

5. 별도 이슈로 남긴 기존 실패

  • viewer.browser.mjs: hover face #266651, 860: icons only + More, 520: icons only + More … FAIL과 추가 도구 Timeout — 1dd8fb3의 Story·테스트로도 같게 재현(이번 변경 무관).
  • text-weight.browser.mjs: 헤더 더보기 단계(57행) Timeout으로 푸터 검사까지 도달하지 못함 — HEAD(449398e) 버전 테스트로도 같게 재현(이번 변경 무관). 푸터 탭 굵기는 Storybook 계산값과 footer-design-review로 확인.
  • SWViewerSwitch JSDoc의 "on #FFC600" 문구는 공개 .d.ts에 포함되어 이번 범위에서 고치지 않음(다음 공개 API 승인 때 함께 정리).