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

package/data/tag.json

@@ -0,0 +1,101 @@
+{
+  "name": "tag",
+  "exportName": "Tag",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "feedback",
+  "description": "Tag 컴포넌트는 정보를 분류하고 필터링하기 위한 시각적 표시를 제공합니다. 레이블, 카테고리, 필터 등을 나타내는 데 사용되며, 아이콘, 닫기 버튼, 체크박스, 카운트 등의 기능을 포함할 수 있습니다.",
+  "aliases": [
+    "Tag",
+    "태그",
+    "레이블",
+    "카테고리",
+    "필터",
+    "분류",
+    "icon",
+    "dot",
+    "country",
+    "checkbox",
+    "close",
+    "count",
+    "maxLength",
+    "truncation",
+    "NCDS"
+  ],
+  "hasChildren": true,
+  "whenToUse": [
+    "정보 분류와 필터링을 위한 시각적 라벨",
+    "사용자가 콘텐츠를 빠르게 분류/식별/필터링할 수 있도록 지원"
+  ],
+  "forbiddenRules": [
+    "disabled 태그에 액션 제공 금지",
+    "과도한 태그 나열 금지",
+    "텍스트 없는 태그 사용 금지"
+  ],
+  "seeAlso": [
+    "badge",
+    "badge-group",
+    "checkbox",
+    "dot"
+  ],
+  "props": {
+    "children": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "close": {
+      "type": "boolean",
+      "required": false
+    },
+    "count": {
+      "type": "string",
+      "required": false
+    },
+    "icon": {
+      "type": "object",
+      "required": false
+    },
+    "maxLength": {
+      "type": "number",
+      "required": false,
+      "default": 20
+    },
+    "onButtonClick": {
+      "type": "function",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "md",
+        "sm"
+      ],
+      "default": "sm"
+    },
+    "text": {
+      "type": "string",
+      "required": true
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-tag",
+    "ncua-tag--md",
+    "ncua-tag--sm",
+    "ncua-tag--truncated",
+    "ncua-tag__close",
+    "ncua-tag__count",
+    "ncua-tag__text",
+    "ncua-tag__tooltip",
+    "ncua-tag__tooltip-content"
+  ],
+  "usage": {
+    "import": "import { Tag } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Tag text=\"\" />",
+      "size:md": "<Tag size=\"md\" text=\"\" />",
+      "size:sm": "<Tag size=\"sm\" text=\"\" />"
+    }
+  }
+}

package/data/textarea.json

@@ -0,0 +1,96 @@
+{
+  "name": "textarea",
+  "exportName": "Textarea",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "Textarea(멀티라인 인풋)는 여러 줄의 사용형 텍스트 입력을 위한 컴포넌트입니다.",
+  "aliases": [
+    "Textarea",
+    "멀티라인",
+    "다중입력",
+    "TextArea",
+    "텍스트영역",
+    "Placeholder",
+    "CharacterCount",
+    "글자수",
+    "Resize",
+    "Helper Text",
+    "Destructive",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "Textarea는 50자 이상 다중 줄 입력에 사용하며, 반드시 외부 Label과 maxLength를 함께 정의한다",
+    "Width는 고정, Height만 Resize 허용"
+  ],
+  "forbiddenRules": [
+    "30자 이하 입력 항목에 Textarea 사용 금지",
+    "Label 없이 단독 사용 금지",
+    "Placeholder를 설명 텍스트 대체로 사용 금지",
+    "Max 정의 없이 무제한 입력 허용 금지",
+    "Width 자유 Resize 허용 금지"
+  ],
+  "seeAlso": [
+    "input",
+    "editor"
+  ],
+  "htmlElement": "textarea",
+  "props": {
+    "characterCount": {
+      "type": "boolean",
+      "required": false
+    },
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "destructive": {
+      "type": "boolean",
+      "required": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false
+    },
+    "hintText": {
+      "type": "string",
+      "required": false
+    },
+    "label": {
+      "type": "string",
+      "required": false
+    },
+    "required": {
+      "type": "boolean",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "sm",
+        "xs"
+      ],
+      "default": "xs"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-input",
+    "ncua-input--textarea",
+    "ncua-input__text-count",
+    "ncua-input__text-count-text",
+    "ncua-input__text-count-text-count",
+    "ncua-input__text-count-wrap",
+    "ncua-input__textarea"
+  ],
+  "usage": {
+    "import": "import { Textarea } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Textarea />",
+      "size:sm": "<Textarea size=\"sm\" />",
+      "size:xs": "<Textarea size=\"xs\" />"
+    }
+  }
+}

package/data/toggle.json

