# SW Header — 1400ms 및 Composed Controls Hover 통합 검증

## 1. 최종 판정: PARTIAL

요청 범위의 Chrome 브라우저 통합 검사 170개와 이웃 필드 영향 검사 5개, 픽셀 비교, Root Typecheck / SW Build / Root Build / Storybook Build는 PASS입니다. 실제 네이티브 호스트 창 제어·다른 브라우저·보조기술·독립 SW Guard coverage는 NOT VERIFIED이므로 전체 PASS로 확대하지 않습니다.

## 2. 작업 시작 시 Git 상태

- 경로 `D:\디자인시스템\HMDesign-SW`, branch `feature/sw-package`.
- HEAD `9407c8567f57301659e591c03451cca1b828733c`.
- 기존 변경 ` M package-lock.json`, ` M package.json`, `?? docs/sw/`, `?? packages/sw/`, `?? src/sw/`.
- 기존 파일 SHA-256과 수정 전 CSS·필드 TSX·Story 사본을 `_local/sw-speed-hover-qa/`에 보존했습니다. 미추적 파일을 삭제·초기화하지 않았습니다.

## 3. 창 이동 Motion 변경 전후

전체 1640 → **1400ms**, Tooltip 520 → **약 443.90ms**, 이동 완료 1040 → **약 887.80ms**, 완료 후 유지 600 → **약 512.20ms**입니다. 모든 구간은 1400/1640(35/41)로 동일하게 단축했습니다. 주기는 약 14.63% 짧아지고 재생 속도는 약 17.14% 빨라집니다. 원본 GIF와 다른 사용자 요청 사항입니다.

세 CSS animation duration만 변경했습니다. 실제 Hover에서 1.4초와 2.8초 iteration을 확인했고, 이탈 시 원래 SVG로 복귀합니다. Drag 중 paused/Tooltip 숨김, 호스트 Pointer Capture 이벤트 전달, Reduced Motion의 원래 아이콘·정적 Tooltip도 통과했습니다.

## 4. 이동 경로 보존

세 `@keyframes`의 좌표·백분율·보간 선언은 수정 전과 바이트 단위로 동일합니다. 이전 41개 브라우저 프레임을 시간 × 35/41에 맞춰 다시 측정했으며 창·커서·Tooltip의 상대 위치 차이는 **최대 0px**였습니다. 따라서 오른쪽 28px / 위쪽 4.5px, 커서 상승·등장 순서·가속/감속 비율은 보존합니다. GIF와의 공간 오차 기록을 현재 시간까지 같다는 뜻으로 해석하지 않습니다.

## 5. Composed Controls Hover 대상

공용 레이어·색상·선스타일·문자스타일·치수스타일 필드의 버튼 전체 Hover에 적용했습니다. 동일 컴포넌트를 사용하는 Full Header에도 같은 규칙을 적용합니다. Composed Controls의 기존 레이어·색상·상세보기 예제는 보존하고 기존 공개 선/문자/치수 컴포넌트와 5개 필드의 고정 Hover 비교를 추가했습니다. 새 Story나 새 공개 API는 없습니다.

상세보기는 이번 필드 강조에서 제외합니다. `속성Bar`/`속성창`의 텍스트 전용 Hover, caption·검정 divider·기존 선택 토글·배경을 유지하고 Hover Border를 추가하지 않았습니다.

## 6. 텍스트 · 선 · 아이콘 색상

- PASS: 각 필드 버튼의 빈 모서리 부분에 Hover해도 모든 라벨·값이 `rgb(255,198,0)`입니다. 선스타일의 가중치·스케일, 폰트 이름 텍스트도 포함합니다.
- PASS: 선 미리보기 5개 조각의 채움만 노란색, 1px 검정 border와 형태·위치 유지.
- PASS: 문자 미리보기는 기존 텍스트이며 색만 변경. 원래 별도 검정 Stroke/그림자가 없으므로 새로운 외곽선을 추가하지 않았습니다.
- PASS: 치수 Hover SVG는 foreground path의 흰 채움 1곳만 `#FFC600`으로 변경. mask용 흰 rect와 검정 외곽선 path·참조·좌표는 원본과 동일합니다. 60 × 15px wrapper에서 원본/Variant visibility만 교대하며 CSS filter는 없습니다.
- PASS: 색상 견본의 실제 값 `#ffe500`, chip border, 레이어 상태 SVG·막대 색 유지. 표시 문자열·실제 값은 변경되지 않습니다.
- PASS: Default / Selected / Disabled / Disabled+Selected × 5개 필드에서 Hover·이탈·콜백을 확인. Disabled는 새 Hover 효과가 없고 Selected의 기존 색은 유지됩니다. 선택 단독 상태의 미리보기 색을 확장하지 않았습니다.

