Files
HMDesign/docs/sw/sw-viewer-header-strip-2026-10-21.md
T
shkim4 d63a9ac9e8
Deploy Storybook / deploy (push) Successful in 1m3s
test(sw): approve the f26ec7c SW viewer header merge baseline
Test-only approval commit after the f26ec7c main merge (sw-test-regression-
baseline section 9); no protected path changes, no Story change.
- approvedMainCommit 21fe7a2 -> f26ec7c.
- public-api.approved.json kept: the public .d.ts files are byte-identical.
- docs/sw/sw-viewer-header-strip-2026-10-21.md: changes and verification.
2026-10-21 18:55:06 +09:00

3.2 KiB
Raw Blame History

SW Viewer Header — 레이어 눈 아이콘 지침 · Hover · 오른쪽 띠 · 파일명 폭 (2026-10-21)

사용자 요청(여러 차례 정정 포함)으로 SW Viewer의 다음 항목을 반영했습니다. 새 Props·Export는 없고 공개 .d.ts는 그대로입니다.

1. 변경

항목 값
작업 Commit caf4c32 (브랜치 docs/sw-viewer-layer-eye)
main 병합 32e46c3 → f26ec7c (no-ff)
승인 기준 Commit 이 보고서와 같은 테스트 전용 Commit (approvedMainCommit 21fe7a2 → f26ec7c)
  1. 레이어 Popup 가시성: 눈(Eye/EyeOff) 아이콘 버튼 필수, Toggle Switch 금지 — VIEWER.md §4.1, 카탈로그 §9, DESIGN_RULES.md §11, COMPOSITION_PATTERNS.md 7, AI_GUIDE.md(4개 패키지 동기화). 예제 H에 실제 레이어 목록(눈 버튼, 레이어별 독립 전환, onEvent), Storybook 눈 버튼 cursor: pointer.
  2. Viewer Header Hover: 버튼·메뉴·토글·탭의 Hover 면 #266651 제거, 글자·아이콘만 --hm-sw-viewer-accent(#FFC600). 크기·위치 변화 없음. 상태(SWViewerStatus)는 Hover 없음.
  3. 파일명 폭: 실측 반응형 단계가 파일명 글자 폭 대신 Header 폭으로 정한 기본 폭(clamp(140px, 25cqw, 360px))을 사용. 수정 전 1180px에서 짧은 파일명은 Open 130px · 파일명 243px, 긴 파일명은 Open 63px · 295px였고, 수정 후 같은 폭에서 동일합니다. SW 일반 Header는 이미 파일명 길이와 무관해 변경하지 않았습니다.
  4. 오른쪽 띠: trailing의 상태 · 아이콘 버튼(정보·라이선스) · SWHeaderWindowControls가 SWHeader 창 영역과 같은 면의 48px 칸으로 이어짐(여백 없음, 칸 앞 1px 구분선, 위·아래 경계는 객체 면 테두리 하나). 라이선스 버튼은 테두리·선 없음(앞뒤 구분선도 없음), 키보드 Focus 외곽선 유지.
  5. 파일 열기 아이콘: 다른 Viewer Header 아이콘과 같은 검정 외곽선(SWViewerIcon), 테두리·면 없음.

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

검사 결과
Typecheck(sw) · Public API Guard 오류 0 · 7/7 PASS
check:ai-docs · ai-docs.check.mjs · AI 예제 12개 타입 검사 PASS · 46/46 · 오류 0
Viewer Header(dev Storybook, 두 버전 × 1440/950/760): 높이 52 · 넘침 0 · 띠 순서·연속 · Hover 노랑·면 없음·크기 동일 · 상태 표시 전용 · 정보 Popup · 최소화/닫기 Callback · 파일명 짧은/긴 동일 42/42 PASS
오른쪽 띠 실측 경계(getBoundingClientRect): 상태·라이선스·최소화/닫기 위·아래 = 객체 면 안쪽 경계, 가로 선만 두 버전 × 3폭 일치, Hover·Focus 전후 동일
라이선스 버튼 Border(기본·Hover·Active, 가상 요소 포함) · 32 × 48 · Focus · Popup 12/12 PASS
레이어 Popup 눈 버튼 10/10 PASS
npm run build-storybook 후 home-menu-integration · overview / overlays · Source Guard 23/23 · 53/53, 20/20 · 94/94 PASS

알려진 기존 동작: Header를 760px로 줄였다가 1440px로 되돌리면 측정 단계가 처음과 다른 상태로 남습니다. 수정 전 빌드(21fe7a2)에서도 같아 이번 변경과 무관합니다.