HMDesign/docs/sw/sw-first-pass-cleanup-review-2026-10-19.md

# SW 1차 Storybook·컴포넌트·문서 정리 보고 (2026-10-19)

이번 정리는 디자인·동작·공개 API·Story ID를 그대로 두고 관리 구조만 정리했습니다. 삭제, 이름 변경, 분류 이동, 통합은 하지 않았습니다. 그런 작업은 [§8 2차 검토 목록](#8-2차-검토-목록)에 사용자 결정 대상으로 남겼습니다.

- 시작: Branch `feature/sw-package`, HEAD `0029cef60c46d3b7e7ffb2795e31357958ab3b81`, 작업 트리 clean
- 범위: `packages/sw`, `src/sw`, `docs/sw` (다른 패키지·루트 설정은 변경하지 않음)

## 1. 현재 SW 프로젝트 구조

| 경로 | 역할 |
|---|---|
| `packages/sw/src/index.ts` | 패키지 진입점(`sw.css` import, 공개 export) |
| `packages/sw/src/components/sw-header/SWHeader.tsx` | Header 조립·반응형·More·구성(`controls`/`hiddenControls`/`menuOrder`)·속성Bar/속성창 열림 (461줄) |
| `packages/sw/src/components/sw-header/components/` | 하위 컴포넌트 19개 파일 (아래 §3) |
| `packages/sw/src/components/sw-header/types.ts` | `SWHeaderProps`와 데이터 타입 |
| `packages/sw/src/components/sw-theme/SWTheme.tsx` | 하위 컴포넌트 단독 사용 시 토큰 범위 |
| `packages/sw/src/theme/sw.css` | 전체 스타일·토큰 (1842줄) |
| `packages/sw/src/assets/` | Figma SVG/PNG 50개 |
| `packages/sw/tests/` | 브라우저 검증 스크립트 5개 |
| `src/sw/sw-header.stories.tsx` | Storybook `SW / Header` 33개 Story (약 1860줄) |
| `src/sw/sw-stories.css`, `src/sw/assets/` | Story 전용 배치 CSS, 임시 로고, Figma 비교 PNG 3개 |
| `docs/sw/` | 사용 가이드, 디자인 명세, 검증 보고 15개, 증거 폴더 5개 |

## 2. Storybook 전체 목록 및 분류

모두 `SW / Header` 아래에 있습니다. 주소는 `iframe.html?id=<ID>`입니다. 분류 기준은 기본 화면 / 상태 / 기능 예제 / Figma 비교 / QA·검증 / 중복 검토입니다. "테스트 사용"은 `packages/sw/tests`가 그 ID를 직접 연다는 뜻입니다. 이 Story들은 이름을 바꾸면 테스트도 고쳐야 합니다. 추가로 `detail-buttons` 검증은 33개 ID 전체를 기준 목록과 비교합니다.

| # | Story ID | 메뉴 이름 | 분류 | 목적 · 주요 컴포넌트 | Figma | 테스트 사용 | 1차 의견 |
|---|---|---|---|---|---|---|---|
| S1 | `sw-header--detail-buttons` | Detail Buttons (Shared States) | Figma 비교 · QA | 상세 버튼 5종 공통 상태, `SWHeaderMenuDetail` | 26:10789 / 26:10792 | ○ | 유지, QA 분류 검토 |
| S2 | `sw-header--overview` | Overview | 기본 화면 | 1920 Header + 선택 상태 | 26:8944 | | 유지(대표) |
| S3 | `sw-header--default` | Default | 기본 화면(Args) | `SWHeader` 1920 프레임 | 26:8944 | ○ | 중복 검토(S2·S4) |
| S4 | `sw-header--controls` | Controls | 기능 예제(Args) | 프레임 없는 `SWHeader` + Controls 패널 | — | ○ | 중복 검토(S3) |
| S5 | `sw-header--interactive-states` | Interactive States | 상태 | Default/Hover/Selected/Disabled, 창 버튼 Callback | 26:10655 | | 유지 |
| S6 | `sw-header--responsive` | Responsive | 기능 예제 | 18개 폭 반응형 | 26:8944 | | 유지, S15와 인접 배치 검토 |
| S7 | `sw-header--window-move-motion` | Window Move Motion | 상태(Motion) | 창 이동 GIF 모션 1400ms | 26:10220 | | 유지 |
| S8 | `sw-header--composed-controls` | Composed Controls | 기능 예제 | 공개 하위 컴포넌트 재사용, 그룹 필드 Hover | — | | 유지 |
| S9 | `sw-header--logo-slot` | Logo Slot | 기능 예제 | `logoSrc` / `logo` / 미전달 | 26:8944 | | 유지 |
| S10 | `sw-header--document-dropdown` | Document Dropdown | 상태 + 기능 | 문서 목록 섹션 18개 | 26:10662 | | 유지, 섹션 분할 검토 |
| S11 | `sw-header--layer-dropdown` | Layer Dropdown | 상태 + 기능 | 레이어 목록 섹션 13개 | 26:10940 | | 유지 |
| S12 | `sw-header--color-dropdown` | Color Dropdown | 상태 + 기능 | 색상 목록·RGB 입력 | 26:10986 / 26:11036 | ○ | 유지 |
| S13 | `sw-header--line-style-dropdown` | Line Style Dropdown | 상태 + 기능 | 3열 선스타일 목록 | 26:11104 | | 유지 |
| S14 | `sw-header--text-dimension-style-dropdown` | Text · Dimension Style Dropdown | 상태 + 기능 | 문자·치수스타일 목록 | 26:11181 / 26:11215 | ○ | 유지 |
| S15 | `sw-header--responsive-more` | Responsive More | 기능 예제 | More 대표 필드 전환 | — | | 유지, S6과 통합 검토 |
| S16 | `sw-header--text-stroke` | Text Stroke | Figma 비교 · QA | 검정 외곽선 확대 비교 | 26:8944 | | 유지, QA 분류 검토 |
| S17 | `sw-header--layer-detail-input` | Layer Detail · Input | 상태 | 레이어 상세 버튼, `SWHeaderInput` | 26:10767 / 26:11656 | ○ | 이름 변경 검토(Input 중심) |
| S18 | `sw-header--dynamic-data` | Dynamic Data | 기능 예제 | 목록 추가·삭제·순서 | — | | 유지 |
| S19 | `sw-header--property-panel` | Property Panel | 기능 예제 | Header 연결 속성창, 폭 전환 | 26:11822 | ○ | 유지(대표) |
| S20 | `sw-header--property-panel-variants` | Property Panel Variants | 중복 검토 | 단독 패널 + 같은 조작 버튼 | 26:11822 | | 통합 검토(S27~S31) |
| S21 | `sw-header--k-guide` | K Guide | 상태(Motion) | K 버튼 가이드 반복 | 26:11698 / 26:11669 | | 유지 |
| S22 | `sw-header--additional-hover` | Additional Hover | QA · 중복 검토 | 상세 Hover·Selected·색상 기준 필수 선택 | — | ○ | 통합 검토(S1·S12) |
| S23 | `sw-header--property-bar` | Property Bar | 기능 예제 | 속성Bar 동적 편집 | 26:10492 | ○ | 유지 |
| S24 | `sw-header--dynamic-controls` | Dynamic Controls | 기능 예제 · 중복 검토 | `controls` allowlist | — | | 통합 검토(S26) |
| S25 | `sw-header--colorize` | Colorize | Figma 비교 | btn_colorize Default/Hover | 26:11302 / 26:11305 | ○ | 통합 검토(S12) |
| S26 | `sw-header--composition` | Composition (Visibility · Order) | 기능 예제 | `hiddenControls`, `menuOrder` | 26:8944 | | 유지 |
| S27 | `sw-header--property-panel-none` | Property Panel · 선택 없음 | 상태 | 26:11886 314×256 | 26:11886 | ○ | 유지 또는 S31로 통합 검토 |
| S28 | `sw-header--property-panel-all` | Property Panel · 전체 선택 | 상태 | 26:11823 314×361 | 26:11823 | ○ | 위와 같음 |
| S29 | `sw-header--property-panel-circle` | Property Panel · 원 1개 | 상태 | 26:11932 314×658 | 26:11932 | ○ | 위와 같음 |
| S30 | `sw-header--property-panel-expanded` | Property Panel · 모두 펼침 | 상태 | 26:12035 314×754 | 26:12035 | ○ | 위와 같음 |
| S31 | `sw-header--property-panel-compare` | Property Panel · 4개 비교 | Figma 비교 | 4상태 실측 비교 | 위 4개 | ○ | 유지 |
| S32 | `sw-header--property-shape-slot` | Property Panel · 형상 Slot | 기능 예제 | `shapeContent` | 26:11932 | | 유지 |
| S33 | `sw-header--property-fields` | Property Panel · 필드 13개 | Figma 비교 + 기능 | 필드 Default/Hover 표본 + 실제 조작 | 26:12388 ~ 26:12649 | ○ | 유지 |

### 사용 편의성 조사 결과

- **한 메뉴에 모두 있음:** 33개가 `SW / Header` 한 단계에 섞여 있습니다. 사용자용 예제(S2, S8, S9, S19, S23, S26)와 검증 화면(S1, S16, S22, S31)이 같은 목록에 나옵니다.
- **비슷한 Story가 흩어짐:** 속성창 관련 Story가 9개(S19, S20, S27~S33)이고 메뉴 순서상 S21~S26 사이에 끊겨 있습니다. 반응형(S6, S15)과 구성(S24, S26)도 떨어져 있습니다.
- **같은 디자인이 반복됨:** S3, S4는 S2와 같은 Header이고, S20은 S27~S30과 같은 4상태입니다. S22의 상세 Hover는 S1, 색상 기준은 S12에도 있습니다. S25 Colorize는 S12 안에서도 보입니다.
- **이름만으로 알기 어려움:** `Additional Hover`, `Dynamic Controls`, `Property Panel Variants`, `Layer Detail · Input`.
- **Default/Hover 확인:** 대부분 "Hover (고정)" 섹션이 있어 편합니다. 다만 섹션이 많은 Story(S10 18개, S11 13개)는 스크롤이 깁니다.
- **실험용 후보:** 명확한 실험 Story는 없습니다. S20, S22는 구현 시점의 검증 용도가 강합니다.
- **설명 형식:** Story 설명은 대부분 "Figma 노드 → 동작 → 데이터 소유" 순서입니다. 다만 S3, S4, S27~S30은 Story 머리말 설명이 없습니다(Args·개별 상태 Story).

## 3. 컴포넌트 구조와 재사용 관계

| 파일 | 줄 | 역할 | 사용하는 내부 모듈 |
|---|---|---|---|
| `SWHeader.tsx` | 461 | Header 조립 | 아래 대부분 |
| `SWHeaderField.tsx` / `SWHeaderFields.tsx` | 52 / 79 | 필드 버튼 공통 표면, 5개 필드 | Field, LayerIcons |
| `SWHeaderDropdown.tsx` | 156 | `useSWHeaderDropdown`(열기·키보드·바깥 클릭), `SWHeaderMenuDetail`(상세 버튼 공통), `SWHeaderColorChip` | — |
| `SWHeaderLayerMenu.tsx` | 264 | 레이어 필드 + 목록, **`SWHeaderLayerRows`(공유)** | Dropdown, Fields, LayerIcons |
| `SWHeaderColorMenu.tsx` | 211 | 색상 필드 + 목록, **`SWHeaderColorPanelBody`·`useSWHeaderColorMode`(공유)** | Dropdown, Fields, Input |
| `SWHeaderLineStyleMenu.tsx` | 192 | 선스타일 필드 + 목록, **`SWHeaderLineStyleColumns`·`SWHeaderLinePreview`(공유)** | Dropdown, Fields, Input |
| `SWHeaderStyleListMenus.tsx` | 150 | 문자·치수스타일 목록 | Dropdown, Fields |
| `SWHeaderInput.tsx` | 163 | 편집 Input, `parseSWHeaderColor`, `parseSWHeaderNumber` | — |
| `SWHeaderPropertyPanel.tsx` | 327 | 속성창, `useSWHeaderOverlay`(속성창·K 가이드 위치) | Input, LineStyleMenu, PropertyFields |
| `SWHeaderPropertyFields.tsx` | 221 | 속성창 레이어·선스타일·색상 필드 Dropdown | Layer/Color/LineStyle 공유 본문, Dropdown, Input |
| `SWHeaderPropertyBar.tsx` | 53 | 속성Bar | Input |
| `SWHeaderMore.tsx`, `SWHeaderKGuide.tsx`, `SWHeaderActions.tsx` | 118 / 77 / 26 | More, K 가이드, 인쇄·팝업 가이드 | KGuide → PropertyPanel(overlay) |
| `SWHeaderDocumentTitle.tsx`, `SWHeaderHome.tsx`, `SWHeaderWindowControls.tsx`, `SWHeaderProperties.tsx`, `SWHeaderLayerIcons.tsx` | 219 / 39 / 43 / 30 / 87 | 문서·홈·창 제어·상세보기 토글·레이어 아이콘 | — |

점검 결과:

- **사용하지 않는 Import/로컬:** 없음. `tsc --noUnusedLocals --noUnusedParameters`를 패키지와 앱 양쪽에서 확인했습니다.
- **사용하지 않는 CSS class:** 없음. `sw.css`의 174개 class가 모두 TSX에서 쓰이거나 `--${variant}` 형태로 동적으로 만들어집니다.
- **사용하지 않는 Token:** 없음. 108개 모두 `var()`로 참조됩니다.
- **같은 Selector가 반복됨:** 44건입니다. 대부분은 의도된 구조입니다. 같은 class를 `@container` 반응형, `prefers-reduced-motion`, keyframes 단계, 추가 수정 덮어쓰기에서 다시 선언합니다(예: `.hm-sw-header__document` 7회). 한곳으로 합치는 것은 광범위한 CSS 구조 변경이므로 R-C2로 남깁니다.
- **공통화가 덜 된 곳:**
  - `SWHeaderLayerMenu`가 `useSWHeaderDropdown`과 거의 같은 열기·바깥 클릭·위치 계산을 따로 구현합니다. 2차원 화살표 키 이동 때문입니다.
  - 속성Bar와 속성창이 같은 `parse` 규칙을 각자 갖고 있습니다. 속성창에만 `decimals`와 선스타일 목록 검사가 있어 동작이 다르므로, 합치면 속성Bar 동작이 바뀝니다.
  - `useSWHeaderOverlay`는 폭 값 314/208로 사용처를 구분합니다.
- **공개 export 중 패키지 밖에서 쓰지 않는 Props 타입:** `SWHeaderMoreProps`, `SWHeaderMenuDetailProps` 등은 같은 파일 안에서만 쓰입니다. 공개 API이므로 그대로 둡니다.

### 자산

- 50개 중 48개가 코드나 CSS에서 쓰입니다.
- 미참조 2개: `color-pick.svg`는 `colorize-default.svg`와 바이트가 같은 중복이고, `dropdown-arrow.svg`도 쓰이지 않습니다. 둘 다 삭제하지 않았습니다(R-A1, R-A2).
- `src/sw/assets/figma-reference/header-26-8944.png`는 Text Stroke Story에서 이미지 블록을 뺀 뒤 참조가 없습니다. 원본 보존 지시에 따라 남겼습니다(R-A3).
- Text Stroke 상태: `sw.css`에 `-webkit-text-stroke` 선언이 없고 검정 `text-shadow`만 남아 있습니다.
- SVG 캔버스 배경 제거: 2026-10-19 후속 수정 상태 그대로이며, 이번에 변경하지 않았습니다.

## 4. 문서 목록 및 분류

| 문서 | 구분 | 상태 |
|---|---|---|
| `packages/sw/README.md` | 개요 + API 요약 | 날짜별 절이 쌓여 있음 → 상단에 현재 기준 색인 추가 |
| `docs/sw/sw-header-usage.md` (629줄) | 사용 가이드 + API + Storybook 안내 | 날짜별 절이 누적됨 → 색인 추가, 사실 오류 수정 |
| `docs/sw/sw-header-design-spec.md` (690줄대) | 디자인 명세 | Text Stroke 표 오류 수정, §18 속성 필드 추가, 색인 추가 |
| `sw-header-*-verification-2026-10-16.md` 11개 | 검증 보고(과거 기록) | 변경 없음 |
| `sw-header-firefox-range-close-…-2026-10-19.md`, `sw-header-followup-four-…-2026-10-19.md`, `sw-property-fields-verification-2026-10-19.md` | 검증 보고(현재) | 변경 없음 |
| `docs/sw/{detail-button,firefox-range,followup-four,property-close,property-fields}-qa/` | 증거 자료(PNG·JSON·log) | 변경 없음, 삭제 없음 |
| 이 문서 | 정리 보고 · 2차 검토표 | 신규 |

- 링크 검사: SW 문서 17개의 상대 링크와 앵커를 모두 확인했습니다. 이번 수정 전후 모두 깨진 링크가 없습니다.
- 문서가 겹치는 구조: README·사용 가이드·디자인 명세에 같은 주제(속성창, Text Stroke, 상세 버튼)가 날짜별로 여러 번 나옵니다. "최신 기준" 안내가 각 문서 상단에 4~6개 쌓여 있어, 어느 설명이 현재인지 찾기 어렵습니다. 1차에서는 색인만 추가했고, 재구성은 R-D1~R-D3입니다.

## 5. 1차에서 실제 수정한 내용

| 파일 | 수정 | 영향 |
|---|---|---|
| `src/sw/sw-header.stories.tsx` | Text Stroke Story 설명: 이미 제거된 자기 색 Stroke(0.3/0.4px)를 표시한다는 오래된 문구 수정 | 문구만 |
| 〃 | Color Dropdown 섹션 제목·설명의 "최신 예외 정책"을 날짜 기준으로 바꿈. "추출 버튼은 기존 정책 유지"를 실제 상태(btn_colorize Hover 26:11305)로 수정 | 문구만 |
| 〃 | Line Style Dropdown 섹션 설명의 "최신 요청"을 날짜 기준으로 바꿈 | 문구만 |
| 〃 | Story 전용 `hexToRgbText`를 지우고 공개 `parseSWHeaderColor`를 재사용 | 같은 결과(6자리 hex) |
| 〃 | `FIELD_FIXTURE`가 `PROPERTY_FIXTURE`를 다시 쓰던 것을 파생 방식으로 변경(다양함 행 + Figma 색상 예시만 덮어씀) | 표시 동일, 필드 테스트 77/77 재확인 |
| `packages/sw/src/theme/sw.css` | "Latest request" 주석 3개를 날짜 기준 주석으로 바꿈 | 주석만 |
| `packages/sw/src/components/sw-header/components/SWHeaderColorMenu.tsx` | 같은 주석 1개를 날짜 기준으로 바꾸고 칩·추출 버튼 Hover 상태를 정확히 적음 | 주석만 |
| `docs/sw/sw-header-design-spec.md` | §6.1 표·토큰 표에서 제거된 `-webkit-text-stroke-width`·`--hm-sw-header-text-stroke-width`·`--hm-sw-header-solid-stroke-width`를 현재 상태로 수정. §18 속성 필드 13개 추가. 상단 색인 추가 | 문서 |
| `docs/sw/sw-header-usage.md` | Text Stroke 문단의 자기 색 Stroke·제거된 변수 설명 수정. §12에 현재 33개 안내 추가. 상단 색인 추가 | 문서 |
| `packages/sw/README.md` | Text Stroke·독립 버튼 Hover의 오래된 문구에 현재 상태 보충. 2026-10-19 속성 필드·게이지 절 추가. 상단 색인 추가 | 문서 |
| `docs/sw/sw-first-pass-cleanup-review-2026-10-19.md` | 이 보고서 | 신규 |

Story ID, 메뉴 이름, Story 수(33), 공개 export, Props, 컴포넌트 렌더링, CSS 규칙, 자산은 바꾸지 않았습니다.

## 6. 변경하지 않고 보류한 내용

- Story 삭제·이름 변경·분류(`SW/Header/...` 하위 그룹) 이동·통합
- 과거 검증 보고서 본문(당시 기록이므로 오래된 Stroke 설명이 있어도 그대로 둠)
- 사용 가이드·명세의 날짜별 절 재구성
- 미참조 자산 2개와 비교 PNG 1개의 삭제·이동
- CSS 중복 Selector 합치기, Dropdown 위치 계산 공통화, parse 공통화
- 섹션이 없는 Story(S3, S4, S27~S30)의 머리말 형식 통일(내용 추가가 필요해 2차로 넘김)

## 7. SAFE / REVIEW REQUIRED

**KEEP:** 위 컴포넌트 전부, 사용 중인 자산 48개, 33개 Story, 검증 보고 14개, 증거 폴더 5개, 테스트 스크립트 5개.

**SAFE (이번에 적용함):** §5 표의 항목. 모두 문구·주석·Story 내부 데이터 정의만 바꿨고, 실제 참조를 확인했습니다.

**REVIEW REQUIRED (손대지 않음):** 아래 §8의 R 번호 항목.

## 8. 2차 검토 목록

번호나 파일명을 지정해 주시면 2차에서 그 항목만 진행합니다. "판단"은 사용자 결정이 필요한 종류입니다.

| 번호 | 구분 | 현재 이름/경로 | 현재 역할 | 권장 정리 | 판단 | 영향도 |
|---|---|---|---|---|---|---|
| R-S1 | Storybook | 33개 전체 (`SW / Header`) | 한 단계 메뉴 | `SW/Header/기본`, `/Dropdown`, `/속성창`, `/구성·반응형`, `/QA` 하위 그룹. Story ID가 바뀌므로 테스트 스크립트·baseline 갱신이 필요 | 분류 변경 검토 | 중간 |
| R-S2 | Storybook | S3 `sw-header--default`, S4 `sw-header--controls` | Args 예제 | 하나로 통합(Controls 패널이 있는 1920 프레임). 테스트가 두 ID를 사용 | 통합 검토 | 낮음 |
| R-S3 | Storybook | S20 `sw-header--property-panel-variants` | 단독 4상태 + 조작 버튼 | S27~S31과 겹침. 삭제하거나 S31에 조작 버튼 합치기 | 통합 / 삭제 검토 | 낮음 |
| R-S4 | Storybook | S22 `sw-header--additional-hover` | 추가 수정 검증 | 상세 Hover는 S1, 색상 기준 필수 선택은 S12로 옮기기. 테스트 사용 | 통합 검토 | 낮음 |
| R-S5 | Storybook | S25 `sw-header--colorize` | btn_colorize 비교 | S12 Color Dropdown의 섹션으로 합치기. 테스트 사용 | 통합 검토 | 낮음 |
| R-S6 | Storybook | S24 `sw-header--dynamic-controls`, S26 `sw-header--composition` | 구성 API 2종 | 한 Story에 `controls` / `hiddenControls`·`menuOrder` 섹션으로 정리 | 통합 검토 | 낮음 |
| R-S7 | Storybook | S6 `sw-header--responsive`, S15 `sw-header--responsive-more` | 반응형 | 이웃 배치 또는 통합 | 분류 변경 검토 | 낮음 |
| R-S8 | Storybook | S17 `Layer Detail · Input` | 상세 버튼 + Input | `Editable Input` 등 이름 변경. 상세 버튼 부분은 S1과 겹침. 테스트 사용 | 이름 변경 검토 | 낮음 |
| R-S9 | Storybook | S1 `Detail Buttons`, S16 `Text Stroke`, S31 `4개 비교` | 검증 화면 | QA 그룹으로 이동(R-S1과 함께) | 분류 변경 검토 | 낮음 |
| R-S10 | Storybook | S10 `Document Dropdown`(18개 섹션), S11 `Layer Dropdown`(13개 섹션) | 상태 전체 | 상태 섹션과 Callback·예외 섹션으로 나누기 | 통합 / 분할 검토 | 낮음 |
| R-S11 | Storybook | S3, S4, S27~S30 | 머리말 없음 | 다른 Story와 같은 "Figma 노드 · 동작 · 데이터" 머리말 추가 | 이름·설명 검토 | 낮음 |
| R-C1 | Component | `packages/sw/src/components/sw-header/components/SWHeaderLayerMenu.tsx` | 레이어 Dropdown 동작 | 열기·바깥 클릭·위치 계산을 `useSWHeaderDropdown`으로 합치고 2차원 키 이동만 남기기 | 통합 검토 | 중간 |
| R-C2 | Component(CSS) | `packages/sw/src/theme/sw.css` | 전체 스타일 | 같은 Selector가 여러 곳에서 덮어쓰는 영역(문서·창·More·Motion) 정리, 날짜별 추가 절을 컴포넌트 절로 재배치 | 구조 변경 검토 | 중간 |
| R-C3 | Component | `SWHeaderPropertyBar.tsx` / `SWHeaderPropertyPanel.tsx` | 같은 parse 규칙 2벌 | 공통 parse로 합치기. 속성Bar도 `decimals`를 따르게 되는 동작 변경 | 통합 검토 | 낮음 |
| R-C4 | Component | `SWHeaderPropertyPanel.tsx` `useSWHeaderOverlay` | 속성창·K 위치 | 폭 314/208로 사용처를 판별하던 방식을 명시적 옵션으로 바꾸기 | 구조 변경 검토 | 낮음 |
| R-C5 | Component | `SWHeader.tsx` (461줄) | Header 조립 | 구성·반응형 계산 분리 검토(렌더링 구조 변경) | 구조 변경 검토 | 중간 |
| R-A1 | Asset | `packages/sw/src/assets/color-pick.svg` | 미참조, `colorize-default.svg`와 같은 파일 | 삭제 | 삭제 검토 | 낮음 |
| R-A2 | Asset | `packages/sw/src/assets/dropdown-arrow.svg` | 미참조 | 삭제 또는 사용처 확인 | 삭제 검토 | 낮음 |
| R-A3 | Asset | `src/sw/assets/figma-reference/header-26-8944.png` | 미참조 Figma 원본 | 보존 위치를 `docs/sw` 증거로 옮기거나 유지 | 유지 권장 / 이동 검토 | 낮음 |
| R-D1 | Document | `docs/sw/sw-header-usage.md` | 사용 가이드 | 날짜별 절을 기능별 장(설치·Props·Dropdown·속성창·구성·Storybook)으로 재구성, 날짜 기록은 변경 이력 절로 | 통합 검토 | 낮음 |
| R-D2 | Document | `docs/sw/sw-header-design-spec.md` | 디자인 명세 | 같은 방식으로 재구성, 상단 안내 6개를 색인 하나로 | 통합 검토 | 낮음 |
| R-D3 | Document | `packages/sw/README.md` | 개요 | 날짜별 절을 요약 한 페이지 + 문서 링크로 줄이기 | 통합 검토 | 낮음 |
| R-D4 | Document | `docs/sw/sw-header-*-verification-2026-10-16.md` 11개 | 과거 검증 | `docs/sw/verification/` 하위로 이동(링크 갱신 필요) | 분류 변경 검토 | 낮음 |
| R-D5 | Document | `docs/sw/*-qa/` 5개 | 증거 | `docs/sw/evidence/` 하위로 이동(테스트 기본 출력 경로 갱신 필요) | 분류 변경 검토 | 낮음 |

### 2차 우선순위 제안

1. R-S1 메뉴 분류. 사용자가 가장 자주 보는 부분이며, R-S9도 같이 해결됩니다.
2. R-S2 ~ R-S6 중복 Story 통합. 테스트 ID 갱신이 함께 필요합니다.
3. R-D1 ~ R-D3 문서 재구성.
4. R-A1, R-A2 미참조 자산 삭제.
5. R-C1 ~ R-C5 코드 구조. 디자인 회귀 검증을 다시 해야 하므로 마지막에 둡니다.

## 9. 기존 PASS 결과 영향 여부

| 기존 결과 | 이번 영향 | 처리 |
|---|---|---|
| 구성 시나리오 77/77, 기본 Header 10개 폭 비교 | 코드·CSS 규칙 변경 없음 | 기존 PASS 재사용(재실행 안 함) |
| Header 브라우저 검증 271건 | 같은 이유 | 기존 PASS 재사용 |
| Chrome/Firefox 게이지바 | 같은 이유 | 기존 PASS 재사용 |
| 속성 필드 77/77 | Story fixture를 바꿨으므로 영향 있음 | 이번에 재실행 |
| detail-buttons verify(33개 Story ID·상세 버튼 상태) | Story 파일을 수정함 | 이번에 재실행 |
| Typecheck / Build / Storybook Build | 주석·Story 수정 | 이번에 재실행 |

이번 실행 결과는 커밋 메시지와 최종 보고에 적습니다.

## 10. 미검증 사항

- Firefox에서 Storybook을 다시 보지 않았습니다(CSS 규칙 변경 없음).
- 구성 시나리오 77개, 10개 폭 비교, Header 271건은 다시 실행하지 않았고 기존 PASS를 재사용합니다.
- 문서 재구성 후의 가독성은 2차 결정 사항이라 평가하지 않았습니다.