@ncds/ui-admin-mcp 1.0.0-alpha.13 → 1.0.0-alpha.15

package/bin/tools/renderToHtml.js

@@ -1,7 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderToHtml = void 0;
+exports.renderToHtml = exports.mergeCdnDefaults = exports.stripFunctionProps = void 0;
+/**
+ * render_to_html tool — 컴포넌트 속성을 전달하면 정확한 HTML + React 매핑을 반환 (순수 함수)
+ *
+ * DOM 환경과 React/ReactDOM은 server.ts에서 초기화하고 파라미터로 전달한다.
+ * 이 파일에는 fs, path, require, let이 없다.
+ */
+// biome-ignore-all lint/complexity/noExcessiveCognitiveComplexity: 기존 spec-walk 함수 복잡도 (Story 5.8 scope 외, 별도 refactor 스토리)
+// biome-ignore-all lint/style/useExportsLast: RenderToHtmlParams export interface 상단 위치 (파일 관행)
+// biome-ignore-all lint/style/noNonNullAssertion: 기존 fallback 패턴 (Story 5.8 scope 외)
+// biome-ignore-all lint/style/noNestedTernary: 기존 reactElementToJsx의 type 판정 로직 (Story 5.8 scope 외)
+// biome-ignore-all lint/style/useTemplate: 기존 attrsPrefix 문자열 결합 (Story 5.8 scope 외)
+const lodash_1 = require("lodash");
 const response_js_1 = require("../utils/response.js");
+const editor_js_1 = require("./external/editor.js");
 // ── 상수 ──────────────────────────────────────────────────────────
 /** React 특수 props 차단 — injection 방지 */
 const BLOCKED_PROPS = new Set(['dangerouslySetInnerHTML', 'ref', '__self', '__source']);
@@ -19,7 +32,7 @@ const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
 const resolveSimpleComponent = (name, ctx) => {
     const normalized = (0, response_js_1.normalizeName)(name);
     const childData = ctx.componentMap.get(normalized);
-    const Component = childData?.exportName ? ctx.bundle[childData.exportName] ?? null : null;
+    const Component = childData?.exportName ? (ctx.bundle[childData.exportName] ?? null) : null;
     return { Component, propsSpec: childData?.props };
 };
 /** compound component resolve: "modal.header" → { Component: bundle.Modal.Header, propsSpec: subComponents["Modal.Header"].props } */
@@ -331,6 +344,180 @@ const correctMissingRequired = (userProps, propsSpec) => {
     }
     return corrected;
 };
