91 lines
8.1 KiB
Markdown
91 lines
8.1 KiB
Markdown
# SW Storybook Header → Dropdown 단일 페이지 — 2026-10-19
|
|
|
|
**판정: PASS.** 최종 메뉴는 `SW → Header → Dropdown`입니다. Dropdown은 Header 바로 아래의 Story이며 별도 폴더나 Composed Controls 하위 메뉴가 없습니다. 페이지 제목은 **Dropdown**, 내부 컨트롤 그룹의 제목과 접근성 이름은 **Composed Controls**입니다.
|
|
|
|
## 시작 상태와 범위
|
|
|
|
- 작업 경로: `D:\디자인시스템\HMDesign-SW`
|
|
- 브랜치: `feature/sw-package`
|
|
- 실제 시작 HEAD: `9482d45f340981c4b4ad6537cb678bf4afcdc681`, Working Tree clean.
|
|
- 요청에 기재된 `c165753bbe24de6581c66704bde4ba3246049ec2` 뒤에 직전 Dropdown 통합 로컬 Commit이 존재함을 확인했습니다. 기존 이력을 그대로 이어서 작업했습니다.
|
|
- 범위: `STORYBOOK_ONLY`. 신규 업무 화면 생성이 아니므로 AI 화면 생성 Guard·Navigation 선택은 적용하지 않았습니다.
|
|
- 이번 작업도 로컬 Commit만 생성하며 Push·PR·배포는 하지 않습니다. Commit SHA와 종료 상태는 완료 메시지에 기록합니다.
|
|
|
|
## 메뉴와 ID
|
|
|
|
`sw-header-dropdown.stories.tsx`의 CSF title을 `SW/Header`, 표시 이름을 `Dropdown`으로 변경했습니다. 기존 북마크와 테스트 경로를 유지하기 위해 export/ID는 그대로 유지합니다.
|
|
|
|
- 최종 Dropdown Story ID: **`sw-header--composed-controls`**
|
|
- 사용자에게 표시되는 메뉴: **Header → Dropdown**
|
|
- 페이지 내부 그룹: **Composed Controls**
|
|
- 변경된 Story ID: 없음.
|
|
- `SW/Header/Dropdown`에 속하는 현재 Story: 0개.
|
|
- 다른 Header Story의 ID·이름·태그·선언은 그대로입니다. 이전 메뉴 계층은 역사적 before index에서만 비교 대상으로 읽습니다.
|
|
|
|
6개 컨트롤은 기존 공개 `SWHeaderLayerMenu`, `SWHeaderColorMenu`, `SWHeaderLineStyleMenu`, `SWHeaderTextStyleMenu`, `SWHeaderDimensionStyleMenu`, `SWHeaderProperties`를 재사용합니다. 내부 그룹명은 기존 `StorySection`으로 표시하며 컨트롤의 Props·Callback·상태 로직은 변경하지 않았습니다. 상세보기는 기존 속성Bar·속성창 연결을 유지합니다.
|
|
|
|
## 삭제 전후 Story 목록
|
|
|
|
직전 통합 작업에서 삭제한 중복 Story 4개는 계속 미노출입니다. **이번 메뉴 계층 수정에서 추가로 삭제한 Story는 없습니다.**
|
|
|
|
- `sw-header--layer-dropdown`
|
|
- `sw-header--color-dropdown`
|
|
- `sw-header--line-style-dropdown`
|
|
- `sw-header--text-dimension-style-dropdown`
|
|
|
|
원래 기준 `c165753`에서는 SW Story **28 → 24**, 저장소 전체 **347 → 343**입니다. 이번 실제 시작 `9482d45` 기준으로는 SW **24 → 24**, 전체 **343 → 343**입니다.
|
|
|
|
이번 수정 전후의 유지 ID 24개는 동일합니다(접두사 `sw-header--`). `composed-controls`의 표시 이름·title만 변경했습니다.
|
|
|
|
- `overview`, `composed-controls`, `detail-buttons`, `interactive-states`, `window-move-motion`, `logo-slot`
|
|
- `document-dropdown`, `responsive-more`, `layer-detail-input`, `property-panel`, `property-panel-variants`, `k-guide`
|
|
- `additional-hover`, `property-bar`, `dynamic-controls`, `colorize`, `composition`
|
|
- `property-panel-none`, `property-panel-all`, `property-panel-circle`, `property-panel-expanded`, `property-panel-compare`, `property-shape-slot`, `property-fields`
|
|
|
|
Document Dropdown은 문서 관리, Detail Buttons는 공통 버튼 상태, Layer Detail · Input은 입력 편집, Responsive More는 반응형 전환 검증 목적이므로 보존했습니다. Property Bar/Panel, Window Move Motion 및 나머지 Header Story도 유지했습니다.
|
|
|
|
수정 전 목록은 직전 Commit에 대응하는 보존된 정적 빌드 index와 `git show HEAD`의 CSF 선언을 대조했습니다. 수정 과정에서 생성한 source index는 별도 `draft-source-index.json`으로 보존했고 최종 목록은 최종 Build index에서 확보했습니다.
|
|
|
|
## 검증 결과
|
|
|
|
- SW Typecheck: `npm.cmd run typecheck:sw` — PASS.
|
|
- SW Build: `npm.cmd run build-storybook`의 사전 `build:packages → build:sw` — PASS. 동일 SW Build를 별도로 중복 실행하지 않았습니다.
|
|
- Storybook Typecheck: `npm.cmd exec -- tsc -p tsconfig.app.json --noEmit` — PASS.
|
|
- Storybook Build: `npm.cmd run build-storybook` — PASS.
|
|
- 관련 Chrome 브라우저 Smoke: **232/232 PASS**, 콘솔/page 오류 0건.
|
|
- `git diff --check` 및 Commit 전 Staged Diff 검사 — PASS.
|
|
|
|
브라우저에서는 실제 manager의 Header 바로 아래 Dropdown 링크 1개, Composed Controls 링크 0개, 페이지 H1 Dropdown·그룹 H2/접근성 이름 Composed Controls를 확인했습니다. 6개 컨트롤과 기존 기본/사용자 색상·스타일 목록, 선택값 표시, Hover·Selected/On·Disabled, 각 Callback 1회, 다른 값 보존, Enter/방향키/Tab·Escape·외부 클릭 닫기·Focus 복귀를 검증했습니다.
|
|
|
|
390/768/1280/1440px에서 기존 필드 크기와 페이지 가로 overflow 0, 메뉴/상세 버튼의 실제 hit-test·Overlay 노출을 확인했습니다. 상세보기 속성Bar 28px·속성창 314px, 편집값 공유·닫기/Escape·Focus 복귀도 통과했습니다.
|
|
|
|
모든 유지 SW Story 24개의 실제 렌더링, Overview의 16:9 Stage와 Header 49px, Window Move Motion의 9개 3배 확대 단계를 확인했습니다. `packages/sw/src`, 공개 API·타입, CSS·SVG·이미지, `packages/sw/ai`, AI 템플릿 자료, Overview 구현과 기존 Story CSS·Storybook 설정은 변경하지 않았습니다.
|
|
|
|
추가 정적 비교에서는 조합 호스트의 상태·Callback 로직과 공개 SW 컴포넌트 JSX 8개가 직전 Commit과 동일함을 확인했습니다(배치 들여쓰기 제외). 기존 Overview 54개 전체 회귀는 직전 작업에서 통과했고 해당 소스/스타일이 동일하므로 반복하지 않았습니다. 이번에는 관련 렌더링·Stage/높이를 새로 확인했습니다.
|
|
|
|
Build의 기존 생성 CSS `var(...)`, chunk 크기·bundler timing 경고는 유지되며 Build 실패는 없습니다. 새 텍스트 로그는 끝 공백·EOF 빈줄만 정규화했고 원문은 새 QA 폴더의 로컬 `raw-logs/*.log`에 보존했습니다. 과거 QA 결과는 덮어쓰지 않았습니다.
|
|
|
|
## 변경 파일과 증거
|
|
|
|
- `src/sw/sw-header-dropdown.stories.tsx`: Header 바로 아래 Dropdown으로 메뉴 표시 수정, ID 보존.
|
|
- `src/sw/sw-header.stories.tsx`: 페이지 제목 Dropdown, 내부 Composed Controls 그룹 표시.
|
|
- `packages/sw/tests/dropdown-consolidation.browser.mjs`: 새 계층·내부 그룹·24개 보존 검증 및 실제 컨트롤 회귀 유지.
|
|
- `packages/sw/tests/storybook-inventory.mjs`: 승인된 표시 이름 변경을 historical baseline 비교에 반영.
|
|
- `packages/sw/tests/storybook-cleanup-stage1.browser.mjs`: 같은 이름 변경만 허용하도록 목록 비교 갱신.
|
|
- `docs/sw/sw-storybook-dropdown-consolidation-2026-10-19.md`: 이전 결과 상단에 현재 메뉴 기준 안내 추가, 당시 내용·증거 보존.
|
|
- 이 보고서와 `docs/sw/storybook-dropdown-page-qa/`의 신규 증거.
|
|
|
|
현재 ID가 유지되므로 다른 테스트의 URL을 변경할 필요는 없습니다. 과거 메뉴 계층은 역사적 문서·snapshot에 남기고 현재 기준을 새 보고서로 연결했습니다. 테스트를 제거하여 PASS로 처리하지 않았습니다.
|
|
|
|
- [수정 전 index](storybook-dropdown-page-qa/before-full-index.json)
|
|
- [수정 후 index](storybook-dropdown-page-qa/smoke/after-full-index.json)
|
|
- [Story 목록과 기존 삭제 4개](storybook-dropdown-page-qa/smoke/story-inventory.json)
|
|
- [브라우저 검증 232개](storybook-dropdown-page-qa/smoke/result.json)
|
|
- [상태·Callback·공개 컴포넌트 보존 비교](storybook-dropdown-page-qa/source-preservation.json)
|
|
- [실제 Header → Dropdown 메뉴 화면](storybook-dropdown-page-qa/smoke/composed-manager.png)
|
|
- [최종 Build 로그](storybook-dropdown-page-qa/storybook-build.txt)
|
|
|
|
## NOT VERIFIED
|
|
|
|
Firefox/Safari 전체 회귀, 모든 유지 Story의 모든 상호작용, 스크린리더 전수 검사 및 Figma 실시간 재대조는 이번에 실행하지 않았습니다. 제품 디자인과 기능은 기존 구현·CSS·자산 불변 및 관련 Chrome 동작으로 확인했습니다. 실제 CAD/OS/파일 작업은 기존 호스트 Callback 밖의 기능입니다.
|