HMDesign/docs/sw/sw-header-dropdowns-stroke-input-verification-2026-10-16.md

SW Header 검증 기록 — Figma Dropdown 8종 · More 대표 필드 · Text Stroke · Input (2026-10-16)

이 문서는 이번 작업의 새 결과만 기록합니다. 이전 검증 기록(레이어 Dropdown, 속도·Composed Hover, 창 이동 GIF, 창 이동 과거)은 당시 결과로 보존합니다. 기준 명세: 디자인 명세 §5.3–§5.5, §6.1.

1. 범위와 환경

항목	값
Worktree / Branch / HEAD	D:\디자인시스템\HMDesign-SW / feature/sw-package / 9407c85(시작·종료 동일, Commit 없음)
요청	① Figma 8개 Dropdown ② 반응형 More 대표 필드 ③ 헤더 전체 Text Stroke ④ Dropdown 내부 Hover 정책 + 추가 요청 ⑤ 레이어 상세 버튼 · 수정 가능한 Input · 커서 · 문서 1개 기본 목록 ⑥ 동적 데이터 구조
Figma	rj6wpsfk24lOWvWiVRAANP — 26:10986, 26:11036, 26:12666, 26:12659, 26:11104, 26:10702, 26:11181, 26:11215, 26:8944, 26:10767, 26:11656, 26:11664 (+ 행·input·상세 버튼 Variant). MCP get_design_context / get_screenshot + Plugin API 읽기 전용 스크립트(TEXT Stroke 전수 조사, Variant별 geometry)
Storybook	이 Worktree의 dev 서버 127.0.0.1:6024(이미 실행 중이던 프로세스 사용)
브라우저 검증	Headless Chromium(Playwright, 다른 Worktree HMDesign-OrgChart-Spike/node_modules의 패키지를 읽기 전용으로 로드, 그 Worktree는 수정하지 않음). 스크립트·스크린샷은 세션 scratchpad(저장소 밖). 앱 내 Browser pane은 숨김 상태라 스크린샷이 갱신되지 않아 사용하지 않음

2. Figma 8개 디자인 (PASS-A)

브라우저 getBoundingClientRect(1920 프레임, 필드 기준 상대 좌표).

노드	Figma	구현 측정	판정
색상 26:10986	필드 192 × 38, 목록 192 × 158 @ y38, ByLayer 그룹 (12.5, 10) 167 × 30, 팔레트 (12, 50) 168 × 22, 도구 (15, 82), 하단 y118 h40, 링 194 × 198	192 × 38 / 192 × 158 @ 38 / (12.5, 48−38=10) 167 × 30 / (12, 50) / (15, 82) / 118 × 40 / 링	MATCH
사용자 색상 26:11036	본문 182, 사용자 행 24	182	MATCH(사용자 칩 왼쪽 정렬 수정 후)
ByLayer / ByBlock	82.5 × 28, Default / on 배경·inner shadow, 글자 #D4CBBD	82.5 × 28, aria-pressed 상호 배타, on #62533D	MATCH(Hover 정책 §5)
선스타일 26:11104	필드 284, drop_wrap 468 × 192 @ (−92, 37), drop 466 × 190, 열 182/142/142	473.2 × 192 @ (−94, 37), 열 187.2/142/142	차이: 선 종류 열이 "Continuous"(Noto) 폭에 맞춰 +5.2px
선 종류 행 26:10702	182 × 30, p12, gap 8, 70 × 2 미리보기 @ (12, 14), Hover #62533D / #FF5C00	187.2 × 30, 미리보기 (12, 14) 70 × 2, CENTER 22·7·22·7, HIDDEN 33·33, Hover 색 일치	MATCH(폭 차이 위와 같음)
문자스타일 26:11181	164, 행 30 × 2, 하단 40(왼쪽 정렬), 본문 100	164 × 100, 행 30, 하단 (0, 98) 40	MATCH(글꼴 칸 38 → 내용 폭 최대 56)
치수스타일 26:11215	164, 행 30, 미리보기 60 × 15 @ (12, 7.5), 하단 오른쪽	164 × 100, 미리보기 (12, 7.5) 60 × 15, Hover 자산 전환	MATCH
상세 pill(색상·선·문자·치수)	14 아이콘, gap 4, p 5/10, .15, radius 24, 글자 35%	같음, 폭은 Noto 글자 폭(색상 상세 94.1 vs Figma 99)	MATCH(글꼴 폭 차이)

자산: color-pick.svg(Figma colorize), menu-dimension-row.svg / -hover.svg(Figma 26:10729 행, mask id 외 동일 · Hover는 foreground fill 1곳만 다름). 상세 아이콘은 기존 layer-detail.svg가 Figma ico_layer Default와 동일해 재사용. dist/index.js·dist/styles.css에서 figma.com/api/mcp/asset 0건.

3. 상호작용 · Callback · Keyboard (PASS-E)

Color Dropdown Story의 호스트 예제(전 속성 연결)에서 실행, 26개 항목 모두 PASS:

