@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.12 → 1.0.16

package/README.md

@@ -209,3 +209,108 @@ MCP 플랫폼의 설정 파일(예: `mcp.config.json` 또는 유사 파일)에
 
 ### 3. MCP 플랫폼에서 서버 인식 확인
 MCP 플랫폼을 재시작하거나 서버 목록을 새로고침하면, `opsnow-mcp-common-ui-server`가 정상적으로 등록되어야 합니다.
+
+---
+
+## Claude Code Skills 생성
+
+MCP 서버를 Claude Code에서 사용할 수 있는 **정적 Skills**로 변환할 수 있습니다.
+
+### MCP vs Skills 비교
+
+| 구분 | MCP Server | Claude Code Skills |
+|------|------------|-------------------|
+| 실행 방식 | 런타임 (Node.js 프로세스) | 정적 문서 (마크다운) |
+| 호출 방식 | Tool 호출 | `/skill-name` 슬래시 커맨드 |
+| 배포 | npm 패키지 | Plugin Marketplace 또는 로컬 |
+| 오프라인 | ❌ | ✅ |
+
+### Skills 빌드 명령어
+
+```bash
+# Skills 빌드 (기존 파일 유지)
+npm run build:skill
+
+# Skills 클린 빌드 (기존 파일 삭제 후 새로 생성)
+npm run build:skill:clean
+```
+
+### 빌드 출력물
+
+```
+skills/plugins/opsnow-common-ui-skill/
+├── .claude-plugin/
+│   └── plugin.json          # 플러그인 매니페스트
+└── skills/opsnow-common-ui/
+    ├── SKILL.md              # 메인 스킬 정의 (컴포넌트 카탈로그)
+    ├── references/           # Props 레퍼런스 (35개)
+    │   ├── button.md
+    │   ├── datagrid.md
+    │   └── ...
+    ├── examples/             # 상세 예제 (40개 파일, 463개 예제)
+    │   ├── button.md
+    │   ├── datagrid.md
+    │   └── ...
+    └── components/           # Zod 스키마 복사본 (18개)
+        ├── opsnow-common-button.ts
+        └── ...
+```
+
+### 문서 구조 (Progressive Disclosure)
+
+| 깊이 | 경로 | 용도 | 언제 참조? |
+|------|------|------|-----------|
+| 1 | `SKILL.md` | 컴포넌트 카탈로그, 개요 | 뭐가 있는지 파악할 때 |
+| 2 | `references/*.md` | Props 테이블, 기본 사용법 | 컴포넌트 처음 사용할 때 |
+| 3 | `examples/*.md` | 케이스별 상세 예제 | 특정 패턴 구현할 때 |
+| 4 | `components/*.ts` | Zod 스키마, 타입 정의 | 타입/옵션 상세 확인할 때 |
+
+### 로컬 테스트
+
+생성된 Skills를 로컬에서 테스트하려면:
+
+```bash
+# 프로젝트 루트에서
+cd skills/plugins/opsnow-common-ui-skill
+
+# Claude Code에서 직접 테스트
+claude
+
+# 또는 skills 폴더를 Claude Code 설정에 추가
+```
+
+### 새 컴포넌트 추가 시 수정 필요 사항
+
+`scripts/build-skill.ts`에서 다음 5개 매핑을 업데이트해야 합니다:
+
+1. **`CATEGORIES[]`** - 카탈로그 분류 (차트, 폼, 레이아웃 등)
+2. **`COMPONENT_NAME_MAP{}`** - React 컴포넌트명 매핑
+3. **`COMPONENT_PURPOSE{}`** - 용도 설명
+4. **`SCHEMA_TO_COMPONENT{}`** - Zod 스키마 → 컴포넌트 매핑
+5. **`INTERNAL_SCHEMAS`** - 제외할 내부 스키마
+
+### MCP 소스 작성 규칙
+
+Skills가 올바르게 생성되려면 MCP 소스 파일이 다음 규칙을 따라야 합니다:
+
+**Zod 스키마** (`src/components/*.ts`):
+```typescript
+// .describe()로 Props 설명 필수
+export const ButtonPropsSchema = z.object({
+  label: z.string().describe('버튼 라벨'),
+  size: z.enum(['large', 'medium', 'small']).describe('버튼 크기'),
+}).describe('버튼 컴포넌트');
+```
+
+**예제 파일** (`src/components/examples/*-examples-data.ts`):
+```typescript
+// 파일명: opsnow-common-{component}-examples-data.ts
+// Export 명명: {PascalCase}Examples
+export const ButtonExamples: Example[] = [
+  {
+    title: '기본 버튼',
+    props: { label: '버튼', size: 'medium' },
+    code: `<OpsnowCommonButton label="버튼" size="medium" />`,
+  },
+];
+```

