shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity
Files
bbb0e71c910eec13f330b4517584cff03fabb8cd
HMDesign/docs/sw/figma-additional/integration-plan.md
T
shkim4 1472e51f47 feat(sw): integrate home menu into SWHeader (Task A + B) 
Combine Task A (e8409ef, SW 0.2.0 integrated improvement) with Task B
(396539d, Figma-based SWHomeMenu / SWHomeMenuSection / SWHomeMenuItem /
SWRecentFiles). Task B's 84 new files are taken unchanged except for the
public-import Storybook update and joining the popup Escape stack.

- Export the home menu from @hm-design/sw
- SWHeader homeMenu / homeMenuOpen / defaultHomeMenuOpen /
  onHomeMenuOpenChange: hidden by default, the logo toggles it (onHomeClick
  is not called while homeMenu is set), placed from the measured header,
  closes with / closes the document and field dropdowns
- Logo aria-expanded / aria-controls; menu layer CSS (z-index 20)
- AI catalog / patterns / design rules, example G, README, usage guide
- Storybook SW/Home Menu uses @hm-design/sw; integration story

Verified: SW typecheck, tsc -b, SW build, Storybook build, AI docs 22/22,
28/28 existing SW shots pixel-identical, regression 96 PASS / 0 FAIL,
home menu checks 22/22. Not run: tarball consumer install.
2026-10-19 15:39:47 +09:00

4.8 KiB
Raw Blame History

Task A + B 통합 계획 — 로고 클릭 2단 Header 메뉴 (초안, 2026-10-19)

상태: 미승인 계획입니다. Task B는 신규 파일만 작성했고 아래 공유 파일은 아직 수정하지 않았습니다. 통합은 사용자 별도 승인 후 진행합니다. 근거: 2단계 보고, Task A 현황(읽기 전용 확인, 미커밋): SWHeader leading 슬롯, documentOpenPlacement, CSS 변수 --hm-sw-header-leading-width, components/sw-tool/.

1. 순서

  1. Task A 변경을 먼저 확정한 뒤, 그 위에 Task B 신규 파일을 merge합니다. B 파일은 A 파일과 겹치지 않습니다.
  2. export 연결 → 3. SWHeader 연결 → 4. 속성Bar 수정(선택) → 5. 문서·AI → 6. 검증.

2. 작업 목록과 적용 방법

# 파일 변경 적용 방법
I-1 packages/sw/src/index.ts 공개 export export * from "./components/sw-home-menu" 한 줄. CSS는 SWHomeMenu.tsx·SWRecentFiles.tsx에서 import하므로 index에 CSS import를 추가하지 않습니다(sideEffects 때문에 index에서만 import하면 빌드에서 빠지는 것을 확인함)
I-2 components/sw-header/types.ts Header prop homeMenu?: Omit<SWHomeMenuProps, "open" | "onOpenChange" | "returnFocusRef">, homeMenuOpen?, defaultHomeMenuOpen?(false), onHomeMenuOpenChange?(open, reason). 미전달이면 기존 동작과 같습니다(하위 호환)
I-3 components/sw-header/SWHeader.tsx 연결 homeMenu가 있을 때만 홈 클릭으로 열림을 토글합니다. 기존 onHomeClick은 항상 먼저 호출합니다. 메뉴는 <header> 안의 absolute 레이어(top: 0)로 렌더링하고, returnFocusRef는 홈 버튼입니다. 메뉴가 열리면 기존 필드 Dropdown(activeMenu)을 닫습니다
I-4 같은 파일 앵커 시작 x = 객체 수정 영역 getBoundingClientRect().left − header.left − 2px, 폭 = 창 영역 left − 그 값입니다. 고정 375px을 쓰지 않습니다. Task A leading 슬롯이 있으면 --hm-sw-header-leading-width만큼 객체 영역이 이동하므로 DOM 실측을 기준으로 하고 변수는 보조로 씁니다. 기존 속성Bar barOffset 측정 방식과 같은 패턴입니다
I-5 components/sw-header/components/SWHeaderHome.tsx 접근성 aria-expanded·aria-controls(메뉴 id)를 추가합니다. Figma에 열림 시각 변화가 없으므로 스타일은 바꾸지 않습니다
I-6 theme/sw.css z-index 메뉴 레이어를 속성Bar 앵커(z 2)보다 위, 기존 Dropdown 패널과 같은 층에 둡니다. 동시에 열리지 않게 I-3에서 닫습니다
I-7 theme/sw.css (선택, A-6 승인 필요) 속성Bar P1: 좌·우·하 테두리를 세로 gradient #08251C 0% / #208769 37.1% / #08241C 80.5% / #051612 100%로 바꿉니다(기존 hover-ring mask 기법). P2: .hm-sw-property-bar__object에 --hm-sw-header-text-outline. P3: 라벨에 --hm-sw-header-label-outline
I-8 theme/sw.css (검토) home on 상·하단 선 Figma 열림 상태의 1920 전폭 #5F4B0F 2px 선(y 0–2, 46–48)을 .hm-sw-header[data-home-menu-open]에서만 적용할지 사용자가 확인해야 합니다
I-9 build.mjs, package.json 번들 변경이 필요 없을 것으로 예상합니다. dist/styles.css에 .hm-sw-home-menu가 포함되는지, title-badge.svg가 inline 또는 asset으로 나오는지 build 후 확인합니다
I-10 packages/sw/ai/**, README.md, docs/sw/sw-header-usage.md 문서 AI 가이드 초안을 COMPONENT_CATALOG·COMPOSITION_PATTERNS·DESIGN_RULES로 옮기고, homeMenu prop 사용 예를 추가합니다
I-11 기존 stories 예시 src/sw/sw-home-menu.stories.tsx의 소스 경로 import를 @hm-design/sw로 바꿉니다. host wiring 예시는 I-3 이후 SWHeader homeMenu 예시로 대체합니다

3. Task A와 맞출 결정 (사용자 확인)

  • SWToolButton에 tile appearance를 둘지, SWHomeMenuItem을 별도로 유지할지(A-1).
  • 토글 이름: A는 pressed, B는 active/activeIds(별칭 추가 여부).
  • documentOpenPlacement 기본값 "menu"는 메뉴와 독립적입니다. 찾아열기·새파일은 host가 onDocumentOpen·onDocumentNew와 같은 handler를 연결합니다(내부 결합 없음).
  • Figma 아이콘 15쌍을 패키지 asset으로 둘지 여부(A-2). 현재는 Story fixture에만 있습니다.

4. 통합 검증

1920·1440·1080·768·390 폭에서 확인합니다.

  • 로고 열기·재클릭 닫기, 그리고 leading·문서 Dropdown(New/Open)과 겹치지 않는지.
  • 기존 Header·속성Bar·Dropdown·K 가이드 회귀 없음.
  • tsc, library build, packed tarball을 React 19 소비 프로젝트에 설치했을 때 동작하는지.
  • Storybook 전체 Story(포트 충돌 주의).
View Git Blame Copy Permalink