@ncds/ui-admin-mcp 1.0.0-alpha.2 → 1.0.0-alpha.20

package/data/slider.json

@@ -3,7 +3,7 @@
   "exportName": "Slider",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "Slider는 연속적 또는 구간 기반 수치를 직관적으로 조절하는 입력 컴포넌트로, 텍스트 입력보다 범위가 명확하고 빠른 조정이 필요하며 시각적 비율이 중요한 경우 사용합니다.",
   "aliases": [
     "슬라이더",

package/data/spinner.json

@@ -3,7 +3,7 @@
   "exportName": "Spinner",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "feedback",
+  "category": "feedback-and-status",
   "description": "Spinner는 데이터 조회, 검색, 업로드, 파일 생성 등 3초 이상 소요되는 처리 과정에서 사용자 불안감을 줄이기 위해 제공되는 피드백 UI입니다.",
   "aliases": [
     "Spinner",
@@ -41,9 +41,8 @@
   ],
   "props": {
     "as": {
-      "type": "string",
+      "type": "function",
       "required": false,
-      "rawType": "React.ElementType | undefined",
       "default": "p"
     },
     "backdrop": {
@@ -65,7 +64,7 @@
         "xl",
         "xs"
       ],
-      "default": "md"
+      "default": "sm"
     }
   },
   "html": {},

package/data/step-guide.json