## 7. 검정 외곽선 · 기존 Hover Border

기존 노란 Gradient `::after`의 선언은 그대로이며 enabled Hover에서는 opacity 1, Disabled에서는 0입니다. 검정 선 border·치수 mask는 유지합니다. 4배 브라우저 캡처에서 5개 필드 모두 Default와 Hover의 순수 검정 픽셀 위치 집합이 동일했습니다. 선 미리보기 필드는 1920개, 치수 필드는 2903개의 검정 픽셀이 유지됐습니다. 문자 필드는 원래 별도 검정 픽셀이 0개였습니다.

5개 Default 화면은 수정 전과 후의 PNG 픽셀이 모두 동일했습니다. Hover 전후 버튼·텍스트·미리보기의 크기/위치·배경·그림자가 같았고, 5개 이웃 영향 검사에서도 Hover한 필드 외 텍스트 색은 변하지 않았습니다.

## 8. Storybook 시각 검증

실제 빌드된 `SW / Header / Window Move Motion`과 `Composed Controls`를 Chrome `155.0.8059.79`에서 열었습니다. 속도 보정된 9개 고정 프레임이 실제 1400ms CSS animation을 pause하고, 반복 경계에서 문구가 숨겨지는 것을 확인했습니다. Composed의 실제 세 스타일 필드와 5개 고정 Hover, 기존 속성창 클릭·선택 상태를 확인했습니다. 비교 PNG와 Story 전체 캡처도 시각 검토했습니다.

이는 실제 공용 React 컴포넌트 결과이며 별도 HTML/CSS 모방 화면이 아닙니다. 개발 서버 프로세스나 포트를 변경하지 않고 임시 localhost 서버에서 검사 후 종료했습니다.

## 9. 반응형 · Callback 회귀

요청 폭 1920 / 1800 / 1440 / 1180 / 1080 / 900 / 768 / 640 / 390px와 경계 1079 / 639px를 추가 확인했습니다. 모두 Header 높이 49px, Header/문서 가로 overflow 0px이며 기존 auxiliary 필드·속성·색상·인쇄/가이드의 More 이동 정책이 유지됐습니다. 이동 영역도 88 / 24 / 숨김 그대로입니다.

일반/선택 필드 클릭과 Enter 콜백, Disabled 클릭 차단, Full Header 5개 필드 콜백, More로 이동한 선스타일 콜백·메뉴 닫힘, 상세보기 선택 토글, 최소화·종료 콜백을 확인했습니다. Drag의 원래 div 이벤트와 호스트 모의 Pointer Capture·move/up도 통과했습니다. 실제 OS 창 제어는 NOT VERIFIED입니다.

## 10. Typecheck · Build · Storybook · Guard

- PASS: `npm.cmd run typecheck`. 기존 pretypecheck의 theme 확인·workspace package build와 SW Build도 포함합니다.
- PASS: SW package build(`build:sw`, 위 prerequisite 포함), `npm.cmd --ignore-scripts run build`, `npm.cmd --ignore-scripts run build-storybook`. 이미 통과한 prerequisite은 반복하지 않았습니다.
- PASS: 브라우저 통합 조건 170개, 이웃 영향 5개, 5개 Default 픽셀 보존과 검정 픽셀 비교. pageerror 0건.
- 기존 빌드 경고: 문서 예시 `bg-[var(...)]`, Storybook `:host-context` minifier, 500kB 초과 bundle와 plugin timing 안내. exit 0이며 범위 밖 코드를 수정하지 않았습니다.
- Guard 1회: `node scripts/ai-generation-guard.mjs --target . --profile STORYBOOK --scope PARTIAL --files src/sw/sw-header.stories.tsx,packages/sw/src/theme/sw.css,packages/sw/src/components/sw-header/components/SWHeaderFields.tsx --json`. 원본 status/staticStatus는 NOT VERIFIED, FAIL 없음. SW styles 연결 `ENTRY-002`, 패키지 구현 graph 밖 `SCOPE-001`, 연결에 의존한 Token/동적 값 미검증이 남았습니다. Guard를 수정하거나 결과를 PASS로 덮어쓰지 않았습니다.
- Guard styleEvidence: STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED, checks=[]. 독립 SW 실검사 완료라는 의미가 아닙니다. 별도 Runtime/사용자 디자인 의도는 위 검사 범위 PASS, 전체 검증은 PARTIAL입니다.

