shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

style(storybook): group overlay, disclosure and navigation story pages

Browse Source 
- Sheet + Drawer, Tooltip + Hover Card, Accordion + Collapsible,
  Dialog + Alert Dialog, Dropdown Menu + Context Menu on one page each
  (specimens moved to *-examples.tsx; absorbed Stories keep their IDs)
- Popover, Tabs content spacing, Breadcrumb, Menubar and Command tidied
- Component docs updated to the new representative pages
This commit is contained in:
shkim4 committed 2026-11-13 17:57:53 +09:00
1 parent 71d504407d
commit bad2acfc49
35 files changed
+649 -521
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/components/accordion.md
+1 -1
View File
@@ -11,7 +11,7 @@
| 구현 상태 | 구현 완료 (현재 HM 규격) |
| 기준일 | 2026-10-02 |
| 기반 | shadcn/ui Accordion (Radix `Accordion`) |
| 대표 Story | `Components/Disclosure/Accordion` → `All` (이름 "Accordion") |
| 대표 Story | `Components/Disclosure/Accordion` → `All` (이름 "Accordion", 사이드바 `접기·펼치기`, Collapsible 예제 포함) |
| 보류 | 아래 §11 |
## 2. 적용 근거
docs/components/alert-dialog.md
+3 -2
View File
@@ -11,7 +11,7 @@
| 구현 상태 | 구현 완료 (현재 HM 규격) |
| 기준일 | 2026-10-02 |
| 기반 | shadcn/ui Alert Dialog (Radix `AlertDialog`) |
| 대표 Story | `Components/Overlay/Alert Dialog` → `All` (이름 "Alert Dialog") |
| 대표 Story | `Components/Overlay/Dialog` → `All`의 "Alert Dialog" 섹션(사이드바 `대화상자`). 기존 `Components/Overlay/Alert Dialog` → `All`(`components-overlay-alert-dialog--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) |
| 보류 | 아래 §11 |
## 2. 적용 근거
@@ -75,7 +75,8 @@ Radix AlertDialog 구조 전부: Portal·Overlay·modal·focus trap·초기 focu
## 9. Storybook
- 대표 Story `All`("Alert Dialog"): 트리거 2개(로그아웃 = 일반 확인, 삭제 = destructive)가 각각 실제 Alert Dialog를 연다.
- 사이드바 통합(2026-11-12): 사이드바에는 `대화상자`(Dialog 대표 Story) 하나만 보이고, 그 화면의 "Alert Dialog" 섹션에서 트리거 2개(로그아웃 = 일반 확인, 삭제 = destructive)가 각각 실제 Alert Dialog를 연다. 예제는 공용 파일 `src/components/alert-dialog-examples.tsx`(`AlertDialogConfirmation`, `AlertDialogDestructive`)에 있고 두 Story 파일이 함께 쓴다.
- 이 파일의 `All`("Alert Dialog", 같은 트리거 2개)은 `verification` 태그로 사이드바에서만 숨기며 ID·URL은 그대로다.
- verification: `Confirmation`, `Destructive`(처음부터 열림).
## 10. 사용자 확정 결정
docs/components/breadcrumb.md
+1 -1
View File
@@ -69,7 +69,7 @@ Component Mapping 위치: `packages/ui/src/theme/breadcrumb.css` (`--hm-breadcru
## 9. Storybook
- 대표 Story `All`("Breadcrumb"): Variants(Basic(3 depth), Ellipsis(Dropdown Menu 조합), Custom link(asChild)와 custom separator)를 PC 균등 3열로, Usage(Long path, 최대 900px)를 한 페이지에 둔다(2026-11-09 Overview 제거).
- 대표 Story `All`("Breadcrumb"): Variants(Basic(3 depth), Ellipsis(Dropdown Menu 조합), Custom(asChild link와 custom separator))를 iframe 1000px 이상 균등 3열·미만 1열로, Usage(Long path, 섹션 전체 너비, 좁으면 자연 줄바꿈)를 한 페이지에 둔다(2026-11-09 Overview 제거, 2026-11-13 Custom 명칭·1/3열·900px 제한 제거).
- verification: `Basic`, `Ellipsis`, `Long Path`.
## 10. 사용자 확정 결정
docs/components/collapsible.md
+1 -1
View File
@@ -9,7 +9,7 @@
| 구현 상태 | 구현 완료 (현재 HM 규격) |
| 기준일 | 2026-10-02 |
| 기반 | shadcn/ui Collapsible (Radix `Collapsible`) |
| 대표 Story | `Components/Disclosure/Collapsible` → `All` (이름 "Collapsible") |
| 대표 Story | `Components/Disclosure/Accordion` → `All`의 "Collapsible · …" 섹션(사이드바 `접기·펼치기`). 기존 `Components/Disclosure/Collapsible` → `All`(`components-disclosure-collapsible--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) |
| 보류 | 아래 §11 |
## 2. 적용 근거
docs/components/context-menu.md
+3 -2
View File
@@ -9,7 +9,7 @@
| 구현 상태 | 구현 완료 (현재 HM 규격) |
| 기준일 | 2026-10-03 |
| 기반 | shadcn/ui Context Menu (Radix `ContextMenu`, `radix-ui` 1.6.7 / `@radix-ui/react-context-menu` 2.3.7) |
| 대표 Story | `Components/Overlay/Context Menu` → `All` (이름 "Context Menu") |
| 대표 Story | `Components/Overlay/Dropdown Menu` → `All`의 "Context Menu" 섹션(사이드바 `팝업 메뉴`). 기존 `Components/Overlay/Context Menu` → `All`(`components-overlay-context-menu--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) |
| 보류 | 아래 §11 |
## 2. 적용 근거
@@ -61,7 +61,8 @@ Dropdown Menu와 동일: shadcn 시각 class(`rounded`, `shadow`, `p-1`, `focus:
## 9. Storybook
- 대표 Story `All`("Context Menu"): 점선 영역을 우클릭하면 전체 메뉴가 열린다(Label, Item + Shortcut, disabled, Separator, Checkbox, Radio Group, Sub menu, destructive).
- 사이드바 통합(2026-11-12): 사이드바에는 `팝업 메뉴`(Dropdown Menu 대표 Story) 하나만 보이고, 그 화면의 "Context Menu" 섹션에서 점선 영역을 우클릭하면 전체 메뉴가 열린다(Label, Item + Shortcut, disabled, Separator, Checkbox, Radio Group, Sub menu, destructive). 예제는 공용 파일 `src/components/context-menu-examples.tsx`(`ContextMenuFull`)에 있고 두 Story 파일이 함께 쓴다.
- 이 파일의 `All`("Context Menu", 같은 점선 영역)은 `verification` 태그로 사이드바에서만 숨기며 ID·URL은 그대로다.
- verification: `Open`(로드 시 합성 `contextmenu` 이벤트로 열린 상태, fullscreen).
## 10. 사용자 확정 결정
docs/components/dialog.md
+3 -2
View File
@@ -13,7 +13,7 @@
| 구현 상태 | HM 스타일 적용 완료 (`<DialogContent />`만으로 적용, `hm-dialog` class 없음) |
| 기준일 | 2026-10-02 |
| 기반 | shadcn/ui Dialog + Radix `Dialog` |
| 대표 Story | `Components/Overlay/Dialog` → `All` (이름 "Dialog") |
| 대표 Story | `Components/Overlay/Dialog` → `All` (이름 "Dialog", 사이드바 `대화상자`, Alert Dialog 예제 포함) |
| 보류 | Overlay 수치, Close 버튼 규격, 초기 focus 대상, 좁은 화면 Actions 배치 등 (§11) |
## 2. 적용 근거
@@ -111,7 +111,8 @@ Radix 구조 전부를 그대로 둔다: Portal(`DialogPortal`), Overlay, modal
## 9. Storybook
- 대표 Story `All`("Dialog")이 기본 sidebar의 유일한 Dialog 항목이다 → 1뎁스. overlay라 StateBoard를 쓰지 않고, 트리거 버튼 6개(기본, 긴 내용, 넓은 표, 본문 스크롤, 삭제 확인, 폼)가 각각 실제 Dialog를 연다.
- 대표 Story `All`("Dialog")이 기본 sidebar의 유일한 Dialog 항목이다 → 1뎁스. 트리거마다 단일 열 StateBoard(SpecimenGrid)에 두며, Variants(기본, 긴 내용, 넓은 표, 본문 스크롤)·Usage(삭제 확인, 폼)·Alert Dialog(확인, 삭제) 3구역의 트리거가 각각 실제 대화상자를 연다.
- 사이드바 통합(2026-11-12): 같은 대표 Story에 "Alert Dialog" 섹션(로그아웃 = 일반 확인, 삭제 = destructive)을 두어 사이드바 `대화상자` 하나에서 일반·확인·경고 대화상자를 모두 연다. 예제는 공용 파일 `src/components/alert-dialog-examples.tsx`를 Alert Dialog Story와 함께 쓴다(중복 구현 없음). Alert Dialog Story는 ID·URL을 유지하고 사이드바에서만 숨긴다([alert-dialog.md §9](alert-dialog.md#9-storybook)).
- 본문 스크롤은 ui_viz "세로 스크롤 · 본문만"과 같은 조건(앱 공통 Header 70px / Footer 48px 제외)이다. Portal 때문에 앱 높이는 trigger wrapper가 아니라 `DialogContent`의 `style`로 `--hm-dialog-app-header-height`/`--hm-dialog-app-footer-height`를 넘긴다.
- verification(`tags: ["verification"]`, 닫힌 채가 아니라 처음부터 열림): `Open`, `Long Content`, `Wide Content`, `Body Scroll`, `Delete Confirmation`.
- pseudo-state helper로 열린 상태를 흉내 내지 않는다.
docs/components/drawer.md
+1 -1
View File
@@ -11,7 +11,7 @@
| 구현 상태 | 구현 완료 (현재 HM 규격) |
| 기준일 | 2026-10-02 |
| 기반 | shadcn/ui Drawer = **vaul** (`vaul@1.1.2`, 이번에 `@hm-design/ui` dependency로 추가) + Radix Dialog |
| 대표 Story | `Components/Overlay/Drawer` → `All` (이름 "Drawer") |
| 대표 Story | `Components/Overlay/Sheet` → `All`의 "Drawer" 섹션(사이드바 `시트·드로어`). 기존 `Components/Overlay/Drawer` → `All`(`components-overlay-drawer--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) |
| 보류 | 아래 §11 |
## 2. 적용 근거
docs/components/dropdown-menu.md
+2 -1
View File
@@ -9,7 +9,7 @@
| 구현 상태 | 구현 완료 (현재 HM 규격) |
| 기준일 | 2026-10-02 |
| 기반 | shadcn/ui Dropdown Menu (Radix `DropdownMenu`) |
| 대표 Story | `Components/Overlay/Dropdown Menu` → `All` (이름 "Dropdown Menu") |
| 대표 Story | `Components/Overlay/Dropdown Menu` → `All` (이름 "Dropdown Menu", 사이드바 `팝업 메뉴`, Context Menu 예제 포함) |
| 보류 | 아래 §11 |
## 2. 적용 근거
@@ -75,6 +75,7 @@ Radix 구조·ARIA(`role=menu`, `menuitem*`)·키보드(방향키, Home/End, Ent
## 9. Storybook
- 대표 Story `All`("Dropdown Menu"): 트리거로 실제 메뉴를 연다(Label, Item + Shortcut, disabled, Separator, Checkbox, Radio Group, Sub menu, destructive).
- 사이드바 통합(2026-11-12): 사이드바 표시명은 `팝업 메뉴`이고, 접근성용 숨김 H1 "Dropdown Menu · Context Menu"(화면에는 보이지 않음) 아래 "Dropdown Menu"와 "Context Menu" 섹션을 함께 둔다. Context Menu 예제는 공용 파일 `src/components/context-menu-examples.tsx`를 Context Menu Story와 함께 쓴다(중복 구현 없음). Context Menu Story는 ID·URL을 유지하고 사이드바에서만 숨긴다([context-menu.md §9](context-menu.md#9-storybook)).
- verification: `Open`(열린 상태, fullscreen).
## 10. 사용자 확정 결정
docs/components/hover-card.md
+1 -1
View File
@@ -9,7 +9,7 @@
| 구현 상태 | 구현 완료 (현재 HM 규격) |
| 기준일 | 2026-10-02 |
| 기반 | shadcn/ui Hover Card (Radix `HoverCard`) |
| 대표 Story | `Components/Overlay/Hover Card` → `All` (이름 "Hover Card") |
| 대표 Story | `Components/Overlay/Tooltip` → `All`의 "Hover Card" 섹션(사이드바 `툴팁·호버 카드`). 기존 `Components/Overlay/Hover Card` → `All`(`components-overlay-hover-card--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) |
| 보류 | 아래 §11 |
## 2. 적용 근거
docs/components/navigation-menu.md
+2 -2
View File
@@ -72,8 +72,8 @@ Radix 구조·동작(hover open delay, Arrow 키와 Tab 이동, Escape 닫힘, f
## 9. Storybook
- 대표 Story `All`("Navigation Menu"): Variants 한 구역에 `Viewport(기본)`과 `viewport={false}` 두 구성을 PC 균등 2열로 둔다(2026-11-09 Overview 제거, 닫힌 메뉴용 min-height 256px는 PC에서만 해제하고 1000px 미만 1열에서는 유지). 제품(설명 있는 3 링크), 자료(2열 4 링크), 회사(현재 위치 링크), 문의(일반 링크), 준비 중(disabled Trigger).
- verification: `Default`, `No Viewport`.
- 대표 Story `All`("Navigation Menu"): Variants 한 구역에 "Viewport"(기본)와 "No viewport"(`viewport={false}`) 두 구성을 PC 균등 2열로 둔다(2026-11-09 Overview 제거, 닫힌 메뉴용 min-height 256px는 PC에서만 해제하고 1000px 미만 1열에서는 유지). 제품(설명 있는 3 링크), 자료(2열 4 링크), 회사(현재 위치 링크), 문의(일반 링크), 준비 중(disabled Trigger).
- verification: `Default`, `No Viewport`, `Indicator Alignment`.
- Story의 Content 폭은 `style` 인라인으로 지정한다(새 Story 파일의 Tailwind 임의값 클래스가 개발 서버에서 생성되지 않는 일이 있었다).
## 10. 사용자 확정 결정
docs/components/sheet.md
+1 -1
View File
@@ -11,7 +11,7 @@
| 구현 상태 | 구현 완료 (현재 HM 규격) |
| 기준일 | 2026-10-02 |
| 기반 | shadcn/ui Sheet (Radix `Dialog`) |
| 대표 Story | `Components/Overlay/Sheet` → `All` (이름 "Sheet") |
| 대표 Story | `Components/Overlay/Sheet` → `All` (이름 "Sheet", 사이드바 `시트·드로어`, Drawer 예제 포함) |
| 보류 | 아래 §11 |
## 2. 적용 근거
docs/components/sonner.md
+1 -1
View File
@@ -9,7 +9,7 @@
| 구현 상태 | 구현 완료 (현재 HM 규격) |
| 기준일 | 2026-10-03 |
| 기반 | shadcn/ui Sonner (`sonner` 2.0.8) |
| 대표 Story | `Components/Feedback/Sonner` → `All` (이름 "Toast") |
| 대표 Story | `Components/Feedback/Sonner` → `All` (이름 "Sonner", 사이드바 `토스트 알림`) |
| 보류 | 아래 §11 |
## 2. 적용 근거
docs/components/tabs.md
+3 -3
View File
@@ -32,7 +32,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@hm-design/ui"
| 구현 상태 | 기본 Primary Fill + 명시적 Secondary Fill + Legacy non-fill + 넘침 이동 버튼(D-090) 구현 (`hm-tab` class 없음) |
| 기준일 | 2026-10-09 (D-01 조합·D-02 상단 White 80% 반영, API는 2026-10-08 기본값 유지) |
| 기반 | shadcn/ui Tabs (Radix `Tabs`) |
| 대표 Story | `Components/Navigation/Tabs` → `All` (이름 "Tabs"): Primary(Fill + content) / Secondary(Fill + surface) |
| 대표 Story | `Components/Navigation/Tabs` → `All` (이름 "Tabs"): Variants Primary(Fill + content) / Secondary(Fill + surface), Behavior Overflow, Usage |
| 보류 | 아래 §11 |
## 2. 적용 근거
@@ -126,13 +126,13 @@ Radix Tabs 구조·ARIA(`role=tablist/tab/tabpanel`, `aria-selected`)·roving ta
## 9. Storybook
- 대표 Story `All`("Tabs"): **Variants**는 Primary(fill / panelSurface를 생략한 기본)·Secondary(`panelSurface="surface"`)·Overflow(20개 탭, 이전 States의 Overflow 예시)를 PC 균등 3열로 두고, **Usage**는 Card 내부 · Secondary / 페이지 직접 배치 · Primary 2열이다(2026-11-09 Overview·States 구역을 Variants로 통합, 이 페이지의 위아래 패딩만 줄여 1280×900 한 화면). 같은 Primary가 반복되던 **Default API** 구역(`fill`만, `fill` + `panelSurface="content"` 명시)은 2026-10-22 숨김 verification `DefaultApi`로 옮겼다. 기존 대표 Story ID와 메뉴를 유지한다. Hover는 실제 포인터로 확인한다.
- 대표 Story `All`("Tabs"): **Variants**는 Primary(fill / panelSurface를 생략한 기본)·Secondary(`panelSurface="surface"`) 균등 2열, **Behavior**는 Overflow(20개 탭, 이전 States의 Overflow 예시, 이전/다음 이동 버튼·내부 스크롤) 1개를 같은 2열 grid의 왼쪽 열에, **Usage**는 Card 내부 · Secondary / 페이지 직접 배치 · Primary 균등 2열이다. 세 구역은 같은 grid(24px 간격)를 쓰며, 섹션 본문의 실제 콘텐츠 너비(컨테이너 쿼리, 공통 board 들여쓰기 제외)가 720px 이상이면 2열, 미만이면 1열이다. 섹션 제목·예제 라벨·간격은 공통 `StorySection` / `StateBoard`를 따른다(2026-11-13 Overflow를 Variants에서 Behavior로 분리, 예제 내용 불변. 이전: 2026-11-09 Overview·States 구역을 Variants로 통합). 같은 Primary가 반복되던 **Default API** 구역(`fill`만, `fill` + `panelSurface="content"` 명시)은 2026-10-22 숨김 verification `DefaultApi`로 옮겼다. 기존 대표 Story ID와 메뉴를 유지한다. Hover는 실제 포인터로 확인한다.
- verification(`tags: ["verification"]`): `DefaultApi`, `Secondary`, `SelectedFirst`, `SelectedLast`, `Focus`, `Disabled`, `Overflow`, `SecondaryOverflow`, `LongLabel`. Primary 기준이며 Secondary는 같은 CSS 경로를 쓴다. Focus는 `play`로 실제 focus를 준다.
- `LongLabel`은 짧은 라벨, 긴 라벨 1개, 긴 라벨 여러 개, 260px 좁은 container를 함께 검증한다. 라벨은 `nowrap`·무말줄임이며 실제 필요 폭이 넘을 때 이동 버튼으로 전환한다.
- non-fill Story(`Selected`, `SelectedMiddle`, `Fill`, `FillContent`, `FillOverflow`와 대표의 non-fill 구역)는 2026-10-06에 제거했다. API(`fill=false`, Legacy profile CSS)는 유지한다(§10).
- 2026-10-08 숨김 `Compatibility`(`verification` 태그 + **VERIFICATION ONLY** 표시)는 Legacy `fill={false}` / `fill={false} panelSurface="surface"` 동일성과 `panelSurface="surface"`만 명시한 경우의 Secondary 전환을 확인한다. 일반 Story 메뉴를 추가하지 않는다.
- Variants / Usage, `DefaultApi` 및 Fill verification 예제의 콘텐츠 panel은 `px-0 py-6`로 통일해 D-01을 실제로 반영한다. Primary는 상위 content 면, Secondary는 상위 surface 면에 연결하며 내부 패널의 별도 border·배경·radius를 제거한다. Compatibility의 Legacy non-fill 두 예제만 이전 `border bg-card rounded-b p-4`를 보존한다.
- **Usage**(2026-10-09 추가)는 공개 Card / Input / Textarea / Table을 조합해 Card 내부 Secondary와 페이지 content 면 위 Primary를 보여준다. 두 예제 모두 `TabsContent`는 `px-0 py-6`이며 별도 배경·border·radius를 추가하지 않는다. 대표 Story ID·기존 구역·verification Story는 유지한다.
- **Usage**(2026-10-09 추가)는 공개 Card / Input / Textarea / Table을 조합해 Card 내부 Secondary와 페이지 content 면 위 Primary를 보여준다. 두 예제 모두 `TabsContent`는 좌우 16px·상단 12px·하단 24px(`px-4 pt-3 pb-6`, 2026-11-13)이며 Card 예제의 Card / CardContent 여백은 그대로 둔다. 패널은 별도 배경·border·radius를 추가하지 않는다. 대표 Story ID·기존 구역·verification Story는 유지한다.
## 10. 사용자 확정 결정
docs/components/tooltip.md
+1 -1
View File
@@ -9,7 +9,7 @@
| 구현 상태 | 구현 완료 (현재 HM 규격) |
| 기준일 | 2026-10-02 |
| 기반 | shadcn/ui Tooltip (Radix `Tooltip`) |
| 대표 Story | `Components/Overlay/Tooltip` → `All` (이름 "Tooltip") |
| 대표 Story | `Components/Overlay/Tooltip` → `All` (이름 "Tooltip", 사이드바 `툴팁·호버 카드`, Hover Card 예제 포함) |
| 보류 | 아래 §11 |
## 2. 적용 근거