@@ -0,0 +1,130 @@
+{
+  "name": "step-guide",
+  "exportName": "stepGuide",
+  "importPath": "step-guide",
+  "jsRequired": true,
+  "category": "overlays",
+  "description": "vanilla JS 함수 기반 step-by-step 가이드 투어. 신규 기능 출시 온보딩 또는 관리자 페이지 인터랙티브 가이드용. CDN 로드 후 window.stepGuide({el, options}) 함수 호출로 시작. 외부 패키지(step-guide) — render_to_html 호출 시 외부 분기 모듈에서 응답 직접 조립.",
+  "aliases": [
+    "step-guide",
+    "stepguide",
+    "ncdsstepguide",
+    "step_guide",
+    "투어",
+    "온보딩",
+    "코치마크",
+    "coachmark",
+    "튜토리얼",
+    "tutorial"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "신규 기능 출시 시 사용자에게 단계별 안내가 필요한 경우",
+    "관리자 페이지의 복잡한 워크플로우를 단계별로 강조해야 하는 경우",
+    "온보딩 화면에서 주요 UI 요소를 순차적으로 지목해야 하는 경우"
+  ],
+  "forbiddenRules": [
+    "React 컴포넌트로 직접 사용 금지 — useEffect 내 window.stepGuide({el, options}) 호출 + cleanup 에서 instance.exit() 호출 필수",
+    "정적 HTML 미리보기 불가 — 런타임에 오버레이가 동작하므로 render_to_html 응답의 init 스니펫을 페이지에 붙여 동작 검증 필요",
+    "step.element 는 DOM 마운트 후에만 참조 가능 — 컴포넌트 mount 이후 stepGuide() 호출"
+  ],
+  "seeAlso": ["modal", "tooltip"],
+  "usageExamples": {
+    "default": {
+      "steps": [
+        {
+          "title": "1단계",
+          "description": "첫 번째 안내",
+          "element": "#step1",
+          "position": "bottom"
+        },
+        {
+          "title": "2단계",
+          "description": "두 번째 안내",
+          "element": "#step2",
+          "position": "bottom"
+        }
+      ]
+    },
+    "positionAll": {
+      "steps": [
+        { "title": "위쪽", "description": "위쪽 위치", "element": "#top", "position": "top" },
+        { "title": "오른쪽", "description": "오른쪽 위치", "element": "#right", "position": "right" },
+        { "title": "아래쪽", "description": "아래쪽 위치", "element": "#bottom", "position": "bottom" },
+        { "title": "왼쪽", "description": "왼쪽 위치", "element": "#left", "position": "left" }
+      ]
+    },
+    "withSkipBtn": {
+      "hideSkip": false,
+      "steps": [
+        {
+          "title": "스킵 가능",
+          "description": "사용자가 '나중에 하기' 로 건너뛸 수 있습니다",
+          "element": "#step1",
+          "position": "bottom"
+        }
+      ]
+    }
+  },
+  "props": {
+    "steps": {
+      "type": "Step[]",
+      "required": true,
+      "description": "단계 배열. 각 Step 은 { element?: string | null, title: string, description?: string, subText?: string, position?: 'top' | 'right' | 'bottom' | 'left', customStyle?: Record<string, string>, isFixed?: boolean }"
+    },
+    "useAnimation": {
+      "type": "boolean",
+      "required": false,
+      "default": true,
+      "description": "애니메이션 사용 여부"
+    },
+    "buttonLabel": {
+      "type": "{ prev: string; next: string; done: string; skip: string }",
+      "required": false,
+      "description": "버튼 라벨 (v2 default: 이전 / 다음 / 완료 / 나중에 하기)"
+    },
+    "hideSkip": {
+      "type": "boolean",
+      "required": false,
+      "default": true,
+      "description": "스킵(나중에 하기) 버튼 숨김 여부"
+    },
+    "hideStepCount": {
+      "type": "boolean",
+      "required": false,
+      "default": true,
+      "description": "스텝 카운트(1 / N) 숨김 여부"
+    },
+    "hideStepPrefix": {
+      "type": "boolean",
+      "required": false,
+      "default": false,
+      "description": "STEP N prefix 숨김 여부. 단계 1개일 때는 옵션과 무관하게 자동 생략됨"
+    },
+    "exitOnOverlayClick": {
+      "type": "boolean",
+      "required": false,
+      "default": true,
+      "description": "오버레이 클릭 시 종료 여부"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-coachmark-backdrop",
+    "ncua-coachmark-container",
+    "ncua-coachmark-overlay",
+    "ncua-coachmark-reference",
+    "ncua-coachmark-tooltip",
+    "ncua-coachmark-tooltip__title",
+    "ncua-coachmark-tooltip__title-step",
+    "ncua-coachmark-tooltip__description",
+    "ncua-coachmark-tooltip__sub-text",
+    "ncua-coachmark-tooltip__menu",
+    "ncua-coachmark-tooltip__count",
+    "ncua-coachmark-dummy"
+  ],
+  "usage": {
+    "import": "// CDN 로드 (npm import 미지원, vanilla JS only)\n<link rel=\"stylesheet\" href=\"https://fe-sdk.cdn-nhncommerce.com/@ncds/step-guide/2.0/step-guide.min.css\" />\n<script src=\"https://fe-sdk.cdn-nhncommerce.com/@ncds/step-guide/2.0/step-guide.min.js\"></script>",
+    "react": {}
+  }
+}

package/data/switch.json

@@ -3,7 +3,7 @@
   "exportName": "Switch",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "Switch는 하나의 기능 또는 상태에 대해 180도 다른 두 개의 선택지를 제공하는 토글형 컴포넌트로, 라디오 버튼 방식의 좌/우 영역 선택을 통해 즉각적인 상태 전환을 수행합니다.",
   "aliases": [
     "스위치",
@@ -39,6 +39,31 @@
     "selectbox",
     "toggle"
   ],
+  "usageExamples": {
+    "default": {
+      "left": {
+        "label": "사용함",
+        "value": "on"
+      },
+      "right": {
+        "label": "사용안함",
+        "value": "off"
+      },
+      "name": "feature-toggle"
+    },
+    "boolean": {
+      "left": {
+        "label": "활성",
+        "value": true
+      },
+      "right": {
+        "label": "비활성",
+        "value": false
+      },
+      "name": "active-toggle",
+      "size": "sm"
+    }
+  },
   "props": {
     "className": {
       "type": "string",
@@ -57,7 +82,18 @@
     },
     "left": {
       "type": "object",
-      "required": true
+      "required": true,
+      "properties": {
+        "label": {
+          "type": "ReactNode",
+          "required": true
+        },
+        "value": {
+          "type": "string",
+          "required": true,
+          "rawType": "string | boolean"
+        }
+      }
     },
     "name": {
       "type": "string",
@@ -73,12 +109,28 @@
     },
     "right": {
       "type": "object",
-      "required": true
+      "required": true,
+      "properties": {
+        "label": {
+          "type": "ReactNode",
+          "required": true
+        },
+        "value": {
+          "type": "string",
+          "required": true,
+          "rawType": "string | boolean"
+        }
+      }
     },
     "size": {
-      "type": "string",
+      "type": "enum",
       "required": false,
-      "rawType": "any",
+      "values": [
+        "md",
+        "sm",
+        "xs",
+        "xxs"
+      ],
       "default": "xs"
     },
     "value": {
@@ -91,6 +143,10 @@
   "bemClasses": [
     "ncua-switch",
     "ncua-switch--disabled",
+    "ncua-switch--md",
+    "ncua-switch--sm",
+    "ncua-switch--xs",
+    "ncua-switch--xxs",
     "ncua-switch__label",
     "ncua-switch__option",
     "ncua-switch__option--active",
@@ -103,7 +159,11 @@
   "usage": {
     "import": "import { Switch } from '@ncds/ui-admin';",
     "react": {
-      "default": "<Switch left=\"\" name=\"\" right=\"\" />"
+      "default": "<Switch left=\"\" name=\"\" right=\"\" />",
+      "size:md": "<Switch size=\"md\" left=\"\" name=\"\" right=\"\" />",
+      "size:sm": "<Switch size=\"sm\" left=\"\" name=\"\" right=\"\" />",
+      "size:xs": "<Switch size=\"xs\" left=\"\" name=\"\" right=\"\" />",
+      "size:xxs": "<Switch size=\"xxs\" left=\"\" name=\"\" right=\"\" />"
     }
   }
 }

package/data/table.json

@@ -0,0 +1,293 @@
+{
+  "name": "table",
+  "exportName": "Table",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "data-display",
+  "description": "Table은 어드민 SaaS 환경에서 데이터 표현을 위한 핵심 구조 컴포넌트입니다.",
+  "aliases": [
+    "Table",
+    "Horizontal Table",
+    "Vertical Table",
+    "List Table",
+    "Description Table",
+    "테이블",
+    "목록",
+    "데이터 표시",
+    "Row",
+    "Cell",
+    "Header",
+    "HeaderCell",
+    "Table.Row",
+    "Table.Cell",
+    "Table.HeaderCell",
+    "Table.ColGroup",
+    "Table.Footer",
+    "Table.Empty",
+    "Table.Pagination",
+    "fixedHeader",
+    "maxHeight",
+    "hoverable",
+    "selectable",
+    "sortDirection",
+    "onSort",
+    "isHeader",
+    "status",
+    "colSpan",
+    "widths",
+    "Pagination",
+    "NCDS",
+    "가로스크롤",
+    "horizontal scroll",
+    "scrollX",
+    "overflow-x",
+    "column min-width",
+    "셀 최소 너비",
+    "셀 최소 글자수",
+    "1140",
+    "table min-width",
+    "줄바꿈",
+    "word-break",
+    "콘텐츠 타입별 차등",
+    "2단 wrapper",
+    "Portal",
+    "Floating UI",
+    "스크롤 컨테이너",
+    "scrollbar token"
+  ],
+  "hasChildren": true,
+  "whenToUse": [
+    "Table은 데이터를 일관된 구조로 전달하고, 정렬·선택·페이지네이션을 통해 효율적인 데이터 탐색을 지원하는 컴포넌트이다"
+  ],
+  "forbiddenRules": [
+    "컬러 토큰 외 임의 색상 사용 금지",
+    "Row Height 임의 수정 금지",
+    "텍스트 정렬 규칙 무시 금지",
+    "프로젝트별 Padding 임의 변경 금지",
+    "정렬 아이콘 위치 변경 금지"
+  ],
+  "seeAlso": [
+    "checkbox",
+    "pagination",
+    "badge",
+    "empty-state",
+    "button",
+    "spinner",
+    "block-container"
+  ],
+  "htmlElement": "div",
+  "props": {
+    "children": {
+      "type": "ReactNode",
+      "required": true
+    },
+    "fixedHeader": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "horizontalScroll": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "hoverable": {
+      "type": "boolean",
+      "required": false,
+      "default": true
+    },
+    "maxHeight": {
+      "type": "string",
+      "required": false,
+      "rawType": "string | number | undefined"
+    },
+    "minWidth": {
+      "type": "string",
+      "required": false,
+      "rawType": "string | number | undefined"
+    },
+    "selectable": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "type": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "horizontal",
+        "vertical"
+      ],
+      "default": "horizontal"
+    }
+  },
+  "subComponents": {
+    "Table.Header": {
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "required": true
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        }
+      }
+    },
+    "Table.Body": {
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "required": true
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        }
+      }
+    },
+    "Table.Row": {
+      "props": {
+        "selected": {
+          "type": "boolean",
+          "required": false
+        },
+        "status": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "error",
+            "warning"
+          ]
+        }
+      }
+    },
+    "Table.HeaderCell": {
+      "props": {
+        "minWidth": {
+          "type": "string",
+          "required": false,
+          "rawType": "string | number | undefined"
+        },
+        "onSort": {
+          "type": "function",
+          "required": false
+        },
+        "sortDirection": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "asc",
+            "desc",
+            "none"
+          ]
+        },
+        "width": {
+          "type": "string",
+          "required": false,
+          "rawType": "string | number | undefined"
+        }
+      }
+    },
+    "Table.Cell": {
+      "props": {
+        "isHeader": {
+          "type": "boolean",
+          "required": false
+        }
+      }
+    },
+    "Table.Footer": {
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "required": true
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        }
+      }
+    },
+    "Table.Pagination": {
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "required": true
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        }
+      }
+    },
+    "Table.ColGroup": {
+      "props": {
+        "minWidths": {
+          "type": "object",
+          "required": false,
+          "rawType": "(string | number)[] | undefined"
+        },
+        "widths": {
+          "type": "object",
+          "required": true,
+          "rawType": "(string | number)[]"
+        }
+      }
+    },
+    "Table.Empty": {
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "required": false
+        },
+        "colSpan": {
+          "type": "number",
+          "required": true
+        }
+      }
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-table",
+    "ncua-table--fixed-header",
+    "ncua-table--horizontal",
+    "ncua-table--hoverable",
+    "ncua-table--selectable",
+    "ncua-table--vertical",
+    "ncua-table-wrapper",
+    "ncua-table__body",
+    "ncua-table__cell",
+    "ncua-table__empty",
+    "ncua-table__footer",
+    "ncua-table__h-scroll-container",
+    "ncua-table__h-scroll-inner",
+    "ncua-table__h-scrollbar",
+    "ncua-table__h-scrollbar-thumb",
+    "ncua-table__header",
+    "ncua-table__header-cell",
+    "ncua-table__header-cell--sortable",
+    "ncua-table__header-cell-inner",
+    "ncua-table__header-cell-text",
+    "ncua-table__pagination",
+    "ncua-table__row",
+    "ncua-table__row--error",
+    "ncua-table__row--selected",
+    "ncua-table__row--warning",
+    "ncua-table__scroll-area",
+    "ncua-table__scroll-container",
+    "ncua-table__scrollbar",
+    "ncua-table__scrollbar-thumb",
+    "ncua-table__sort-icon",
+    "ncua-table__table"
+  ],
+  "usage": {
+    "import": "import { Table } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Table children=\"예시\" />",
+      "type:horizontal": "<Table type=\"horizontal\" children=\"예시\" />",
+      "type:vertical": "<Table type=\"vertical\" children=\"예시\" />"
+    }
+  }
+}

