@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.28 → 1.0.29

package/build/components/opsnow-common-spec-tools.js

@@ -0,0 +1,166 @@
+import { z } from "zod";
+// optional/default/describe 래퍼를 벗겨가며 타입·기본값·설명 수집
+// 중첩 z.object는 'options.color' 형태의 dotted name으로 펼침
+function inspectField(name, field, depth = 0) {
+    let required = true;
+    let defaultValue = "-";
+    let description = "";
+    let current = field;
+    while (true) {
+        if (!description && current.description)
+            description = current.description;
+        const def = current._def;
+        if (def.typeName === z.ZodFirstPartyTypeKind.ZodOptional) {
+            required = false;
+            current = def.innerType;
+        }
+        else if (def.typeName === z.ZodFirstPartyTypeKind.ZodDefault) {
+            required = false;
+            try {
+                const dv = def.defaultValue();
+                defaultValue = typeof dv === "string" ? `"${dv}"` : JSON.stringify(dv);
+            }
+            catch {
+                defaultValue = "-";
+            }
+            current = def.innerType;
+        }
+        else if (def.typeName === z.ZodFirstPartyTypeKind.ZodNullable) {
+            current = def.innerType;
+        }
+        else {
+            break;
+        }
+    }
+    const row = {
+        name,
+        type: typeToString(current),
+        required,
+        defaultValue,
+        description: description.split("\n")[0].trim(),
+    };
+    // 중첩 객체는 2단계까지만 펼침 (DataGrid 같은 대형 스키마 폭주 방지)
+    if (current._def.typeName === z.ZodFirstPartyTypeKind.ZodObject && depth < 2) {
+        const children = Object.entries(current.shape).flatMap(([key, child]) => inspectField(`${name}.${key}`, child, depth + 1));
+        return [row, ...children];
+    }
+    return [row];
+}
+function typeToString(t) {
+    const def = t._def;
+    switch (def.typeName) {
+        case z.ZodFirstPartyTypeKind.ZodString: return "string";
+        case z.ZodFirstPartyTypeKind.ZodNumber: return "number";
+        case z.ZodFirstPartyTypeKind.ZodBoolean: return "boolean";
+        case z.ZodFirstPartyTypeKind.ZodEnum: {
+            const vals = def.values.map(v => `"${v}"`);
+            return vals.length > 6 ? vals.slice(0, 6).join(" \\| ") + " ..." : vals.join(" \\| ");
+        }
+        case z.ZodFirstPartyTypeKind.ZodArray:
+            return `${typeToString(def.type)}[]`;
+        case z.ZodFirstPartyTypeKind.ZodObject: return "object";
+        case z.ZodFirstPartyTypeKind.ZodUnion:
+            return def.options.map(typeToString).join(" \\| ");
+        case z.ZodFirstPartyTypeKind.ZodRecord: return "Record";
+        case z.ZodFirstPartyTypeKind.ZodAny: return "any";
+        default: return "unknown";
+    }
+}
+// ============= 이름 매칭 =============
+// 'datagrid', 'data-grid', 'DATAGRID' → 'DataGrid'
+function normalize(s) {
+    return s.toLowerCase().replace(/[-_\s]/g, "");
+}
+// createButton → Button
+function toolToComponentName(toolName) {
+    return toolName.replace(/^create/, "");
+}
+// ============= 툴 팩토리 =============
+/**
+ * createXxx 툴 정의 목록에서 listComponents / getComponentSpec 툴 2개를 생성한다.
+ * @param componentTools createXxx 팩토리들이 반환한 툴 정의 (getUIExamples 제외)
+ * @param exampleKeys getUIExamples가 지원하는 uiType 키 목록 (예제 안내용)
+ */
+export function createSpecTools(componentTools, exampleKeys) {
+    // 컴포넌트명 → 툴 정의
+    const byName = new Map();
+    for (const tool of componentTools) {
+        byName.set(toolToComponentName(tool.name), tool);
+    }
+    const componentNames = [...byName.keys()];
+    // 컴포넌트명 → getUIExamples uiType 키
+    // 정확 일치 우선 (부분 일치를 먼저 하면 MuiIcon이 Icon에 잘못 매칭됨)
+    function exampleKeyFor(componentName) {
+        const target = normalize(componentName);
+        const exact = exampleKeys.find(k => normalize(k) === target);
+        if (exact)
+            return exact;
+        return exampleKeys.find(k => {
+            const nk = normalize(k);
+            return nk.includes(target) || target.includes(nk);
+        });
+    }
+    function summaryOf(tool) {
+        return tool.description.split("\n")[0].trim();
+    }
+    const listComponents = {
+        name: "listComponents",
+        description: "OpsNow 공통 UI 컴포넌트 카탈로그(이름 + 용도)를 반환합니다. 어떤 컴포넌트를 쓸지 정하지 못했거나 이름이 확실하지 않을 때 먼저 호출하세요.",
+        parameters: z.object({}),
+        handler: async () => {
+            let md = `# OpsNow 공통 UI 컴포넌트 카탈로그 (${componentNames.length}개)\n\n`;
+            md += `| 이름 | 용도 |\n|------|------|\n`;
+            for (const [name, tool] of byName) {
+                md += `| ${name} | ${summaryOf(tool)} |\n`;
+            }
+            md += `\n다음 단계:\n`;
+            md += `1. 컴포넌트를 골랐으면 props/import 확인: getComponentSpec({ component: "이름" })\n`;
+            md += `2. 실제 사용 예제 확인: getUIExamples({ uiType: "이름" })`;
+            return { content: [{ type: "text", text: md }] };
+        },
+    };
+    const componentSpecParams = z.object({
+        component: z
+            .string()
+            .describe(`스펙을 조회할 컴포넌트 이름. 사용 가능: ${componentNames.join(", ")}`),
+    });
+    const getComponentSpec = {
+        name: "getComponentSpec",
+        description: `OpsNow 공통 UI 컴포넌트의 스펙(props 테이블, import 방법, 사용 규칙)을 반환합니다.
+**컴포넌트 코드를 작성하기 전에 반드시 해당 컴포넌트로 호출하세요.**
+사용 가능한 컴포넌트: ${componentNames.join(", ")}`,
+        parameters: componentSpecParams,
+        handler: async (args) => {
+            const input = args.component ?? "";
+            const target = normalize(input);
+            const matched = componentNames.find(n => normalize(n) === target);
+            // 매칭 실패 → 빈 응답 금지, 복붙 가능한 대안 호출문 반환
+            if (!matched) {
+                const candidates = componentNames.filter(n => normalize(n).includes(target) || target.includes(normalize(n)));
+                const listed = (candidates.length > 0 ? candidates : componentNames)
+                    .map(n => `getComponentSpec({ component: "${n}" })`)
+                    .join("\n");
+                const intro = candidates.length > 0
+                    ? `'${input}' 컴포넌트를 찾을 수 없습니다. 아래 중 하나로 다시 호출하세요:`
+                    : `'${input}' 컴포넌트를 찾을 수 없습니다. 사용 가능한 전체 목록입니다:`;
+                return { content: [{ type: "text", text: `${intro}\n${listed}` }] };
+            }
+            const tool = byName.get(matched);
+            const rows = Object.entries(tool.parameters.shape).flatMap(([key, field]) => inspectField(key, field));
+            // description 원문(용도 + import 예시 + 규칙 포함)을 그대로 싣고 props 테이블 추가
+            let md = `# ${matched}\n\n${tool.description.trim()}\n\n`;
+            if (rows.length > 0) {
+                md += `## Props\n\n| Prop | 타입 | 필수 | 기본값 | 설명 |\n|------|------|:---:|--------|------|\n`;
+                for (const row of rows) {
+                    md += `| \`${row.name}\` | ${row.type} | ${row.required ? "✅" : ""} | ${row.defaultValue} | ${row.description} |\n`;
+                }
+            }
+            const exKey = exampleKeyFor(matched);
+            if (exKey) {
+                md += `\n상세 사용 예제: getUIExamples({ uiType: "${exKey}" }) 를 호출하세요.`;
+            }
+            return { content: [{ type: "text", text: md }] };
+        },
+    };
+    return [listComponents, getComponentSpec];
+}

