shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity
Files
6780abb42d9efacf109dc862fc63b030d9fbf84c
HMDesign/docs/sw/figma-additional/analysis-report.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

25 KiB
Raw Blame History

작업 B 1단계 — Figma 추가 디자인 분석·설계 보고 (2026-10-19)

2단계 이후 정정(우선 적용): 2단계 보고를 기준으로 봅니다. 아래 1단계 본문은 당시 기록으로 남겨 둡니다.

  • 로고 클릭 = 2단 Header 메뉴, 기본 숨김, 재클릭 닫힘(사용자 최종 정정).
  • 662:67267은 Figma 주석 "최근파일" 상태 화면입니다. 최근파일 목록 662:67331과 2뎁스 미리보기 662:67471이 함께 붙으며, 두 노드는 SWRecentFiles로 구현했습니다.
  • V3 = 클릭으로 켜지고 다시 클릭하면 꺼지는 Active 상태입니다(사용자 지시).
  • 아이콘 prop은 iconHover가 아니라 hoverIcon입니다(Task A SWToolButton과 이름을 맞춤).
  • accent의 기본값은 "auto"입니다(패널이 열린 동안 outline).

상태: 분석·설계 보고만 작성했습니다(코드 수정 없음). 구현, Commit, Push는 하지 않았고 2단계는 사용자 승인 후 시작합니다. 대상: Figma rj6wpsfk24lOWvWiVRAANP, 속성Bar 26:10492와 로고 클릭 노드 21개. 기준 브랜치는 claude/sw-figma-logo-menu-36832b(HEAD 5faa1f1, feature/sw-package와 동일)입니다. 수집 자료: figma-nodes.json(노드별 메타데이터·디자인 컨텍스트 정규화·Prototype 연결), screenshots/(노드 22개 PNG, 1x).

0. 수집 방법과 한계

항목 내용 상태
Figma 접근 공식 Figma MCP(get_metadata, get_design_context, get_variable_defs, get_screenshot)를 사용했습니다. figma-design-to-code 스킬을 먼저 불러왔습니다. 인증이 필요한 plugin:figma:figma 서버는 사용하지 않았습니다. 완료
세부 속성 읽기 전용 use_figma(Plugin API)로 reactions, gradient stop, stroke, effect, font, 변형 간 diff를 확인했습니다. 캔버스는 수정하지 않았습니다. 완료
디자인 컨텍스트 저장 React/Tailwind 원문 대신 구현에 필요한 값만 figma-nodes.json에 정규화했습니다. 원문은 같은 node id로 다시 받을 수 있습니다. 정규화본만 저장
Asset get_design_context의 asset URL은 2026-10-26에 만료됩니다. 이번 단계에서는 asset을 받지 않았고, 2단계에서 다시 받습니다. 미수집
Storybook 비교 localhost:6024에서 이미 실행 중인 Storybook의 SW/Header/Overview 속성Bar를 측정했습니다. 그 서버가 어느 checkout에서 실행되는지는 확인하지 못했습니다. Pane 폭은 390px, DPR은 1.5였습니다. 실측 1회, 출처 미확인
형제 노트 공유 노트 폴더에 다른 세션의 노트가 없었습니다. 작업 A의 계획은 사용자 메모리의 확정 기록 기준으로 대조했습니다. 확인

1. 노드별 표 (22개)

"로고 클릭 화면 21개"는 실제로 화면 상태 2개와 구성 컴포넌트 19개(섹션 제목 4개, 버튼 세트 15개 × 상태 3개)입니다. 다섯 번째 섹션 제목 tit_마이세팅(26:12628, "My Setting")은 요청 목록에 없지만 화면에서 사용되므로 참고로 함께 정리했습니다.

