feat: improve lightweight AI generation guard
This commit is contained in:
shkim4 committed
1 parent
c86d12bebc
commit
4daca6d357
7 files changed
+327
-162
No files matched your search
@@ -6,52 +6,52 @@ AI 화면 구현 Quick Start의 Component·Pattern 검색에 사용하는 파일
|
||||
|
||||
현재 `packages/ui/src/components/ui/`에는 구현 TSX 44개가 있다. 각 구현 파일은 `packages/ui/src/index.ts`의 공개 export를 통해 소비한다. 아래 Story는 실제 Story 파일의 대표 그룹이다.
|
||||
|
||||
| Component | 구현·공개 API (`@hm-design/ui`) | 사용 문서 | 대표 Story |
|
||||
| Component (문서) | Import 경로 | 주요 용도 | 대표 Story |
|
||||
|---|---|---|---|
|
||||
| Accordion | `Accordion`, `AccordionContent`, `AccordionItem`, `AccordionTrigger`<br>[구현](../../packages/ui/src/components/ui/accordion.tsx) | [문서](../components/accordion.md) | [Disclosure/Accordion](../../src/components/accordion.stories.tsx) |
|
||||
| Alert | `Alert`, `AlertDescription`, `AlertTitle`<br>[구현](../../packages/ui/src/components/ui/alert.tsx) | [문서](../components/alert.md) | [Feedback/Alert](../../src/components/alert.stories.tsx) |
|
||||
| Alert Dialog | `AlertDialog`, `AlertDialogAction`, `AlertDialogCancel`, `AlertDialogContent`, `AlertDialogDescription`, `AlertDialogFooter`, `AlertDialogHeader`, `AlertDialogOverlay`, `AlertDialogPortal`, `AlertDialogTitle`, `AlertDialogTrigger`<br>[구현](../../packages/ui/src/components/ui/alert-dialog.tsx) | [문서](../components/alert-dialog.md) | [Overlay/Alert Dialog](../../src/components/alert-dialog.stories.tsx) |
|
||||
| Aspect Ratio | `AspectRatio`<br>[구현](../../packages/ui/src/components/ui/aspect-ratio.tsx) | [문서](../components/aspect-ratio.md) | [Data & Display/Aspect Ratio](../../src/components/aspect-ratio.stories.tsx) |
|
||||
| Avatar | `Avatar`, `AvatarFallback`, `AvatarImage`<br>[구현](../../packages/ui/src/components/ui/avatar.tsx) | [문서](../components/avatar.md) | [Data & Display/Avatar](../../src/components/avatar.stories.tsx) |
|
||||
| Badge | `Badge`, `badgeVariants`<br>[구현](../../packages/ui/src/components/ui/badge.tsx) | [문서](../components/badge.md) | [Data & Display/Badge](../../src/components/badge.stories.tsx) |
|
||||
| Breadcrumb | `Breadcrumb`, `BreadcrumbEllipsis`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbList`, `BreadcrumbPage`, `BreadcrumbSeparator`<br>[구현](../../packages/ui/src/components/ui/breadcrumb.tsx) | [문서](../components/breadcrumb.md) | [Navigation/Breadcrumb](../../src/components/breadcrumb.stories.tsx) |
|
||||
| Button | `Button`, `buttonVariants`, `ButtonAppearance`<br>[구현](../../packages/ui/src/components/ui/button.tsx) | [문서](../components/button.md) | [Form/Button](../../src/components/button.stories.tsx) |
|
||||
| Calendar | `Calendar`<br>[구현](../../packages/ui/src/components/ui/calendar.tsx) | [문서](../components/calendar.md) | [Search & Date/Calendar](../../src/components/calendar.stories.tsx) |
|
||||
| Card | `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`, `CardSurface`<br>[구현](../../packages/ui/src/components/ui/card.tsx) | [문서](../components/card.md) | [Data & Display/Card](../../src/components/card.stories.tsx) |
|
||||
| Carousel | `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselNext`, `CarouselPrevious`, `useCarousel`, `CarouselApi`<br>[구현](../../packages/ui/src/components/ui/carousel.tsx) | [문서](../components/carousel.md) | [Data & Display/Carousel](../../src/components/carousel.stories.tsx) |
|
||||
| Checkbox | `Checkbox`<br>[구현](../../packages/ui/src/components/ui/checkbox.tsx) | [문서](../components/checkbox.md) | [Form/Checkbox](../../src/components/checkbox.stories.tsx) |
|
||||
| Collapsible | `Collapsible`, `CollapsibleContent`, `CollapsibleTrigger`<br>[구현](../../packages/ui/src/components/ui/collapsible.tsx) | [문서](../components/collapsible.md) | [Disclosure/Collapsible](../../src/components/collapsible.stories.tsx) |
|
||||
| Combobox | `Combobox`, `ComboboxOption`, `ComboboxSize`<br>[구현](../../packages/ui/src/components/ui/combobox.tsx) | [문서](../components/combobox.md) | [Search & Date/Combobox](../../src/components/combobox.stories.tsx) |
|
||||
| Command | `Command`, `CommandEmpty`, `CommandGroup`, `CommandInput`, `CommandItem`, `CommandList`, `CommandSeparator`, `CommandShortcut`<br>[구현](../../packages/ui/src/components/ui/command.tsx) | [문서](../components/command.md) | [Search & Date/Command](../../src/components/command.stories.tsx) |
|
||||
| Context Menu | `ContextMenu`, `ContextMenuCheckboxItem`, `ContextMenuContent`, `ContextMenuGroup`, `ContextMenuItem`, `ContextMenuLabel`, `ContextMenuPortal`, `ContextMenuRadioGroup`, `ContextMenuRadioItem`, `ContextMenuSeparator`, `ContextMenuShortcut`, `ContextMenuSub`, `ContextMenuSubContent`, `ContextMenuSubTrigger`, `ContextMenuTrigger`<br>[구현](../../packages/ui/src/components/ui/context-menu.tsx) | [문서](../components/context-menu.md) | [Overlay/Context Menu](../../src/components/context-menu.stories.tsx) |
|
||||
| Date Picker | `DatePicker`, `DatePickerSize`<br>[구현](../../packages/ui/src/components/ui/date-picker.tsx) | [문서](../components/date-picker.md) | [Search & Date/Date Picker](../../src/components/date-picker.stories.tsx) |
|
||||
| Dialog | `Dialog`, `DialogBody`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger`<br>[구현](../../packages/ui/src/components/ui/dialog.tsx) | [문서](../components/dialog.md) | [Overlay/Dialog](../../src/components/dialog.stories.tsx) |
|
||||
| Drawer | `Drawer`, `DrawerBody`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`<br>[구현](../../packages/ui/src/components/ui/drawer.tsx) | [문서](../components/drawer.md) | [Overlay/Drawer](../../src/components/drawer.stories.tsx) |
|
||||
| Dropdown Menu | `DropdownMenu`, `DropdownMenuCheckboxItem`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuPortal`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger`<br>[구현](../../packages/ui/src/components/ui/dropdown-menu.tsx) | [문서](../components/dropdown-menu.md) | [Overlay/Dropdown Menu](../../src/components/dropdown-menu.stories.tsx) |
|
||||
| [Accordion](../components/accordion.md) | `@hm-design/ui` | 접고 펼치는 항목 | [Disclosure/Accordion](../../src/components/accordion.stories.tsx) |
|
||||
| [Alert](../components/alert.md) | `@hm-design/ui` | 안내·경고 | [Feedback/Alert](../../src/components/alert.stories.tsx) |
|
||||
| [Alert Dialog](../components/alert-dialog.md) | `@hm-design/ui` | 작업 확인 팝업 | [Overlay/Alert Dialog](../../src/components/alert-dialog.stories.tsx) |
|
||||
| [Aspect Ratio](../components/aspect-ratio.md) | `@hm-design/ui` | 콘텐츠 비율 | [Data & Display/Aspect Ratio](../../src/components/aspect-ratio.stories.tsx) |
|
||||
| [Avatar](../components/avatar.md) | `@hm-design/ui` | 사용자 이미지 | [Data & Display/Avatar](../../src/components/avatar.stories.tsx) |
|
||||
| [Badge](../components/badge.md) | `@hm-design/ui` | 상태·라벨 | [Data & Display/Badge](../../src/components/badge.stories.tsx) |
|
||||
| [Breadcrumb](../components/breadcrumb.md) | `@hm-design/ui` | 현재 경로 | [Navigation/Breadcrumb](../../src/components/breadcrumb.stories.tsx) |
|
||||
| [Button](../components/button.md) | `@hm-design/ui` | 작업 실행 | [Form/Button](../../src/components/button.stories.tsx) |
|
||||
| [Calendar](../components/calendar.md) | `@hm-design/ui` | 날짜 선택 | [Search & Date/Calendar](../../src/components/calendar.stories.tsx) |
|
||||
| [Card](../components/card.md) | `@hm-design/ui` | 콘텐츠 묶음 | [Data & Display/Card](../../src/components/card.stories.tsx) |
|
||||
| [Carousel](../components/carousel.md) | `@hm-design/ui` | 슬라이드 콘텐츠 | [Data & Display/Carousel](../../src/components/carousel.stories.tsx) |
|
||||
| [Checkbox](../components/checkbox.md) | `@hm-design/ui` | 복수 선택 | [Form/Checkbox](../../src/components/checkbox.stories.tsx) |
|
||||
| [Collapsible](../components/collapsible.md) | `@hm-design/ui` | 영역 접기 | [Disclosure/Collapsible](../../src/components/collapsible.stories.tsx) |
|
||||
| [Combobox](../components/combobox.md) | `@hm-design/ui` | 검색 가능한 선택 | [Search & Date/Combobox](../../src/components/combobox.stories.tsx) |
|
||||
| [Command](../components/command.md) | `@hm-design/ui` | 명령 검색 | [Search & Date/Command](../../src/components/command.stories.tsx) |
|
||||
| [Context Menu](../components/context-menu.md) | `@hm-design/ui` | 우클릭 메뉴 | [Overlay/Context Menu](../../src/components/context-menu.stories.tsx) |
|
||||
| [Date Picker](../components/date-picker.md) | `@hm-design/ui` | 날짜 입력 | [Search & Date/Date Picker](../../src/components/date-picker.stories.tsx) |
|
||||
| [Dialog](../components/dialog.md) | `@hm-design/ui` | 모달 | [Overlay/Dialog](../../src/components/dialog.stories.tsx) |
|
||||
| [Drawer](../components/drawer.md) | `@hm-design/ui` | 슬라이드 패널 | [Overlay/Drawer](../../src/components/drawer.stories.tsx) |
|
||||
| [Dropdown Menu](../components/dropdown-menu.md) | `@hm-design/ui` | 작업 메뉴 | [Overlay/Dropdown Menu](../../src/components/dropdown-menu.stories.tsx) |
|
||||
| Hover Card | `HoverCard`, `HoverCardContent`, `HoverCardTrigger`<br>[구현](../../packages/ui/src/components/ui/hover-card.tsx) | [문서](../components/hover-card.md) | [Overlay/Hover Card](../../src/components/hover-card.stories.tsx) |
|
||||
| Input | `Input`, `InputSize`<br>[구현](../../packages/ui/src/components/ui/input.tsx) | [문서](../components/input.md) | [Form/Input](../../src/components/input.stories.tsx) |
|
||||
| Label | `Label`<br>[구현](../../packages/ui/src/components/ui/label.tsx) | [문서](../components/label.md) | [Form/Label](../../src/components/label.stories.tsx) |
|
||||
| Menubar | `Menubar`, `MenubarCheckboxItem`, `MenubarContent`, `MenubarGroup`, `MenubarItem`, `MenubarLabel`, `MenubarMenu`, `MenubarPortal`, `MenubarRadioGroup`, `MenubarRadioItem`, `MenubarSeparator`, `MenubarShortcut`, `MenubarSub`, `MenubarSubContent`, `MenubarSubTrigger`, `MenubarTrigger`<br>[구현](../../packages/ui/src/components/ui/menubar.tsx) | [문서](../components/menubar.md) | [Navigation/Menubar](../../src/components/menubar.stories.tsx) |
|
||||
| Navigation Menu | `NavigationMenu`, `NavigationMenuContent`, `NavigationMenuIndicator`, `NavigationMenuItem`, `NavigationMenuLink`, `NavigationMenuList`, `NavigationMenuTrigger`, `NavigationMenuViewport`<br>[구현](../../packages/ui/src/components/ui/navigation-menu.tsx) | [문서](../components/navigation-menu.md) | [Navigation/Navigation Menu](../../src/components/navigation-menu.stories.tsx) |
|
||||
| Pagination | `Pagination`, `PaginationContent`, `PaginationEllipsis`, `PaginationItem`, `PaginationLink`, `PaginationNext`, `PaginationPrevious`<br>[구현](../../packages/ui/src/components/ui/pagination.tsx) | [문서](../components/pagination.md) | [Navigation/Pagination](../../src/components/pagination.stories.tsx) |
|
||||
| Popover | `Popover`, `PopoverAnchor`, `PopoverClose`, `PopoverContent`, `PopoverTrigger`<br>[구현](../../packages/ui/src/components/ui/popover.tsx) | [문서](../components/popover.md) | [Overlay/Popover](../../src/components/popover.stories.tsx) |
|
||||
| Progress | `Progress`<br>[구현](../../packages/ui/src/components/ui/progress.tsx) | [문서](../components/progress.md) | [Data & Display/Progress](../../src/components/progress.stories.tsx) |
|
||||
| Radio Group | `RadioGroup`, `RadioGroupItem`<br>[구현](../../packages/ui/src/components/ui/radio-group.tsx) | [문서](../components/radio-group.md) | [Form/Radio Group](../../src/components/radio-group.stories.tsx) |
|
||||
| Resizable | `ResizableHandle`, `ResizablePanel`, `ResizablePanelGroup`<br>[구현](../../packages/ui/src/components/ui/resizable.tsx) | [문서](../components/resizable.md) | [Disclosure/Resizable](../../src/components/resizable.stories.tsx) |
|
||||
| Scroll Area | `ScrollArea`, `ScrollBar`<br>[구현](../../packages/ui/src/components/ui/scroll-area.tsx) | [문서](../components/scroll-area.md) | [Data & Display/Scroll Area](../../src/components/scroll-area.stories.tsx) |
|
||||
| Select | `Select`, `SelectContent`, `SelectGroup`, `SelectItem`, `SelectLabel`, `SelectScrollDownButton`, `SelectScrollUpButton`, `SelectSeparator`, `SelectTrigger`, `SelectValue`, `SelectSize`<br>[구현](../../packages/ui/src/components/ui/select.tsx) | [문서](../components/select.md) | [Form/Select](../../src/components/select.stories.tsx) |
|
||||
| Separator | `Separator`<br>[구현](../../packages/ui/src/components/ui/separator.tsx) | [문서](../components/separator.md) | [Data & Display/Separator](../../src/components/separator.stories.tsx) |
|
||||
| Sheet | `Sheet`, `SheetBody`, `SheetClose`, `SheetContent`, `SheetDescription`, `SheetFooter`, `SheetHeader`, `SheetOverlay`, `SheetPortal`, `SheetTitle`, `SheetTrigger`<br>[구현](../../packages/ui/src/components/ui/sheet.tsx) | [문서](../components/sheet.md) | [Overlay/Sheet](../../src/components/sheet.stories.tsx) |
|
||||
| Skeleton | `Skeleton`<br>[구현](../../packages/ui/src/components/ui/skeleton.tsx) | [문서](../components/skeleton.md) | [Data & Display/Skeleton](../../src/components/skeleton.stories.tsx) |
|
||||
| Slider | `Slider`<br>[구현](../../packages/ui/src/components/ui/slider.tsx) | [문서](../components/slider.md) | [Form/Slider](../../src/components/slider.stories.tsx) |
|
||||
| Sonner | `Toaster`, `toast`, `ExternalToast`, `ToasterProps`<br>[구현](../../packages/ui/src/components/ui/sonner.tsx) | [문서](../components/sonner.md) | [Feedback/Sonner](../../src/components/sonner.stories.tsx) |
|
||||
| Switch | `Switch`<br>[구현](../../packages/ui/src/components/ui/switch.tsx) | [문서](../components/switch.md) | [Form/Switch](../../src/components/switch.stories.tsx) |
|
||||
| Table | `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableFooter`, `TableHead`, `TableHeader`, `TableRow`<br>[구현](../../packages/ui/src/components/ui/table.tsx) | [문서](../components/table.md) | [Data & Display/Table](../../src/components/table.stories.tsx) |
|
||||
| Tabs | `Tabs`, `TabsContent`, `TabsList`, `TabsTrigger`, `TabsPanelSurface`<br>[구현](../../packages/ui/src/components/ui/tabs.tsx)<br>기본 `<TabsList>` = Primary (`fill=true`, `panelSurface="content"`). Secondary: `fill panelSurface="surface"`. Legacy: `fill={false}` (panelSurface 시각 무시). 패널은 Primary `bg-background`, Secondary / Legacy `bg-card`로 조합한다 | [문서·기본값 변경 영향](../components/tabs.md) | [Navigation/Tabs](../../src/components/tabs.stories.tsx) |
|
||||
| Textarea | `Textarea`, `TextareaResize`<br>[구현](../../packages/ui/src/components/ui/textarea.tsx) | [문서](../components/textarea.md) | [Form/Textarea](../../src/components/textarea.stories.tsx) |
|
||||
| Toggle | `Toggle`, `toggleVariants`<br>[구현](../../packages/ui/src/components/ui/toggle.tsx) | [문서](../components/toggle.md) | [Form/Toggle](../../src/components/toggle.stories.tsx) |
|
||||
| Toggle Group | `ToggleGroup`, `ToggleGroupItem`<br>[구현](../../packages/ui/src/components/ui/toggle-group.tsx) | [문서](../components/toggle-group.md) | [Form/Toggle Group](../../src/components/toggle-group.stories.tsx) |
|
||||
| Tooltip | `Tooltip`, `TooltipContent`, `TooltipProvider`, `TooltipTrigger`<br>[구현](../../packages/ui/src/components/ui/tooltip.tsx) | [문서](../components/tooltip.md) | [Overlay/Tooltip](../../src/components/tooltip.stories.tsx) |
|
||||
| [Input](../components/input.md) | `@hm-design/ui` | 단일 입력 | [Form/Input](../../src/components/input.stories.tsx) |
|
||||
| [Label](../components/label.md) | `@hm-design/ui` | 입력 라벨 | [Form/Label](../../src/components/label.stories.tsx) |
|
||||
| [Menubar](../components/menubar.md) | `@hm-design/ui` | 메뉴 묶음 | [Navigation/Menubar](../../src/components/menubar.stories.tsx) |
|
||||
| [Navigation Menu](../components/navigation-menu.md) | `@hm-design/ui` | 페이지 이동 | [Navigation/Navigation Menu](../../src/components/navigation-menu.stories.tsx) |
|
||||
| [Pagination](../components/pagination.md) | `@hm-design/ui` | 페이지 선택 | [Navigation/Pagination](../../src/components/pagination.stories.tsx) |
|
||||
| [Popover](../components/popover.md) | `@hm-design/ui` | 보조 팝업 | [Overlay/Popover](../../src/components/popover.stories.tsx) |
|
||||
| [Progress](../components/progress.md) | `@hm-design/ui` | 진행률 | [Data & Display/Progress](../../src/components/progress.stories.tsx) |
|
||||
| [Radio Group](../components/radio-group.md) | `@hm-design/ui` | 단일 선택 | [Form/Radio Group](../../src/components/radio-group.stories.tsx) |
|
||||
| [Resizable](../components/resizable.md) | `@hm-design/ui` | 영역 크기 조절 | [Disclosure/Resizable](../../src/components/resizable.stories.tsx) |
|
||||
| [Scroll Area](../components/scroll-area.md) | `@hm-design/ui` | 스크롤 영역 | [Data & Display/Scroll Area](../../src/components/scroll-area.stories.tsx) |
|
||||
| [Select](../components/select.md) | `@hm-design/ui` | 목록 선택 | [Form/Select](../../src/components/select.stories.tsx) |
|
||||
| [Separator](../components/separator.md) | `@hm-design/ui` | 영역 구분 | [Data & Display/Separator](../../src/components/separator.stories.tsx) |
|
||||
| [Sheet](../components/sheet.md) | `@hm-design/ui` | 측면 패널 | [Overlay/Sheet](../../src/components/sheet.stories.tsx) |
|
||||
| [Skeleton](../components/skeleton.md) | `@hm-design/ui` | 로딩 자리 표시 | [Data & Display/Skeleton](../../src/components/skeleton.stories.tsx) |
|
||||
| [Slider](../components/slider.md) | `@hm-design/ui` | 범위 값 선택 | [Form/Slider](../../src/components/slider.stories.tsx) |
|
||||
| [Sonner](../components/sonner.md) | `@hm-design/ui` | 토스트 | [Feedback/Sonner](../../src/components/sonner.stories.tsx) |
|
||||
| [Switch](../components/switch.md) | `@hm-design/ui` | 켜기·끄기 | [Form/Switch](../../src/components/switch.stories.tsx) |
|
||||
| [Table](../components/table.md) | `@hm-design/ui` | 표 | [Data & Display/Table](../../src/components/table.stories.tsx) |
|
||||
| [Tabs](../components/tabs.md) | `@hm-design/ui` | 탭 전환 | [Navigation/Tabs](../../src/components/tabs.stories.tsx) |
|
||||
| [Textarea](../components/textarea.md) | `@hm-design/ui` | 여러 줄 입력 | [Form/Textarea](../../src/components/textarea.stories.tsx) |
|
||||
| [Toggle](../components/toggle.md) | `@hm-design/ui` | 선택 상태 버튼 | [Form/Toggle](../../src/components/toggle.stories.tsx) |
|
||||
| [Toggle Group](../components/toggle-group.md) | `@hm-design/ui` | 선택 버튼 묶음 | [Form/Toggle Group](../../src/components/toggle-group.stories.tsx) |
|
||||
| [Tooltip](../components/tooltip.md) | `@hm-design/ui` | 보조 설명 | [Overlay/Tooltip](../../src/components/tooltip.stories.tsx) |
|
||||
|
||||
`packages/ui/src/index.ts`에는 위 44개 Component 모듈의 named export 222개(값과 type 포함)가 연결되어 있다. 사용 시 API·Props·Variant·주요 상태·Theme 연결은 해당 Component 문서의 API/상태/Token/Storybook 절을 따른다. 문서 45개 중 `field.md`는 별도 `field.tsx` 공개 Component를 나타내지 않는 Field 소비 가이드다.
|
||||
|
||||
@@ -59,16 +59,16 @@ AI 화면 구현 Quick Start의 Component·Pattern 검색에 사용하는 파일
|
||||
|
||||
현재 개발 저장소와 포터블 r3의 `packages/ui/src/patterns/`에는 8개 디렉터리와 62개 named export(값과 type 포함)가 있다. 역사적 오전 배포 기준 `HMDesignTest.zip`에는 7개 Pattern 모듈과 50개 named export가 있었다. Pattern 소스 디렉터리, Story 파일, Story 그룹 수는 별도 집계다.
|
||||
|
||||
| Pattern / 분류 | 공개 API 위치 | 사용 문서 | 대표 Reference / 계약 |
|
||||
| Pattern (문서) | Import 경로 | 주요 용도 | 대표 Story |
|
||||
|---|---|---|---|
|
||||
| Dashboard Layout — Layout Pattern | 운영: `DashboardLayout`, `DashboardHeader`, `DashboardMain`, `DashboardContent`, `DashboardLayoutProps`.<br>기존 호환성·검증용: `DashboardSidebar`, 선택적 `sidebar` slot. 공개 Export 존재는 운영 허용을 뜻하지 않음 | [dashboard-layout.md](../patterns/dashboard-layout.md) | [Patterns/Layout/Dashboard → Dashboard](../../src/patterns/dashboard-layout.stories.tsx) — Sidebar 없는 48px Header·업무 상태 필터·960px 최소 폭 |
|
||||
| Dashboard Status — Runtime 상태 계약 | `countDashboardFilter`, `dashboardFilterDefinitions`, `dashboardFilterIds`, `dashboardStatusAttributes`, `dashboardStatusDefinitions`, `matchesDashboardFilter`, `DashboardFilterDefinition`, `DashboardFilterId`, `DashboardStatusDefinition`, `DashboardStatusId`, `DashboardStatusRecord`, `DashboardStatusTone` | [Dashboard 문서의 상태 계약 절](../patterns/dashboard-layout.md#3-storybook) | **최신 포터블 테스트 ZIP에 export·소스·CSS·Static HTML·빌드 결과 포함. 오전 ZIP에는 없음.** [현재 contract.ts](../../packages/ui/src/patterns/dashboard-status/contract.ts), [Runtime-neutral CSS](../../src/patterns/dashboard-status-contract.css), [React 대표 Story](../../src/patterns/dashboard-layout.stories.tsx), [Static HTML 예제](../patterns/dashboard-status-static.html) |
|
||||
| Data Table — 여러 Component 조합 Pattern | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions`, `dataTableSelectColumn`, `useDataTable`, `DataTableColumnDef`, `DataTableInstance`, `DataTableOptions`, `DataTableProps` | [data-table.md](../patterns/data-table.md) | [Patterns/Data/Data Table → Data Table](../../src/patterns/data-table.stories.tsx) |
|
||||
| Filter Bar — 여러 Component 조합 Pattern | `FilterBar`, `FilterBarActions`, `FilterBarSearch` 및 `FilterBarSearchProps` | [filter-bar.md](../patterns/filter-bar.md) | [Patterns/Data/Filter Bar → Filter Bar](../../src/patterns/filter-bar.stories.tsx) |
|
||||
| GNB — Navigation Pattern | `GNB`, `GNBBrand`, `GNBMobileGroup`, `GNBMobileLink`, `GNBMobileMenu`, `GNBNav`, `GNBUser`, `GNBUtilities`, `GNBMobileMenuProps`, `GNBUserProps` | [gnb.md](../patterns/gnb.md) | [Patterns/Layout/GNB](../../src/patterns/gnb.stories.tsx) |
|
||||
| LNB — Navigation Pattern | `LNB`, `LNBBrand`, `LNBGroup`, `LNBItem`, `LNBNav`, `LNBProfile`, `LNBMobileHeader`, `LNBMobileBrand`, `LNBMobileMenu`, `LNBMobileLink`, `LNBMobileGroup`, `LNBMobileMenuProps`, `LNBGroupProps`, `LNBProfileProps` | [lnb.md](../patterns/lnb.md) | [Patterns/Layout/LNB](../../src/patterns/lnb.stories.tsx) |
|
||||
| Loading Screen — 화면 UI Pattern | `LoadingScreen` | [loading-screen.md](../patterns/loading-screen.md) | [Patterns/Layout/Loading Screen](../../src/patterns/loading-screen.stories.tsx) |
|
||||
| Page Header — 화면 구성 Pattern | `PageHeader`, `PageHeaderActions`, `PageHeaderContent`, `PageHeaderDescription`, `PageHeaderTitle` | [page-header.md](../patterns/page-header.md) | [Patterns/Layout/Page Header → Page Header](../../src/patterns/page-header.stories.tsx) (`patterns-layout-page-header--all`). Breadcrumb + Title + Description + 단일 Brand Action. [Dashboard 조합](../../src/patterns/dashboard-layout.stories.tsx)은 Dashboard Layout 계약을 따름 |
|
||||
| [Dashboard Layout](../patterns/dashboard-layout.md) | `@hm-design/ui` | 전용 Header·업무 상태·Content | [Patterns/Layout/Dashboard → Dashboard](../../src/patterns/dashboard-layout.stories.tsx) |
|
||||
| [Dashboard Status](../patterns/dashboard-layout.md#3-storybook) | `@hm-design/ui` | 업무 상태·필터 계약 | [React 대표 Story](../../src/patterns/dashboard-layout.stories.tsx) |
|
||||
| [Data Table](../patterns/data-table.md) | `@hm-design/ui` | 데이터 표·정렬·페이지 | [Patterns/Data/Data Table → Data Table](../../src/patterns/data-table.stories.tsx) |
|
||||
| [Filter Bar](../patterns/filter-bar.md) | `@hm-design/ui` | 조회 조건·조회 액션 | [Patterns/Data/Filter Bar → Filter Bar](../../src/patterns/filter-bar.stories.tsx) |
|
||||
| [GNB](../patterns/gnb.md) | `@hm-design/ui` | 상단 Navigation | [Patterns/Layout/GNB](../../src/patterns/gnb.stories.tsx) |
|
||||
| [LNB](../patterns/lnb.md) | `@hm-design/ui` | 좌측 Navigation | [Patterns/Layout/LNB](../../src/patterns/lnb.stories.tsx) |
|
||||
| [Loading Screen](../patterns/loading-screen.md) | `@hm-design/ui` | 전체 화면 로딩 | [Patterns/Layout/Loading Screen](../../src/patterns/loading-screen.stories.tsx) |
|
||||
| [Page Header](../patterns/page-header.md) | `@hm-design/ui` | 제목·경로·주요 작업 | [Patterns/Layout/Page Header → Page Header](../../src/patterns/page-header.stories.tsx) |
|
||||
|
||||
Data Table은 기존 Table·Pagination·Checkbox·Select·Dropdown Menu 등을 조합한다. 연동 예제가 필요하면 Data Table Story 안의 `With Filter Bar`를 참고하되 숨김 `verification` Story이므로 일반 화면의 단독 기본 Reference로 삼지 않는다. Filter Bar는 단독으로도 사용 가능하며 검색·Select·Combobox·Date Picker 등 조회 조건의 layout이다. Dashboard 빠른 상태 필터는 Filter Bar API가 아니라 Dashboard Status 계약을 따른다.
|
||||
|
||||
@@ -79,7 +79,7 @@ Data Table은 기존 Table·Pagination·Checkbox·Select·Dropdown Menu 등을
|
||||
### 화면 생성 시 놓치기 쉬운 소비 계약
|
||||
|
||||
- Navigation 미지정: [선택 근거](navigation-single-mode.md#선택-근거)를 기록한다. GNB/LNB의 목적과 대표 화면 구조로 판단하며 일반 목록의 기본 모드를 임의 확정하지 않는다.
|
||||
- GNB ONLY: [Desktop·Mobile 구성](../patterns/gnb.md#8-desktop--mobile)을 함께 구현한다. 대표 `patterns-layout-gnb--all`의 Overview·Usage · GNB Sidebar를 확인하고 [Sidebar 예제](../patterns/gnb.md#15-gnb-only-sidebar-composition-2026-10-08)도 Sheet 하나만 사용한다.
|
||||
- GNB ONLY: [Desktop·Mobile 구성](../patterns/gnb.md#8-desktop--mobile)을 함께 구현한다. 대표 `patterns-layout-gnb--all`의 Overview·Usage를 확인한다. 신규 AI Production 화면에는 GNB Sidebar를 적용하지 않는다.
|
||||
- LNB ONLY: 기존 독립 LNB 구조와 [LNB Mobile Header/Menu](../patterns/lnb.md#3b-lnb-mobile-header-2026-10-07)를 유지한다.
|
||||
- DASHBOARD ONLY: Sidebar를 생성하지 않는다. 대표 `patterns-layout-dashboard-layout--all`의 전용 Header(48px)·업무 상태 필터 + Content, 최소 폭 960px·내부 가로 스크롤을 따른다. `DashboardSidebar`와 `sidebar` slot은 호환성·검증용이며 과거 Sidebar verification Story는 신규 운영 화면 구현 기준이 아니다.
|
||||
- Dashboard Status: 공개 `@hm-design/ui/dashboard-status.css`는 변수만 제공한다. [Theme → Status CSS → 기존 Outline Badge mapping·React 소비 예제](../patterns/dashboard-layout.md#dashboard-업무-상태-공통-계약)를 사용한다. `issue`는 독립 flag다. [Static HTML Reference](../patterns/dashboard-status-static.html)도 같은 계약을 소비한다.
|
||||
|
||||
Reference in new issue
Block a user