HMDesign/docs/sw/sw-storybook-header-dropdown-page-2026-10-19.md

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
• 수정 후 index
• Story 목록과 기존 삭제 4개
• 브라우저 검증 232개
• 상태·Callback·공개 컴포넌트 보존 비교
• 실제 Header → Dropdown 메뉴 화면
• 최종 Build 로그

NOT VERIFIED

Firefox/Safari 전체 회귀, 모든 유지 Story의 모든 상호작용, 스크린리더 전수 검사 및 Figma 실시간 재대조는 이번에 실행하지 않았습니다. 제품 디자인과 기능은 기존 구현·CSS·자산 불변 및 관련 Chrome 동작으로 확인했습니다. 실제 CAD/OS/파일 작업은 기존 호스트 Callback 밖의 기능입니다.