# Node 이름 / 유형 크기 역할 상태·Prototype
1 26:10492 속성Bar / FRAME (header_green → 선택한것 26:10491 하위) 1222×28 객체 속성 편집 strip input ON_HOVER → hover(26:11659)
2 26:10591 헤더/꾸러미 ver2/home on / COMPONENT 1920×77 로고 클릭 overlay 본체 btn_home ON_CLICK → OVERLAY(TOP_LEFT, 배경 없음), 메뉴 그룹 ON_CLICK → CLOSE
3 662:67267 같은 이름 / FRAME 1920×77(렌더 1935×193) 2의 정적 사본. 팝업가이드 Variant5(K 미리보기)와 다른 하단 강조 hover만 있음(open/close 없음)
4 26:12604 tit_작업중인파일 124×19 섹션 제목 "작업중인 파일" 없음
5 26:12610 tit_다른파일열기 123×19 "다른파일 열기" 없음
6 26:12622 tit_파일손상시 111×19 "파일 손상시" 없음
7 26:12616 tit_궁금하면 95×19 "궁금하면" 없음
8 26:11355 btn_저장 / COMPONENT_SET 3×(80×46) 저장 · save · 그룹 첫 버튼 D→hover V2, V2 click→V3, V3 click→D
9 26:11371 복사저장 〃 save_as · 중간 〃
10 26:11387 내보내기 〃 file_open · 중간 〃
11 26:11403 도면묶기 〃 inventory_2 · 마지막(구분선 없음) 〃
12 26:11416 찾아열기 〃 folder_open · 첫 버튼. 아이콘 top 5 〃. 구분선 gradient가 다름
13 26:11450 최근파일 〃 시계 붙은 파일 아이콘 · 중간 V2→V3 클릭 reaction 없음. 구분선 gradient가 다름
14 26:11485 새파일 〃 insert_drive_file · 마지막 〃
15 26:11507 복구하기 〃 rotate_left · 첫 버튼 〃
16 26:11529 임시파일 〃 file_copy · 마지막 〃
17 26:11542 디스플레이 〃 monitor 24×22 · 첫 버튼. 라벨 "Display..."(원문에서 이미 말줄임) 〃
18 26:11558 저장하기 〃 설정 저장 · 중간. gap 2 〃
19 26:11586 불러오기 〃 save_alt · 마지막 〃
20 26:11599 설명보기 〃 content_paste · 첫 버튼 〃
21 26:11615 문의하기 〃 question_answer · 중간 〃
22 26:11631 소프트웨어 정보 〃 라벨 "S/W정보" · 마지막 V3가 button이 아니고 Default로 돌아가는 reaction 없음

2. 속성Bar 차이표 (Figma 26:10492 ↔ 현재 구현·Storybook)

비교 기준은 packages/sw/src/theme/sw.css(.hm-sw-property-bar*, .hm-sw-header__input), SWHeaderPropertyBar.tsx, Storybook SW/Header/Overview 실측입니다. 실제 차이가 있는 항목만 적었습니다. 수정 위치는 모두 기존 공유 파일인 sw.css이므로 통합 단계 항목입니다.

# 항목 Figma 현재 구현 / Storybook 영향 수정 위치
P1 테두리 색 좌·우·하 1px 세로 gradient(--gra-border-green): #08251C 0% → #208769 37.1% → #08241C 80.5% → #051612 100%(위→아래) 단색 1px solid #08251C. Storybook computed도 rgb(8,37,28) 단색 중간 높이의 초록 하이라이트(#208769)가 없음 통합 단계 sw.css .hm-sw-property-bar(gradient border는 기존 hover border 기법 재사용 검토)
P2 객체명 글자 외곽선 검정 1.3px Stroke + #FFC600 0.3px. 기존 정책상 검정 외곽선만 적용 text-shadow: none. 외곽선 목록(sw.css 약 1472–1477행)에 .hm-sw-property-bar__object가 없음 노란 글자 가장자리가 Figma보다 흐림 통합 단계 sw.css, --hm-sw-header-text-outline 적용
P3 라벨 글자 외곽선 14px 라벨에 검정 1px Stroke text-shadow: none 라벨 대비가 약함 통합 단계 sw.css, 1px 외곽선(--hm-sw-header-label-outline) 적용 검토
P4 라벨 박스 폭 고정 텍스트 박스(반지름 46, 지름·원주·면적 30), 가운데 정렬. 박스 안 좌 1.4–2.1px, 우 1.8–2.8px 여백 자연 폭(예: "원주" 26.9px). 라벨→입력 간격이 Figma보다 약 2–3px 좁음. 콘텐츠 폭은 527.6px로 Figma 538px보다 짧음 글꼴 대체(Dotum → Noto Sans KR) 영향과 섞여 있음 검토 대상(§5 R-P1). 고친다면 통합 단계 sw.css
P5 세로 위치 내용 Frame top 4px(20px 행) 실측 top 3.5px(bar 875.2 → field 878.7, 27px 영역 가운데 정렬) 0.5px 검토 대상(§5 R-P2)

