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

SW Header 후속 5개 요구사항 — 최종 통합 검증

이번 요청의 구현·실행 범위에 대한 기록입니다. 과거 PASS 문서를 덮어쓰지 않으며 전체 HMDesign·CAD 호스트·배포 승인을 뜻하지 않습니다.

1. 최종 판정: PASS — 요청한 구현 및 실행 검사 범위. PASS-A~H를 확인했습니다. 별도 Figma 돋보기 Overlay 구현은 요청의 우선 구현 범위 밖인 호스트 연결 대상으로 남기며, Guard와 보조기기 등 미검증은 21번에서 분리합니다.

2. 시작 Git: D:\디자인시스템\HMDesign-SW, feature/sw-package, 9407c8567f57301659e591c03451cca1b828733c. 기존 M package.json, M package-lock.json, ?? packages/sw/, ?? src/sw/, ?? docs/sw/를 보존했습니다. 이번 요청의 명시 경로·브랜치·Commit/Push 금지가 일반 Gitea main 정책보다 우선합니다. 시작 파일을 QA baseline에 복사하고 SHA-256을 기록했습니다.

3. 재사용: 기존 Dropdown 8종·레이어 아이콘·Color/Number parser·SWHeaderInput·속성창 Property/Selection 타입·More·K 가이드·1400ms 창 이동·문서 목록·로고 슬롯·창 제어를 재사용했습니다. 다른 패키지 소스·기존 root manifest/lock은 수정하지 않았습니다. 원본 자산 45개와 과거 검증 문서 6개는 baseline과 바이트 단위로 같습니다.

4. 속성Bar 디자인/크기: 새 공개 SWHeaderPropertyBar. Figma 26:10492를 직접 확인해 최대 1222×28, #271F13, 좌우/하단 #08251C, 하단 radius 6, inset shadow를 구현했습니다. 독립 기준 Story 실측 1222×28px입니다. 연결된 바는 객체 수정 영역의 실제 왼쪽부터 부모의 남은 폭을 사용합니다. 1920px 실제 Header에서 바 1222×28, Header 49px을 확인했으며 x=377을 하드코딩하지 않았습니다. 기존 Noto Sans KR 정책의 차이는 20번을 따릅니다.

5. 열기/닫기: 기존 속성Bar 버튼 및 좁은 화면의 More를 연결했습니다. 미전달 시 내부 상태, propertyBarOpen/onPropertyBarOpenChange의 Controlled 상태, defaultPropertyBarOpen, 기존 onPropertyBarToggle을 지원합니다. 반복 클릭 닫기·외부 상태 변경을 확인했습니다. 바와 속성창은 동시 표시 및 독립 닫기가 가능하며, 바 토글이 다른 Dropdown 상태를 초기화하지 않습니다. 호스트 콘텐츠는 열린 바의 별도 28px 공간을 예약할 수 있습니다.

6. 동적 데이터/검증: 속성창과 같은 SWHeaderProperty/Selection 레코드 및 onPropertyChange를 공유합니다. 객체 교체·필드 추가/삭제·라벨·순서·값·외부 갱신·전체/개별 ReadOnly/Disabled, min/max/validate를 확인했습니다. Enter/Blur 확정·Escape 취소·유효하지 않은 값 복원·편집 중 필드 삭제 시 draft 폐기를 확인했습니다. 값은 호스트 데이터이며 원/수치/CAD 계산을 패키지 기본값으로 넣지 않았습니다. Bar의 select는 option id 입력 검사, slider는 숫자 편집, computed는 읽기 전용으로 처리합니다.

7. 메뉴 단위 구성: controls?: readonly SWHeaderControlConfig[]와 SWHeaderControlId를 공개했습니다. document/drawingMode/5개 메뉴/details/propertyBar/propertyPanel/print/popupGuide 각각을 allowlist로 구성합니다. 개별 제거·여러 개 제거·일부만 사용·모두 제거·재추가·visible:false/복원·배열 순서·허용 라벨 변경을 실제 UI로 확인했습니다. 파일명 데이터와 문서 접근성 접두사, K 아이콘과 접근성 이름을 구분했습니다. 컨트롤 내부 옵션 API는 기존과 같습니다. 설정 미전달 시 기존 1920px 디자인·계층을 유지하며, 설정 모드는 개별 컨트롤을 배열 순서로 같은 객체 영역에 배치합니다.

