# SW Header 추가 수정 검증 — 2026-10-16

현재 요청 A–H의 결과입니다. 기존 통합 작업/과거 PASS 기록을 덮어쓰지 않습니다. CAD 프로그램 통합이나 전체 HMDesign 프로젝트 승인 판정이 아닙니다.

1. **최종 판정: PASS — 요청한 추가 기능과 실행 검증 범위.** PASS-A~I의 기능·빌드·브라우저 조건을 확인했습니다. Guard 원본 NOT VERIFIED와 남은 디자인 차이는 21~22번에 별도로 기록합니다. 이 보고가 미실행 영역을 PASS로 바꾸지 않습니다.

2. **시작 Git 상태.** 절대 경로 `D:\디자인시스템\HMDesign-SW`, Branch `feature/sw-package`, HEAD `9407c8567f57301659e591c03451cca1b828733c`. 기존 상태는 `M package.json`, `M package-lock.json`, `?? packages/sw/`, `?? src/sw/`, `?? docs/sw/`였습니다. 사용자 지정 Worktree/Branch를 사용했고 기존 변경을 보존했습니다. 시작 시 패키지·Story·문서 복사본과 SHA-256을 QA 경로에 남겼습니다.

3. **재사용.** 기존 Dropdown 8종·id 기반 데이터·Color/Number parser·SWHeaderInput·선 패턴·문자/치수 SVG·레이어 상태 아이콘·문서 목록·More 대표 필드·로고 슬롯·창 제어를 사용했습니다. 다른 패키지 소스는 수정하지 않았습니다.

4. **상세 5개 Hover: PASS.** 배경 .15→.25, radius 24→25, Mouse Leave 복원, Hover Callback 없음, 기존 클릭 1회/닫기, focus-visible/disabled 보존. 치수 상세는 실제 Hover 26:10799(기본 아이콘·글자 100%)이며 Variant3를 혼합하지 않았습니다. 다른 4개는 원본 Hover 아이콘·글자 35%입니다.

5. **5개 버튼 크기: PASS.** 실제 브라우저 측정은 레이어 113×24 / 색상 99×24 / 선스타일 128×24 / 문자스타일 142×24 / 치수스타일 142×24px로 각 Figma 기준과 일치합니다. Noto Sans KR에서도 텍스트가 버튼 안에 잘리지 않는 것을 확인했습니다.

6. **ByLayer/ByBlock Hover: PASS.** 82.5×28px, 글자 #FF5C00, 검정 text-shadow 유지. 선택된 버튼에 Hover해도 #62533D 선택 배경과 On Inset Shadow가 남습니다. Mouse Leave에서 전경색 #D4CBBD로 돌아옵니다.

7. **필수 선택: PASS.** 초기 ByLayer, 재클릭 유지·중복 Callback 없음, 다른 모드로 전환, Controlled ByLayer/ByBlock/null 변경, 팔레트/사용자 색상 선택 후 정확히 하나 표시를 확인했습니다. null의 직접 색상 API 의미와 색상값은 유지하고 모드 표시만 마지막 유효 모드를 기억합니다.

8. **레이어 목록 Hover/Selected: PASS.** 갈색 배경·주황 이름을 동일 적용합니다. 다른 행 Hover와 Mouse Leave에서 선택을 유지하고, 실제 선택 Callback을 받은 호스트 데이터 변경으로 선택 강조가 이동합니다. 기존 전구/눈꽃/자물쇠 매핑은 그대로입니다. 제공되지 않은 별도 레이어 상세 편집 창은 만들지 않았습니다.

9. **선/문자/치수 Hover/Selected: PASS.** #62533D / #FF5C00, 선과 치수 미리보기도 동일 강조입니다. CENTER 22·7·22·7 및 HIDDEN 33·33의 원래 패턴, 문자 미리보기와 치수 원본 SVG를 유지했습니다. 상단 필드/문서 선택 정책은 변경하지 않았습니다.