@@ -0,0 +1,102 @@
+{
+  "name": "toggle",
+  "exportName": "Toggle",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": false,
+  "category": "input",
+  "description": "Toggle은 단일 기능의 활성/비활성 상태를 즉시 전환하는 컨트롤입니다. 설정 값의 ON/OFF, 수신 여부, 사용 여부 등 즉각 반영되는 상태 전환 UI에 사용합니다.",
+  "aliases": [
+    "Toggle",
+    "토글",
+    "Switch",
+    "스위치",
+    "ON",
+    "OFF",
+    "활성",
+    "비활성",
+    "사용",
+    "미사용",
+    "노출",
+    "미노출",
+    "Checked",
+    "Disabled",
+    "Thumb",
+    "Track",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "즉시 반영되는 이진 상태(ON/OFF) 전환에만 사용",
+    "저장 후 반영, 3개 이상 옵션, 2차 부가 옵션이 있는 경우 Toggle을 사용하지 않는다"
+  ],
+  "forbiddenRules": [
+    "3개 이상 옵션에 Toggle 사용 금지",
+    "저장 후 반영되는 설정에 Toggle 사용 금지",
+    "2차 부가 옵션이 있는 경우 사용 금지",
+    "다중 선택 개념에 사용 금지",
+    "조건 선택 개념에 사용 금지",
+    "동일 화면 내 Size 혼용 금지"
+  ],
+  "seeAlso": [
+    "checkbox",
+    "radio",
+    "switch",
+    "select"
+  ],
+  "htmlElement": "input",
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "onChange": {
+      "type": "function",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "md",
+        "sm"
+      ],
+      "default": "md"
+    },
+    "supportText": {
+      "type": "string",
+      "required": false,
+      "default": ""
+    },
+    "text": {
+      "type": "string",
+      "required": false,
+      "default": ""
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-toggle",
+    "ncua-toggle--disabled",
+    "ncua-toggle--md",
+    "ncua-toggle--sm",
+    "ncua-toggle__input",
+    "ncua-toggle__slider",
+    "ncua-toggle__support-text",
+    "ncua-toggle__switch",
+    "ncua-toggle__text",
+    "ncua-toggle__text-wrapper"
+  ],
+  "usage": {
+    "import": "import { Toggle } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Toggle />",
+      "size:md": "<Toggle size=\"md\" />",
+      "size:sm": "<Toggle size=\"sm\" />"
+    }
+  }
+}

package/data/tooltip.json