8. More/값/Callback: 기존 Breakpoint를 유지합니다. 제거 항목은 More에서도 제외하고, 남은 레이어 또는 첫 필드를 대표로 사용하며 대표 삭제 시 대체합니다. More에서 필드를 선택하면 표시·열림·Focus가 연결됩니다. 재정렬은 keyed 노드를 유지합니다. 편집 중 메뉴의 구조적 제거는 draft를 폐기하고 불필요한 데이터 Callback을 보내지 않습니다. 일반 Dropdown 닫힘의 기존 commit 동작은 유지합니다. 재추가 시 외부 선택값은 보존하고 내부 Dropdown은 닫힙니다. 열린 메뉴 재정렬 시 경계 위치도 다시 계산합니다. 개별 컨트롤 하나만 남긴 7개 폭을 포함한 경계 검사 84/84가 통과했습니다.

9. Text Stroke Story: 지정 제목·원본 스크린샷 영역·전용 import를 제거했습니다. 나머지 콘텐츠·실제 Header Typography/색상·다른 Figma 비교 Story는 유지했습니다. 원본 PNG 파일은 보존했습니다.

10. 반복 선언의 원인: 작업 전 원본 packages/sw/src/theme/sw.css 1394행에 정확한 solid-stroke-width 참조가 실제로 있었고 변수는 131행에 정의되어 있었습니다. packages/sw/src/index.ts → 원본 CSS, build.mjs → dist/styles.css, Story → 공개 @hm-design/sw/styles.css → dist의 경로를 확인했습니다. 원본과 산출물이 달랐으므로 dist만 삭제하는 방식은 다음 build 때 원본에서 다시 포함되는 구조입니다. 소스·빌드/복사 스크립트·Storybook import·중복 정의를 조사했고 별도 생성기가 이 선언을 추가하거나 dist가 src를 역생성하는 증거는 없습니다. 과거 사용자가 실제 편집했던 파일 위치나 당시 캐시까지 관찰한 것은 아니므로 그 행위를 단정하지 않습니다.

11. 원본 수정: packages/sw/src/theme/sw.css의 :is(.hm-sw-header__layer-detail, .hm-sw-header__menu-detail) > span Stroke 선언과 유일한 미사용 --hm-sw-header-solid-stroke-width를 제거했습니다. 덮어쓰기 0은 추가하지 않았습니다. 기존 text-shadow·다른 메뉴 텍스트·SVG·상세 버튼 크기 및 Hover는 보존했습니다. 이전 text-stroke-width 변수 제거와 구분한 새 수정입니다.

12. Build/HMR 재생성 방지: 원본/패키지 dist와 최종 Storybook CSS 14개에서 해당 선언·변수 일치 0입니다. 실제 브라우저에서 5개 상세 버튼의 Default/Hover 및 열린 선택 필드 상태를 확인했습니다. 일시적 CSS 검사 표식을 원본에 넣고 패키지 빌드 → 브라우저 computed 반영 → 원본 복원·재빌드 → 표식 제거 반영 → 새로고침까지 실행했습니다. Vite WebSocket의 /packages/sw/dist/styles.css update와 computed 변경을 확인했습니다. CSS import는 Vite의 js-update 모듈 형태로 전달됩니다. 검사 표식은 최종 소스/산출물에 없습니다. 재생성 방지 HMR 검사 8/8입니다. 현재 브라우저에서 오래된 Stroke를 적용하는 캐시 증거는 없었습니다.