의도된 차이(수정하지 않음): 바 폭은 Figma 1222px 고정 대신 콘텐츠 폭입니다(2026-10-19 사용자 확정). 글꼴은 Dotum Regular + Stroke 대신 Noto Sans KR이며 객체명·값은 700입니다(기존 Typography 정책). 입력 폭은 Figma 고정 58/66px 대신 값 길이를 따릅니다. 필드 순서와 객체명 문구는 Story fixture 데이터입니다. 일치(차이 없음): 높이 28, 배경 #271F13, 아래 radius 6, inset shadow 0 4 4 rgba(0,0,0,.6), 객체명 90px·#FFC600, 필드 간격 16·라벨-입력 6, 라벨 #F6F4F2·자간 4%, 입력 #E60403·자간 2%·padding 2/4/2/6·radius 2. 입력 상태 Default(면 없음) / hover(24px, 1px .25) / on(#0F0D0A, 1px .3)과 hover reaction도 같습니다. 아이콘은 Figma와 구현 모두 없습니다. 미검증: 1920px 폭 실측, Hover·편집 상태 Storybook 실측, P1–P3를 고친 뒤의 렌더 비교.

3. 로고 클릭 화면 분석

3.1 화면 구성 (26:10591 기준, 1920 디자인)

y 0 ─ border-top 2px #5F4B0F ───────────────────────────────────────────────────
     [btn_home 80]  (기존 Header가 비쳐 보임: 문서 제목 등)   [섹션 5개, x377–1678]   [창 영역 240: 인쇄·K pill | 창이동 | – | ×]
y 46 ─ border-bottom 2px #5F4B0F ───────────────
y 47 ─ 하단 강조 strip 30px(섹션 뒤, 아래로 보이는 주황 gradient)
y 77 ─ 메뉴 끝(Header 48px보다 29px 아래로 내려옴)
  • Overlay: 로고 클릭 시 home on 전체가 기존 Header 위에 TOP_LEFT로 겹칩니다(배경 없음). bg black과 document_tit가 숨겨져 있어 그 부분은 기존 Header가 그대로 보입니다. 즉 새로 그려지는 것은 섹션 메뉴(x375–1680)이고, 홈·창 영역은 기존 Header와 같은 컴포넌트 사본입니다.
  • 섹션(5개): 제목 badge(19px, Union 도형) + 버튼 그룹 box(46px) + 섹션 면(75px). 섹션 폭 = 버튼 수 × 80 + 좌우 padding(10, 첫·마지막 섹션은 한쪽 11)입니다.
    • 작업중인 파일: 저장 · 복사저장 · 내보내기 · 도면묶기
    • 다른파일 열기: 찾아열기 · 최근파일 · 새파일
    • 파일 손상시: 복구하기 · 임시파일
    • My Setting: Display... · 저장하기 · 불러오기
    • 궁금하면: 설명보기 · 문의하기 · S/W정보
  • 버튼: 80×46, 아이콘 18px(31,6), 라벨 14px(top 25). 마지막 버튼을 뺀 버튼 오른쪽에 1×44 gradient 구분선이 있습니다.

3.2 공통 영역과 화면별 차이

