shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity
Files
c7f29b01420491c461a558e35a7ca3d09b052dfe
HMDesign/docs/sw/sw-storybook-dropdown-consolidation-2026-10-19.md
T

14 KiB
Raw Blame History

SW Storybook Dropdown 통합 — 2026-10-19

이 문서는 최초 통합 작업 당시의 기록입니다. 이후 확정된 메뉴는 Header → Dropdown 단일 Story이며 Composed Controls는 페이지 내부 그룹명입니다. 현재 기준과 검증은 메뉴 계층 수정 보고서를 따릅니다. 아래 당시 결과와 증거는 보존합니다.

최종 판정: PASS (PASS-A ~ PASS-J). 범위는 STORYBOOK_ONLY이며 제품 컴포넌트·공개 API·디자인·AI 템플릿은 변경하지 않았습니다. 신규 업무 화면 생성이 아니므로 Navigation/FilterBar 선택 및 AI 화면 생성 Guard는 적용 대상이 아닙니다.

  • 작업 경로: D:\디자인시스템\HMDesign-SW
  • 시작 브랜치: feature/sw-package
  • 시작 HEAD: c165753bbe24de6581c66704bde4ba3246049ec2
  • 시작 Working Tree: clean. 시작 시 기존 로컬 Commit은 upstream 대비 6개였습니다.
  • 이번 요청의 경로·브랜치·로컬 Commit 지시를 적용했습니다. Push·PR·Publish·배포·다른 브랜치 수정은 수행하지 않습니다.
  • 로컬 Commit SHA와 종료 Git Status는 완료 메시지에 기록합니다. Commit 자체의 SHA를 포함 파일에 기록하면 SHA가 달라지므로 이 문서에는 넣지 않습니다.

조사와 삭제·보존 기준

실제 소스로 storybook index를 생성하여 수정 전 SW Story 28개를 확보했습니다. 오래된 정적 빌드나 이름 추측을 기준으로 삭제하지 않았습니다.

실제 삭제한 4개 Story:

  • Layer Dropdown — sw-header--layer-dropdown: 레이어 목록·선택·상태 토글·상세 Callback·긴/다량/빈 목록 시연을 통합했습니다.
  • Color Dropdown — sw-header--color-dropdown: 기본/사용자 색상, ByLayer/ByBlock, RGB 입력·검증, Colorize·상세 Callback을 통합했습니다.
  • Line Style Dropdown — sw-header--line-style-dropdown: 선 종류 5개, 가중치 4개, User 값 편집, 스케일·상세 Callback을 통합했습니다.
  • Text · Dimension Style Dropdown — sw-header--text-dimension-style-dropdown: 문자스타일 2개, 치수스타일 2개와 각각의 상세 Callback을 통합했습니다.

관련 Story 중 보존한 목적:

  • Composed Controls — sw-header--composed-controls: 기존 ID를 유지하고 내용을 실제 조합 예제로 수정했습니다.
  • Detail Buttons (Shared States) — sw-header--detail-buttons: 5개 공유 상세 버튼의 Default/Hover/Disabled/Callback 미연결 상태 검증입니다. 기존 verification 태그도 유지했습니다.
  • Document Dropdown — sw-header--document-dropdown: 문서 선택·닫기·New/Open과 동적 문서 목록 검증이며 6개 속성 컨트롤과 목적이 다릅니다.
  • Layer Detail · Input — sw-header--layer-detail-input: Figma 버튼 비교와 입력 편집·Enter/Escape·ReadOnly/Disabled·외부 값 갱신 검증입니다.
  • Responsive More — sw-header--responsive-more: Breakpoint와 More 대표 필드 전환을 검증합니다.
  • Additional Hover — sw-header--additional-hover: 추가 Hover 정책을 검증합니다.
  • Colorize — sw-header--colorize: Colorize 아이콘의 별도 상태 검증입니다.
  • Dynamic Controls / Composition / Interactive States / Overview: 구성 API·반응형·전체 Header·호스트 상태 연결 검증이므로 보존했습니다.
  • 모든 Property Bar / Property Panel Story는 그대로 보존했습니다.

최종 구성과 동작

메뉴는 SW → Header → Dropdown → Composed Controls 한 페이지입니다. 분류를 위해 별도 CSF 파일을 사용하되 id: "sw-header"로 sw-header--composed-controls를 그대로 유지합니다. 기존 CSF의 조합 호스트 함수는 excludeStories로 제외하여 중복 페이지가 생성되지 않습니다.

페이지에는 레이어·색상·선스타일·문자스타일·치수스타일·상세보기 6개 그룹을 각각 한 번 표시합니다. SWTheme과 공개 SWHeaderLayerMenu, SWHeaderColorMenu, SWHeaderLineStyleMenu, SWHeaderTextStyleMenu, SWHeaderDimensionStyleMenu, SWHeaderProperties를 실제 렌더링합니다. 기존 Story Fixture와 패키지 CSS/SVG를 재사용하며 디자인을 복제하지 않습니다.

