@ncds/ui-admin-mcp 1.6.4-alpha.6 → 1.6.4-alpha.7

package/bin/server.js

@@ -14,7 +14,6 @@ const dataLoader_js_1 = require("./utils/dataLoader.js");
 const logger_js_1 = require("./utils/logger.js");
 const listComponents_js_1 = require("./tools/listComponents.js");
 const searchComponent_js_1 = require("./tools/searchComponent.js");
-const getComponentHtml_js_1 = require("./tools/getComponentHtml.js");
 const getComponentProps_js_1 = require("./tools/getComponentProps.js");
 const validateHtml_js_1 = require("./tools/validateHtml.js");
 const ping_js_1 = require("./tools/ping.js");
@@ -31,7 +30,10 @@ const main = async () => {
     const componentMap = (0, dataLoader_js_1.loadComponentsFromDir)(dataLoader_js_1.DEFAULT_DATA_DIR);
     const cdnMeta = (0, dataLoader_js_1.loadCdnMeta)(dataLoader_js_1.DEFAULT_DATA_DIR);
     const iconData = (0, dataLoader_js_1.loadIconData)(dataLoader_js_1.DEFAULT_DATA_DIR);
-    const bundlePath = path_1.default.resolve(__dirname, '../bin/components.bundle.js');
+    const bundlePath = path_1.default.resolve(__dirname, '..', 'bin', 'components.bundle.js');
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
+    const bundle = require(bundlePath);
+    logger_js_1.logger.info(`컴포넌트 번들 로딩 완료`);
     server.registerTool('ping', {
         description: 'NCUA MCP 서버 연결 확인 + 버전 + capabilities/rules 조회',
     }, () => (0, ping_js_1.ping)(componentMap, cdnMeta, version_js_1.VERSION));
@@ -49,16 +51,6 @@ const main = async () => {
         description: '이름이나 설명으로 UI 컴포넌트를 찾습니다.',
         inputSchema: { query: zod_1.z.string().describe('검색 키워드 (대소문자 무관)') },
     }, ({ query }) => (0, searchComponent_js_1.searchComponent)(componentMap, query));
-    server.registerTool('get_component_html', {
-        description: '컴포넌트의 HTML 마크업 예시를 가져옵니다. variant를 지정하면 해당 옵션이 적용된 HTML을 반환합니다.',
-        inputSchema: {
-            name: zod_1.z.string().min(1).describe('컴포넌트명 (예: "button", "badge")'),
-            variant: zod_1.z
-                .record(zod_1.z.string(), zod_1.z.string())
-                .optional()
-                .describe('옵션 조합 (예: { hierarchy: "primary", size: "md" })'),
-        },
-    }, ({ name, variant }) => (0, getComponentHtml_js_1.getComponentHtml)(componentMap, name, variant));
     server.registerTool('get_component_props', {
         description: '컴포넌트에서 사용할 수 있는 옵션(속성) 목록을 가져옵니다.',
         inputSchema: { name: zod_1.z.string().min(1).describe('컴포넌트명 (예: "button", "badge")') },
@@ -73,12 +65,15 @@ const main = async () => {
         },
     }, ({ html }) => (0, validateHtml_js_1.validateHtml)(componentMap, html));
     server.registerTool('render_to_html', {
-        description: '컴포넌트명과 props를 전달하면 실제 렌더링된 HTML을 반환합니다. 어떤 props 조합이든 정확한 DOM 구조의 HTML을 받을 수 있습니다.',
+        description: '컴포넌트명과 속성을 전달하면 정확한 HTML을 반환합니다.',
         inputSchema: {
             name: zod_1.z.string().min(1).describe('컴포넌트명 (예: "button", "modal", "input")'),
-            props: zod_1.z.record(zod_1.z.string(), zod_1.z.unknown()).optional().describe('컴포넌트 props (예: { label: "확인", hierarchy: "primary" })'),
+            props: zod_1.z
+                .record(zod_1.z.string(), zod_1.z.unknown())
+                .optional()
+                .describe('컴포넌트 props (예: { label: "확인", hierarchy: "primary" })'),
         },
-    }, ({ name, props }) => (0, renderToHtml_js_1.renderToHtml)(componentMap, bundlePath, name, props));
+    }, ({ name, props }) => (0, renderToHtml_js_1.renderToHtml)(componentMap, bundle, cdnMeta, name, props));
     const transport = new stdio_js_1.StdioServerTransport();
     await server.connect(transport);
     logger_js_1.logger.info(`NCUA MCP 서버 시작됨 (ncds-ui-admin v${version_js_1.VERSION})`);

