@ncds/ui-admin-mcp 1.0.0-alpha.14 → 1.0.0-alpha.16

package/data/editor.json

@@ -0,0 +1,85 @@
+{
+  "name": "editor",
+  "exportName": "NcdsEditor",
+  "importPath": "@ncds/editor-html",
+  "jsRequired": true,
+  "category": "form",
+  "description": "froala 기반 WYSIWYG 에디터. textarea 를 in-place 변환. 외부 패키지(@ncds/editor-html) — render_to_html 호출 시 외부 분기 모듈에서 응답 직접 조립.",
+  "aliases": [
+    "Editor",
+    "에디터",
+    "WYSIWYG",
+    "위지윅",
+    "Froala",
+    "GodoEditor",
+    "NcdsEditor",
+    "리치 텍스트",
+    "rich text",
+    "ncds-editor",
+    "editor-html"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "장문/리치 텍스트 입력이 필요한 경우 (게시글 본문·상품 설명·뉴스레터 작성 등)",
+    "이미지·표·링크 등 인라인 컨텐츠 삽입이 필요한 경우",
+    "한국어 폰트 다양성이 중요한 경우 (나눔고딕·바탕 등 9종 지원)"
+  ],
+  "forbiddenRules": [
+    "단순 한 줄 텍스트 입력에 사용 금지 (Input 컴포넌트 사용)",
+    "컴포넌트 자식(children)으로 직접 마크업 주입 금지 — setHTML(html) API 사용",
+    "동적 삽입(모달 안에 textarea 추가) 시 mcp 출력 그대로 사용 금지 — window.ncdsEditor.initAll() 수동 호출 필요 (현재 mcp 미지원, 후속 스토리)"
+  ],
+  "seeAlso": ["input", "textarea"],
+  "usageExamples": {
+    "default": {
+      "heightMin": 300,
+      "heightMax": 600,
+      "placeholderText": "내용을 입력하세요."
+    },
+    "resizable": {
+      "heightMin": 150,
+      "heightMax": 400,
+      "heightResize": true,
+      "placeholderText": "높이를 조정할 수 있습니다."
+    },
+    "withCustomImageUpload": {
+      "heightMin": 200,
+      "heightMax": 400,
+      "placeholderText": "이미지 업로드가 가능합니다.",
+      "imageUploadCallback": "customImageUploadHandler"
+    }
+  },
+  "props": {
+    "heightMin": {
+      "type": "number",
+      "required": false,
+      "default": 300
+    },
+    "heightMax": {
+      "type": "number",
+      "required": false,
+      "default": 600
+    },
+    "heightResize": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "placeholderText": {
+      "type": "string",
+      "required": false,
+      "default": "내용을 입력하세요."
+    },
+    "imageUploadCallback": {
+      "type": "string",
+      "required": false,
+      "description": "전역 이미지 업로드 콜백 함수명. 마크업의 data-image-upload-callback 속성으로 직렬화."
+    }
+  },
+  "html": {},
+  "bemClasses": ["ncds-editor-container", "fr-toolbar", "fr-element", "fr-box", "fr-resize-handle"],
+  "usage": {
+    "import": "// CDN 로드 (npm import 미지원, vanilla JS only)\n<script src=\"https://fe-sdk.cdn-nhncommerce.com/@ncds/editor/0.0/ncds-editor.js\"></script>",
+    "react": {}
+  }
+}

package/data/empty-state.json

@@ -3,7 +3,7 @@
   "exportName": "EmptyState",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "feedback",