## 11. 변경 파일 목록

1. `packages/sw/src/theme/sw.css` — 1400ms 및 필드 Hover.
2. `packages/sw/src/components/sw-header/components/SWHeaderFields.tsx` — 치수 원본/Variant의 동일 크기 wrapper.
3. `packages/sw/src/assets/menu-dimension-ico-hover.svg` — 신규 foreground 색 Variant.
4. `src/sw/sw-header.stories.tsx` — 기존 모션·Composed Story 보완.
5. `docs/sw/sw-header-design-spec.md` — 현재 §11.5 및 기존 정책 정합.
6. `docs/sw/sw-header-usage.md` — 현재 시간·필드 Hover·Story 사용법.
7. `docs/sw/sw-header-window-motion-gif-verification-2026-10-16.md` — 과거 내용 뒤 후속 기록만 추가.
8. `packages/sw/README.md` — 현재 동작과 링크.
9. 이 검증 기록 — 신규 문서.

Git 무시 경로 `_local/sw-speed-hover-qa/`에 시작 해시·사본, 전/후 Default/Hover PNG, `pixel-comparison.json`, `composed-hover-comparison.png`, Story·폭별 PNG, `verification.json`, `neighbors.json`, 원본 `guard.json`, 빌드 로그와 `final-summary.json`을 보존합니다.

## 12. 기존 디자인 보존 근거

수정한 필드 블록·duration·주석을 원래 값으로 복원한 임시 문자열이 시작 CSS 전체와 동일합니다. 따라서 상세보기·홈·문서·인쇄/가이드·최소화/종료·반응형 CSS는 바이트 단위로 보존됐습니다. 필드 TSX도 치수 wrapper/import 외 문자열이 동일하며 기존 Callback·Props를 변경하지 않았습니다. 다른 Story, 기존 SVG, `SWHeaderWindowControls.tsx`, root package.json/Lockfile은 시작 상태를 유지합니다.

과거 GIF 검증 문서는 시작 사본이 현재 문서의 정확한 prefix임을 확인했습니다(append-only). 다른 패키지 소스·Worktree·DWG/DXF Viewer는 수정하지 않았습니다. Root의 기존 package build에 따른 Git 무시 dist 재생성만 있습니다. 의존성 설치·공개 API 변경은 없습니다.

## 13. 남은 차이 · NOT VERIFIED

원본 GIF와 시간만 다릅니다(사용자 요청). 기존 Tooltip의 최소화/종료 일부 시각적 겹침은 유지하며 포인터를 차단하지 않습니다. 실제 네이티브 창 제어, 다른 브라우저·터치/펜·보조기술, 외부 CSS 커스터마이징, 독립 SW Guard coverage는 미검증입니다. 현재 Chrome 기본 테마 범위의 PASS를 전체 플랫폼 승인으로 확대하지 않습니다.

## 14. 작업 종료 시 Git 상태

`feature/sw-package`, HEAD `9407c8567f57301659e591c03451cca1b828733c` 유지. status 그룹도 ` M package-lock.json`, ` M package.json`, `?? docs/sw/`, `?? packages/sw/`, `?? src/sw/`를 유지하며 실제 이번 변경은 해당 미추적 그룹 내부에 있습니다. Index 변경·Commit·Push·PR·Merge·Publish·배포는 수행하지 않았습니다.

작업 시간(KST): Started At 2026-10-16 13:54:54 / Completed At 2026-10-16 14:08:24 / Actual Duration 13분 30초 / Estimated Duration 15~25분 / Variance 15분 대비 −1분 30초, 25분 대비 −11분 30초.