shkim4
da0e647b49
Drop the category kicker from the 83 sidebar Stories (kicker is now optional; hidden verification Stories keep it) and shorten or remove repeated, obvious or internal page/section descriptions. Required specs, limits, virtual-data and undecided-value notices stay. Story IDs, exports, fixtures, shared state notes and package code are unchanged. Record: docs/reports/storybook-ui-simplification-2026-10-22.md
38 lines
3.2 KiB
Markdown
38 lines
3.2 KiB
Markdown
# Storybook UI 중심 간소화 (2026-10-22)
|
||
|
||
기준: `main` `aa8b7f8`. Storybook 전용 파일만 수정했습니다. 패키지 컴포넌트·공개 API·Theme Token·Story ID·export는 변경하지 않았습니다.
|
||
|
||
## 범위
|
||
|
||
- 조사: Story 파일 80개, Story 359개(사이드바 표시 83개, `verification`/`internal` 숨김 276개)
|
||
- 적용: 사이드바 표시 Story 83개
|
||
- 숨김 Story 276개는 테스트 기준 화면이므로 그대로 둡니다. 숨김 Story와 공유하는 State note(Input Readonly, Textarea Hover/Readonly, Progress, Table 등)도 유지합니다.
|
||
|
||
## 기준
|
||
|
||
| 유형 | 처리 |
|
||
|---|---|
|
||
| 상단 분류 라벨 `HM DESIGN SYSTEM / …` | 표시 Story에서 제거. `StoryPageHeader`의 `kicker`는 선택 Prop이 되었고 숨김 Story는 계속 전달합니다. |
|
||
| 섹션 제목을 반복하는 설명(`기본 Tooltip입니다.`, `side: …`, `className 확장입니다.`) | 제거 |
|
||
| 당연한 조작 안내(`버튼을 눌러 엽니다`, `포인터를 올려 확인합니다`) | 제거 |
|
||
| 긴 페이지·섹션 설명 | 핵심만 한 줄로 축약 |
|
||
| 내부 기술 설명(Figma 노드, 날짜, 내부 토큰명, CSS 파일명) | 화면에서 제거. 동작 상세는 `packages/sw/ai/COMPONENT_CATALOG.md`, `DESIGN_RULES.md`, `docs/components/*.md`에 이미 있습니다. |
|
||
| CENTER 반복 경계 안내(`CENTER_BOUNDARY`) | 한 줄로 축약하고 유지 |
|
||
| 필수 규격·제한(px 크기, 허용 조합, Hover 없음, 가상 데이터, 실제 인원 아님, 테스트 로고, 미확정 TBD/Candidate/Q3, 고정 날짜, GNB_ONLY Sidebar 금지) | 유지 |
|
||
| OrgChart 설명 | 제거하지 않고 축약만 합니다(verify-p8/p9가 `.sb-page-description`, `.sb-page-section-description` 스타일을 읽음). |
|
||
| SW 페이지 설명 | 기존 CSS가 이미 화면에서 숨기므로 표시 변화는 분류 라벨 제거뿐입니다. Home Menu만 소스 문구를 함께 축약했습니다. |
|
||
|
||
## 결과 (1440 × 900, 첫 UI 영역 상단 위치)
|
||
|
||
- 표시 설명 글자 수: 15,240 → 7,431
|
||
- 첫 UI 위치: 평균 28px 위로 이동(최소 24, 최대 81). Button 290 → 266, Dialog 290 → 234, Resizable 266 → 210, CENTER Overview 317 → 236, SW 페이지 234 → 210
|
||
- Story ID 359개는 변경 전후 동일합니다.
|
||
|
||
## 검증
|
||
|
||
- `tsc -p tsconfig.app.json --noEmit` PASS, `npm run test:guard` 94/94, `npm run check:ai-docs` PASS
|
||
- `build-storybook` 성공. Story 359개를 직접 URL로 렌더했을 때 오류 화면은 없었습니다. Avatar `all`·`fallback-error`의 404는 의도된 이미지 실패 예시이며 변경 전에도 같습니다.
|
||
- `packages/sw/tests/storybook-simplification.browser.mjs` 9/9 PASS
|
||
- `examples/org-chart/verify-p9.mjs`: 변경 전 빌드로 만든 로컬 기준에 대해 변경 후 67 PASS / 17 FAIL입니다. 변경 전 빌드도 같은 17건이 FAIL이므로 기존 이슈입니다.
|
||
- `packages/sw/tests/integrated-visual.browser.mjs` capture/compare: 숨김 검증 Story 6종(detail-buttons 등)은 동일합니다. 표시 Story(overview, logo-slot, responsive-more, property-panel-compare)의 차이는 모두 분류 라벨 제거에 따른 세로 이동(24px, Overview는 12px)이며 그 외 픽셀 차이는 없습니다. 시각 기준 이미지는 갱신하지 않았습니다.
|