/** * 대분류는 Figma 섹션을 그대로 따른다. * Action 391:698 · Select 391:2209 · Input 391:3733 · Navigation 391:4035 · * Layout 392:5035 · Feedback 392:5381 · Help 392:5712 */ export type ComponentGroup = { label: string; subgroups: { label: string; ids: string[] }[]; }; export const COMPONENT_GROUPS: ComponentGroup[] = [ // 아이콘은 시안 섹션이 아니라 모든 섹션이 쓰는 기반이라 맨 앞에 둔다. { label: "Icon", subgroups: [{ label: "Icon", ids: ["fox-ico"] }], }, // 스크롤바도 시안 섹션이 아니라 모든 화면이 쓰는 기반이라 앞쪽에 둔다. { label: "Scroll", subgroups: [{ label: "Scroll", ids: ["fox-scroll"] }], }, { label: "Action", subgroups: [ { label: "Button", ids: ["fox-button", "fox-text-button", "fox-link-button", "fox-icon-button"], }, { label: "Group", ids: ["fox-button-group", "fox-button-panel"] }, ], }, { label: "Select", subgroups: [ { label: "Radio", ids: ["fox-radio-icon", "fox-radio", "fox-radio-group"] }, { label: "Checkbox", ids: ["fox-check-icon", "fox-checkbox", "fox-checkbox-group"] }, { label: "Select", ids: ["fox-select", "fox-select-option", "fox-select-option-item", "fox-select-text"], }, { label: "Tag & Chip", ids: ["fox-tag", "fox-tag-list", "fox-chip", "fox-chip-area"] }, { label: "Switch", ids: [ "fox-toggle-switch", "fox-segmented-control", "fox-segmented-control-item", "fox-toggle-quantity", ], }, { label: "Label & Option", ids: ["fox-form-label", "fox-conditional-option"] }, ], }, { label: "Input", subgroups: [ { label: "Text", ids: ["fox-input", "fox-text-area"] }, { label: "Formatted", ids: ["fox-phone-number", "fox-email", "fox-certified", "fox-address"], }, { label: "File", ids: ["fox-file-upload"] }, ], }, { label: "Navigation", subgroups: [ { label: "Paging", ids: ["fox-breadcrumb", "fox-pagination"] }, { label: "Carousel", ids: ["fox-carousel-indicator", "fox-carousel-button", "fox-carousel-area"], }, ], }, { label: "Layout", subgroups: [ { label: "Table & List", ids: ["fox-table", "fox-bullet-list"] }, { label: "Tab", ids: ["fox-tab"] }, { label: "Badge", ids: ["fox-badge", "fox-badge-dot", "fox-badge-group"] }, { label: "Disclosure", ids: ["fox-accordion", "fox-disclosure"] }, { label: "Container", ids: ["fox-card", "fox-modal", "fox-page-header"] }, ], }, { label: "Feedback", subgroups: [ { label: "Notification", ids: ["fox-alert", "fox-toast", "fox-snackbar", "fox-snackbar-list"] }, { label: "Status", ids: ["fox-status-indicator", "fox-helper-text", "fox-spinner"] }, { label: "Step", ids: ["fox-step-indicator", "fox-step-indicator-item"] }, ], }, { label: "Help", subgroups: [ { label: "Tooltip", ids: ["fox-tooltip", "fox-tooltip-rich"] }, { label: "Popover", ids: ["fox-popover", "fox-contextual-trigger"] }, ], }, ];