10. **속성창 4개 상태: PASS.** SWHeaderPropertyPanel 하나가 외부 selection/properties/groups/expandedGroupIds에 따라 바뀝니다. Story fixture 측정: 선택 없음 314×256 / 전체 선택 314×361 / 원 1개 314×658 / 모두 펼침 314×754px. 객체 개수·수치·예시 텍스트는 패키지에 고정하지 않았습니다. Dim 없는 non-modal 도구창입니다.

11. **동적 입력/Callback: PASS.** Text/Number/Select/Color/Slider/Computed, id/group/order, validation, unit/annotation, ReadOnly/Disabled, 외부 값 변경, 항목 추가/삭제, 선택 객체 교체, 옵션 삭제를 지원합니다. Enter/Blur 확정·Escape 취소·변경 없는 중복 보고 방지를 확인했습니다. 삭제된 항목이나 이전 선택의 draft는 폐기합니다. 펼침이 속성값을 바꾸지 않으며, 원형 그래픽의 추가 일반 항목도 위치 영역과 겹치지 않습니다. CAD 계산/객체 변경은 호스트 책임입니다.

12. **내부 아이콘: PASS.** Default→Hover→Active→다시 Default 및 호스트 Callback을 확인했습니다. 29×27.13px wrapper, 원본 SVG/Gradient/Active 금색 테두리 사용. Figma SVG export root가 29×28로 반올림되어 root 크기는 변경하지 않았습니다. 기존 CAD 액션 계약은 없어 toolActive/onToolActiveChange/toolLabel을 통해 호스트에 상태만 통지합니다.

13. **닫기 버튼: PASS.** 원본 44×30 SVG의 Default/빨강 Hover·흰 X·클릭 닫기를 확인했습니다. Escape와 속성창 버튼 재클릭도 닫으며, Desktop은 원래 속성창 버튼, Mobile은 More로 Focus를 돌립니다. Header 종료 Callback과 분리했습니다.

14. **K 가이드: PASS.** 기존 40×38 K 버튼 하나를 재사용합니다. 아래 208×149 가이드, 원본 이미지/마스크, 녹색 배경·금색 경계·문구, 511ms 표시 전환, 버튼→팝업 이동 시 Hover 유지, Hover 종료 닫기를 확인했습니다. 기존 640px Breakpoint 아래에서는 기존 More 항목에 같은 가이드를 연결합니다.

15. **K 이미지 반복: PASS.** 단일 원본 이미지의 CSS transform을 연속 보간해 Pan/Zoom합니다. 400ms 지연/1022ms 전환 → 100ms 지연/1022ms 전환 → 150ms 지연/511ms 전환, 마지막 화면 400ms 유지 후 511ms 복귀로 반복합니다. 브라우저 시간 샘플에서 4개 상태·다음 반복과 15개 이상의 중간 transform을 확인했습니다. 재진입 초기화·타이머 정리·Reduced Motion 첫 프레임 정지·More Escape 후 재열기 시 잔상 없음도 확인했습니다.

16. **Text Stroke Width: PASS.** 요청한 일반 선언과 `--hm-sw-header-text-stroke-width` 변수는 제거했습니다. 일반 자기 색 Stroke 중복 선언도 없습니다. 검정 text-shadow·상세 pill의 별도 solid-stroke-width·SVG/Border/선 Stroke는 유지했습니다.

17. **반응형/접근성: PASS(실행 범위).** 1920/1440/1080/900/768/640/390px에서 Header 49px, Header 가로 넘침 0, 속성창/K 가이드 viewport 경계, 내부 스크롤을 확인했습니다. 기존 Breakpoint는 그대로입니다. 실제 label/control id·접근성 이름·dialog 연결·키보드 Enter/Escape·Focus 복귀·ReadOnly/Disabled를 확인했습니다. 직접 Windows 입력기/보조기기 검증은 22번을 따릅니다.