13. btn_colorize 비교: Figma 26:11301 및 Default 26:11302 / Hover 26:11305 context·스크린샷을 직접 확인했습니다. 각각의 원본 SVG를 colorize-default.svg/colorize-hover.svg로 저장했습니다. 버튼 실측 24×24, 두 SVG의 원본·렌더 크기 18×18, radius 3, 지정 gradient·기본 border·drop shadow, Hover #DA6813 border·검정25% overlay·전용 SVG를 확인했습니다. 임시 Figma URL은 런타임에 없습니다. 기존 color-pick.svg는 기존 자산 보존 원칙으로 남겼습니다.

14. 아이콘/Callback: 기존 색상 메뉴의 색상 추출 위치를 교체했습니다. Default/Hover/Mouse Leave/키보드 focus-visible/Enter 클릭을 확인했습니다. Hover 시 Callback 없음, 클릭 시 기존 onColorPick 1회·메뉴 닫힘, 기존 색상값·모드 유지가 통과했습니다. 색상 입력 검증·사용자 색상·ByLayer/ByBlock 필수 선택과 선택 강조도 기존 회귀 검사를 통과했습니다.

15. 26:11338 Overlay: 패키지 내 실제 색상 돋보기 Overlay 구현은 없습니다. 기존 onColorPick으로 호스트가 연결할 수 있으며 별도의 임의 색상 선택창은 만들지 않았습니다. 현재 구현 상태는 사용 가이드·Story에 명시했습니다.

16. 반응형: 실제 Header 실측 폭 1920/1440/1080/900/768/640/390px에서 49px·가로 넘침 없음·바 28px·viewport 경계·스크롤로 마지막 필드 접근·More 대표 전환·삭제 후 대체·Dropdown 경계를 확인했습니다. 각 컨트롤 단독 구성도 같은 7개 폭에서 검사했습니다. 기존 속성창/K 가이드 경계와 창 이동 Motion은 기존 회귀와 보존 검사로 확인했습니다. 서로 다른 팝업 상태와 속성Bar는 독립적이며 overlay z-index는 기존 Dropdown보다 낮습니다.

17. Story 회귀: 기존 21개 export를 보존하고 Property Bar / Dynamic Controls / Colorize 3개를 추가해 총 24개입니다. 모든 Story 렌더·적용 Header 높이와 기존 주요 상호작용을 검사했습니다. 기존 통합 195/195, 기존 보완 43/43, 신규 122/122, 추가 경계 84/84, HMR 8/8이 통과했습니다. 보완 원본의 45개 중 이번 라벨 API로 수정한 DocumentTitle/Fields의 바이트 동일성 2개는 제외하고 나머지 보존/상호작용을 검사했습니다. 모든 가능한 호스트 데이터 조합의 전수 검증이라는 뜻은 아닙니다.

18. 명령/경고: package.json의 실제 명령을 확인해 최종 SW Typecheck → SW Build → Root Typecheck → Root Build → Storybook Build 순차 실행, 모두 exit 0입니다. pre 훅에 포함된 build:packages 반복은 기존 명령 정의 그대로입니다. SW 출력 styles.css 약85.83kB/index.js 약686.35kB. Root/Storybook의 기존 유형 Tailwind bg-[var(...)] CSS 최적화 경고·500kB chunk 경고·Storybook 플러그인 시간 안내는 남습니다. SW 신규 타입/빌드 오류나 신규 형태의 소스 경고는 없습니다. 로컬 초기 개발 서버의 전역 설정/registry 쓰기 제한은 브라우저 검증용 서버에서 해결했고 제품 소스를 수정하지 않았습니다. lint 명령은 정의되어 있지 않습니다.

19. 변경 파일: baseline 대비 소스/문서 23개(기존 19개 수정, 신규 자산/컴포넌트/본 보고 4개 추가), 생성 dist 제외입니다. 기존 root package.json/lock은 이번 작업 전후 바이트가 같습니다. 상세 목록은 아래에 있습니다.

