HMDesign/docs/sw/sw-header-additional-verification-2026-10-16.md

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

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

1. 최종 판정: PASS — 요청한 추가 기능과 실행 검증 범위. PASS-AI의 기능·빌드·브라우저 조건을 확인했습니다. Guard 원본 NOT VERIFIED와 남은 디자인 차이는 2122번에 별도로 기록합니다. 이 보고가 미실행 영역을 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를 제외합니다.

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초 짧음