• Hover로 열리지 않음 / 클릭으로 열림(aria-expanded, aria-controls 연결).
• 칩 → onColorSelect(red) 1회, 필드 241,4,4로 갱신, 목록 유지. ByLayer → ByBlock: aria-pressed false,true.
• RGB 256,0,0 → aria-invalid, Enter 시 보고 없이 복원. #00ff00 → onColorInput(0,255,0) 1회. caret rgb(230, 4, 3).
• Escape 닫기 + 필드 Focus 복귀. ↓ 열기 + 눌린 항목 Focus, ↓ 다음 항목.
• 선스타일을 열면 색상 닫힘. 선 종류 HIDDEN → 가중치·스케일 유지, 가중치 ByBlock → 선 종류·스케일 유지, User 0.35 / 스케일 2.5 확정, 스케일 0 거부, Tab으로 마지막 항목을 벗어나면 닫힘, 편집 중 Escape는 편집만 취소(목록 유지).
• 바깥 클릭 닫힘. 문자스타일 / 치수스타일 선택 → 닫힘 + 필드 갱신. 다른 속성(레이어·색상) 유지. 문자스타일 상세 → onTextStyleDetail 1회 후 닫힘.
• 선택·입력 Callback 중복 0, 페이지 오류 0.

4. 반응형 More 대표 필드 (PASS-B)

Responsive More Story, 16개 폭(1920 · 1800 · 1799 · 1440 · 1180 · 1179 · 1080 · 1079 · 900 · 899 · 768 · 640 · 639 · 520 · 519 · 390) × 더보기에 있는 모든 필드 항목. 0 FAIL.

• 모든 폭: 헤더 49px, 헤더 가로 넘침 0, 객체 수정 영역 자식 겹침 0 · 영역 밖 0. ≥1800은 More 숨김(1920 배열 유지).
• 더보기 → 필드: 그 필드가 첫 칸, Dropdown 열림, Dropdown 좌·우가 헤더 안(390에서 선스타일은 세로 3단 191.2px), Focus = 그 필드, 겹침·넘침 0. → 레이어: 원래 배치, 레이어 Dropdown 열림.
• 1440 순서 테스트(선스타일 → 문자스타일 → 레이어): Callback = 각 on*MenuOpenChange + on*Open 1회씩, 데이터 Callback 0, 상태표(값) 변화 없음.
• 대표 슬롯 선택 근거: 객체 수정 영역 첫 칸(레이어 자리) — 1920 배열 첫 칸이며 모든 Breakpoint에서 남는 칸, 로고·파일명·창 제어와 분리. 최소 변경(CSS order·표시 규칙 + SWHeader UI 상태 1개).

5. Dropdown 내부 Hover 정책 (PASS-D)