18. **기존 Story/회귀: PASS.** 기존 17개 export를 유지하고 Property Panel / Property Panel Variants / K Guide / Additional Hover 4개를 추가하여 빌드 index 21개입니다. 모든 Story 렌더와 적용되는 Header 높이를 확인했습니다. 추가로 문서 1개·New/Open·색상 입력 검증·사용자 색상 2개 및 Callback·선 스케일/패턴·레이어 3개 Toggle·대표 More 이동을 확인했습니다. 기존 모든 상호작용의 가능한 조합을 전수 검사했다는 뜻은 아닙니다.

19. **빌드/검증: PASS.** 실제 package.json의 `npm.cmd run typecheck:sw`, `build:sw`, Root `typecheck`, Root `build`, `build-storybook` 최종 실행이 모두 exit 0입니다. 통합 브라우저 189/189, 보완 브라우저/소스 보존 45/45, 사용자 색상·More 최종 경계 별도 PASS, pageerror 0. SW 출력은 styles.css 약 82.48kB / index.js 약 674.64kB이며 원본 PNG가 data URI로 포함됩니다. Root의 기존 유형 Tailwind `bg-[var(...)]` 최적화 경고와 500kB chunk 경고, Storybook 번들 크기/시간 안내는 남습니다. 별도 lint 명령은 package.json에 없고 실행하지 않았습니다.

20. **변경 파일.** 시작 baseline 대비 기존 17개 수정 + 새 구현/자산 17개 추가, 이 검증 보고서 1개 추가 = 소스/문서 35개입니다. 기존 root package.json/lock 변경은 이번 작업에서 수정하지 않았습니다. 아래 목록은 생성 dist를 제외합니다.

```text
MOD packages/sw/README.md
MOD packages/sw/src/assets.d.ts
ADD packages/sw/src/assets/k-guide-mask-default.svg
ADD packages/sw/src/assets/k-guide-mask-fit.svg
ADD packages/sw/src/assets/k-guide-mask-pan.svg
ADD packages/sw/src/assets/k-guide.png
ADD packages/sw/src/assets/layer-detail-hover.svg
ADD packages/sw/src/assets/property-circle.svg
ADD packages/sw/src/assets/property-close-hover.svg
ADD packages/sw/src/assets/property-close.svg
ADD packages/sw/src/assets/property-expand.svg
ADD packages/sw/src/assets/property-footer.svg
ADD packages/sw/src/assets/property-title-single.svg
ADD packages/sw/src/assets/property-title.svg
ADD packages/sw/src/assets/property-tool-active.svg
ADD packages/sw/src/assets/property-tool-hover.svg
ADD packages/sw/src/assets/property-tool.svg
MOD packages/sw/src/components/sw-header/index.ts
MOD packages/sw/src/components/sw-header/SWHeader.tsx
MOD packages/sw/src/components/sw-header/types.ts
MOD packages/sw/src/components/sw-header/components/SWHeaderActions.tsx
MOD packages/sw/src/components/sw-header/components/SWHeaderColorMenu.tsx
MOD packages/sw/src/components/sw-header/components/SWHeaderDropdown.tsx
MOD packages/sw/src/components/sw-header/components/SWHeaderInput.tsx
ADD packages/sw/src/components/sw-header/components/SWHeaderKGuide.tsx
MOD packages/sw/src/components/sw-header/components/SWHeaderLineStyleMenu.tsx
MOD packages/sw/src/components/sw-header/components/SWHeaderMore.tsx
MOD packages/sw/src/components/sw-header/components/SWHeaderProperties.tsx
ADD packages/sw/src/components/sw-header/components/SWHeaderPropertyPanel.tsx
MOD packages/sw/src/theme/sw.css
MOD src/sw/sw-header.stories.tsx
MOD src/sw/sw-stories.css
MOD docs/sw/sw-header-design-spec.md
MOD docs/sw/sw-header-usage.md
ADD docs/sw/sw-header-additional-verification-2026-10-16.md
```