package/bin/tools/ping.js

@@ -8,7 +8,6 @@ const CAPABILITIES = [
     { tool: 'search_component', description: '키워드로 컴포넌트 검색' },
     { tool: 'list_icons', description: '전체 아이콘 목록 조회' },
     { tool: 'search_icon', description: '키워드로 아이콘 검색' },
-    { tool: 'get_component_html', description: '컴포넌트 HTML 마크업 조회 (variant 지원)' },
     { tool: 'get_component_props', description: '컴포넌트 Props 스펙 조회' },
     { tool: 'validate_html', description: 'HTML BEM 클래스 유효성 검증 + 자동 수정' },
     { tool: 'render_to_html', description: 'Props 기반 동적 HTML 렌더링' },

package/bin/tools/renderToHtml.d.ts

@@ -1,3 +1,7 @@
+/**
+ * render_to_html tool — 컴포넌트 속성을 전달하면 정확한 HTML을 반환
+ */
 import type { ComponentData } from '../types.js';
+import type { CdnMeta } from '../utils/dataLoader.js';
 import { type McpToolResponse } from '../utils/response.js';
-export declare const renderToHtml: (componentMap: Map<string, ComponentData>, bundlePath: string, name: string, props?: Record<string, unknown>) => McpToolResponse;
+export declare const renderToHtml: (componentMap: Map<string, ComponentData>, bundle: Record<string, unknown>, cdnMeta: CdnMeta | null, name: string, props?: Record<string, unknown>) => McpToolResponse;

package/bin/tools/renderToHtml.js

@@ -4,54 +4,43 @@ exports.renderToHtml = void 0;
 const response_js_1 = require("../utils/response.js");
 // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
 const { JSDOM } = require('jsdom');
+let domInitialized = false;
+let portalMocked = false;
 /** jsdom + createPortal mock 환경을 세팅한다 */
 const setupDomEnvironment = () => {
-    if (typeof globalThis.document === 'undefined') {
+    if (!domInitialized) {
         const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
-        globalThis.document = dom.window.document;
-        // window/navigator는 이미 존재할 수 있으므로 (vitest 등) 없을 때만 세팅
-        if (typeof globalThis.window === 'undefined') {
+        if (typeof globalThis.document === 'undefined')
+            globalThis.document = dom.window.document;
+        if (typeof globalThis.window === 'undefined')
             globalThis.window = dom.window;
-        }
         if (typeof globalThis.navigator === 'undefined') {
             Object.defineProperty(globalThis, 'navigator', { value: dom.window.navigator, writable: true });
         }
+        domInitialized = true;
     }
-    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
-    const ReactDOM = require('react-dom');
-    if (!ReactDOM._portalMocked) {
+    if (!portalMocked) {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
+        const ReactDOM = require('react-dom');
         ReactDOM.createPortal = (children) => children;
-        ReactDOM._portalMocked = true;
+        portalMocked = true;
     }
 };
-/** kebab-case → PascalCase 변환 */
-const toPascalCase = (kebab) => kebab
-    .split('-')
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join('');
-/** 번들에서 컴포넌트를 찾는다 */
-const findComponent = (bundle, name) => {
-    const pascalName = toPascalCase(name);
-    // 정확한 이름 매칭
-    if (bundle[pascalName])
-        return { Component: bundle[pascalName], exportName: pascalName };
-    // InputBase 등 특수 매핑
-    const SPECIAL_MAPPINGS = {
-        Input: 'InputBase',
-        PasswordInput: 'PasswordInput',
-        NumberInput: 'NumberInput',
-        Textarea: 'Textarea',
-    };
-    const special = SPECIAL_MAPPINGS[pascalName];
-    if (special && bundle[special])
-        return { Component: bundle[special], exportName: special };
-    // 대소문자 무관 검색
-    const key = Object.keys(bundle).find((k) => k.toLowerCase() === pascalName.toLowerCase());
-    if (key && bundle[key])
-        return { Component: bundle[key], exportName: key };
-    return null;
+/** componentData.exportName으로 번들에서 컴포넌트를 찾는다 */
+const findComponent = (bundle, exportName) => {
+    return bundle[exportName] ?? null;
+};
+/** componentMap의 props 스펙에서 defaultsUsed를 자동 계산 */
+const calcDefaultsUsed = (propsSpec, userProps) => {
+    const defaults = {};
+    for (const [key, spec] of Object.entries(propsSpec)) {
+        if (spec.default !== undefined && !(key in userProps)) {
+            defaults[key] = spec.default;
+        }
+    }
+    return defaults;
 };
-const renderToHtml = (componentMap, bundlePath, name, props) => {
+const renderToHtml = (componentMap, bundle, cdnMeta, name, props) => {
     const normalized = (0, response_js_1.normalizeName)(name);
     const componentData = componentMap.get(normalized);
     if (!componentData)
@@ -61,31 +50,34 @@ const renderToHtml = (componentMap, bundlePath, name, props) => {
     const React = require('react');
     // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
     const { renderToStaticMarkup } = require('react-dom/server');
-    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
-    const bundle = require(bundlePath);
-    const found = findComponent(bundle, normalized);
-    if (!found) {
-        return (0, response_js_1.successResponse)({
-            error: 'COMPONENT_NOT_IN_BUNDLE',
-            message: `'${normalized}' 컴포넌트가 번들에 없습니다. get_component_html을 사용하세요.`,
-        });
+    const exportName = componentData.exportName;
+    if (!exportName) {
+        return (0, response_js_1.errorResponse)('EXPORT_NAME_MISSING', `'${normalized}' 컴포넌트에 exportName이 없습니다.`, '데이터를 재추출해주세요 (yarn extract).');
+    }
+    const Component = findComponent(bundle, exportName);
+    if (!Component) {
+        return (0, response_js_1.errorResponse)('COMPONENT_NOT_IN_BUNDLE', `'${normalized}' (${exportName}) 컴포넌트가 번들에 없습니다.`, '번들을 재빌드해주세요 (yarn build:bundle).');
     }
     try {
-        const element = React.createElement(found.Component, props ?? {});
+        const userProps = props ?? {};
+        const element = React.createElement(Component, userProps);
         const html = renderToStaticMarkup(element);
+        const defaultsUsed = componentData.props ? calcDefaultsUsed(componentData.props, userProps) : {};
         return (0, response_js_1.successResponse)({
             html,
             component: normalized,
-            exportName: found.exportName,
+            exportName,
+            appliedProps: userProps,
+            defaultsUsed,
+            js: componentData.jsRequired
+                ? { required: true, description: '이 컴포넌트는 인터랙션을 위해 CDN JS가 필요합니다' }
+                : { required: false },
+            cdn: cdnMeta ?? undefined,
         });
     }
     catch (err) {
-        const message = err instanceof Error ? err.message : String(err);
-        return (0, response_js_1.successResponse)({
-            error: 'RENDER_FAILED',
-            message: `'${normalized}' 렌더링 실패: ${message}`,
-            component: normalized,
-        });
+        const errMessage = err instanceof Error ? err.message : String(err);
+        return (0, response_js_1.errorResponse)('RENDER_FAILED', `'${normalized}' 렌더링 실패: ${errMessage}`, '사용 가능한 속성을 확인하려면 get_component_props를 사용하세요.');
     }
 };
 exports.renderToHtml = renderToHtml;

package/bin/types.d.ts

@@ -13,6 +13,8 @@ export interface ComponentUsage {
 }
 export interface ComponentData {
     name: string;
+    exportName?: string;
+    jsRequired?: boolean;
     description: string;
     aliases: string[];
     props: Record<string, PropSpec>;

package/data/badge-group.json

@@ -1,5 +1,7 @@
 {
   "name": "badge-group",
+  "exportName": "BadgeGroup",
+  "jsRequired": false,
   "description": "NCDS Badge Group 컴포넌트",
   "aliases": [],
   "props": {

package/data/badge.json

@@ -1,5 +1,7 @@
 {
   "name": "badge",
+  "exportName": "Badge",
+  "jsRequired": false,
   "description": "NCDS Badge 컴포넌트",
   "aliases": [],
   "props": {

package/data/bread-crumb.json

@@ -1,5 +1,7 @@
 {
   "name": "bread-crumb",
+  "exportName": "BreadCrumb",
+  "jsRequired": false,
   "description": "NCDS Bread Crumb 컴포넌트",
   "aliases": [],
   "props": {},

package/data/breadcrumb.json

@@ -1,5 +1,7 @@
 {
   "name": "breadcrumb",
+  "exportName": "Breadcrumb",
+  "jsRequired": false,
   "description": "NCDS Breadcrumb 컴포넌트",
   "aliases": [],
   "props": {

package/data/button-group.json

@@ -1,5 +1,7 @@
 {
   "name": "button-group",
+  "exportName": "ButtonGroup",
+  "jsRequired": false,
   "description": "NCDS Button Group 컴포넌트",
   "aliases": [],
   "props": {

package/data/button.json

@@ -1,5 +1,7 @@
 {
   "name": "button",
+  "exportName": "Button",
+  "jsRequired": false,
   "description": "NCDS Button 컴포넌트",
   "aliases": [],
   "props": {

package/data/carousel-arrow.json

@@ -1,5 +1,7 @@
 {
   "name": "carousel-arrow",
+  "exportName": "CarouselArrow",
+  "jsRequired": false,
   "description": "NCDS Carousel Arrow 컴포넌트",
   "aliases": [],
   "props": {

package/data/carousel-number-group.json

@@ -1,5 +1,7 @@
 {
   "name": "carousel-number-group",
+  "exportName": "CarouselNumberGroup",
+  "jsRequired": false,
   "description": "NCDS Carousel Number Group 컴포넌트",
   "aliases": [],
   "props": {

package/data/carousel.json

@@ -1,5 +1,7 @@
 {
   "name": "carousel",
+  "exportName": "Carousel",
+  "jsRequired": false,
   "description": "NCDS Carousel 컴포넌트",
   "aliases": [],
   "props": {},

package/data/checkbox.json

@@ -1,5 +1,7 @@
 {
   "name": "checkbox",
+  "exportName": "Checkbox",
+  "jsRequired": false,
   "description": "NCDS Checkbox 컴포넌트",
   "aliases": [],
   "props": {

package/data/combobox.json

@@ -1,5 +1,7 @@
 {
   "name": "combobox",
+  "exportName": "Combobox",
+  "jsRequired": true,
   "description": "NCDS Combobox 컴포넌트",
   "aliases": [],
   "props": {

package/data/date-picker.json

@@ -1,5 +1,7 @@
 {
   "name": "date-picker",
+  "exportName": "DatePicker",
+  "jsRequired": true,
   "description": "NCDS Date Picker 컴포넌트",
   "aliases": [],
   "props": {

package/data/divider.json

@@ -1,5 +1,7 @@
 {
   "name": "divider",
+  "exportName": "Divider",
+  "jsRequired": false,
   "description": "NCDS Divider 컴포넌트",
   "aliases": [],
   "props": {

package/data/dot.json

@@ -1,5 +1,7 @@
 {
   "name": "dot",
+  "exportName": "Dot",
+  "jsRequired": false,
   "description": "NCDS Dot 컴포넌트",
   "aliases": [],
   "props": {

package/data/dropdown.json

@@ -1,5 +1,7 @@
 {
   "name": "dropdown",
+  "exportName": "Dropdown",
+  "jsRequired": false,
   "description": "NCDS Dropdown 컴포넌트",
   "aliases": [],
   "props": {

package/data/empty-state.json

@@ -1,5 +1,7 @@
 {
   "name": "empty-state",
+  "exportName": "EmptyState",
+  "jsRequired": false,
   "description": "NCDS Empty State 컴포넌트",
   "aliases": [],
   "props": {

package/data/featured-icon.json

@@ -1,5 +1,7 @@
 {
   "name": "featured-icon",
+  "exportName": "FeaturedIcon",
+  "jsRequired": true,
   "description": "NCDS Featured Icon 컴포넌트",
   "aliases": [],
   "props": {

package/data/file-input.json

@@ -1,5 +1,7 @@
 {
   "name": "file-input",
+  "exportName": "FileInput",
+  "jsRequired": true,
   "description": "NCDS File Input 컴포넌트",
   "aliases": [],
   "props": {

package/data/horizontal-tab.json

@@ -1,5 +1,7 @@
 {
   "name": "horizontal-tab",
+  "exportName": "HorizontalTab",
+  "jsRequired": false,
   "description": "NCDS Horizontal Tab 컴포넌트",
   "aliases": [],
   "props": {

package/data/image-file-input.json

@@ -1,5 +1,7 @@
 {
   "name": "image-file-input",
+  "exportName": "ImageFileInput",
+  "jsRequired": true,
   "description": "NCDS Image File Input 컴포넌트",
   "aliases": [],
   "props": {

package/data/input.json

@@ -1,5 +1,7 @@
 {
   "name": "input",
+  "exportName": "InputBase",
+  "jsRequired": false,
   "description": "NCDS Input 컴포넌트",
   "aliases": [],
   "props": {

package/data/modal.json

@@ -1,5 +1,7 @@
 {
   "name": "modal",
+  "exportName": "Modal",
+  "jsRequired": true,
   "description": "NCDS Modal 컴포넌트",
   "aliases": [],
   "props": {

package/data/notification.json

@@ -1,5 +1,7 @@
 {
   "name": "notification",
+  "exportName": "Notification",
+  "jsRequired": true,
   "description": "NCDS Notification 컴포넌트",
   "aliases": [],
   "props": {

package/data/number-input.json

@@ -1,5 +1,7 @@
 {
   "name": "number-input",
+  "exportName": "NumberInput",
+  "jsRequired": false,
   "description": "NCDS Number Input 컴포넌트",
   "aliases": [],
   "props": {

package/data/pagination.json

@@ -1,5 +1,7 @@
 {
   "name": "pagination",
+  "exportName": "Pagination",
+  "jsRequired": false,
   "description": "NCDS Pagination 컴포넌트",
   "aliases": [],
   "props": {

package/data/password-input.json

@@ -1,5 +1,7 @@
 {
   "name": "password-input",
+  "exportName": "PasswordInput",
+  "jsRequired": false,
   "description": "NCDS Password Input 컴포넌트",
   "aliases": [],
   "props": {},

package/data/progress-bar.json

@@ -1,5 +1,7 @@
 {
   "name": "progress-bar",
+  "exportName": "ProgressBar",
+  "jsRequired": true,
   "description": "NCDS Progress Bar 컴포넌트",
   "aliases": [],
   "props": {

package/data/progress-circle.json

@@ -1,5 +1,7 @@
 {
   "name": "progress-circle",
+  "exportName": "ProgressCircle",
+  "jsRequired": false,
   "description": "NCDS Progress Circle 컴포넌트",
   "aliases": [],
   "props": {

package/data/radio.json

@@ -1,5 +1,7 @@
 {
   "name": "radio",
+  "exportName": "Radio",
+  "jsRequired": false,
   "description": "NCDS Radio 컴포넌트",
   "aliases": [],
   "props": {

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

@@ -1,5 +1,7 @@
 {
   "name": "range-date-picker-with-buttons",
+  "exportName": "RangeDatePickerWithButtons",
+  "jsRequired": false,
   "description": "NCDS Range Date Picker With Buttons 컴포넌트",
   "aliases": [],
   "props": {

package/data/range-date-picker.json

@@ -1,5 +1,7 @@
 {
   "name": "range-date-picker",
+  "exportName": "RangeDatePicker",
+  "jsRequired": false,
   "description": "NCDS Range Date Picker 컴포넌트",
   "aliases": [],
   "props": {

package/data/select-dropdown.json

@@ -1,5 +1,7 @@
 {
   "name": "select-dropdown",
+  "exportName": "SelectDropdown",
+  "jsRequired": false,
   "description": "NCDS Select Dropdown 컴포넌트",
   "aliases": [],
   "props": {},

package/data/select.json

@@ -1,5 +1,7 @@
 {
   "name": "select",
+  "exportName": "Select",
+  "jsRequired": false,
   "description": "NCDS Select 컴포넌트",
   "aliases": [],
   "props": {

package/data/selectbox.json

@@ -1,5 +1,7 @@
 {
   "name": "selectbox",
+  "exportName": "Selectbox",
+  "jsRequired": true,
   "description": "NCDS Selectbox 컴포넌트",
   "aliases": [],
   "props": {

package/data/slider.json

@@ -1,5 +1,7 @@
 {
   "name": "slider",
+  "exportName": "Slider",
+  "jsRequired": true,
   "description": "NCDS Slider 컴포넌트",
   "aliases": [],
   "props": {

package/data/spinner.json

@@ -1,5 +1,7 @@
 {
   "name": "spinner",
+  "exportName": "Spinner",
+  "jsRequired": false,
   "description": "NCDS Spinner 컴포넌트",
   "aliases": [],
   "props": {

package/data/switch.json

@@ -1,5 +1,7 @@
 {
   "name": "switch",
+  "exportName": "Switch",
+  "jsRequired": false,
   "description": "NCDS Switch 컴포넌트",
   "aliases": [],
   "props": {

package/data/tab.json

@@ -1,5 +1,7 @@
 {
   "name": "tab",
+  "exportName": "Tab",
+  "jsRequired": true,
   "description": "NCDS Tab 컴포넌트",
   "aliases": [],
   "props": {

package/data/tag.json

@@ -1,5 +1,7 @@
 {
   "name": "tag",
+  "exportName": "Tag",
+  "jsRequired": true,
   "description": "NCDS Tag 컴포넌트",
   "aliases": [],
   "props": {

package/data/textarea.json

@@ -1,5 +1,7 @@
 {
   "name": "textarea",
+  "exportName": "Textarea",
+  "jsRequired": false,
   "description": "NCDS Textarea 컴포넌트",
   "aliases": [],
   "props": {

package/data/toggle.json

@@ -1,5 +1,7 @@
 {
   "name": "toggle",
+  "exportName": "Toggle",
+  "jsRequired": false,
   "description": "NCDS Toggle 컴포넌트",
   "aliases": [],
   "props": {

package/data/tooltip.json

@@ -1,5 +1,7 @@
 {
   "name": "tooltip",
+  "exportName": "Tooltip",
+  "jsRequired": true,
   "description": "NCDS Tooltip 컴포넌트",
   "aliases": [],
   "props": {

package/data/vertical-tab.json

@@ -1,5 +1,7 @@
 {
   "name": "vertical-tab",
+  "exportName": "VerticalTab",
+  "jsRequired": false,
   "description": "NCDS Vertical Tab 컴포넌트",
   "aliases": [],
   "props": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin-mcp",
-  "version": "1.6.4-alpha.6",
+  "version": "1.6.4-alpha.7",
   "description": "NCDS UI Admin MCP 서버 — AI 에이전트가 NCUA 컴포넌트를 조회하고 HTML을 검증할 수 있는 MCP 서버",
   "bin": {
     "ncua-mcp": "./bin/server.mjs"