71 lines
7.5 KiB
Markdown
71 lines
7.5 KiB
Markdown
# SW Storybook 메뉴·콘텐츠 간소화 (2026-10-20)
|
||
|
||
범위: SW Storybook(`src/sw/*.stories.tsx`, `.storybook/preview.tsx` storySort) 정리만 합니다. SW 컴포넌트 소스, 공개 Props/Events, Token, Web(UI)·OrgChart는 변경하지 않았습니다. 기준 HEAD `47972c5`(`feature/sw-package`). Home Menu는 2026-10-19 결정대로 `SW / Header` 아래에 유지합니다.
|
||
|
||
## 1. 메뉴 구조
|
||
|
||
| | 변경 전 | 변경 후 |
|
||
|---|---|---|
|
||
| SW 순서 | Footer → Header → Popup → Theme → Viewer (알파벳) | **Header → Footer → Popup → Viewer → Theme** (`storySort`) |
|
||
| SW/Header | 표시 12 + verification 15 | 표시 10 + verification 10 |
|
||
| SW/Footer | 표시 8 | 표시 7 + verification 1 |
|
||
| SW/Popup | 표시 2 | 표시 3 (`Property Panel · 4개 비교` 이동) |
|
||
| SW/Viewer / SW/Theme | 10 / 1 | 변경 없음 |
|
||
|
||
변경 후 사이드바 (`storybook-simplification-qa/sidebar.json`):
|
||
|
||
- **Header:** Dropdown · Home Menu · Home Menu · 단독 사용 · 조합형 · Document Open · Hidden Sub Controls · Overview · Interactive States · Logo Slot · Document Dropdown · Responsive More
|
||
- **Footer:** 기본 Footer · 전체 Footer · 실제 조합 · 도구 그룹별 표시 · Hover / Active / Selected / Disabled · 도구 및 메뉴 변경 예제 · 화면 폭 변화 · 개별 부품 (조합용)
|
||
- **Popup:** Custom Content · Multiple Popups · Property Panel · 4개 비교
|
||
- **Viewer:** Viewer Header · Menu Groups · Item States · Header + Dropdown · Settings Popup · Popup Content Variants · Variable Size Popups · Responsive Widths · SWHeader vs Viewer Header · Logo
|
||
- **Theme:** Theme Inheritance
|
||
|
||
## 2. 변경 내용
|
||
|
||
| 구분 | Story (ID) | 처리 | 근거 |
|
||
|---|---|---|---|
|
||
| 이동 | `sw-header--property-panel-compare` | 사이드바만 `SW/Popup`으로 이동. 새 파일 `sw-property-panel.stories.tsx`(meta `id: "sw-header"`), 렌더 코드는 `sw-header.stories.tsx`의 `PropertyPanelComparePage`(excludeStories) 그대로 | 사용자 요청. ID·이름·4상태 화면 유지 |
|
||
| 숨김 | `sw-header--window-move-motion` | `verification` 태그 | GIF 프레임 검증. 테스트 5개가 URL로 사용 |
|
||
| 숨김 | `sw-header--k-guide` | `verification` 태그 | Overview와 같은 Header 화면. 테스트 3개가 URL로 사용 |
|
||
| 숨김 | `sw-footer--figma-variants` | `verification` 태그 (삭제 안 함) | Figma 35노드 비교. [Footer Figma 매핑 문서](./sw-footer-figma-mapping-2026-10-20.md)가 참조하며 이를 대신할 자동 검증이 없음 |
|
||
| 표시 | `sw-header--home-menu-standalone` | `verification` 태그 제거 | Header 없이 쓰는 개별 부품(SWHomeMenuSection / SWHomeMenuItem) 예제 |
|
||
| 삭제 | `sw-header--home-menu-figma` | Story 삭제 | Figma 1:1 스크린샷 비교. 테스트·문서 참조 없음 |
|
||
| 삭제 | `sw-header--home-menu-capture-active` / `-capture-outline` / `-capture-recent` | Story 삭제 | 비교 캔버스. 참조 없음 (`-capture-default`는 테스트가 사용하므로 유지) |
|
||
| 삭제 | `sw-header--home-menu-variants` | Story 삭제 | `Home Menu`의 Default / Variant2 / Variant3 섹션과 중복 |
|
||
| 삭제 | `sw-header--home-menu-recent-files` | Story 삭제 | `Home Menu`의 최근파일 섹션과 중복 + Figma 스크린샷 |
|
||
| 섹션 정리 | `sw-header--home-menu` | "Figma 26:10591 비교" 섹션의 Figma 이미지를 빼고 "열림 (현재 폭)"으로 변경. 최근파일 섹션의 Figma 이미지 2개 제거 | 사용법 중심. 구현 화면은 그대로 |
|
||
|
||
삭제한 파일 (`src/sw/assets/home-menu/`): `figma-26-10591.png`, `figma-662-67267.png`, `662-67331_recent-files.png`, `662-67471_file-preview-2depth.png`. 네 파일 모두 `docs/sw/figma-additional/screenshots/`의 원본(`26-10591_home-on.png`, `662-67267_home-on-popup-guide.png`, `662-67331_recent-files.png`, `662-67471_file-preview-2depth.png`)과 md5가 같은 복사본이며, 원본은 보존합니다. 사용하지 않게 된 Story CSS 2개(`sw-home-menu-story__figma-row`, `__figma-fit`)도 제거했습니다.
|
||
|
||
## 3. 유지한 검증용 Story (verification, URL로 접근 가능)
|
||
|
||
`sw-header--home-menu-capture-default` · `-header-composition` · `-integration` · `-capture-responsive` (home-menu-integration 테스트) · `-dynamic-data` (Props 데이터 변경 예제) · `-property-bar-check` · `-capture-property-bar` (속성Bar 차이 3건 **승인 대기**, [Home Menu 통합 보고](./sw-home-menu-integration-2026-10-19.md)) · `sw-header--detail-buttons` · `sw-header--window-move-motion` · `sw-header--k-guide` · `sw-footer--figma-variants`.
|
||
|
||
## 4. Story ID
|
||
|
||
- 367 → 361개. 삭제한 6개를 뺀 나머지 ID는 모두 유지되었습니다. 바뀐 항목은 tags 4개, title 1개(`property-panel-compare`: SW/Header → SW/Popup)뿐입니다.
|
||
- SW 외 index 항목 319개(Web·OrgChart·Center Graphic·Theme 등)는 값과 순서가 바뀌지 않았습니다.
|
||
- 삭제한 ID는 `packages/sw/tests/storybook-inventory.mjs`의 `retiredHomeMenuCompareIds`, 이동한 ID는 `movedToPopupIds`에 기록했습니다.
|
||
|
||
## 5. 검증 (2026-10-20 실제 실행)
|
||
|
||
| 항목 | 결과 |
|
||
|---|---|
|
||
| `npm run build-storybook` | PASS |
|
||
| `npm run typecheck` | PASS |
|
||
| `npm run check:ai-docs` | PASS |
|
||
| `packages/sw/tests/storybook-simplification.browser.mjs` (신규) | **8/8 PASS**: SW Story 42개 직접 URL 렌더·오류 0, 삭제 ID 없음, Popup의 4상태 314 × 256/361/658/754, 사이드바 순서, 숨김 Story 미표시, Popup 순서, 중복 표시 없음, 이동 Story 링크 ID 유지 |
|
||
| `home-menu-integration.browser.mjs` | 22/23. FAIL 1건(`without homeMenu: logo click…`)은 기준선 `47972c5`에서도 같은 결과로 실패하는 **기존 실패** |
|
||
| `storybook-unused-removal.browser.mjs` | render 순회에 `movedToPopupIds`를 추가해서 Popup으로 옮긴 `property-panel-compare`도 검사합니다(신규 검사 1건 PASS). 검사 수 98 → 93: 의도적으로 삭제한 6개 render만 빠졌고, 나머지 검사 이름과 PASS/FAIL 상태는 기준선과 같습니다. FAIL 5건은 모두 기준선 `47972c5`에서도 실패하는 **기존 실패**(10-19 시점 inventory·source 스냅샷 비교)입니다. 그중 `byte-identical` 항목의 목록에는 이번에 의도적으로 수정한 export(`WindowMoveMotion`, `KGuide`, `PropertyPanelCompare`)가 추가로 들어 있습니다 |
|
||
| `dropdown-consolidation.browser.mjs` | 기준선에서도 같은 inventory 스냅샷 FAIL 5건 (기존 실패). 변경 후에는 실행하지 않음 |
|
||
| `followup-four`, `property-fields` | 실행 불가 (기존): 첫 단계에서 10-19에 retired된 `property-bar` / `property-fields` Story를 엶 |
|
||
| SW Viewer·Footer·Theme 기능 회귀 | 재실행하지 않음. 컴포넌트·Story 렌더 코드가 바뀌지 않았고, 이번 직접 URL 렌더 검사로 대신함 |
|
||
|
||
증거: [storybook-simplification-qa/](./storybook-simplification-qa/) (`result.json`, `sidebar.json`, `sidebar.png`, `popup-property-panel-compare.png`).
|
||
|
||
## 6. 남은 개선 항목
|
||
|
||
- Footer Story 이름만 한국어(`기본 Footer` 등)이고 다른 SW 메뉴는 영어입니다. 이름은 바뀌어도 ID가 유지되지만, Footer Figma 매핑 문서가 이름으로 참조하고 있어 이번에는 바꾸지 않았습니다.
|
||
- SW Story는 모두 `controls: { disable: true }`라서 Controls와 Props를 대조할 Playground Story가 없습니다.
|
||
- 과거 시점 스냅샷과 비교하는 테스트(`storybook-unused-removal`, `dropdown-consolidation`, `overview`, `detail-buttons`)와, retired Story를 여는 테스트(`followup-four`, `property-fields`)는 현재 상태 기준으로 다시 정리할 필요가 있습니다.
|