package/build/components/opsnow-common-stepper.js

@@ -19,9 +19,7 @@ export const StepperSchema = z.object({
     contentHeight: z.string().optional().describe("컨텐츠 높이 스타일"),
     nonLinear: z.boolean().optional().describe("논리니어 여부"),
     contentDependency: z.boolean().optional().describe("컨텐츠 의존성 여부"),
-    size: z.enum(["default", "small"]).optional().default("default").describe("스텝 크기"),
-    onChange: z.string().optional().describe("스텝 변경 이벤트 핸들러 함수명"),
-    clickable: z.boolean().optional().default(false).describe("스텝 클릭 가능 여부")
+    setActiveStep: z.string().optional().describe("현재 스텝(activeStep) 상태를 변경하는 setter 함수명 (문자열, 예: 'setActiveStep'). (index: number) => void 시그니처로, 보통 useState의 setter 함수명을 그대로 전달. nonLinear 모드에서 스텝 클릭 이동 시 컴포넌트가 호출함. 스텝 클릭 동작은 nonLinear + onStepClick/setActiveStep으로만 제어됨")
 });
 // Stepper 컴포넌트 함수 - 배열 반환
 export function createStepperComponent() {
@@ -37,7 +35,7 @@ export function createStepperComponent() {
       \`\`\``,
             parameters: StepperSchema,
             handler: async (args) => {
-                const { steps, activeStep = 0, orientation = "horizontal", align, isSimpleView, connector, onStepClick, contentPadding, contentHeight, nonLinear, contentDependency, size = "default", onChange, clickable } = args;
+                const { steps, activeStep = 0, orientation = "horizontal", align, isSimpleView, connector, onStepClick, contentPadding, contentHeight, nonLinear, contentDependency } = args;
                 // 태그 props만 생성
                 const propList = [
                     `steps={steps}`,
@@ -50,11 +48,10 @@ export function createStepperComponent() {
                     contentPadding ? `contentPadding=\"${contentPadding}\"` : '',
                     contentHeight ? `contentHeight=\"${contentHeight}\"` : '',
                     nonLinear ? 'nonLinear' : '',
-                    typeof contentDependency === 'boolean' ? `contentDependency={${contentDependency}}` : '',
-                    `size=\"${size}\"`,
-                    onChange ? `onChange={${onChange}}` : '',
-                    clickable ? 'clickable' : ''
+                    typeof contentDependency === 'boolean' ? `contentDependency={${contentDependency}}` : ''
                 ].filter(Boolean);
+                if (args.setActiveStep)
+                    propList.push(`setActiveStep={${args.setActiveStep}}`);
                 // StepContent 샘플
                 const stepContent = steps.map((_, idx) => `  <OpsnowCommonStepContent stepIndex={${idx}} />`).join('\n');
                 const code = `<OpsnowCommonStepper\n  ${propList.join('\n  ')}\n>\n${stepContent}\n</OpsnowCommonStepper>`;

package/build/components/opsnow-common-toast-popup.js

@@ -12,16 +12,12 @@ export const ToastPopupSchema = z.object({
             .number()
             .optional()
             .describe("토스트 메시지 노출 시간(ms)"),
-        useCancelButton: z
-            .boolean()
-            .optional()
-            .describe("취소 버튼 사용 여부"),
         useTitle: z
             .boolean()
             .optional()
             .describe("타이틀 사용 여부 - title 속성 사용 시 자동으로 true로 설정"),
         title: z.string().optional().describe("토스트 팝업 타이틀"),
-        customAction: z.string().optional().describe("토스트 팝업 내부 버튼 커스텀 코드(반드시 OpsnowCommonButton 컴포넌트 사용) - 예시: <OpsnowCommonButton onClick={handleCustomAction} /> "),
+        customActionBtn: z.string().optional().describe("토스트 팝업 내부 버튼 커스텀 코드(반드시 OpsnowCommonButton 컴포넌트 사용) - 예시: <OpsnowCommonButton onClick={handleCustomAction} /> "),
         anchorOrigin: z
             .object({
             vertical: z
@@ -56,10 +52,16 @@ export const ToastPopupSchema = z.object({
             .optional()
             .describe("토스트 애니메이션 지속 시간(ms)"),
         action: z.string().optional().describe("JSX 노드 또는 key를 받아 노드를 반환하는 함수도 지원"),
-        TransitionComponent: z.string().optional().describe("MUI 트랜지션 컴포넌트(Grow, Zoom, Fade, Slide 등)를 import해서 함수명 그대로 입력 (예: Grow, Zoom})"),
+        TransitionComponent: z.string().optional().describe("MUI 트랜지션 컴포넌트(Grow, Zoom, Fade, Slide 등)를 import해서 함수명 그대로 입력 (예: Grow, Zoom)"),
         style: z.record(z.string(), z.string()).optional().describe("토스트 팝업에 적용할 인라인 스타일 객체. 모든 CSS 속성(key)과 값(value)을 string으로 입력 (예: { 'boxShadow': '...', 'borderLeft': '...', 'backgroundColor': '...' })")
     }),
-}).describe("토스트 팝업 - 버튼 컴포넌트 반드시 동시 호출 필요");
+    open: z.boolean().optional().describe("토스트 표시 여부 (boolean) - <OpsnowCommonToastPopup> 컴포넌트를 직접 사용할 때의 flat prop"),
+    color: z.enum(["success", "error", "info", "warning", "default"]).optional().describe("토스트 타입/색상 (success | error | info | warning | default, 기본값 default) - 컴포넌트 직접 사용 시 flat prop"),
+    autoHideDuration: z.number().optional().describe("토스트 메시지 자동 숨김 시간(ms, number) - 컴포넌트 직접 사용 시 flat prop"),
+    useTitle: z.boolean().optional().describe("타이틀 사용 여부 (boolean) - title 속성 사용 시 true로 설정. 컴포넌트 직접 사용 시 flat prop"),
+    title: z.string().optional().describe("토스트 팝업 타이틀 (string) - 컴포넌트 직접 사용 시 flat prop"),
+    customActionBtn: z.string().optional().describe("토스트 내부 커스텀 액션 버튼 JSX 코드 문자열 (React.ReactNode) - 예시: <OpsnowCommonButton label='확인' onClick={handleAction} />. 컴포넌트 직접 사용 시 flat prop"),
+}).describe("토스트 팝업 - showToast(message, options) 함수 API가 표준. flat prop 컴포넌트는 하위호환 레거시 래퍼. 버튼 컴포넌트 반드시 동시 호출 필요");
 // Toast Popup 컴포넌트 함수 - 배열 반환
 export function createToastPopupComponent() {
     return [
@@ -85,23 +87,33 @@ export function createToastPopupComponent() {
                         optionProps.push(`color: '${args.options.color}'`);
                     if (args.options.autoHideDuration)
                         optionProps.push(`autoHideDuration: ${args.options.autoHideDuration}`);
-                    if (args.options.useCancelButton)
-                        optionProps.push(`useCancelButton: ${args.options.useCancelButton}`);
                     if (args.options.useTitle)
                         optionProps.push(`useTitle: ${args.options.useTitle}`);
                     if (args.options.title)
-                        optionProps.push(`title: ${args.options.title}`);
-                    if (args.options.customAction) {
-                        optionProps.push(`customAction: (${args.options.customAction})`);
+                        optionProps.push(`title: '${args.options.title}'`);
+                    if (args.options.customActionBtn) {
+                        optionProps.push(`customActionBtn: (${args.options.customActionBtn})`);
+                    }
+                    if (args.options.anchorOrigin?.vertical || args.options.anchorOrigin?.horizontal) {
+                        const anchorParts = [];
+                        if (args.options.anchorOrigin?.vertical)
+                            anchorParts.push(`vertical: '${args.options.anchorOrigin.vertical}'`);
+                        if (args.options.anchorOrigin?.horizontal)
+                            anchorParts.push(`horizontal: '${args.options.anchorOrigin.horizontal}'`);
+                        optionProps.push(`anchorOrigin: { ${anchorParts.join(', ')} }`);
                     }
-                    if (args.options.anchorOrigin?.vertical || args.options.anchorOrigin?.horizontal)
-                        optionProps.push(`anchorOrigin:  ${args.options.anchorOrigin?.vertical ? `vertical: ${args.options.anchorOrigin?.vertical}` : ""}, ${args.options.anchorOrigin?.horizontal ? `horizontal: ${args.options.anchorOrigin?.horizontal}` : ""}`);
                     if (args.options.preventDuplicate)
                         optionProps.push(`preventDuplicate: ${args.options.preventDuplicate}`);
                     if (args.options.persist)
                         optionProps.push(`persist: ${args.options.persist}`);
-                    if (args.options.transitionDuration?.enter || args.options.transitionDuration?.exit)
-                        optionProps.push(`transitionDuration: ${args.options.transitionDuration?.enter ? `enter: ${args.options.transitionDuration?.enter}` : ""}, ${args.options.transitionDuration?.exit ? `exit: ${args.options.transitionDuration?.exit}` : ""}`);
+                    if (args.options.transitionDuration?.enter || args.options.transitionDuration?.exit) {
+                        const durationParts = [];
+                        if (args.options.transitionDuration?.enter)
+                            durationParts.push(`enter: ${args.options.transitionDuration.enter}`);
+                        if (args.options.transitionDuration?.exit)
+                            durationParts.push(`exit: ${args.options.transitionDuration.exit}`);
+                        optionProps.push(`transitionDuration: { ${durationParts.join(', ')} }`);
+                    }
                     if (args.options.action)
                         optionProps.push(`action: ${args.options.action}`);
                     if (args.options.TransitionComponent)
@@ -118,7 +130,7 @@ export function createToastPopupComponent() {
                 }
                 code += `
         const (버튼 컴포넌트 onClick 함수명) = () => {
-          showToast(${args.message ? args.message + ", " : ""}${toastCode});
+          showToast(${args.message ? `'${args.message}', ` : ""}${toastCode});
         }
         `;
                 return {

package/build/components/opsnow-common-tooltip.js

@@ -38,8 +38,6 @@ export const TooltipSchema = z.object({
             .describe("아이콘 이름 - iconProps.useIcon이 true일 경우 필수"),
         useIcon: z.boolean().optional().describe("아이콘 사용 여부 - iconName이 있을 경우 iconProps.useIcon은 true여야 함, useMuiIcon 과 동시에 true안됨"),
         useMuiIcon: z.boolean().optional().describe("MUI 아이콘 사용 여부 - useIcon 과 동시에 true 안됨"),
-        alignItems: z.string().optional().describe("아이콘 정렬 방식"),
-        justifyContent: z.string().optional().describe("아이콘 정렬 방식"),
         label: z.string().describe("툴팁 라벨"),
         colorProps: z
             .object({
@@ -130,10 +128,6 @@ export function createTooltipComponent() {
                         props.push(`useIcon={${args.iconTooltipProps.useIcon}}`);
                     if (args.iconTooltipProps.useMuiIcon)
                         props.push(`useMuiIcon={${args.iconTooltipProps.useMuiIcon}}`);
-                    if (args.iconTooltipProps.alignItems)
-                        props.push(`alignItems="${args.iconTooltipProps.alignItems}"`);
-                    if (args.iconTooltipProps.justifyContent)
-                        props.push(`justifyContent="${args.iconTooltipProps.justifyContent}"`);
                     if (args.iconTooltipProps.colorProps) {
                         if (args.iconTooltipProps.colorProps.commonColor)
                             props.push(`commonColor={'${args.iconTooltipProps.colorProps.commonColor}'}`);

package/build/components/opsnow-common-typography.js

@@ -42,6 +42,8 @@ export const TypographySchema = z.object({
     component: z.string().optional().describe("커스텀 태그(component) 지정"),
     textDecoration: z.string().optional().describe("텍스트 데코레이션(underline 등)"),
     textTransform: z.string().optional().describe("텍스트 변환(uppercase 등)"),
+    fontWeight: z.enum(["300", "400", "500", "600"]).optional().describe("폰트 굵기 (숫자값 300 | 400 | 500 | 600 중 하나로 지정, 예: 600)"),
+    fontSize: z.number().optional().describe("폰트 크기 (숫자, ⚠️ rem 단위로 해석됨 — 예: 1.4 → 1.4rem. px 아님! 14를 넣으면 14rem이 되어 매우 커짐). variant 기본 크기를 덮어씀"),
 });
 export function createTypographyComponent() {
     return [
@@ -77,6 +79,10 @@ export function createTypographyComponent() {
                     props.push(`textDecoration="${args.textDecoration}"`);
                 if (args.textTransform)
                     props.push(`textTransform="${args.textTransform}"`);
+                if (args.fontWeight)
+                    props.push(`fontWeight={${args.fontWeight}}`);
+                if (args.fontSize !== undefined)
+                    props.push(`fontSize={${args.fontSize}}`);
                 const propsString = props.join(' ');
                 const code = `<OpsnowCommonTypography ${propsString}>${args.text}</OpsnowCommonTypography>`;
                 return {

package/build/index.js

@@ -1,28 +1,24 @@
 #!/usr/bin/env node
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
-// 컴포넌트들 import
-import { createCalendarComponent } from "./components/opsnow-common-calendar.js";
-import { createChartComponent } from "./components/opsnow-common-chart.js";
-import { createDataGridComponent } from "./components/opsnow-common-grid.js";
-import { createFormsComponent } from "./components/opsnow-common-forms.js";
-import { createDataStatusComponent } from "./components/opsnow-common-data-status.js";
-import { createProgressComponent } from "./components/opsnow-common-progress.js";
-import { createNotificationComponent } from "./components/opsnow-common-notification.js";
-import { createPaginationComponent } from "./components/opsnow-common-pagination.js";
-import { createIconsComponent } from "./components/opsnow-common-icons.js";
-import { createTabComponent } from "./components/opsnow-common-tab.js";
-import { createGridLayoutComponent } from "./components/opsnow-common-layout.js";
-import { createTypographyComponent } from "./components/opsnow-common-typography.js";
-import { createTooltipComponent } from "./components/opsnow-common-tooltip.js";
-import { createCoachMarkComponent } from "./components/opsnow-common-coach-mark.js";
-import { createSelectComponent } from "./components/opsnow-common-select.js";
-import { createPopupComponent } from "./components/opsnow-common-popup.js";
-import { createStepperComponent } from "./components/opsnow-common-stepper.js";
-import { createToastPopupComponent } from "./components/opsnow-common-toast-popup.js";
-import { createFileUploaderComponent } from "./components/opsnow-common-file-upload.js";
+// 컴포넌트 툴 수집 (팩토리 목록은 all-component-tools.ts에서 관리)
+import { collectComponentTools } from "./components/all-component-tools.js";
 // 예제 컴포넌트
-import { createCommonExamplesComponent } from "./components/opsnow-common-examples.js";
+import { createCommonExamplesComponent, EXAMPLES_MAP } from "./components/opsnow-common-examples.js";
+// 툴 통합: createXxx 46개 → listComponents + getComponentSpec
+import { createSpecTools } from "./components/opsnow-common-spec-tools.js";
+// props 검증 툴 (스키마 대조 - createXxx 제거 후 props 지어내기 방지)
+import { createValidatePropsTool } from "./components/opsnow-common-validate-props.js";
+// OPSNOW_MCP_LEGACY_TOOLS=1 이면 기존처럼 createXxx 46개를 개별 등록 (A/B 테스트/롤백용)
+const LEGACY_MODE = process.env.OPSNOW_MCP_LEGACY_TOOLS === "1";
+const toolFlowInstructions = LEGACY_MODE ? "" : `
+**컴포넌트 구현 흐름 (필수)**
+
+1. 어떤 컴포넌트를 쓸지 불확실하면: listComponents 호출 (카탈로그)
+2. 코드 작성 전: getComponentSpec({ component: "이름" }) 으로 props/import 확인
+3. 실제 패턴 확인: getUIExamples({ uiType: "이름" })
+4. 코드 작성/수정 후: validateProps({ code: "작성한 코드 전체" }) 로 props 검증
+`;
 // MCP 서버 생성
 const server = new McpServer({
     name: "opsnow-mcp-common-ui-server",
@@ -32,6 +28,7 @@ const server = new McpServer({
 
 IMPORTANT: All components require React 18.x or higher environment.
 Always include required import statements and i18n configuration when needed.
+${toolFlowInstructions}
 
 **CRITICAL: API 호출 규칙**
 
@@ -89,43 +86,28 @@ Before implementing OpsnowCommonDataGrid, you MUST use getUIExamples tool with '
 
 WARNING: Violating these rules will cause the UI to malfunction.`
 });
-// 컴포넌트들 등록
-const componentFactories = [
-    createCalendarComponent,
-    createChartComponent,
-    createDataGridComponent,
-    createFormsComponent,
-    createIconsComponent,
-    createDataStatusComponent,
-    createProgressComponent,
-    createNotificationComponent,
-    createPaginationComponent,
-    createTabComponent,
-    createGridLayoutComponent,
-    createTypographyComponent,
-    createTooltipComponent,
-    createCoachMarkComponent,
-    createSelectComponent,
-    createPopupComponent,
-    createStepperComponent,
-    createToastPopupComponent,
-    createFileUploaderComponent,
-    // 예제 컴포넌트
-    createCommonExamplesComponent,
-];
+// createXxx 툴 정의 수집 (등록 여부는 모드에 따라 결정)
+const componentTools = collectComponentTools();
+// getUIExamples는 양쪽 모드 공통 등록
+const exampleTools = createCommonExamplesComponent();
+// props 검증 툴 (양쪽 모드 공통 - 스키마는 createXxx 정의에서 재사용)
+const validateTools = createValidatePropsTool(componentTools);
+// 기본: 조회형 2개(listComponents, getComponentSpec) + getUIExamples + validateProps = 4개
+// LEGACY: createXxx 45개 + getUIExamples + validateProps = 47개
+const toolsToRegister = LEGACY_MODE
+    ? [...componentTools, ...exampleTools, ...validateTools]
+    : [...createSpecTools(componentTools, Object.keys(EXAMPLES_MAP)), ...exampleTools, ...validateTools];
 const allTools = [];
-componentFactories.forEach(componentFactory => {
-    const tools = componentFactory();
-    tools.forEach(tool => {
-        allTools.push({ name: tool.name, description: tool.description });
-        server.tool(tool.name, tool.description, tool.parameters.shape, tool.handler);
-    });
+toolsToRegister.forEach(tool => {
+    allTools.push({ name: tool.name, description: tool.description });
+    server.tool(tool.name, tool.description, tool.parameters.shape, tool.handler);
 });
 // 서버 시작
 async function main() {
     const transport = new StdioServerTransport();
     await server.connect(transport);
     console.error("OpsNow MCP Common UI Server running on stdio");
+    console.error(`Mode: ${LEGACY_MODE ? "legacy (createXxx 개별 등록)" : "consolidated (조회형 툴)"}`);
     console.error(`Registered ${allTools.length} tools:`);
     allTools.forEach(tool => {
         console.error(`  - ${tool.name}`);

package/build/validate-props-cli.js

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+/**
+ * validateProps CLI - Claude Code hook / CI용 props 검증
+ *
+ * 사용법:
+ * 1) Claude Code PostToolUse 훅 (자동): stdin으로 훅 페이로드 JSON을 받음
+ *    소비 프로젝트 .claude/settings.json:
+ *    {
+ *      "hooks": {
+ *        "PostToolUse": [
+ *          { "matcher": "Edit|Write",
+ *            "hooks": [{ "type": "command",
+ *              "command": "node <이 저장소 경로>/build/validate-props-cli.js" }] }
+ *        ]
+ *      }
+ *    }
+ *    → 모델이 .jsx/.tsx 파일을 수정할 때마다 자동 검증되고,
+ *      의심 건 발견 시 exit 2 + stderr 리포트가 모델에게 피드백된다.
+ *
+ * 2) 수동/CI: node build/validate-props-cli.js <파일...>
+ *    의심 건 있으면 exit 1
+ */
+import * as fs from "fs";
+import { collectComponentTools } from "./components/all-component-tools.js";
+import { validatePropsInCode } from "./components/opsnow-common-validate-props.js";
+const VALID_EXT = /\.(jsx|tsx|js|ts)$/;
+function validateFile(filePath) {
+    if (!VALID_EXT.test(filePath) || !fs.existsSync(filePath))
+        return null;
+    const code = fs.readFileSync(filePath, "utf-8");
+    if (!code.includes("OpsnowCommon"))
+        return null;
+    const result = validatePropsInCode(code, collectComponentTools());
+    if (result.checkedComponents === 0)
+        return null;
+    return { suspects: result.suspectCount, text: result.text };
+}
+function main() {
+    const args = process.argv.slice(2);
+    // 수동/CI 모드: 파일 경로 인자
+    if (args.length > 0) {
+        let total = 0;
+        for (const file of args) {
+            const r = validateFile(file);
+            if (!r)
+                continue;
+            console.log(`== ${file}\n${r.text}\n`);
+            total += r.suspects;
+        }
+        process.exit(total > 0 ? 1 : 0);
+    }
+    // 훅 모드: stdin으로 Claude Code PostToolUse 페이로드
+    let payload;
+    try {
+        payload = JSON.parse(fs.readFileSync(0, "utf-8"));
+    }
+    catch {
+        process.exit(0); // 페이로드 없음/파싱 실패 → 조용히 통과
+    }
+    const filePath = payload?.tool_input?.file_path;
+    if (!filePath)
+        process.exit(0);
+    const r = validateFile(filePath);
+    if (!r || r.suspects === 0)
+        process.exit(0);
+    // exit 2 + stderr → Claude Code가 모델에게 자동 피드백
+    console.error(`[OpsNow props 검증] ${filePath}\n${r.text}\n` +
+        `위 의심 prop들을 확인하고 수정하세요. (MCP getComponentSpec 툴로 스키마 확인 가능)`);
+    process.exit(2);
+}
+main();

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@opsnow-mcp/opsnow-mcp-common-ui-server",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "type": "module",
   "main": "index.js",
   "bin": {
-    "opsnow-mcp-common-ui": "./build/index.js"
+    "opsnow-mcp-common-ui": "./build/index.js",
+    "opsnow-ui-validate": "./build/validate-props-cli.js"
   },
   "module": "src/index.ts",
   "scripts": {
@@ -39,6 +40,7 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.12.1",
+    "@opsnow-common/claude-skill-atlassian-skills": "^1.0.65",
     "zod": "^3.24.3"
   }
 }