5개 Dropdown은 Controlled 열림 상태를 공유하여 한 번에 하나만 열립니다. 각 값은 호스트 상태에 반영되고 다른 속성을 변경하지 않습니다. 레이어 전구·눈꽃·잠금, 색상 모드·칩·RGB, 선 종류·가중치·스케일, 문자·치수 선택의 실제 Callback을 연결했습니다. Callback 기록과 현재 선택값은 컨트롤 밖 상태 줄에서 확인할 수 있습니다.

접힌 시연 설정에 긴 레이어명·레이어 20개/사용자 색상 40개·빈 레이어 목록·컨트롤 Disabled·레이어 상태 표시 전용·메뉴 상세 Callback 미연결을 배치했습니다. 네이티브 설정 control은 기존 Overview와 같은 Storybook 호스트 조작 방식이며 제품 컨트롤이 아닙니다. Dropdown 컨트롤 자체에는 readOnly Prop이 없으므로 임의로 추가하지 않았습니다. 레이어 상태 Callback을 생략하면 패키지의 기존 role=img 표시 전용 아이콘을 사용합니다.

상세보기는 기존 속성Bar·속성창 토글입니다. 공개 SWHeaderPropertyBar/SWHeaderPropertyPanel과 기존 속성 Fixture를 사용하며 편집값을 공유합니다. 선가중치 모드(ByLayer/ByBlock)를 고르면 숫자 속성을 모드 문자열로 덮어쓰지 않습니다. 속성창의 숫자 편집도 상단 선스타일 값에 반영됩니다.

메뉴 하단 레이어 상세 등 5개 버튼은 기존처럼 호스트 Callback 후 메뉴를 닫고 Trigger로 Focus를 돌려줍니다. Callback 미연결 시 안전한 무동작을 유지합니다. 제공되지 않은 CAD 상세 팝업을 만들지 않았습니다.

Overlay는 패키지의 기존 absolute Dropdown·fixed 속성창과 위치 보정을 그대로 사용합니다. Portal/Dim이나 제품 크기 override를 추가하지 않았습니다. 조합만 flex-wrap하여 작은 폭에서 줄바꿈합니다. 속성창 초기 위치 계산 뒤 Focus를 전달하는 호스트 처리를 추가했고 닫기/Escape 시 기존 Trigger로 복귀합니다. 기존 CSS는 변경하지 않고 새 CSS의 .sw-composed-controls 범위에서 호스트 배치만 구성했습니다.

보존 결과와 Story 개수

  • SW Story: 28 → 24.
  • 전체 저장소 Story: 347 → 343. SW 외 index entry는 수정 전과 동일합니다.
  • 기존 Story ID 변경: 없음. 위 4개 삭제 외 새 ID 추가·기존 ID 교체가 없습니다.
  • 나머지 23개 SW Story 선언과 공유 Fixture/함수는 시작 Commit과 동일합니다. 조합 함수·CSF meta/import만 필요한 범위에서 변경했습니다.
  • Overview의 sw-header--overview, 16:9 Stage·Header 49px·Dropdown·속성Bar/속성창 연결을 보존했습니다.
  • Window Move Motion의 「단계별 진행 (3배 확대)」, 9개 단계와 기존 모션 코드를 보존했습니다.
  • packages/sw/src, 공개 export/types, 패키지 CSS·SVG·이미지, packages/sw/ai, AI 템플릿 자료, src/sw/sw-header-overview.tsx, 기존 sw-stories.css, .storybook 설정은 시작 Commit과 동일합니다.

최종 유지 Story 24개 (접두사 sw-header--):

  • 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

통합 검증

  • SW Typecheck: npm.cmd run typecheck:sw — PASS (exit 0).
  • SW Build: npm.cmd run build-storybook의 prebuild-storybook → build:packages → build:sw — PASS (exit 0). 중복 별도 SW Build는 실행하지 않았습니다.
  • Storybook Typecheck: npm.cmd exec -- tsc -p tsconfig.app.json --noEmit — PASS (exit 0), 최종 소스 기준.
  • Storybook Build: npm.cmd run build-storybook — PASS (exit 0), 최종 런타임 소스 기준.
  • 신규 통합 Smoke Test: 229/229 PASS, Chrome 155.0.8059.80, 콘솔/page 오류 0.
  • 이후 선가중치 공유 상태 보정에 영향받는 범위 재검사: 29/29 PASS, 콘솔/page 오류 0. 기존 정상 검사는 반복하지 않았습니다.
  • 기존 Overview 회귀 검사: 54/54 PASS, 브라우저 오류 0.
  • 기존 Header·속성창·K 가이드·Colorize·Input 보존 검사: 15/15 PASS, 브라우저 오류 0.
  • git diff --check — PASS.

