56 lines
5.8 KiB
Markdown
56 lines
5.8 KiB
Markdown
# 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 픽셀 오버레이 비교(크기·위치 수치 비교만 수행).
|