+  "category": "feedback-and-status",
   "description": "EmptyState는 앱에서 사용자에게 표시할 데이터가 없거나 검색어가 0개의 결과를 반환하는 순간을 표시하는 컴포넌트입니다.",
   "aliases": [
     "EmptyState",
@@ -37,7 +37,7 @@
     "buttons": {
       "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/empty-state/EmptyState\").ButtonOptions | import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/empty-state/EmptyState\").ButtonOptions[] | undefined",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/feedback-and-status/empty-state/EmptyState\").ButtonOptions | import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/feedback-and-status/empty-state/EmptyState\").ButtonOptions[] | undefined",
       "properties": {
         "label": {
           "type": "string",

package/data/featured-icon.json

@@ -3,7 +3,7 @@
   "exportName": "FeaturedIcon",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "icon",
+  "category": "image-and-icons",
   "description": "FeaturedIcon은 상태(Status), 결과(Result), 중요 액션(Action)을 시각적으로 강조하기 위한 아이콘 강조 컴포넌트입니다.",
   "aliases": [
     "FeaturedIcon",

package/data/file-input.json

@@ -3,7 +3,7 @@
   "exportName": "FileInput",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "File Upload가 필요한 영역에서 공통 UI/UX를 적용하는 입력 컴포넌트입니다",
   "aliases": [
     "파일인풋",

package/data/horizontal-tab.json

@@ -97,7 +97,7 @@
         "badgeInfo": {
           "type": "object",
           "required": false,
-          "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/badge/Badge\").BadgeProps | undefined",
+          "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/feedback-and-status/badge/Badge\").BadgeProps | undefined",
           "properties": {
             "label": {
               "type": "string",

package/data/image-file-input.json

@@ -3,7 +3,7 @@
   "exportName": "ImageFileInput",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "상품 이미지 등 시각적으로 참조되어야 하는 이미지 업로드 영역에 사용되는 컴포넌트입니다",
   "aliases": [
     "이미지파일인풋",

package/data/input-base.json

@@ -3,7 +3,7 @@
   "exportName": "InputBase",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "Input은 사용자에게 텍스트 데이터를 입력받는 UI 요소로, 다양한 사이즈와 상태를 지원하며 입력 필드 앞뒤로 아이콘, 텍스트, 버튼 등의 요소를 배치할 수 있습니다.",
   "aliases": [
     "인풋",

package/data/modal.json

@@ -3,7 +3,7 @@
   "exportName": "Modal",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "overlay",
+  "category": "overlays",
   "description": "Modal은 사용자가 현재 페이지를 이탈하지 않고도 집중이 필요한 중요 정보 제공 또는 복잡한 입력/처리 작업을 수행하도록 하기 위한 오버레이 UI 컴포넌트입니다.",
   "aliases": [
     "Modal",
@@ -208,7 +208,7 @@
         "featuredIcon": {
           "type": "object",
           "required": false,
-          "rawType": "{ icon: import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/types/side-slot\").SlotIconComponent; color: import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/featured-icon/FeaturedIcon\").FeaturedIconColor; theme: import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/featured-icon/FeaturedIcon\").FeaturedIconTheme; } | undefined",
+          "rawType": "{ icon: import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/types/side-slot\").SlotIconComponent; color: import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/image-and-icons/featured-icon/FeaturedIcon\").FeaturedIconColor; theme: import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/image-and-icons/featured-icon/FeaturedIcon\").FeaturedIconTheme; } | undefined",
           "properties": {
             "icon": {
               "type": "function",

package/data/notification.json

@@ -3,7 +3,7 @@
   "exportName": "Notification",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "overlay",
+  "category": "overlays",
   "description": "Notification 컴포넌트는 현재 작업과 관련된 상태 정보, 경고, 처리 결과를 비차단 방식으로 사용자에게 전달하는 UI입니다.",
   "aliases": [
     "Notification",
@@ -41,7 +41,7 @@
     "actions": {
       "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/notification/Notification\").NotificationAction[] | undefined",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/overlays/notification/Notification\").NotificationAction[] | undefined",
       "properties": {
         "label": {
           "type": "string",

package/data/number-input.json

@@ -3,7 +3,7 @@
   "exportName": "NumberInput",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "NumberInput은 숫자만 입력 가능한 전용 입력 컨트롤로, 직접 입력과 Spin Button(▲/▼) 조작을 모두 지원하며 Step 기능을 통해 값을 증감할 수 있습니다.",
   "aliases": [
     "숫자입력",

package/data/password-input.json

@@ -3,7 +3,7 @@
   "exportName": "PasswordInput",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "비밀번호 전용 입력 필드로 마스킹 토글을 내장합니다",
   "aliases": [
     "비밀번호",

package/data/progress-bar.json

@@ -3,7 +3,7 @@
   "exportName": "ProgressBar",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "feedback",
+  "category": "feedback-and-status",
   "description": "ProgressBar는 작업 진행률, 로딩 프로세스, 완료율 등을 시각적으로 표시하여 사용자에게 진행 중인 작업의 정도를 퍼센트(%)로 보여주는 컴포넌트입니다.",
   "aliases": [
     "ProgressBar",
@@ -51,7 +51,7 @@
     "segments": {
       "type": "object",
       "required": false,
-      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/progress-bar/types\").ProgressSegment[] | undefined",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/feedback-and-status/progress-bar/types\").ProgressSegment[] | undefined",
       "properties": {
         "value": {
           "type": "number",

package/data/progress-circle.json

@@ -3,7 +3,7 @@
   "exportName": "ProgressCircle",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "feedback",
+  "category": "feedback-and-status",
   "description": "ProgressCircle은 작업 진행 상태를 원형의 수치(%)로 시각화하여 사용자에게 현재 진행 정도를 명확하게 전달하는 컴포넌트입니다.",
   "aliases": [
     "ProgressCircle",

package/data/radio.json

@@ -3,7 +3,7 @@
   "exportName": "Radio",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "Radio는 여러 옵션 중 하나만 선택할 수 있는 단일 선택(Single Selection) 컨트롤로, 텍스트 라벨과 보조 설명을 함께 제공할 수 있습니다.",
   "aliases": [
     "라디오",

package/data/range-date-picker-with-buttons.json

@@ -3,7 +3,7 @@
   "exportName": "RangeDatePickerWithButtons",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "기간 옵션 버튼이 내장된 RangeDatePicker 확장 컴포넌트로 빠른 기간 설정을 지원합니다",
   "aliases": [
     "기간 선택 버튼",
@@ -61,7 +61,7 @@
     "endDateOptions": {
       "type": "object",
       "required": true,
-      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/date-picker/DatePicker\").DatePickerProps",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/forms-and-input/date-picker/DatePicker\").DatePickerProps",
       "properties": {
         "size": {
           "type": "enum",
@@ -144,7 +144,7 @@
     "startDateOptions": {
       "type": "object",
       "required": true,
-      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/date-picker/DatePicker\").DatePickerProps",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/forms-and-input/date-picker/DatePicker\").DatePickerProps",
       "properties": {
         "size": {
           "type": "enum",

package/data/range-date-picker.json

@@ -3,7 +3,7 @@
   "exportName": "RangeDatePicker",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "RangeDatePicker는 시작일~종료일 기간 범위를 선택해야 하는 경우 사용하는 복합 선택 위젯입니다. 검색 기간 설정, 노출 기간 설정, 이벤트 기간 설정 등 두 날짜의 쌍(Pair)이 필요한 모든 상황에서 사용합니다.",
   "aliases": [
     "범위날짜선택",
@@ -66,7 +66,7 @@
     "endDateOptions": {
       "type": "object",
       "required": true,
-      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/date-picker/DatePicker\").DatePickerProps",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/forms-and-input/date-picker/DatePicker\").DatePickerProps",
       "properties": {
         "size": {
           "type": "enum",
@@ -135,7 +135,7 @@
     "startDateOptions": {
       "type": "object",
       "required": true,
-      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/date-picker/DatePicker\").DatePickerProps",
+      "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/forms-and-input/date-picker/DatePicker\").DatePickerProps",
       "properties": {
         "size": {
           "type": "enum",

package/data/select-box.json

@@ -3,7 +3,7 @@
   "exportName": "SelectBox",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "Selectbox는 목록(레이어) 중에서 하나 이상의 항목을 선택하는 입력 컴포넌트로, 선택 가능한 옵션이 3~30개 정도이며 공간 효율이 중요한 경우 사용합니다.",
   "aliases": [
     "셀렉트박스",

package/data/select.json

@@ -3,7 +3,7 @@
   "exportName": "Select",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "네이티브 HTML select 래퍼입니다. 대부분의 경우 select-box를 사용하세요. 네이티브 select가 명시적으로 필요한 경우에만 사용합니다.",
   "aliases": [
     "네이티브 셀렉트",

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",

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": [
     "스위치",

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",

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",

package/data/toggle.json

@@ -3,7 +3,7 @@
   "exportName": "Toggle",
   "importPath": "@ncds/ui-admin",
   "jsRequired": false,
-  "category": "input",
+  "category": "forms-and-input",
   "description": "Toggle은 단일 기능의 활성/비활성 상태를 즉시 전환하는 컨트롤입니다. 설정 값의 ON/OFF, 수신 여부, 사용 여부 등 즉각 반영되는 상태 전환 UI에 사용합니다.",
   "aliases": [
     "Toggle",

package/data/tooltip.json

@@ -3,7 +3,7 @@
   "exportName": "Tooltip",
   "importPath": "@ncds/ui-admin",
   "jsRequired": true,
-  "category": "overlay",
+  "category": "overlays",
   "description": "Tooltip은 항목, 데이터, 기능 등에 대해 추가 설명이 필요한 경우 보조 정보를 제공하는 말풍선 내 UI 컴포넌트입니다.",
   "aliases": [
     "Tooltip",

package/data/vertical-tab.json

@@ -96,7 +96,7 @@
         "badgeInfo": {
           "type": "object",
           "required": false,
-          "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/badge/Badge\").BadgeProps | undefined",
+          "rawType": "import(\"/Users/nhncommerce/Desktop/project/ncds/packages/ui-admin/src/components/feedback-and-status/badge/Badge\").BadgeProps | undefined",
           "properties": {
             "label": {
               "type": "string",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin-mcp",
-  "version": "1.0.0-alpha.14",
+  "version": "1.0.0-alpha.16",
   "description": "NCDS UI Admin MCP 서버 — AI 에이전트가 NCUA 컴포넌트를 조회하고 HTML을 검증할 수 있는 MCP 서버",
   "bin": {
     "ncua-mcp": "./bin/server.mjs"
@@ -20,7 +20,7 @@
     "extract:tokens": "tsx scripts/extract-design-tokens.ts",
     "generate:cdn-meta": "tsx scripts/generate-cdn-meta.ts",
     "build:bundle": "tsx scripts/build-bundle.ts",
-    "build:server": "tsc --project tsconfig.json && rm -rf bin/definitions && cp -r src/definitions bin/definitions",
+    "build:server": "mkdir -p bin && rm -rf bin/definitions && cp -r src/definitions bin/definitions && find bin/definitions -name '*.ts' -delete && tsc --project tsconfig.json",
     "build": "pnpm extract && pnpm extract:icons && pnpm extract:tokens && pnpm generate:cdn-meta && pnpm build:bundle && pnpm build:server",
     "check-meta": "tsx scripts/check-meta-coherence.ts",
     "test": "vitest run --config vitest.config.ts",
@@ -38,6 +38,10 @@
   "license": "SEE LICENSE IN LICENSE",
   "private": false,
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "1.1.4",
     "@modelcontextprotocol/sdk": "^1.27.1",
     "@ncds/types-common": "^1.0.0",
     "@ncds/types-layout": "^1.0.0",