@@ -0,0 +1,185 @@
+{
+  "name": "tooltip",
+  "exportName": "Tooltip",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "overlay",
+  "description": "Tooltip은 항목, 데이터, 기능 등에 대해 추가 설명이 필요한 경우 보조 정보를 제공하는 말풍선 내 UI 컴포넌트입니다.",
+  "aliases": [
+    "Tooltip",
+    "툴팁",
+    "Short Form",
+    "Long Form",
+    "Hover",
+    "보조설명",
+    "치환코드",
+    "aria-describedby",
+    "position",
+    "iconType",
+    "tooltipType",
+    "hideArrow",
+    "NCDS"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "기본 화면의 흐름을 방해하지 않으면서 필요한 보조 정보를 즉시 제공해야 합니다",
+    "과도한 사용이나 긴 내용은 사용자 경험을 저해합니다"
+  ],
+  "forbiddenRules": [
+    "Short Form에 텍스트 링크 사용 금지",
+    "Short Form에 버튼 포함 금지",
+    "Short Form 80자 초과 금지",
+    "Short Form에 상호작용 요소 포함 금지",
+    "Long Form Modal 중앙 정렬 금지",
+    "Long Form Dim 처리 금지",
+    "Long Form 300자 초과 금지",
+    "치환코드 복사 시 Tooltip 자동 닫힘 금지",
+    "치환코드 Tooltip Modal 전환 금지",
+    "치환코드 Tooltip에 Confirm Alert 사용 금지"
+  ],
+  "seeAlso": [
+    "icon",
+    "notification"
+  ],
+  "props": {
+    "className": {
+      "type": "string",
+      "required": false
+    },
+    "content": {
+      "type": "ReactNode",
+      "required": false
+    },
+    "hideArrow": {
+      "type": "boolean",
+      "required": false,
+      "default": false
+    },
+    "iconColor": {
+      "type": "string",
+      "required": false,
+      "default": "var(--gray-300)"
+    },
+    "iconStyle": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "alert-circle",
+        "help-circle"
+      ],
+      "default": "help-circle"
+    },
+    "iconType": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "fill",
+        "stroke"
+      ],
+      "default": "stroke"
+    },
+    "position": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "auto",
+        "bottom",
+        "bottom-left",
+        "bottom-right",
+        "left",
+        "right",
+        "top",
+        "top-left",
+        "top-right"
+      ],
+      "default": "auto"
+    },
+    "size": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "md",
+        "sm"
+      ],
+      "default": "sm"
+    },
+    "title": {
+      "type": "string",
+      "required": false
+    },
+    "tooltipType": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "black",
+        "white"
+      ],
+      "default": "black"
+    },
+    "type": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "long",
+        "short"
+      ],
+      "default": "short"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-tooltip",
+    "ncua-tooltip--alert-circle",
+    "ncua-tooltip--auto",
+    "ncua-tooltip--black",
+    "ncua-tooltip--bottom",
+    "ncua-tooltip--bottom-left",
+    "ncua-tooltip--bottom-right",
+    "ncua-tooltip--fill",
+    "ncua-tooltip--help-circle",
+    "ncua-tooltip--hidden-arrow",
+    "ncua-tooltip--left",
+    "ncua-tooltip--long",
+    "ncua-tooltip--md",
+    "ncua-tooltip--right",
+    "ncua-tooltip--short",
+    "ncua-tooltip--sm",
+    "ncua-tooltip--stroke",
+    "ncua-tooltip--top",
+    "ncua-tooltip--top-left",
+    "ncua-tooltip--top-right",
+    "ncua-tooltip--white",
+    "ncua-tooltip__bg",
+    "ncua-tooltip__bg--force-hidden",
+    "ncua-tooltip__bg--measuring",
+    "ncua-tooltip__bg--visible",
+    "ncua-tooltip__close-button",
+    "ncua-tooltip__content",
+    "ncua-tooltip__title"
+  ],
+  "usage": {
+    "import": "import { Tooltip } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<Tooltip />",
+      "iconStyle:alert-circle": "<Tooltip iconStyle=\"alert-circle\" />",
+      "iconStyle:help-circle": "<Tooltip iconStyle=\"help-circle\" />",
+      "iconType:fill": "<Tooltip iconType=\"fill\" />",
+      "iconType:stroke": "<Tooltip iconType=\"stroke\" />",
+      "position:auto": "<Tooltip position=\"auto\" />",
+      "position:bottom": "<Tooltip position=\"bottom\" />",
+      "position:bottom-left": "<Tooltip position=\"bottom-left\" />",
+      "position:bottom-right": "<Tooltip position=\"bottom-right\" />",
+      "position:left": "<Tooltip position=\"left\" />",
+      "position:right": "<Tooltip position=\"right\" />",
+      "position:top": "<Tooltip position=\"top\" />",
+      "position:top-left": "<Tooltip position=\"top-left\" />",
+      "position:top-right": "<Tooltip position=\"top-right\" />",
+      "size:md": "<Tooltip size=\"md\" />",
+      "size:sm": "<Tooltip size=\"sm\" />",
+      "tooltipType:black": "<Tooltip tooltipType=\"black\" />",
+      "tooltipType:white": "<Tooltip tooltipType=\"white\" />",
+      "type:long": "<Tooltip type=\"long\" />",
+      "type:short": "<Tooltip type=\"short\" />"
+    }
+  }
+}

package/data/vertical-tab.json