21. **Figma와 남은 차이.** 기존 SW의 Noto Sans KR(400/500/700)을 유지해 Dotum 원본과 글자 폭/획/베이스라인은 다릅니다. 폰트 준비 완료 후 선스타일 전체 폭 473.1875px, 첫 열 187.1875px로 Figma 468/182보다 +5.1875px입니다(기존 content 폭 정책 보존). 5개 상세 버튼과 4개 속성창의 외곽 크기는 기준과 일치합니다. 투명도 thumb는 호스트 min/max/value에 비례하므로 Figma 예시의 장식 위치와 다를 수 있으며 임의 수치 변환을 넣지 않았습니다. 내부 도구 SVG root의 28px export 반올림도 12번과 같습니다. 반복 복귀 전환은 Figma 원본에 없어 요청에 따라 추가한 구현값입니다.

22. **NOT VERIFIED.** Guard 원본 status/staticStatus는 NOT VERIFIED, FAIL 0 / 미검증 issue 28입니다. 독립 SW CSS import 해석(ENTRY-002), Story 호스트 native button(REUSE-004), SW token 연결/동적 class/style 해석(TOKEN-001/002)이 남습니다. styleEvidence는 STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED이며 원본 JSON은 변경하지 않았습니다. 실제 브라우저 결과는 별도 증거입니다. HM UI와 독립된 SW 패키지여서 native label/select/range를 사용한 근거는 명세에 기록했습니다. 모든 픽셀/모든 애니메이션 프레임의 자동 이미지 diff, Figma 프로토타입 직접 재생 시각 동기 비교, 실제 Windows 한글 IME, screen reader·색 대비 전수 감사, 실제 CAD·파일/OS 창 동작·운영 배포는 미검증입니다.

23. **종료 Git 상태.** Branch/HEAD는 시작과 같은 `feature/sw-package` / `9407c8567f57301659e591c03451cca1b828733c`. 상태 범주는 기존과 동일한 root 2개 M 및 SW 3개 폴더 Untracked입니다. git diff --check 통과. Stage/Commit/Push/PR/Merge/Publish/배포를 수행하지 않았습니다. 기존 문서/홈/창 제어/레이어 아이콘/필드 소스, 기존 자산 30개, 과거 검증 로그 5개, 창 이동 1400ms CSS 블록은 baseline과 바이트 단위로 동일합니다. 사용자 검토/승인을 기다립니다.

## 증거 위치

QA root: `C:\Users\user\.codex\visualizations\2026\10\16\01a14374-df22-7311-831d-2d3a4c522f95\sw-header`

- `baseline/`, `baseline-sha256.json`, `git-start.txt`: 시작 보존본.
- `figma/`: 직접 확인한 Figma 디자인 context.
- `verify.mjs` / `browser-results.json`: 통합 189개.
- `followup.mjs` / `followup-results.json`: 보완 45개 및 원본 보존.
- `palette-results.json`, `final-edge-results.json`, `line-font-ready.json`: 사용자 색상/More/폰트 준비 후 폭.
- `final-panel-none/all/circle/expanded.png`, `verified-k-guide.png`: 실제 React 렌더.
- `guard.json`: 원본 Guard 판정(덮어쓰지 않음).
- `sw-typecheck-final.log`, `sw-build-final.log`, `root-typecheck-final.log`, `root-build-final.log`, `storybook-build-final.log`: 최종 명령 로그.
- `changed-files.json`: baseline 대비 파일 목록(보고서 추가 전 수집).

## 시간 기록 (Asia/Seoul)

- Started At: 2026-10-16 15:45:05 KST
- Completed At: 2026-10-16 16:17:40 KST
- Actual Duration: 32분 35초
- Estimated Duration: 약 90~130분
- Variance: 예상보다 57분 25초~97분 25초 짧음