20. Figma와 남은 차이: 기존 패키지의 Noto Sans KR 400/700 정책을 유지해 Figma Dotum Regular와 글자 폭/획/베이스라인이 다릅니다. 바의 수치는 호스트 예시 데이터이고 산술 관계를 계산/보정하지 않습니다. 구성 모드는 사용자가 지정한 순서대로 펼친 구성이므로 승인된 기본 그룹 배치와 다를 수 있으며 미설정 기본 디자인은 보존합니다. 과거 보고에 있는 선스타일 content 폭 차이와 운영 호스트별 font/CSS 커스터마이징은 이번 범위 밖입니다.

21. NOT VERIFIED: Guard 원본 status/staticStatus는 NOT VERIFIED, FAIL 0 / 미검증65건(ENTRY-002 1, REUSE-004 43, SCOPE-001 15, TOKEN-001 3, TOKEN-002 3)입니다. styleEvidence는 STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED이며 checks 배열은 비어 있습니다. 이를 전체 디자인 또는 동적 입력의 PASS로 확대하지 않습니다. 독립 SW CSS 공개 entry, Story native 호스트 조작, 동적 class/style 및 guard scope 해석 한계는 브라우저 증거와 별개로 남깁니다. 픽셀 단위 자동 Figma 이미지 diff, 실제 Figma 프로토타입 직접 재생, Windows IME/스크린리더 실기기, 모든 대비 조합, CAD 연산·파일/OS 창 동작·실제 26:11338·외부 소비앱 캐시·배포는 미검증입니다.

22. 종료 Git: 시작과 같은 feature/sw-package / 9407c8567f, 기존 root 2개 M와 SW 3개 폴더 Untracked 범주를 유지합니다. git diff --check 통과. Stage/Commit/Push/PR/Merge/Publish/배포, Reset/Clean/강제 Checkout을 수행하지 않았습니다. 사용자 검토/승인을 기다립니다.

변경 파일 목록

MOD packages/sw/README.md
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/SWHeaderColorMenu.tsx
MOD packages/sw/src/components/sw-header/components/SWHeaderDocumentTitle.tsx
MOD packages/sw/src/components/sw-header/components/SWHeaderDropdown.tsx
MOD packages/sw/src/components/sw-header/components/SWHeaderFields.tsx
MOD packages/sw/src/components/sw-header/components/SWHeaderInput.tsx
MOD packages/sw/src/components/sw-header/components/SWHeaderKGuide.tsx
MOD packages/sw/src/components/sw-header/components/SWHeaderLayerMenu.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/SWHeaderStyleListMenus.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 packages/sw/src/assets/colorize-default.svg
ADD packages/sw/src/assets/colorize-hover.svg
ADD packages/sw/src/components/sw-header/components/SWHeaderPropertyBar.tsx
ADD docs/sw/sw-header-followup-five-verification-2026-10-16.md

검증 증거

QA root: C:\Users\user\.codex\visualizations\2026\10\16\01a1439a-bd89-7030-8978-48f687e44b0d\sw-header

• baseline/, baseline-sha256.json, git-start.txt: 기존 미커밋 파일 보존본.
• legacy-verify.mjs / browser-results.json: 기존 통합195개.
• legacy-followup.mjs / followup-results.json: 기존 보완43개·원본 보존.
• new-verify.mjs / new-results.json: 신규122개, 실제7개 Header 폭.
• edges.mjs / edges-results.json: 단독 구성·열린 메뉴 재정렬84개.
• hmr.mjs / hmr-results.json / hmr-build.log: 재빌드·HMR·복원·새로고침8개.
• build-results.json / final-*.log: 최종 순차5개 명령.
• guard-final.json: 원본 미검증65개, 임의로 PASS로 변경하지 않음.
• changed-files.json: baseline 대비 파일 목록.
• header-bar-1920.png, header-bar-390.png, colorize-hover.png: 실제 React 렌더.

시간 기록 (Asia/Seoul)

• Started At: 2026-10-16 16:26:26 KST
• Completed At: 2026-10-16 16:50:41 KST
• Actual Duration: 24분 15초
• Estimated Duration: 약 90분
• Variance: 예상보다 65분 45초 짧음