SW Header 3차 — 구성요소 표시·메뉴 순서·속성창 4상태·형상 Slot 검증

이번 요청의 구현·실행 범위 기록입니다. 이전 검증 문서는 수정하지 않았습니다. Commit/Push/PR/배포는 하지 않았습니다.

1. 판정

PASS(요청 범위의 실행 검증) — PASS-A~J. 미검증 항목은 7절에 분리했습니다.

2. Git

시작·종료 동일: D:\디자인시스템\HMDesign-SW, feature/sw-package, HEAD 9407c8567f57301659e591c03451cca1b828733c.
상태: M package.json, M package-lock.json(작업 전부터 존재, 이번에 수정하지 않음), ?? docs/sw/, ?? packages/sw/, ?? src/sw/(SW 작업 전체가 아직 미커밋).

3. 구현 요약

요구	구현
로고 외 개별 제거	`SWHeader.hiddenControls` (`SWHeaderHideableControlId` = 기존 `SWHeaderControlId` + `home`/`windowMove`/`minimize`/`close`)
로고 필수	로고는 대상 id가 아님. `home` 제거 시 `SWHeaderHome interactive={false}` 정적 로고
유사 메뉴 순서	`SWHeader.menuOrder` (5개 메뉴끼리만 자리 교환, 지정 우선·누락은 기본 순서·중복/미지 id 무시)
More 연동	기존 Breakpoint·대표 슬롯 재사용. 객체 영역 요소 제거 시 스크립트가 More/대표 결정, 빈 More 미생성
속성창 4상태	기존 `SWHeaderPropertyPanel` + 데이터. 개별 Story 4개 + 비교 Story 1개
형상 Slot	`shapeContent` (undefined=Figma 원형, null/false=빈 영역, ReactNode, Render Prop)

재사용: 기존 controls 필터·More·대표 슬롯 로직, SWHeaderCommitPresence(제거 시 draft Callback 방지), SWHeaderInput, Property 타입·Fixture, 하위 공개 컴포넌트(선택적 show Props만 추가, 기본 true).

4. 실행 검증 (Playwright Chromium + Storybook dev 6024, dist 재빌드 후)

기본 디자인 보존: 변경 전/후 Default(1920 Frame)·Controls(viewport) Story의 Header 하위 98개 요소 위치·크기·display·visibility·color·background를 1920/1800/1440/1180/1080/900/768/640/520/390px에서 비교 — 차이 0.
구성 11종 × 7폭(1920~390) = 77건 PASS: 기본 전체, 구성 A/B/C, 파일 목록·레이어·색상·스타일 그룹 제거, 여러 메뉴 제거, 순서 변경, 숨김+순서 변경. 각 건에서 Header 49px, 로고 32×17 표시, 제거 요소 DOM 부재, DOM 메뉴 순서 = 기대 순서, Header 밖 노출/가로 스크롤 없음, More 열었을 때 빈 목록 없음, 제거 요소가 More에 없음.
- 최초 실행 3건 FAIL(여러 메뉴 제거 @900/768/640): 최소화 제거로 짧아진 창 영역 밖으로 투명한 창 이동 Tooltip이 넘침 → data-reduced 창 영역 clip + 24px 이동 영역 Tooltip 좌측 표시로 수정 후 재실행 0 FAIL.
동작 25건 PASS: 열린 Dropdown 숨김 시 제거, 재표시 값 유지·닫힘, 순서 반전 렌더링·Callback 없음·값 유지, 재정렬 후 Dropdown 열기·Escape Focus 복귀·Tab 순서, 중복/알 수 없는 id 처리, More→문자스타일 대표 슬롯, 대표 메뉴 제거 시 레이어 복귀, 레이어 제거 시 색상이 대표, More 제외/재표시 접근, 속성창 숨김 시 Popup 닫힘·Callback 없음, 정적 로고(클릭 Callback 없음)·홈 재표시 Callback, 로고만 구성(More·창 영역 없음), 콘솔 오류 0.
- 1건 기록: "색상 숨김 Callback 없음" 검사에서 onColorMenuOpenChange(false)가 기록됨. 체크박스 클릭이 Dropdown 바깥 클릭이 되어 숨기기 전에 기존 바깥 클릭 닫힘 계약이 실행된 것이며, 숨김 자체가 만든 Callback이 아님(코드상 제거는 내부 상태만 정리).
속성창 24건 PASS: 개별 Story 실측 314×256 / 314×361 / 314×658 / 314×754(Figma와 일치), 내용 잘림 없음. Enter 확정·Escape 취소·잘못된 숫자 거부. 기본 형상 영역 208×208 @(39,26), 그룹 260px. 비교 Story 4개 동시 렌더·실측 표시, 1440/768/390px 줄바꿈·페이지 가로 스크롤 없음. 형상 Slot 기본/비움/외부 컴포넌트/교체/Render Prop context, 비움·교체 시 패널 높이·라벨 위치 동일, 형상 그룹 항목 추가·삭제 반영. Header 내 속성창 열기·닫기 및 onPropertyPanelOpenChange·onPropertyPanelToggle 보존.
- 자동 검사 1건(외부 지름·반지름 변경)은 측정이 재렌더 전에 실행된 타이밍 문제였고, Browser pane에서 재확인해 입력값 10.0000 / 5.0000 반영을 확인.
Header 내 속성창 경계: 1920/1440/1080/900/768/640/390px에서 패널이 Viewport 안(좁은 폭은 기존 More 경유).
Story 회귀: 기존 24개 + 신규 7개 = 31개 전부 렌더, page/console 오류 0.

5. 빌드 (순차, exit 0)

npm run typecheck:sw → build:sw → typecheck(root, workspaces) → build(root) → build-storybook(31개 SW Story 포함). 경고는 기존 Tailwind bg-[var(...)] CSS 최적화 경고와 chunk 크기 경고뿐이며 신규 경고 없음.

6. Figma와 남은 차이

형상 라벨 x 위치 1~2px(원주 113 vs 111.5, 지름 100 vs 102, 반지름 154 vs 152.5, 면적 100 vs 98.5)와 지름 y 110 vs 108은 기존 구현값을 유지(이번 범위에서 변경 안 함).
로고만 구성에서 녹색 객체 영역 배경은 Header 표면으로 유지(구현 판단).
부분 제거 시 상세보기 블록·창 영역 폭은 Figma에 없는 구현값(auto).
26:11338 색상 돋보기 Overlay는 요청대로 미구현(호스트 연동 대상).

7. NOT VERIFIED

실제 CAD 호스트 앱 연동, 실제 형상 렌더러 연동.
스크린리더 등 보조기기, Firefox/Safari, 터치 기기.
창 이동 Tooltip의 1080px 이상 Hover 애니메이션 중 축소된 창 영역에서의 잘림 정도(시각 확인 안 함).
Figma 픽셀 오버레이 비교(크기·위치 수치 비교만 수행).

5.8 KiB Raw Blame History Unescape Escape