브라우저에서 390/768/1280/1440px의 페이지 가로 overflow 0, 필드 높이 38px와 기존 폭 234/192/284/164/164px, Hover 시 자동 열림 없음, Selected/On, Trigger 토글·Escape·외부 클릭 닫기·Focus 복귀를 확인했습니다. 각 메뉴와 하단 상세 버튼의 viewport 내 표시·실제 hit-test도 확인했습니다. 정상/오류 RGB·가중치·스케일 입력, Callback 1회, 레이어 Disabled, 다량 목록의 내부 스크롤과 상세보기 314px/28px 크기 및 값 공유도 검증했습니다.

기존 Overview 검사에서는 16:9 Stage, 실제 Storybook iframe, Header 49px, 속성Bar·속성창 값 공유·확장·하단 접근·390px 화면의 Escape/More Focus 복귀 등을 확인했습니다. 검사 항목의 상세 값은 아래 JSON 증거에 있습니다.

초기 로컬 브라우저 시도는 샌드박스의 ERR_NETWORK_ACCESS_DENIED로 차단되었고 localhost 접근이 허용된 실행으로 재검증했습니다. 이후 테스트 선택자·React 반영 대기 및 속성창 초기 Focus 문제를 수정했습니다. 초기 FAIL 결과와 로그도 새 증거 폴더에 남겼으며 최종 PASS로 덮어쓰지 않았습니다. 첫 Typecheck의 Callback 타입 오류도 수정한 뒤 영향을 받는 검사를 다시 실행했습니다.

Build에는 기존 생성 CSS var(...), chunk 크기·bundler timing 경고가 있습니다. 해당 제품 코드와 설정은 수정하지 않았으며 Build는 성공했습니다.

Commit용 텍스트 로그는 줄 끝 공백·EOF 빈줄만 정규화했습니다. 정규화 전 원문은 같은 새 QA 폴더의 raw-logs/*.log에 로컬 보존했습니다(저장소의 기존 *.log ignore 적용). JSON 판정과 과거 증거는 변경하지 않았습니다.

테스트·문서 참조 변경

detail-buttons.browser.mjs의 삭제된 문자/치수·색상 Story 접근을 Composed Controls로 옮겼습니다. 상세 버튼 Hover·Callback·닫기·Focus 검증은 유지했습니다. 기존 Overview/정리 1단계 검증의 inventory도 승인된 삭제 ID와 새 분류를 반영하도록 수정했습니다. 테스트를 제거해 PASS로 만들지 않았으며 신규 검증은 시작 Commit 기준으로 삭제·보존 및 제품 불변 범위를 별도로 확인합니다.

현재 실행 코드에서 삭제한 Story로 이동하는 참조는 제거했습니다. 테스트의 삭제 허용 목록·과거 검증 문서·과거 index/스크린샷은 이력을 위해 보존했습니다. AI 템플릿 문서는 변경하지 않았습니다.

변경 파일:

  • src/sw/sw-header.stories.tsx — 중복 4개 Story 및 전용 표본 제거, 조합 호스트 연결.
  • src/sw/sw-header-dropdown.stories.tsx — 기존 ID를 유지한 단일 Dropdown CSF 등록.
  • src/sw/sw-composed-controls.css — 조합 호스트의 줄바꿈·설정·상태 줄 배치.
  • packages/sw/tests/dropdown-consolidation.browser.mjs — 범위 전용 회귀 검증, 필요한 후속 범위만 실행하는 followup 모드.
  • packages/sw/tests/storybook-inventory.mjs — 승인된 삭제와 현재 SW Story 수집.
  • packages/sw/tests/detail-buttons.browser.mjs, overview.browser.mjs, storybook-cleanup-stage1.browser.mjs — 유지할 검증의 Story 경로·목록 기준 갱신.
  • 이 보고서와 docs/sw/storybook-dropdown-consolidation-qa/의 신규 증거 파일. 이전 QA 폴더는 변경하지 않았습니다.

증거:

NOT VERIFIED

Firefox/Safari 전체 회귀, 모든 유지 Story의 모든 상호작용, 스크린리더 전수 검증 및 Figma 원본의 신규 실시간 대조는 이번 범위에서 실행하지 않았습니다. 디자인 보존은 기존 패키지·CSS·자산 불변과 실제 Chrome 렌더링으로 확인했습니다. 실제 CAD 상세 화면·OS/파일 작업은 기존 호스트 Callback 밖의 기능이며 이번 Story 통합에 새로 구현하지 않았습니다.

기존 detail-buttons의 전체 baseline 비교 모드와 정리 1단계 전체 suite는 이번에 재실행하지 않았습니다. 변경된 검증 경로는 신규 Smoke에서 확인했고, 필요한 기존 preservation 및 Overview suite를 실행했습니다.

View Git Blame Copy Permalink