package/data/tag.json

@@ -3,7 +3,7 @@
   "exportName": "Tag",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "feedback",
+  "category": "feedback-and-status",
   "description": "Tag 컴포넌트는 정보를 분류하고 필터링하기 위한 시각적 표시를 제공합니다. 레이블, 카테고리, 필터 등을 나타내는 데 사용되며, 아이콘, 닫기 버튼, 체크박스, 카운트 등의 기능을 포함할 수 있습니다.",
   "aliases": [
     "Tag",
@@ -24,19 +24,22 @@
   ],
   "hasChildren": true,
   "whenToUse": [
-    "정보 분류와 필터링을 위한 시각적 라벨",
-    "사용자가 콘텐츠를 빠르게 분류/식별/필터링할 수 있도록 지원"
+    "Tag는 정보 분류와 필터링을 위한 시각적 레이블로, 사용자가 콘텐츠를 빠르게 분류·식별·필터링할 수 있도록 합니다",
+    "작고 간결한 형태로 다양한 컨텍스트에서 사용되며, 아이콘·액션을 통해 의미를 전달합니다"
   ],
   "forbiddenRules": [
     "disabled 태그에 액션 제공 금지",
     "과도한 태그 나열 금지",
-    "텍스트 없는 태그 사용 금지"
+    "텍스트 없는 태그 사용 금지",
+    "상태·중요도 표시에 Tag 사용 금지"
   ],
   "seeAlso": [
     "badge",
     "badge-group",
     "checkbox",
-    "dot"
+    "icon",
+    "dot",
+    "tooltip"
   ],
   "props": {
     "children": {
@@ -53,7 +56,66 @@
     },
     "icon": {
       "type": "object",
-      "required": false
+      "required": false,
+      "rawType": "import(\"/home/runner/_work/ncds/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
+      "properties": {
+        "type": {
+          "type": "string",
+          "required": true,
+          "rawType": "\"icon\""
+        },
+        "icon": {
+          "type": "function",
+          "required": false,
+          "semantic": "icon-component"
+        },
+        "color": {
+          "type": "enum",
+          "required": false,
+          "values": [
+            "black",
+            "blue500",
+            "blue600",
+            "currentColor",
+            "gray100",
+            "gray200",
+            "gray300",
+            "gray400",
+            "gray500",
+            "gray600",
+            "gray700",
+            "green500",
+            "green600",
+            "orange500",
+            "orange600",
+            "pink100",
+            "pink600",
+            "red500",
+            "red600",
+            "secondary-gray-blue-100",
+            "secondary-gray-blue-200",
+            "secondary-gray-blue-300",
+            "secondary-gray-blue-400",
+            "secondary-gray-blue-450",
+            "secondary-gray-blue-50",
+            "secondary-gray-blue-500",
+            "secondary-gray-blue-600",
+            "secondary-gray-blue-700",
+            "violet300",
+            "violet600",
+            "white",
+            "yellow600"
+          ]
+        },
+        "size": {
+          "type": "number",
+          "required": false
+        },
+        "children": {
+          "type": "ReactNode",
+          "required": false
+        }
+      }
     },
     "maxLength": {
       "type": "number",

package/data/textarea.json

@@ -3,7 +3,7 @@
   "exportName": "Textarea",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "Textarea(멀티라인 인풋)는 여러 줄의 사용형 텍스트 입력을 위한 컴포넌트입니다.",
   "aliases": [
     "Textarea",