package/build/components/examples/opsnow-common-forms-examples-data.js

@@ -1346,6 +1346,208 @@ export const LinkExamples = [
         description: 'Focusable Inherit Link 예제입니다.'
     }
 ];
+export const TreeViewExamples = [
+    {
+        title: 'basic-treeview-with-mui-icons',
+        code: `<OpsnowCommonTreeView
+  data={[
+    {
+      id: 'c1',
+      label: 'Settings',
+      muiIconName: 'settings',
+      children: [
+        {
+          id: 'c11',
+          label: 'Profile',
+          muiIconName: 'person',
+        },
+        {
+          id: 'c12',
+          label: 'Security',
+          muiIconName: 'lock',
+        },
+        {
+          id: 'c13',
+          label: 'Notifications',
+          muiIconName: 'notifications',
+        },
+      ],
+    },
+    {
+      id: 'c2',
+      label: 'Help',
+      muiIconName: 'help',
+      children: [
+        {
+          id: 'c21',
+          label: 'Documentation',
+          muiIconName: 'menu_book',
+        },
+        {
+          id: 'c22',
+          label: 'Support',
+          muiIconName: 'support_agent',
+        },
+      ],
+    },
+  ]}
+  onNodeClick={handleNodeClick}
+  selectedNodeId={selectedNode?.id}
+/>`,
+        description: 'Material-UI 아이콘을 사용한 기본 TreeView 예제입니다.'
+    },
+    {
+        title: 'treeview-no-search-no-total',
+        code: `<OpsnowCommonTreeView
+  data={treeData}
+  searchable={false}
+  showTotal={false}
+  defaultExpandAll={true}
+  onNodeClick={handleNodeClick}
+  selectedNodeId={selectedNode?.id}
+/>`,
+        description: '검색 기능과 Total 라벨을 숨긴 TreeView 예제입니다.'
+    },
+    {
+        title: 'treeview-with-total-label',
+        code: `<OpsnowCommonTreeView
+  data={treeData}
+  totalLabel="All Items"
+  totalIconName="FolderOpen"
+  onTotalClick={handleTotalClick}
+  onNodeClick={handleNodeClick}
+  selectedNodeId={selectedNode?.id}
+/>`,
+        description: 'Total 라벨과 아이콘이 있는 TreeView 예제입니다.'
+    },
+    {
+        title: 'treeview-with-render-content',
+        code: `<OpsnowCommonTreeView
+  data={treeData}
+  renderRightContent={(node) => (
+    <Chip label={node.count || 0} size="small" />
+  )}
+  onNodeClick={handleNodeClick}
+  selectedNodeId={selectedNode?.id}
+/>`,
+        description: '각 노드 우측에 커스텀 콘텐츠를 렌더링하는 TreeView 예제입니다.'
+    },
+    {
+        title: 'treeview-expanded-by-default',
+        code: `<OpsnowCommonTreeView
+  data={treeData}
+  defaultExpandAll={true}
+  searchable={true}
+  onNodeClick={handleNodeClick}
+  selectedNodeId={selectedNode?.id}
+/>`,
+        description: '기본적으로 모든 노드가 확장된 TreeView 예제입니다.'
+    },
+    {
+        title: 'treeview-cloud-providers',
+        code: `<OpsnowCommonTreeView
+  data={[
+    {
+      id: 'aws',
+      label: 'AWS',
+      muiIconName: 'cloud',
+      children: [
+        { id: 'ec2', label: 'EC2', muiIconName: 'storage' },
+        { id: 's3', label: 'S3', muiIconName: 'folder' },
+        { id: 'rds', label: 'RDS', muiIconName: 'database' },
+      ],
+    },
+    {
+      id: 'azure',
+      label: 'Azure',
+      muiIconName: 'cloud',
+      children: [
+        { id: 'vm', label: 'Virtual Machines', muiIconName: 'computer' },
+        { id: 'blob', label: 'Blob Storage', muiIconName: 'folder' },
+      ],
+    },
+    {
+      id: 'gcp',
+      label: 'GCP',
+      muiIconName: 'cloud',
+      children: [
+        { id: 'compute', label: 'Compute Engine', muiIconName: 'dns' },
+        { id: 'gcs', label: 'Cloud Storage', muiIconName: 'cloud_upload' },
+      ],
+    },
+  ]}
+  totalLabel="All Cloud Providers"
+  searchable={true}
+  onNodeClick={handleNodeClick}
+  selectedNodeId={selectedNode?.id}
+/>`,
+        description: '클라우드 프로바이더 트리 구조 예제입니다.'
+    },
+    {
+        title: 'treeview-with-checkbox-multiselect',
+        code: `<OpsnowCommonTreeView
+  data={sampleTreeData}
+  checkboxSelection={true}
+  multiSelect={true}
+  onCheckedItemsChange={handleMultiCheckedItemsChange}
+  defaultCheckedItems={multiCheckedItems}
+  showTotal={true}
+  totalLabel="Total"
+  totalIconName="Building"
+  searchable={false}
+  defaultExpandAll={true}
+/>`,
+        description: '체크박스와 다중 선택 기능이 있는 TreeView 예제입니다.'
+    },
+    {
+        title: 'treeview-checkbox-with-custom-content',
+        code: `<OpsnowCommonTreeView
+  data={sampleTreeData}
+  checkboxSelection={true}
+  multiSelect={true}
+  onCheckedItemsChange={handleMultiCheckedItemsChange}
+  defaultCheckedItems={multiCheckedItems}
+  showTotal={true}
+  totalLabel="Total"
+  totalIconName="Building"
+  onTotalClick={handleTotalClick}
+  renderTotalRightContent={() => (
+    <OpsnowCommonChip
+      label={\`\${String(sampleTreeData.length)} BU\`}
+      size="small"
+      sx={{
+        backgroundColor: 'white',
+        border: '1px solid',
+      }}
+    />
+  )}
+  searchable={false}
+  defaultExpandAll={true}
+  renderRightContent={(node) => (
+    <OpsnowCommonChip
+      label={
+        node.children && node.children.length > 0
+          ? \`\${String(node.children.length)} Teams\`
+          : String(node.data?.memberCount ?? '0')
+      }
+      size="small"
+      sx={{
+        backgroundColor: 'white',
+        border: '1px solid',
+      }}
+    />
+  )}
+/>`,
+        description: '체크박스, 커스텀 콘텐츠, Chip이 함께 사용된 TreeView 예제입니다.'
+    }
+];
+export const InsightCardExamples = [
+    {
+        title: 'basic-insight-card-with-loading',
+        code: `<Box sx={{ mt: 2 }}><OpsnowCommonInsightCard loading={loading} loadingStage={loadingStage} insightText={insightText} title="Opsnow Insight AI" subtitle="AI-powered cost analysis and recommendations" /></Box>`,
+        description: '로딩 상태와 AI insight 텍스트를 표시하는 InsightCard 예제입니다.'
+    }
+];
 export const ToggleButtonExamples = [
     {
         title: 'large-toggle-group',

package/build/components/examples/opsnow-common-layout-examples-data.js

@@ -57,4 +57,16 @@ export const GridLayoutExamples = [
 </Grid>
 `,
     },
+    {
+        title: 'Tile with Checkbox UI',
+        description: 'Tile 내부에 체크박스와 텍스트가 포함된 2열 레이아웃 예제입니다.',
+        code: `<Grid container spacing={3} sx={{ marginTop: '20px' }}><Grid item xs={12} md={6} sx={{ display: 'flex' }}><OpsnowCommonTile sx={{ width: '100%' }}><OpsnowCommonTile.Content><Stack direction="row" alignItems="flex-start" spacing={2}><OpsnowCommonCheckbox name="organizationScope" checked={checkboxStates.organizationScope} onChange={handleCheckboxChange} color="primary" /><Stack spacing={1}><OpsnowCommonTypography variant="body1" fontWeight={600}>Use Organization Scope(Cost Allocation)</OpsnowCommonTypography><OpsnowCommonTypography variant="body2" color="textSecondary">The same scope defined in Organization Settings is used as the baseline for Budget and KPI tracking.</OpsnowCommonTypography></Stack></Stack></OpsnowCommonTile.Content></OpsnowCommonTile></Grid><Grid item xs={12} md={6} sx={{ display: 'flex' }}><OpsnowCommonTile sx={{ width: '100%' }}><OpsnowCommonTile.Content><Stack direction="row" alignItems="flex-start" spacing={2}><OpsnowCommonCheckbox name="customizeScope" checked={checkboxStates.customizeScope} onChange={handleCheckboxChange} color="primary" /><Stack spacing={1}><OpsnowCommonTypography variant="body1" fontWeight={600}>Customize Scope</OpsnowCommonTypography><OpsnowCommonTypography variant="body2" color="textSecondary">Apply only to selected dimensions, such as specific services (e.g., EC2)</OpsnowCommonTypography></Stack></Stack></OpsnowCommonTile.Content></OpsnowCommonTile></Grid></Grid>`,
+    },
+];
+export const MegaFilterExamples = [
+    {
+        title: 'basic-megafilter-with-vendors-daterange',
+        description: '벤더 선택, 날짜 범위, 필터 기능이 포함된 MegaFilter 예제입니다.',
+        code: `<OpsnowCommonMegaFilter filters={filters} vendors={vendors} selectedVendor={selectedVendor} onVendorChange={handleVendorChange} onFilterChange={handleFilterChange} selectedDateRange={selectedDateRange} onDateRangeChange={handleDateRangeChange} locale="ko" title="필터" clearAllText="전체 초기화" applyText="적용" cancelText="취소" />`,
+    },
 ];

package/build/components/examples/opsnow-common-tab-examples-data.js

@@ -79,4 +79,9 @@ export const TabExamples = [
         code: `<OpsnowCommonTab value = {tabIndex} items={[{ label: '탭1', iconName: 'LogoAws', content: <div>탭1 내용</div> }, { label: '탭2', iconName: 'LogoAzure', content: <div>탭2 내용</div>}]} />`,
         description: "탭 선택이 tabIndex라는 state 변수에 따라 변경되는 상태로 탭이 2개이고 각 탭에 아이콘과 내용이 포함된 예제입니다.",
     },
+    {
+        title: "2-depth-button-tab-ui",
+        code: `<OpsnowCommonTab value={activeTab} onChange={handleTabChange} items={[{ label: 'Overview', content: (<div style={{ marginTop: '20px' }}><p>Overview content</p></div>) }, { label: 'Explorer', content: (<div style={{ marginTop: '20px' }}>{buttons.map((button) => (<OpsnowCommonButton key={button.value} label={button.label} onClick={() => handleButtonClick(button.value)} variant={selectedButton === button.value ? 'contained' : 'outlined'} style={{ marginRight: '10px', marginBottom: '10px' }} />))}{selectedButton && (<div style={{ marginTop: '20px' }}><p>Selected: {selectedButton}</p></div>)}</div>) }]} />`,
+        description: "2개의 탭(Overview, Explorer)이 있고, Explorer 탭에 동적 버튼 그룹이 포함된 2-Depth Button Tab UI 예제입니다.",
+    },
 ];

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

@@ -1,5 +1,5 @@
 // Toast Popup 컴포넌트 예제 데이터
-export const opsnowCommonToastPopupExamples = [
+export const ToastPopupExamples = [
     {
         title: "message-info-duration-bottom-left",
         code: `

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

@@ -1,4 +1,4 @@
-import { ButtonExamples, BadgeExamples, TextareaExamples, SwitchExamples, ChipExamples, TextFieldExamples, AvatarExamples, CheckboxExamples, RadioGroupExamples, CollapseExamples, SliderExamples, LinkExamples, ToggleButtonExamples } from "./examples/opsnow-common-forms-examples-data.js";
+import { ButtonExamples, BadgeExamples, TextareaExamples, SwitchExamples, ChipExamples, TextFieldExamples, AvatarExamples, CheckboxExamples, RadioGroupExamples, CollapseExamples, SliderExamples, LinkExamples, TreeViewExamples, InsightCardExamples, ToggleButtonExamples } from "./examples/opsnow-common-forms-examples-data.js";
 import { IconExamples, MuiIconExamples } from "./examples/opsnow-common-icons-examples-data.js";
 import { CalendarExamples } from "./examples/opsnow-common-calendar-examples-data.js";
 import { GaugeChartExamples, PieChartExamples, BarChartExamples, LineChartExamples, StackChartExamples, XyMultiChartExamples } from "./examples/opsnow-common-chart-examples-data.js";
@@ -14,7 +14,7 @@ import { PaginationExamples } from "./examples/opsnow-common-pagination-examples
 import { DataStatusExamples } from "./examples/opsnow-common-data-status-examples-data.js";
 import { ProgressExamples } from "./examples/opsnow-common-progress-examples-data.js";
 import { TabExamples } from "./examples/opsnow-common-tab-examples-data.js";
-import { GridLayoutExamples } from "./examples/opsnow-common-layout-examples-data.js";
+import { GridLayoutExamples, MegaFilterExamples } from "./examples/opsnow-common-layout-examples-data.js";
 import { TypographyExamples } from "./examples/opsnow-common-typography-examples-data.js";
 import { AutocompleteExamples } from "./examples/opsnow-common-select-examples-data.js";
 import { z } from "zod";
@@ -31,6 +31,8 @@ const EXAMPLES_MAP = {
     Collapse: CollapseExamples,
     Slider: SliderExamples,
     Link: LinkExamples,
+    TreeView: TreeViewExamples,
+    InsightCard: InsightCardExamples,
     ToggleButtonGroup: ToggleButtonExamples,
     Icon: IconExamples,
     MuiIcon: MuiIconExamples,
@@ -54,6 +56,7 @@ const EXAMPLES_MAP = {
     Progress: ProgressExamples,
     Tab: TabExamples,
     GridLayout: GridLayoutExamples,
+    MegaFilter: MegaFilterExamples,
     Typography: TypographyExamples,
     Autocomplete: AutocompleteExamples,
 };

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

@@ -204,6 +204,55 @@ export const ToggleButtonSchema = z.object({
         disabled: z.boolean().optional().describe('비활성화 여부'),
     })).describe('토글 버튼 목록'),
 });
+// TreeView 컴포넌트 관련 스키마 정의
+export const TreeViewSchema = z.object({
+    data: z.string().describe(`트리 데이터 배열 변수명 (예: sampleTreeData)
+
+트리 데이터 구조 예시:
+- id: 노드 고유 ID
+- label: 노드 라벨 텍스트
+- muiIconName: Material-UI 아이콘 이름 (예: 'settings', 'person', 'lock' 등)
+- children: 자식 노드 배열 (선택사항)
+- data: 노드에 추가 데이터 (선택사항, 예: { memberCount: 5 })
+
+예시 데이터:
+[
+  {
+    id: 'c1',
+    label: 'Settings',
+    muiIconName: 'settings',
+    children: [
+      { id: 'c11', label: 'Profile', muiIconName: 'person' },
+      { id: 'c12', label: 'Security', muiIconName: 'lock' }
+    ]
+  }
+]`),
+    totalLabel: z.string().optional().describe("최상단 Total 라벨 텍스트"),
+    totalIconName: z.enum(Object.keys(IconNamesMap)).optional().describe(generateIconDescription({ format: 'nested' })),
+    showTotal: z.boolean().optional().describe("Total 라벨 표시 여부 (기본값: true)"),
+    searchable: z.boolean().optional().describe("검색 기능 활성화 여부 (기본값: true)"),
+    defaultExpandAll: z.boolean().optional().describe("기본 전체 확장 여부 (기본값: false)"),
+    checkboxSelection: z.boolean().optional().describe("체크박스 선택 모드 활성화"),
+    multiSelect: z.boolean().optional().describe("다중 선택 허용 여부"),
+    onCheckedItemsChange: z.string().optional().describe("체크된 항목 변경 이벤트 핸들러 (예: handleMultiCheckedItemsChange)"),
+    defaultCheckedItems: z.string().optional().describe("기본 체크된 항목 배열 상태 변수명 (예: multiCheckedItems)"),
+    onTotalClick: z.string().optional().describe("Total 클릭 이벤트 핸들러 함수명 (예: handleTotalClick)"),
+    renderTotalRightContent: z.string().optional().describe("Total 우측에 표시할 JSX 코드 문자열 (함수 형태)"),
+    renderRightContent: z.string().optional().describe("각 노드 우측에 표시할 JSX 코드 문자열 (함수 형태, node 파라미터 사용)"),
+    onNodeClick: z.string().optional().describe("노드 클릭 이벤트 핸들러 함수명 (예: handleNodeClick)"),
+    selectedNodeId: z.string().optional().describe("선택된 노드 ID 상태 변수명 (예: selectedNode?.id)"),
+});
+// InsightCard 컴포넌트 관련 스키마 정의
+export const InsightCardSchema = z.object({
+    loading: z.boolean().optional().describe("로딩 상태 여부 (기본값: false)"),
+    loadingStage: z.enum(["1", "2", "3"]).optional().describe("현재 로딩 단계 (1, 2, 3 중 하나, 기본값: 1)"),
+    loadingStagesMessages: z.string().optional().describe("커스텀 로딩 메시지 배열 변수명 (예: loadingMessages)"),
+    insightText: z.string().optional().describe("AI insight 텍스트 내용"),
+    title: z.string().optional().describe("타일 제목 (기본값: 'Opsnow Insight AI')"),
+    subtitle: z.string().optional().describe("타일 부제목 (기본값: 'AI-powered analysis and recommendations')"),
+    onDownload: z.string().optional().describe("커스텀 다운로드 콜백 함수명 (예: handleDownload)"),
+    sx: z.string().optional().describe("MUI sx 스타일 객체(JSX/문자열)"),
+});
 // Forms 컴포넌트 함수 - 배열 반환
 export function createFormsComponent() {
     return [
@@ -749,7 +798,7 @@ export function createFormsComponent() {
         {
             name: "createToggleButton",
             description: `ToggleButtonGroup 컴포넌트 - 다양한 스타일, 아이콘, 단일/다중 선택 지원
-      
+
       - 버튼별 아이콘, 라벨, 아이콘 위치, 아이콘만 표시 등 다양한 옵션 지원
       - exclusive: true로 단일 선택, false 또는 미설정 시 다중 선택
       - theme, disabled 등 다양한 스타일 속성 지원
@@ -807,6 +856,104 @@ export function createFormsComponent() {
                     ]
                 };
             }
+        },
+        {
+            name: "createTreeView",
+            description: `TreeView 컴포넌트 - 계층 구조 데이터를 트리 형태로 표시
+
+      - data: 트리 데이터 배열 변수
+      - totalLabel, totalIconName: 최상단 Total 표시 옵션
+      - renderTotalRightContent, renderRightContent: 각 노드의 우측에 커스텀 콘텐츠 렌더링
+      - onTotalClick, onNodeClick: 클릭 이벤트 핸들러
+      - selectedNodeId: 선택된 노드 ID
+
+      **import:**
+      \`\`\`javascript
+      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonTreeView } = useCommonComponents();
+      \`\`\``,
+            parameters: TreeViewSchema,
+            handler: async (args) => {
+                const props = [];
+                if (args.data)
+                    props.push(`data={${args.data}}`);
+                if (args.totalLabel)
+                    props.push(`totalLabel=\"${args.totalLabel}\"`);
+                if (args.totalIconName)
+                    props.push(`totalIconName=\"${args.totalIconName}\"`);
+                if (args.showTotal !== undefined)
+                    props.push(`showTotal={${args.showTotal}}`);
+                if (args.searchable !== undefined)
+                    props.push(`searchable={${args.searchable}}`);
+                if (args.defaultExpandAll !== undefined)
+                    props.push(`defaultExpandAll={${args.defaultExpandAll}}`);
+                if (args.checkboxSelection !== undefined)
+                    props.push(`checkboxSelection={${args.checkboxSelection}}`);
+                if (args.multiSelect !== undefined)
+                    props.push(`multiSelect={${args.multiSelect}}`);
+                if (args.onCheckedItemsChange)
+                    props.push(`onCheckedItemsChange={${args.onCheckedItemsChange}}`);
+                if (args.defaultCheckedItems)
+                    props.push(`defaultCheckedItems={${args.defaultCheckedItems}}`);
+                if (args.onTotalClick)
+                    props.push(`onTotalClick={${args.onTotalClick}}`);
+                if (args.renderTotalRightContent)
+                    props.push(`renderTotalRightContent={${args.renderTotalRightContent}}`);
+                if (args.renderRightContent)
+                    props.push(`renderRightContent={${args.renderRightContent}}`);
+                if (args.onNodeClick)
+                    props.push(`onNodeClick={${args.onNodeClick}}`);
+                if (args.selectedNodeId)
+                    props.push(`selectedNodeId={${args.selectedNodeId}}`);
+                const code = `<OpsnowCommonTreeView\n  ${props.join('\n  ')}\n/>`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        },
+        {
+            name: "createInsightCard",
+            description: `InsightCard 컴포넌트 - AI 인사이트, 로딩 상태 등 지원
+
+      **import:**
+      \`\`\`javascript
+      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonInsightCard } = useCommonComponents();
+      \`\`\``,
+            parameters: InsightCardSchema,
+            handler: async (args) => {
+                const props = [];
+                if (args.loading !== undefined)
+                    props.push(`loading={${args.loading}}`);
+                if (args.loadingStage !== undefined)
+                    props.push(`loadingStage={${args.loadingStage}}`);
+                if (args.loadingStagesMessages)
+                    props.push(`loadingStagesMessages={${args.loadingStagesMessages}}`);
+                if (args.insightText)
+                    props.push(`insightText="${args.insightText}"`);
+                if (args.title)
+                    props.push(`title="${args.title}"`);
+                if (args.subtitle)
+                    props.push(`subtitle="${args.subtitle}"`);
+                if (args.onDownload)
+                    props.push(`onDownload={${args.onDownload}}`);
+                if (args.sx)
+                    props.push(`sx={${args.sx}}`);
+                const code = `<OpsnowCommonInsightCard\n  ${props.join('\n  ')}\n/>`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
         }
     ];
 }

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

@@ -18,12 +18,29 @@ const GridLayoutSchema = z.object({
     spacing: z.number().optional().describe("Grid 간격 (MUI spacing 단위)"),
     tileProps: z.record(z.any()).optional().describe("OpsnowCommonTile에 전달할 추가 props"),
 });
+const MegaFilterSchema = z.object({
+    filters: z.string().describe("필터 배열 변수명"),
+    vendors: z.string().optional().describe("벤더 옵션 배열 변수명"),
+    selectedVendor: z.string().optional().describe("선택된 벤더 상태 변수명"),
+    onVendorChange: z.string().optional().describe("벤더 변경 이벤트 핸들러"),
+    onFilterChange: z.string().optional().describe("필터 변경 이벤트 핸들러"),
+    selectedDateRange: z.string().optional().describe("선택된 날짜 범위 상태 변수명"),
+    onDateRangeChange: z.string().optional().describe("날짜 범위 변경 이벤트 핸들러"),
+    locale: z.enum(["en", "ko"]).optional().describe("로케일 설정"),
+    title: z.string().optional().describe("필터 제목"),
+    clearAllText: z.string().optional().describe("전체 초기화 버튼 텍스트"),
+    clearText: z.string().optional().describe("개별 초기화 버튼 텍스트"),
+    applyText: z.string().optional().describe("적용 버튼 텍스트"),
+    cancelText: z.string().optional().describe("취소 버튼 텍스트"),
+    searchPlaceholder: z.string().optional().describe("검색 입력 placeholder"),
+    noItemsText: z.string().optional().describe("검색 결과 없음 텍스트"),
+});
 export function createGridLayoutComponent() {
     return [
         {
             name: "createGridLayout",
             description: `Grid 및 Box 기반 레이아웃 생성
-        
+
         **import:**
         \`\`\`jsx
         import { Box, Grid } from '@mui/material';
@@ -64,6 +81,58 @@ export function createGridLayoutComponent() {
                     ]
                 };
             },
+        },
+        {
+            name: "createMegaFilter",
+            description: `MegaFilter 컴포넌트 - 다양한 필터, 벤더 선택, 날짜 범위 등 지원
+
+        **import:**
+        \`\`\`javascript
+        import { OpsnowCommonMegaFilter } from '@opsnow-common/opsnow-common-layout';
+        \`\`\``,
+            parameters: MegaFilterSchema,
+            handler: async (args) => {
+                const props = [];
+                if (args.filters)
+                    props.push(`filters={${args.filters}}`);
+                if (args.vendors)
+                    props.push(`vendors={${args.vendors}}`);
+                if (args.selectedVendor)
+                    props.push(`selectedVendor={${args.selectedVendor}}`);
+                if (args.onVendorChange)
+                    props.push(`onVendorChange={${args.onVendorChange}}`);
+                if (args.onFilterChange)
+                    props.push(`onFilterChange={${args.onFilterChange}}`);
+                if (args.selectedDateRange)
+                    props.push(`selectedDateRange={${args.selectedDateRange}}`);
+                if (args.onDateRangeChange)
+                    props.push(`onDateRangeChange={${args.onDateRangeChange}}`);
+                if (args.locale)
+                    props.push(`locale="${args.locale}"`);
+                if (args.title)
+                    props.push(`title="${args.title}"`);
+                if (args.clearAllText)
+                    props.push(`clearAllText="${args.clearAllText}"`);
+                if (args.clearText)
+                    props.push(`clearText="${args.clearText}"`);
+                if (args.applyText)
+                    props.push(`applyText="${args.applyText}"`);
+                if (args.cancelText)
+                    props.push(`cancelText="${args.cancelText}"`);
+                if (args.searchPlaceholder)
+                    props.push(`searchPlaceholder="${args.searchPlaceholder}"`);
+                if (args.noItemsText)
+                    props.push(`noItemsText="${args.noItemsText}"`);
+                const code = `<OpsnowCommonMegaFilter\n  ${props.join('\n  ')}\n/>`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            },
         }
     ];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opsnow-mcp/opsnow-mcp-common-ui-server",
-  "version": "1.0.12",
+  "version": "1.0.16",
   "type": "module",
   "main": "index.js",
   "bin": {
@@ -9,6 +9,9 @@
   "module": "src/index.ts",
   "scripts": {
     "build": "tsc && node -e \"require('fs').chmodSync('build/index.js', '755')\"",
+    "build:skill": "npx tsx scripts/build-skill.ts",
+    "build:skill:clean": "rm -rf skills/plugins/opsnow-common-ui-skill/skills && npm run build:skill",
+    "build:all": "npm run build && npm run build:skill",
     "start": "node --loader ts-node/esm src/index.ts",
     "dev": "node --loader ts-node/esm src/index.ts",
     "clean": "rm -rf build",