115 lines
12 KiB
Markdown
115 lines
12 KiB
Markdown
# SW Header 검증 기록 — Figma Dropdown 8종 · More 대표 필드 · Text Stroke · Input (2026-10-16)
|
||
|
||
> 이 문서는 이번 작업의 새 결과만 기록합니다. 이전 검증 기록([레이어 Dropdown](./sw-header-layer-dropdown-verification-2026-10-16.md), [속도·Composed Hover](./sw-header-speed-composed-hover-verification-2026-10-16.md), [창 이동 GIF](./sw-header-window-motion-gif-verification-2026-10-16.md), [창 이동 과거](./sw-header-window-motion-verification-2026-10-16.md))은 당시 결과로 보존합니다. 기준 명세: [디자인 명세 §5.3–§5.5, §6.1](./sw-header-design-spec.md).
|
||
|
||
## 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](./sw-header-design-spec.md#61-text-stroke-2026-10-16). 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·확대 육안 비교만 수행).
|