@@ -0,0 +1,99 @@
+{
+  "name": "vertical-tab",
+  "exportName": "VerticalTab",
+  "importPath": "@ncds/ui-admin",
+  "jsRequired": true,
+  "category": "navigation",
+  "description": "VerticalTab은 동일한 계층 구조의 관련 콘텐츠를 그룹화하여 동일 화면 내에서 콘텐츠를 전환하는 내비게이션 UI 컴포넌트입니다.",
+  "aliases": [
+    "VerticalTab",
+    "세로탭",
+    "탭",
+    "Tab",
+    "수직탭",
+    "콘텐츠전환",
+    "설정페이지",
+    "좌측네비게이션",
+    "Badge",
+    "SPA",
+    "네비게이션",
+    "NCDS",
+    "breakPoint",
+    "반응형",
+    "Select전환"
+  ],
+  "hasChildren": false,
+  "whenToUse": [
+    "좌측 영역에서 수직 방향으로 콘텐츠를 전환하는 내비게이션",
+    "설정 페이지, 계정 관리, 관리자 메뉴 등 좌측 네비게이션 성격의 콘텐츠 그룹 전환",
+    "SPA 기준 라우팅 변경으로 동작"
+  ],
+  "forbiddenRules": [
+    "1개 항목만 있는 경우 사용 금지",
+    "좌측 네비게이션과 혼동되도록 과도한 확장 금지",
+    "페이지 이동용 GNB처럼 사용 금지",
+    "이미지 사용 금지",
+    "장식 아이콘 사용 금지",
+    "서로 다른 계층 혼합 금지",
+    "페이지 리로드 금지",
+    "과도한 컬러 사용 금지"
+  ],
+  "seeAlso": [
+    "horizontal-tab",
+    "badge"
+  ],
+  "props": {
+    "activeTab": {
+      "type": "string",
+      "required": false
+    },
+    "breakPoint": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "mobile",
+        "pc"
+      ],
+      "default": "pc"
+    },
+    "menus": {
+      "type": "string",
+      "required": false,
+      "rawType": "import(\"/Users/nhncommerce/Desktop/company/ai-driven-ncds/packages/ui-admin/src/components/tab/TabButton\").TabButtonProps[] | undefined"
+    },
+    "onSelect": {
+      "type": "function",
+      "required": false
+    },
+    "type": {
+      "type": "enum",
+      "required": false,
+      "values": [
+        "button-primary",
+        "button-white",
+        "line-vertical"
+      ],
+      "default": "button-primary"
+    }
+  },
+  "html": {},
+  "bemClasses": [
+    "ncua-vertical-tab",
+    "ncua-vertical-tab--button-primary",
+    "ncua-vertical-tab--button-white",
+    "ncua-vertical-tab--line-vertical",
+    "ncua-vertical-tab--mobile",
+    "ncua-vertical-tab--pc"
+  ],
+  "usage": {
+    "import": "import { VerticalTab } from '@ncds/ui-admin';",
+    "react": {
+      "default": "<VerticalTab />",
+      "breakPoint:mobile": "<VerticalTab breakPoint=\"mobile\" />",
+      "breakPoint:pc": "<VerticalTab breakPoint=\"pc\" />",
+      "type:button-primary": "<VerticalTab type=\"button-primary\" />",
+      "type:button-white": "<VerticalTab type=\"button-white\" />",
+      "type:line-vertical": "<VerticalTab type=\"line-vertical\" />"
+    }
+  }
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@ncds/ui-admin-mcp",
+  "version": "1.0.0-alpha.2",
+  "description": "NCDS UI Admin MCP 서버 — AI 에이전트가 NCUA 컴포넌트를 조회하고 HTML을 검증할 수 있는 MCP 서버",
+  "bin": {
+    "ncua-mcp": "./bin/server.mjs"
+  },
+  "files": [
+    "bin",
+    "data",
+    "templates",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "extract": "tsx scripts/extract-mcp-data.ts",
+    "extract:icons": "tsx scripts/extract-icons.ts",
+    "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": "yarn extract && yarn extract:icons && yarn extract:tokens && yarn generate:cdn-meta && yarn build:bundle && yarn build:server",
+    "test": "vitest run --config vitest.config.ts",
+    "test:coverage": "vitest run --coverage --config vitest.config.ts",
+    "publish:npm": "npm publish --access=public"
+  },
+  "keywords": [
+    "ncds",
+    "nhn-commerce",
+    "design-system",
+    "mcp",
+    "model-context-protocol"
+  ],
+  "license": "SEE LICENSE IN LICENSE",
+  "private": false,
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.27.1",
+    "jsdom": "^26.1.0",
+    "node-html-parser": "^7.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "zod": "^4.3.6"
+  },
+  "peerDependencies": {
+    "flatpickr": ">=4.6.0",
+    "lodash-es": ">=4.17.0",
+    "moment": ">=2.30.0",
+    "swiper": ">=11.0.0"
+  },
+  "peerDependenciesMeta": {
+    "flatpickr": {
+      "optional": true
+    },
+    "lodash-es": {
+      "optional": true
+    },
+    "moment": {
+      "optional": true
+    },
+    "swiper": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "@types/react": "^18.3.20",
+    "ts-morph": "^27.0.2"
+  }
+}

package/templates/.mcp.json.example

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "ncds-ui-admin": {
+      "command": "npx",
+      "args": ["-y", "@ncds/ui-admin-mcp"]
+    }
+  }
+}

package/templates/README.md

@@ -0,0 +1,30 @@
+# NCUA MCP 서버 설정 템플릿
+
+## 빠른 시작
+
+프로젝트 루트에 `.mcp.json` 파일을 생성하고 아래 내용을 추가합니다.
+
+```json
+{
+  "mcpServers": {
+    "ncds-ui-admin": {
+      "command": "npx",
+      "args": ["-y", "@ncds/ui-admin-mcp"]
+    }
+  }
+}
+```
+
+또는 이 디렉토리의 `.mcp.json.example` 파일을 프로젝트 루트로 복사합니다.
+
+```bash
+cp node_modules/@ncds/ui-admin-mcp/templates/.mcp.json.example .mcp.json
+```
+
+## 요구사항
+
+- Node.js 20 이상
+
+## 확인 방법
+
+설정 후 Claude Desktop 또는 Claude Code를 재시작하면 `ncds-ui-admin` MCP 서버가 자동으로 인식됩니다.