+// ── CDN init 패턴 (Story 5.8) ─────────────────────────────────────
+/**
+ * CDN 호출 패턴은 `js-api.json`의 `cdnPattern` 필드(A/B/C)로 단일 관리한다.
+ * 컴포넌트 추가 시 js-api.json 한 곳에만 패턴을 명시하면 자동 인식된다.
+ */
+/** options를 안전하게 직렬화 — script 블록 탈출 방지(`</script>` 이스케이프) */
+const serializeCdnOptions = (options) => JSON.stringify(options).replace(/<\/script/gi, '<\\/script');
+/** 패턴 A: `new ncua.X(wrapper, options)` */
+const buildPatternA = (id, className, options) => [
+    `<div id="${id}"></div>`,
+    '<script>',
+    "  document.addEventListener('DOMContentLoaded', function () {",
+    `    const wrapper = document.querySelector('#${id}');`,
+    `    new ncua.${className}(wrapper, ${serializeCdnOptions(options)});`,
+    '  });',
+    '</script>',
+].join('\n');
+/** 패턴 B: `new ncua.X({...options, container: id})` — container 자동 주입 */
+const buildPatternB = (id, className, options) => [
+    `<div id="${id}"></div>`,
+    '<script>',
+    "  document.addEventListener('DOMContentLoaded', function () {",
+    `    new ncua.${className}(${serializeCdnOptions({ ...options, container: id })});`,
+    '  });',
+    '</script>',
+].join('\n');
+/** 패턴 C: `new ncua.X(options)` + `getElement()` + 수동 append */
+const buildPatternC = (id, className, options) => [
+    `<div id="${id}"></div>`,
+    '<script>',
+    "  document.addEventListener('DOMContentLoaded', function () {",
+    `    const wrapper = document.querySelector('#${id}');`,
+    `    const inst = new ncua.${className}(${serializeCdnOptions(options)});`,
+    '    wrapper.appendChild(inst.getElement());',
+    '  });',
+    '</script>',
+].join('\n');
+/**
+ * CDN init 스크립트 생성. 패턴은 `jsApi.cdnPattern` (A/B/C)으로 결정한다.
+ * 호출자는 `cdnPattern` 부재 시 isCdnInput=false로 분기하여 React renderToStaticMarkup 경로를 사용한다.
+ */
+const buildCdnInitScript = (pattern, componentName, instanceId, className, options) => {
+    const id = `ncua-${componentName}-${instanceId}`;
+    if (pattern === 'A')
+        return buildPatternA(id, className, options);
+    if (pattern === 'B')
+        return buildPatternB(id, className, options);
+    return buildPatternC(id, className, options);
+};
+/** options 키 중 `jsApi.constructorParams`에 없는 키를 warning 메시지로 변환.
+ *  constructorParams의 키는 `config.options` 같은 dot 표기 — 마지막 segment만 추출해 비교. */
+const checkUnknownCdnKeys = (options, jsApi) => {
+    if (Object.keys(jsApi.constructorParams).length === 0)
+        return [];
+    const allowedKeys = new Set();
+    for (const param of Object.keys(jsApi.constructorParams)) {
+        const lastDot = param.lastIndexOf('.');
+        allowedKeys.add(lastDot >= 0 ? param.slice(lastDot + 1) : param);
+    }
+    return Object.keys(options)
+        .filter((key) => !allowedKeys.has(key))
+        .map((key) => `Unknown CDN option key '${key}' for component '${jsApi.className}'. Passed through as-is. Verify against constructorParams.`);
+};
+/** SelectBox/ComboBox `options` 배열 요소 키 정규화.
+ *  공식 docs는 `{id, label}` 또는 `{id, text}` 허용. React 매칭은 `label`만 받으므로
+ *  통일된 `{id, label}`로 정규화. `{value, text}`는 비표준 alias(HTML `<option>` 컨벤션
+ *  오용)이며 함께 변환. 정규화 발생 시 warning 기록(에이전트 학습용). */
+const normalizeCdnInputProps = (componentName, cdnConfig) => {
+    if (componentName !== 'select-box' && componentName !== 'combo-box') {
+        return { normalized: cdnConfig, warnings: [] };
+    }
+    const { options } = cdnConfig;
+    if (!Array.isArray(options))
+        return { normalized: cdnConfig, warnings: [] };
+    const aliasesUsed = new Set();
+    const normalizedOptions = options.map((opt) => {
+        if (opt === null || typeof opt !== 'object')
+            return opt;
+        const item = { ...opt };
+        if (item.id === undefined && item.value !== undefined) {
+            item.id = item.value;
+            delete item.value;
+            aliasesUsed.add('value');
+        }
+        if (item.label === undefined && item.text !== undefined) {
+            item.label = item.text;
+            delete item.text;
+            aliasesUsed.add('text');
+        }
+        return item;
+    });
+    const warnings = [];
+    if (aliasesUsed.has('value')) {
+        warnings.push(`Option key 'value' normalized to 'id' for component '${componentName}'. Canonical form is {id, label}.`);
+    }
+    if (aliasesUsed.has('text')) {
+        warnings.push(`Option key 'text' normalized to 'label' for component '${componentName}'. Canonical form is {id, label}.`);
+    }
+    return { normalized: { ...cdnConfig, options: normalizedOptions }, warnings };
+};
+/** Story 5.9: 사용자 props 에서 함수 prop 재귀 제거 (JSON 직렬화·deep merge 안전).
+ *  cdnDefaults 는 JSON 이라 함수 없음 → 사용자 props 만 정리.
+ *  Story 5.10: 외부 분기 모듈(`tools/external/editor.ts`)에서도 재사용 → export. */
+const stripFunctionProps = (obj) => {
+    if (typeof obj === 'function')
+        return undefined;
+    if (Array.isArray(obj)) {
+        return obj.map((item) => (0, exports.stripFunctionProps)(item)).filter((item) => item !== undefined);
+    }
+    if (typeof obj === 'object' && obj !== null) {
+        return Object.fromEntries(Object.entries(obj)
+            .filter(([, value]) => typeof value !== 'function')
+            .map(([key, value]) => [key, (0, exports.stripFunctionProps)(value)]));
+    }
+    return obj;
+};
+exports.stripFunctionProps = stripFunctionProps;
+/** Story 5.9: cdnDefaults 와 사용자 props 를 deep merge.
+ *  - 사용자 값 우선 (lodash merge 의 두 번째 인자가 우선)
+ *  - 함수 prop 은 사용자 props 에서 stripFunctionProps 로 사전 제거
+ *  - DatePicker `datePickerOptions` 배열 한정: 각 항목의 `options` 에 cdnDefaults 의 첫 항목 options 를 per-element 부분 merge
+ *  - 다른 배열(`buttons` 등) 은 사용자 값 그대로
+ *  반환: { merged, defaultsApplied } — defaultsApplied 는 cdnDefaults 에 있고 사용자 props 에 없는 top-level 키 (defaultsUsed 응답용)
+ *  Story 5.10: 외부 분기 모듈(`tools/external/editor.ts`)에서도 재사용 → export. */
+const mergeCdnDefaults = (componentName, cdnDefaults, userProps) => {
+    if (!cdnDefaults)
+        return { merged: userProps, defaultsApplied: [] };
+    const userPropsClean = (0, exports.stripFunctionProps)(userProps);
+    const baseMerged = (0, lodash_1.merge)((0, lodash_1.cloneDeep)(cdnDefaults), userPropsClean);
+    const merged = componentName === 'date-picker' && Array.isArray(userPropsClean.datePickerOptions)
+        ? {
+            ...baseMerged,
+            datePickerOptions: userPropsClean.datePickerOptions.map((item) => {
+                const baseOptions = cdnDefaults.datePickerOptions?.[0]?.options ?? {};
+                return {
+                    ...item,
+                    options: (0, lodash_1.merge)((0, lodash_1.cloneDeep)(baseOptions), item.options ?? {}),
+                };
+            }),
+        }
+        : baseMerged;
+    const defaultsApplied = Object.keys(cdnDefaults).filter((key) => !(key in userPropsClean));
+    return { merged, defaultsApplied };
+};
+exports.mergeCdnDefaults = mergeCdnDefaults;
+/** CDN config(에이전트 입력) → React props (buildReactOutput 입력) 번역.
+ *  단순 컴포넌트는 identity, 차이가 있는 컴포넌트는 별도 룰. */
+const translateCdnToReactProps = (componentName, cdnConfig) => {
+    // SelectBox/ComboBox: options → optionItems, value(원시) → value(객체) (배열에서 매칭해 wrap)
+    if (componentName === 'select-box' || componentName === 'combo-box') {
+        const { options, value, ...rest } = cdnConfig;
+        const result = { ...rest };
+        if (options !== undefined)
+            result.optionItems = options;
+        if (value !== undefined) {
+            if ((typeof value === 'string' || typeof value === 'number') && Array.isArray(options)) {
+                const matched = options.find((opt) => typeof opt === 'object' && opt !== null && opt.id === value);
+                result.value = matched !== undefined ? matched : value;
+            }
+            else {
+                result.value = value;
+            }
+        }
+        return result;
+    }
+    // FileInput/ImageFileInput: container 키는 React props에 없음 → 제거
+    if (componentName === 'file-input' || componentName === 'image-file-input') {
+        const result = { ...cdnConfig };
+        delete result.container;
+        return result;
+    }
+    // 그 외: identity (Slider, DatePicker, Tooltip, Notification, ProgressBar, Tag — key 동일 가정)
+    return cdnConfig;
+};
 // ── 응답 조립 ──────────────────────────────────────────────────────
 /** componentMap의 props 스펙에서 defaultsUsed를 자동 계산 */
 const calcDefaultsUsed = (propsSpec, userProps) => Object.fromEntries(Object.entries(propsSpec)
@@ -391,9 +578,9 @@ const reactElementToJsx = (node, ctx) => {
         const name = typeof el.type === 'string'
             ? el.type
             : typeof el.type === 'function'
-                ? el.type.displayName
-                    || el.type.name
-                    || 'Component'
+                ? el.type.displayName ||
+                    el.type.name ||
+                    'Component'
                 : 'Component';
         const { children: childChildren, ...restProps } = el.props || {};
         const attrs = Object.entries(restProps)
@@ -464,8 +651,12 @@ const buildJsField = (componentData, jsApiMap) => {
 // ── 진입점 ────────────────────────────────────────────────────────
 /** render_to_html tool — props로 React 컴포넌트를 렌더링하여 HTML + React 매핑 반환 */
 const renderToHtml = (params) => {
-    const { componentMap, bundle, iconBundle, cdnMeta, iconMeta, reactRuntime, jsApiMap, name, props } = params;
+    const { componentMap, bundle, iconBundle, cdnMeta, iconMeta, reactRuntime, jsApiMap, name, props, instanceId } = params;
     const normalized = (0, response_js_1.normalizeName)(name);
+    // Story 5.10: editor alias 검출 시 ui-admin 흐름 우회 — 외부 분기에서 응답 직접 조립
+    if ((0, editor_js_1.isEditorAlias)(normalized)) {
+        return (0, editor_js_1.buildEditorResponse)(props ?? {}, instanceId);
+    }
     const componentData = componentMap.get(normalized);
     if (!componentData)
         return (0, response_js_1.componentNotFoundResponse)(normalized);
@@ -478,29 +669,59 @@ const renderToHtml = (params) => {
         return (0, response_js_1.errorResponse)('COMPONENT_NOT_IN_BUNDLE', `'${normalized}' (${exportName}) 컴포넌트가 번들에 없습니다.`, '번들을 재빌드해주세요 (pnpm build:bundle).');
     }
     try {
-        const safeProps = removeBlockedProps(props ?? {});
+        // Story 5.8: jsRequired + js-api 정의 + jsApi.cdnPattern 등록 → CDN-input 모드
+        const jsApi = jsApiMap.get(exportName);
+        const isCdnInput = componentData.jsRequired && jsApi !== undefined && jsApi.cdnPattern !== undefined;
+        // CDN-input은 입력이 CDN config 스키마 → 옵션 배열 키 정규화 → React 파이프라인을 위해 React props로 번역
+        const cdnNormalization = isCdnInput
+            ? normalizeCdnInputProps(normalized, props ?? {})
+            : { normalized: props ?? {}, warnings: [] };
+        const normalizedCdnProps = cdnNormalization.normalized;
+        // Story 5.9: cdnDefaults 와 deep merge (사용자 props 우선, 함수 prop skip, datePickerOptions per-element 부분 merge)
+        const cdnMergeResult = isCdnInput && jsApi
+            ? (0, exports.mergeCdnDefaults)(normalized, jsApi.cdnDefaults, normalizedCdnProps)
+            : { merged: normalizedCdnProps, defaultsApplied: [] };
+        const mergedCdnProps = cdnMergeResult.merged;
+        const reactInput = isCdnInput ? translateCdnToReactProps(normalized, mergedCdnProps) : mergedCdnProps;
+        const safeProps = removeBlockedProps(reactInput);
         const sanitized = componentData.props ? sanitizeProps(safeProps, componentData.props) : safeProps;
         const enumWarnings = componentData.props ? validateProps(sanitized, componentData.props) : [];
         const enumCorrected = componentData.props ? correctInvalidEnums(sanitized, componentData.props) : sanitized;
         const corrected = componentData.props ? correctMissingRequired(enumCorrected, componentData.props) : enumCorrected;
         const postWarnings = componentData.props ? validateProps(corrected, componentData.props) : [];
-        const warnings = [...enumWarnings, ...postWarnings.filter((w) => !enumWarnings.includes(w))];
+        const cdnKeyWarnings = isCdnInput && jsApi ? checkUnknownCdnKeys(normalizedCdnProps, jsApi) : [];
+        const warnings = [
+            ...enumWarnings,
+            ...postWarnings.filter((w) => !enumWarnings.includes(w)),
+            ...cdnKeyWarnings,
+            ...cdnNormalization.warnings,
+        ];
         const resolvedProps = resolveIconProps(corrected, iconBundle, componentData.props);
         // children이 컴포넌트 descriptor면 React element로 변환
         if (resolvedProps.children !== undefined) {
             const ctx = { bundle, iconBundle, componentMap, reactRuntime };
             resolvedProps.children = resolveChildren(resolvedProps.children, ctx, 0);
         }
-        const rawHtml = reactRuntime.renderToStaticMarkup(reactRuntime.createElement(Component, resolvedProps));
-        const html = `<!-- ncua:${normalized} start -->\n${rawHtml}\n<!-- ncua:${normalized} end -->`;
+        // HTML 출력: CDN-input은 init script, 그 외는 React 정적 HTML (renderToStaticMarkup은 필요할 때만 호출)
+        const cdnInitScript = isCdnInput && jsApi?.cdnPattern
+            ? buildCdnInitScript(jsApi.cdnPattern, normalized, instanceId, jsApi.className, removeBlockedProps(mergedCdnProps))
+            : null;
+        const html = cdnInitScript !== null
+            ? cdnInitScript
+            : `<!-- ncua:${normalized} start -->\n${reactRuntime.renderToStaticMarkup(reactRuntime.createElement(Component, resolvedProps))}\n<!-- ncua:${normalized} end -->`;
         const hasDefaults = componentData.props ? calcDefaultsUsed(componentData.props, corrected) : {};
+        // Story 5.9: cdnDefaults 적용된 키도 defaultsUsed 에 노출 (에이전트 학습용)
+        const cdnDefaultsApplied = isCdnInput && jsApi?.cdnDefaults
+            ? Object.fromEntries(cdnMergeResult.defaultsApplied.map((key) => [key, jsApi.cdnDefaults?.[key]]))
+            : {};
+        const finalDefaultsUsed = { ...hasDefaults, ...cdnDefaultsApplied };
         return (0, response_js_1.successResponse)({
             html,
             component: normalized,
             exportName,
             importPath: componentData.importPath,
             appliedProps: corrected,
-            ...(Object.keys(hasDefaults).length > 0 && { defaultsUsed: hasDefaults }),
+            ...(Object.keys(finalDefaultsUsed).length > 0 && { defaultsUsed: finalDefaultsUsed }),
             ...(warnings.length > 0 && { warnings }),
             js: buildJsField(componentData, jsApiMap),
             cdn: cdnMeta ?? undefined,

package/bin/types.d.ts

@@ -85,6 +85,16 @@ export interface JsApiInfo {
     methods: string[];
     staticMethods?: string[];
     example: string;
+    /** Story 5.9: CDN init script 생성 시 사용자 props 와 deep merge 되는 default 옵션. JSON-serializable 만 (함수 prop 없음). */
+    cdnDefaults?: Record<string, unknown>;
+    /**
+     * CDN 호출 패턴.
+     * - A: `new ncua.X(element, options)` — element가 곧 컨테이너
+     * - B: `new ncua.X(options)` — options.container로 자동 append
+     * - C: `new ncua.X(options)` — getElement() + 수동 append
+     * 부재 시 React 정적 HTML 경로로 fallback.
+     */
+    cdnPattern?: 'A' | 'B' | 'C';
 }
 export interface ComplianceRuleHint {
     attr: string;

package/data/badge-group.json

@@ -3,7 +3,7 @@
   "exportName": "BadgeGroup",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "feedback",
+  "category": "feedback-and-status",
   "description": "BadgeGroup은 Badge 컴포넌트를 그룹화하여 표시하는 컴포넌트입니다. 주로 Badge와 함께 추가적인 라벨과 아이콘을 표시하여 액션유도할 수 있는 아이템으로 활용할 수 있습니다.",
   "aliases": [
     "BadgeGroup",
@@ -59,7 +59,7 @@
     "groupIcon": {
       "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
       "properties": {
         "type": {
           "type": "string",
@@ -134,7 +134,7 @@
     "leadingIcon": {
       "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
       "properties": {
         "type": {
           "type": "string",
@@ -211,7 +211,7 @@
     "trailingIcon": {
       "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
       "properties": {
         "type": {
           "type": "string",

package/data/badge.json

@@ -3,7 +3,7 @@
   "exportName": "Badge",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "data-display",
+  "category": "feedback-and-status",
   "description": "Badge는 상태나 중요성 및 이벤트 강조를 나타내는 레이블이며 빠른 인식을 제공해야 합니다.",
   "aliases": [
     "Badge",
@@ -81,7 +81,7 @@
     "leadingIcon": {
       "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
       "properties": {
         "type": {
           "type": "string",
@@ -154,7 +154,7 @@
     "trailingIcon": {
       "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
       "properties": {
         "type": {
           "type": "string",

package/data/bread-crumb.json

@@ -57,7 +57,7 @@
     "items": {
       "type": "object",
       "required": true,
-      "rawType": "import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/components/bread-crumb/BreadCrumb\").BreadcrumbItemProps[]",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/navigation/bread-crumb/BreadCrumb\").BreadcrumbItemProps[]",
       "properties": {
         "href": {
           "type": "string",

package/data/button-group.json

@@ -89,6 +89,16 @@
           "required": false,
           "default": false
         },
+        "fullWidth": {
+          "type": "boolean",
+          "required": false,
+          "default": false
+        },
+        "hasBorder": {
+          "type": "boolean",
+          "required": false,
+          "default": true
+        },
         "icon": {
           "type": "string",
           "required": false,

package/data/button.json

@@ -77,7 +77,7 @@
     "leadingIcon": {
       "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
       "properties": {
         "type": {
           "type": "string",
@@ -158,7 +158,7 @@
     "trailingIcon": {
       "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/types/side-slot\").SideSlotType | undefined",
       "properties": {
         "type": {
           "type": "string",

package/data/carousel-arrow.json

@@ -3,7 +3,7 @@
   "exportName": "CarouselArrow",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "feedback",
+  "category": "feedback-and-status",
   "description": "CarouselArrow는 캐러셀의 이전/다음 페이지로 이동할 수 있는 화살표 버튼 컴포넌트입니다.",
   "aliases": [
     "CarouselArrow",

package/data/carousel-number-group.json

@@ -3,7 +3,7 @@
   "exportName": "CarouselNumberGroup",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "feedback",
+  "category": "feedback-and-status",
   "description": "CarouselNumberGroup은 캐러셀의 현재 페이지와 전체 페이지 수를 표시하는 컴포넌트입니다.",
   "aliases": [
     "CarouselNumberGroup",

package/data/checkbox.json

@@ -3,7 +3,7 @@
   "exportName": "Checkbox",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "체크박스는 사용자가 목록에서 하나 이상의 항목을 선택하거나 옵션을 활성화/비활성화할 때 사용하는 핵심 Selection 컴포넌트입니다.",
   "aliases": [
     "체크박스",

package/data/combo-box.json

@@ -3,7 +3,7 @@
   "exportName": "ComboBox",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "ComboBox는 여러 개의 데이터에서 검색(입력)하거나 리스트에서 옵션을 골라 빠르게 선택하는 복합 선택 컴포넌트입니다.",
   "aliases": [
     "콤보박스",
@@ -92,7 +92,7 @@
     "optionItems": {
       "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/types/dropdown/option\").OptionType[] | undefined",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/types/dropdown/option\").OptionType[] | undefined",
       "properties": {
         "id": {
           "type": "string",
@@ -119,7 +119,7 @@
     "register": {
       "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhn/Project/ncds/node_modules/.pnpm/react-hook-form@7.72.0_react@18.2.0/node_modules/react-hook-form/dist/types/form\").UseFormRegisterReturn | undefined"
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/node_modules/.pnpm/react-hook-form@7.72.0_react@18.2.0/node_modules/react-hook-form/dist/types/form\").UseFormRegisterReturn | undefined"
     },
     "required": {
       "type": "boolean",
@@ -148,7 +148,7 @@
     "value": {
       "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhn/Project/ncds/packages/ui-admin/src/types/dropdown/option\").OptionValue | undefined"
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/types/dropdown/option\").OptionValue | undefined"
     }
   },
   "html": {},

package/data/date-picker.json

@@ -3,7 +3,7 @@
   "exportName": "DatePicker",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "DatePicker는 등록일, 노출일, 검색 기간 등 날짜 또는 시간 설정이 필요한 경우 사용하는 선택 위젯입니다.",
   "aliases": [
     "날짜선택위젯",
@@ -62,7 +62,7 @@
     "datePickerOptions": {
       "type": "object",
       "required": false,
-      "rawType": "Partial<import(\"/Users/nhn/Project/ncds/node_modules/.pnpm/flatpickr@4.6.13/node_modules/flatpickr/dist/types/options\").BaseOptions> | undefined"
+      "rawType": "Partial<import(\"/Users/nhncommerce/Desktop/project/ncds/node_modules/.pnpm/flatpickr@4.6.13/node_modules/flatpickr/dist/types/options\").BaseOptions> | undefined"
     },
     "destructive": {
       "type": "string",

package/data/divider.json

@@ -3,7 +3,7 @@
   "exportName": "Divider",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "data-display",
+  "category": "layout",
   "description": "콘텐츠 영역을 시각적으로 구분하는 수평 또는 수직 구분선 컴포넌트입니다.",
   "aliases": [
     "Divider",

package/data/dot.json

@@ -3,7 +3,7 @@
   "exportName": "Dot",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "icon",
+  "category": "image-and-icons",
   "description": "Dot 컴포넌트는 상태나 알림을 시각적으로 표시하기 위한 작은 원형 표시기입니다",
   "aliases": [
     "Dot",