• 독립 버튼(ByLayer · ByBlock · 칩 · 사용자 색상 · 색상 추출 · 상세 4종 · 레이어 상세): Storybook 전용 data-sb-hover로 Hover를 고정한 스크린샷이 Default와 동일. 레이어 상세는 computed style(배경 rgba(197,177,158,.15), radius 24px, padding 5/10, 글자 .35) Default = Hover 고정.
• 목록 행 Hover 유지: 선 종류(1·4행), 가중치, 스케일, 문자·치수 행 = #62533D + #FF5C00(선 미리보기·치수 자산 포함). 현재 행 Hover는 이름 #FFC600 유지.
• Input Hover 유지(추가 요청): 1px rgba(212,203,189,.25), 색상 입력은 rgba(197,177,158,.2).
• 문서 Dropdown Hover(행 검정 40%, + New/Open .3 / #000)는 변경 없음(computed 확인).

6. Text Stroke (PASS-C)

Figma 조사 결과와 구현 기준은 명세 §6.1. Default Story computed style:

요소	text-shadow	자기 색 Stroke	판정
파일명, 그리기모드, 필드 값, 글꼴 미리보기, 속성Bar/속성창, 문서 목록 이름	검정 1.3px 16방향	0.6px(바깥 0.3)	PASS
12px 라벨, 상세보기 caption	검정 1px 16방향	0	PASS
레이어 상세 / … 상세 글자	없음	0.8px(바깥 0.4)	PASS
+ New / Open, 창 이동 Tooltip, 더보기 항목	없음	0	PASS(Figma 없음 / 요청으로 유지)
Input 값(#E60403)	검정 1.3px	0.6px	PASS

• 8배 확대 비교: 검정 외곽선이 글자 바깥에 그려지고 Hover(#FFC600)·행 Hover(#FF5C00)에서도 유지. 말줄임 텍스트 외곽선 잘림 없음(overflow-clip-margin 2px).
• 남은 차이: Noto Sans KR 700 + Stroke는 Figma Dotum Regular + Stroke보다 약간 굵게 보입니다(Font Weight 정책 유지). 토큰으로 조정 가능.

7. 레이어 상세 · Input · 커서 · 문서 1개 (추가 요청)

항목	결과
레이어 상세 Default	107.3 × 24(Figma 113 × 24는 Dotum 글자 폭), 배경·radius·padding·gap·글자 35% 일치. Hover 고정 = Default(무변화). Callback 없을 때 disabled + Figma 외형(opacity 1)
Input Default / Hover / 편집	58 × 20 / 58 × 24 / 58 × 24 — Figma와 동일. 글자 x 위치 Default = Hover(6px). 편집 #0F0D0A + 1px .3. ReadOnly는 20px 유지, Disabled 40%
커서	caret #E60403(computed). 깜박임·위치·선택은 네이티브. caret 높이 1 × 14 정밀 일치는 NOT VERIFIED
편집	숫자 12.75 Enter → onCommit(12.75), 1.2.3 복원, Escape → onCancel + 복원, 외부 값 12.5 반영, Tab(blur) 확정
한글 IME	CDP Input.imeSetComposition으로 조합 중 Enter 이벤트 → 확정 안 됨, 조합 완료 후 Enter → 한글 확정. 실제 OS IME(Windows 한글 입력기) 수동 입력은 NOT VERIFIED
문서 1개 기본	Default Story에서 파일명 클릭 → 문서 1행(현재 문서 #FFC600, X 있음). + New 55 × 24 / Open 50 × 24, 배경 .2, 글자 검정 70%, Hover .3 / #000 — 기존 그대로

8. 동적 데이터 (추가 요청)

Dynamic Data Story: 선 종류 추가 · 순서 뒤집기(현재 항목 id로 유지) · 첫 항목 이름 변경(그 항목만), 현재 레이어 삭제(선택 표시 없음, 필드는 layer Props, 오류 없음), 레이어 추가, User 가중치 값 변경(그 행만), 문자스타일 14개(목록 240px 내부 스크롤, 헤더 49px), 문서 추가(2행, 현재 표시), 팔레트 삭제 · 사용자 색상 추가(6 + 3칩), 페이지 오류 0 — 13개 항목 PASS.

9. 보호 대상 (PASS-F)

• 기준 스냅샷(작업 시작 시 scratchpad 복사본)과 비교해 변경 없음: SWHeaderLayerMenu.tsx, SWHeaderLayerIcons.tsx, SWHeaderWindowControls.tsx, SWHeaderDocumentTitle.tsx, SWHeaderHome.tsx, SWHeaderActions.tsx, SWHeaderProperties.tsx.
• 창 이동 Motion CSS 블록과 motion이 들어간 모든 CSS 줄이 기준과 동일(1400ms · Keyframes · Drag 정지 · Reduced Motion).
• 레이어: 전구·눈꽃·자물쇠 클릭 → onLayerVisibilityChange(layer-1, false) · onLayerFreezeChange(layer-1, true) · onLayerLockChange(layer-1, true), onLayerSelect 없음, 목록 유지, 아이콘 회색 — 확정 매핑 유지. SWHeader는 레이어 Dropdown 열림 상태를 제어형으로 전달(더보기 → 레이어 열기용)하며 레이어 컴포넌트 동작은 그대로.
• 1920 좌표: 레이어 467/234, 색상 705/192, 선 901/284, 문자 1189/164, 치수 1357/164, 상세보기 1521/157, 창 1680/240, 파일명 65/310, 높이 49 — 기준과 동일.
• 전체 17개 SW Header Story 렌더링 오류 0, 헤더 높이 모두 49px.

10. 빌드 (PASS-G)

명령	결과
npm run typecheck:sw	PASS
npm run build:sw	PASS (dist/styles.css 70.71 kB, dist/index.js 239.32 kB)
npm run typecheck(루트, build:packages 포함)	PASS
npm run build(루트)	PASS. 기존 Tailwind bg-[var(...)] CSS 최적화 경고 1건·chunk 크기 경고는 이번 변경과 무관
npm run build-storybook	PASS. SW Header Story 17개 index 확인(기존 10 + 신규 7)

11. 남은 차이 · NOT VERIFIED

• 선 종류 열 182 → 187.2px(전체 468 → 473.2px), 문자스타일 글꼴 칸 38 → 내용 폭, 상세 pill 글자 폭: Dotum → Noto Sans KR 글자 폭 차이(글자 잘림 방지).
• Text Stroke 굵기 체감 차이(Noto 700 + Stroke vs Dotum Regular + Stroke).
• Figma 문자스타일 Variant3의 상세 버튼은 hover Variant(.25)로 배치되어 있으나 Hover 정책상 Default(.15)로 표시.
• 색상 선택 팝업("컬러칩 클릭", Figma "추후 디자인 진행예정")과 모든 … 상세 팝업 내부 화면: 미구현(Figma 전달 후).
• NOT VERIFIED: 실제 SW 호스트(설치형 SW / Electron)에서의 색·선·문자·치수 적용과 색상 추출, 실제 OS 한글 IME 수동 입력, caret 높이 14px 정밀 일치, Safari·Firefox의 overflow-clip-margin·field-sizing·:has() 렌더링(Chromium만 검증), 스크린리더 실제 낭독, 픽셀 단위 이미지 diff(좌표·computed style·확대 육안 비교만 수행).