구분 내용
공통(두 화면 동일) 섹션 5개·버튼 15개·제목·구분선·면 gradient, 홈 버튼, 창 영역(인쇄·K·창이동·최소·종료), border-top/bottom #5F4B0F
26:10591만 하단 강조 = 섹션별 사각형 5개(#FEC501 + #5F4B0F → #FF5100 gradient), btn_home 클릭 → open, 메뉴 클릭 → close
662:67267만 하단 강조 = 메뉴 전체 1305×30에 2px gradient stroke(#FF5100 → #5F4B0F, fill 숨김), 팝업가이드 Variant5(K 미리보기 209×186, "다중인쇄/도면관리") 표시, open/close reaction 없음, btn_home 배경 asset이 다름
버튼 세트 공통 Default / Variant2 / Variant3. V2와 V3는 시각 속성이 같습니다(Plugin API로 하위 노드 전체를 비교했고 위치만 다름)
버튼별 차이 아이콘 asset과 위치(찾아열기 top 5, Display 24×22), 라벨 박스 폭(33–70), 그룹 내 위치에 따른 hover radius(첫 3 0 0 3 / 중간 0 / 마지막 0 3 3 0), 구분선 유무(마지막 없음), 찾아열기·최근파일만 구분선 gradient가 다름, 저장하기·S/W정보만 flex gap 2

3.3 상태

상태 Figma 근거 시각
Default 각 세트 Default 면 없음, 아이콘 회색, 라벨 #F6F4F2 + 검정 외곽선
Hover Default ON_HOVER → V2 1px INSIDE 주황 세로 gradient 테두리(#DA6813 8.5% / #FFBB89 37.9% / #E5690D 71.9% / #AE3607 92.8%), 아이콘·라벨 #FF5C00, 아이콘·라벨 1px 위·왼쪽 이동
Pressed / 선택(?) V2 ON_CLICK → V3, V3 ON_CLICK → Default V2와 동일. 의미는 미정(§5 R-3)
Open / Close btn_home ON_CLICK → OVERLAY, 메뉴 영역 ON_CLICK → CLOSE —
Focus / Disabled / 키보드 Figma에 없음 §5 검토 대상

3.4 전환 관계 (Prototype)

[기존 Header] --btn_home click--> [home on overlay 26:10591]
[home on]     --메뉴 영역(Group 2882) click--> CLOSE → [기존 Header]
버튼: Default --hover--> V2 --click--> V3 --click--> Default   (최근파일: V2에서 끝, S/W정보: V3에서 끝)
팝업가이드: Default --hover--> Variant5(K 미리보기)  ※ 기존 SWHeaderKGuide와 같은 대상

Figma에는 메뉴 밖 클릭, Escape, 로고 재클릭으로 닫기, 각 버튼의 실제 동작(파일 대화상자, 최근 파일 목록 등)이 정의되어 있지 않습니다(§5).

4. 공통 컴포넌트 구조·공개 API 초안

4.1 재사용 우선순위 판단

단계 후보 판단
기존 SW SWHeaderHome(onHomeClick), SWHeaderKGuide, 창 제어, useSWHeaderDropdown의 닫기 계약(Escape·바깥 클릭·Tab 이탈·Focus 복귀), 텍스트 외곽선·focus 토큰, SWTheme 재사용. Header 쪽은 그대로 두고 메뉴만 새로 만듭니다. 홈·창 영역을 다시 그리지 않습니다
작업 A 계획 SWToolButton(pill/text/document), SWToolGroup(selection), SWPopup* §4.4 참고. 그대로 쓸 수 있는 appearance가 없습니다
shadcn / Radix Popover, NavigationMenu @hm-design/sw는 @hm-design/ui·Radix에 의존하지 않습니다(독립 패키지). 새 의존성은 별도 승인 대상이므로 기존 SW hook 방식을 따릅니다
최소 Custom 섹션 badge, 그룹 box, 80×46 타일 버튼 시각 요소만 새로 만듭니다(Figma 근거 있음)

4.2 구조

<SWHomeMenu>                       overlay 패널(region/dialog 역할은 §5 R-6), open 상태·닫기 계약
  <SWHomeMenuSection title>        섹션 면 + 제목 badge(폭은 글자에 맞춤) + 그룹 box
    <SWHomeMenuItem icon label />  80×46 타일 button. 마지막 항목은 구분선 자동 생략, 첫/마지막 hover radius 자동

데이터형(sections)과 조합형(children) 중 하나만 써도 21개를 모두 표현할 수 있습니다. 위치·첫/마지막 여부·구분선·섹션 폭은 항목 수에서 자동 계산합니다. 따라서 AI가 항목만 추가해도 같은 스타일이 적용됩니다.

4.3 공개 API 초안

export interface SWHomeMenuItemData {
  id: string
  label: string                    // 한 줄, 넘치면 말줄임 + title (기존 규칙)
  icon?: ReactNode                 // currentColor SVG 권장: Default 회색 → Hover #FF5C00을 CSS가 처리
  iconHover?: ReactNode            // 색 고정 이미지 쌍일 때만(기존 close/close-hover 방식)
  disabled?: boolean               // 시각은 검토 대상(R-4)
  hidden?: boolean                 // 미렌더, 자리 없음(작업 A 숨김 정책과 맞춤)
  title?: string                   // tooltip/전체 이름
  "aria-label"?: string
  closeOnSelect?: boolean          // 기본 true (Figma: 메뉴 클릭 → CLOSE)
  onSelect?: (item: SWHomeMenuItemData) => void
}
export interface SWHomeMenuSectionData {
  id: string
  title: string
  items: readonly SWHomeMenuItemData[]
  hidden?: boolean
}
export interface SWHomeMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
  sections?: readonly SWHomeMenuSectionData[]  // 또는 children(<SWHomeMenuSection>)
  open?: boolean                               // controlled
  defaultOpen?: boolean
  onOpenChange?: (open: boolean) => void
  onItemSelect?: (item: SWHomeMenuItemData, section: SWHomeMenuSectionData) => void
  /** 닫힐 때 Focus를 돌려줄 대상(기본: 연결된 홈 버튼). 통합 단계에서 SWHeader가 자동 연결 */
  returnFocusRef?: RefObject<HTMLElement>
}
export function SWHomeMenu(props: SWHomeMenuProps): JSX.Element
export function SWHomeMenuSection(props: { title: string; children: ReactNode; className?: string }): JSX.Element
export function SWHomeMenuItem(props: ButtonHTMLAttributes<HTMLButtonElement> & { label: string; icon?: ReactNode; iconHover?: ReactNode }): JSX.Element
  • 텍스트·아이콘·메뉴·이벤트·상태는 모두 외부에서 지정합니다. 패키지에는 CAD 동작이 없습니다. Figma의 15개 메뉴는 Storybook fixture(또는 선택형 기본 아이콘 세트, §6 A-2)로만 제공합니다.
  • 독립 단계 연결 방식(SWHeader 무수정): <SWHeader onHomeClick={() => setOpen(v => !v)} />와 <SWHomeMenu open onOpenChange />를 같은 상대 위치 컨테이너 안에 둡니다. 위치는 host가 style로 지정합니다.
  • 통합 단계 연결 방식(안): SWHeader에 homeMenu?: SWHomeMenuProps | ReactNode를 추가합니다. 홈 버튼에 aria-expanded/aria-controls를 붙이고, 객체 영역 시작 x에 앵커하며, 열림 중 홈 버튼 상태를 표시합니다. 작업 A의 leading 슬롯·파일 열기 배치와 같은 파일을 수정하므로 통합 단계에서만 합니다.
  • CSS: 새 파일 packages/sw/src/theme/sw-home-menu.css에 .hm-sw-home-menu*만 둡니다. 새 토큰은 --hm-sw-home-menu-*이고, 기존 --hm-sw-header-text-outline·--hm-sw-header-label-outline·--hm-sw-header-focus-color·font 토큰은 그대로 읽습니다. 전역 선택자와 Dark 분기는 두지 않습니다. 단독 사용 시 <SWTheme> 안에서 렌더합니다.
  • Font Weight: 버튼 라벨 700(기존 "값·제목·토글 700"과 Figma 'Dotum/bold' 명칭), 제목 badge 12px 400(Stroke 없는 검정 글자)을 제안합니다. 600은 쓰지 않습니다. 최종값은 §5 R-5에서 확인합니다.

4.4 작업 A와 겹치는 부분

작업 A 항목 겹침 제안
SWToolButton appearance pill/text/document 80×46 세로 아이콘+라벨 타일은 승인된 appearance에 없습니다 B는 SWHomeMenuItem을 독립으로 만듭니다. 통합 단계에서 SWToolButton appearance="tile"로 합칠지 정합니다(별도 승인 대상 A-1)
SWToolGroup selection="single" 메뉴에는 선택 상태가 없습니다(V3 의미 미정) 사용하지 않습니다. 키보드 이동 규칙만 맞춥니다
SWPopup/Section/Row 밝은 속성창 Popup과 시각·역할이 다릅니다 재사용하지 않습니다. 이름이 비슷한 Section은 namespace(SWHomeMenuSection)로 구분합니다
hiddenControls·show* 항목 숨김 개념이 같습니다 항목·섹션 hidden(미렌더, 자리 없음)으로 A와 같은 의미를 씁니다
documentOpenPlacement, 문서 New/Open "찾아열기·새파일"이 onDocumentOpen/onDocumentNew와 중복될 수 있습니다 검토 대상(R-7). 컴포넌트는 콜백만 받습니다
leading 슬롯·파일 열기 배치·반응형 메뉴 시작 x(Figma 375 = 문서 제목 끝)가 바뀝니다 통합 단계에서 실제 DOM 위치로 앵커합니다(x 하드코딩 금지)
속성Bar(.hm-sw-property-bar) 같은 49px 아래 overlay 영역을 씁니다(메뉴는 77px까지) z-index·동시 표시는 R-8

5. 검토 대상 (Figma에 없는 동작 — 확정하지 않음)

ID 항목 제안(미확정)
R-1 메뉴 닫기: 바깥 클릭·Escape·로고 재클릭·Tab 이탈 기존 SW Dropdown 계약과 같게 처리하고 Focus는 홈 버튼으로 복귀
R-2 항목 클릭 후 닫힘 Figma CLOSE를 따라 기본 닫힘, closeOnSelect로 변경
R-3 V3(클릭 후)의 의미: 누름(pressed) 순간 표시인지, 유지되는 선택 상태인지. 최근파일·S/W정보의 reaction 누락 누름(:active) 표시로만 구현하고 유지 상태는 만들지 않음
R-4 Disabled·Focus-visible 시각 기존 SW 규칙(opacity .4, focus 2px --hm-sw-header-focus-color)
R-5 라벨·제목 Font Weight(700/400), Stroke 적용 범위 §4.3 제안
R-6 접근성 역할: role="menu" + 화살표 이동 vs region + button + Tab button 목록 + 섹션 aria-labelledby, 화살표 이동은 작업 A 규칙과 맞춤
R-7 찾아열기·새파일과 기존 onDocumentOpen/onDocumentNew 관계, 최근파일 하위 목록 여부 컴포넌트는 콜백만 받고, 연결은 host 또는 통합 단계에서 결정
R-8 속성Bar·Dropdown·K 미리보기와의 z-index와 동시 표시 메뉴가 열리면 다른 Dropdown을 닫고 속성Bar보다 위에 표시
R-9 1920 미만 반응형(메뉴 1305px) 가용 폭 안 내부 가로 스크롤(속성Bar 정책과 동일). 섹션 접기·줄바꿈은 새 디자인이 필요해 A-4로 분리
R-10 하단 강조 strip 두 가지(섹션별 vs 전체 2px) 중 기준 기본 디자인 컴포넌트인 26:10591(섹션별)
R-11 home on의 border-top/bottom #5F4B0F와 홈 버튼 배경 asset이 기존 Header와 다른지 2단계에서 기존 home-bg*.svg·Header 선과 대조한 뒤 보고
R-P1 속성Bar 라벨 고정 박스 여백(P4) 글꼴 대체 영향이라 유지 권장
R-P2 속성Bar 세로 0.5px(P5) 유지 권장

6. 별도 승인 대상 (새 디자인 판단 또는 승인 범위 초과)

ID 항목 이유
A-1 SWToolButton에 tile appearance 추가 또는 SWHomeMenuItem 별도 유지 작업 A에서 확정된 공개 API 변경
A-2 Figma 메뉴 아이콘 15개(+hover 15개)를 패키지 기본 asset으로 제공할지, Story fixture로만 둘지 공개 asset·번들 크기 증가
A-3 SWHeader에 homeMenu prop·홈 버튼 열림 상태 추가 기존 Header API·스타일 변경(통합 단계)
A-4 좁은 폭에서 섹션 접기·More 이동 등 새 반응형 디자인 Figma에 없는 디자인
A-5 Radix 등 새 dependency 사용 현재 @hm-design/sw에는 런타임 의존성이 없음
A-6 속성Bar P1–P3 수정 기존 공유 CSS 변경이며, 사용자 확정 디자인 범위 안인지 확인 필요

7. 파일 경계

구분 파일 내용
B 독립(신규만) packages/sw/src/components/sw-home-menu/** SWHomeMenu.tsx, SWHomeMenuSection.tsx, SWHomeMenuItem.tsx, types.ts, index.ts, (A-2 승인 시) assets/
packages/sw/src/theme/sw-home-menu.css .hm-sw-home-menu* 스타일·토큰
src/sw/sw-home-menu.stories.tsx Figma 21개 재현, 단독, 동적 데이터, Header 조합(host wiring) Story. Story CSS는 새 파일만
docs/sw/figma-additional/** 이 보고서, 수집 자료, 2단계 검증 기록
통합 단계로 미룸 packages/sw/src/index.ts, 테마 진입 CSS(sw.css import 체인) export·CSS 연결(2단계 Story는 상대 경로 import로 확인)
packages/sw/src/components/sw-header/**, packages/sw/src/theme/sw.css homeMenu 연결(A-3), 속성Bar P1–P3(A-6)
build.mjs, package.json asset·CSS 번들 포함
packages/sw/ai/**, packages/sw/README.md, docs/sw/sw-header-*.md AI 가이드·카탈로그·사용법. 2단계에서는 초안을 docs/sw/figma-additional/에 둠
기존 stories(src/sw/sw-header*.stories.tsx, sw-header-overview.tsx, sw-stories.css) 수정하지 않음

8. 2단계 구현·검증 계획 (승인 후)

구현 순서

  1. Asset 재수집(만료 전) → A-2 결정에 따라 경로 확정 → 섹션 badge·그룹 box·구분선·타일 CSS
  2. SWHomeMenuItem → SWHomeMenuSection → SWHomeMenu(open 계약, R-1·R-2 결정 반영)
  3. Story SW/Home Menu: Figma 재현, 단독, 동적, Header 조합
  4. AI 가이드 초안(docs/sw/figma-additional/ai-home-menu-draft.md) → 통합 단계에서 packages/sw/ai/로 이동

검증 범위(실행하지 않은 항목은 미검증으로 기록)

범위 방법 기준
Figma 비교 1920 viewport, Figma 스크린샷과 같은 배율 비교 + 요소 실측 섹션 x·폭(340/260/180/260/261), 높이 75·46·19, 색·gradient·shadow
21개 재현 제목 5개(참고 1개 포함), 버튼 15개 × Default/Hover/Pressed 상태 Story 노드별 체크리스트
단독 사용 <SWTheme> 안 SWHomeMenu만 렌더 Header 없이 동작·스타일 유지, 전역 CSS 누수 없음
동적 콘텐츠 항목 추가·삭제·숨김, 긴 라벨, 아이콘 없음, 섹션 1개·6개, 비동기 갱신 폭·구분선·radius 자동 계산, 말줄임
Header/Popup 조합 onHomeClick host wiring, 속성Bar·Dropdown·K 가이드 동시 상태 닫기 계약, Focus 복귀, z-index(R-8)
반응형 1920/1440/1280/1080/900/768/640/390 가로 넘침 없이 내부 스크롤(R-9)
Storybook 기존 SW Story 회귀 없음 기존 Story 무수정 확인
AI 가이드 문서만으로 새 메뉴 항목·섹션 생성 시나리오 1건 임의 값 없이 같은 스타일
독립 React 19 소비 프로젝트 통합 단계 build 후 packed tarball 설치 타입·CSS·asset 로드. dist·export 연결이 통합 단계라 2단계에서는 미검증 예정
View Git Blame Copy Permalink