@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.21 → 1.0.23

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

@@ -0,0 +1,352 @@
+import { z } from "zod";
+const gridOptionsSchema = z.object({
+    animateRows: z.boolean().optional().describe('행 애니메이션 사용 여부'),
+    rowSelection: z.object({
+        mode: z.enum(['singleRow', 'multiRow']).describe('행 선택 모드'),
+        checkboxes: z.boolean().optional().describe('체크박스 사용 여부'),
+        enableClickSelection: z.boolean().optional().describe('클릭으로 행 선택 활성화'),
+        headerCheckbox: z.boolean().optional().describe('헤더 체크박스 사용 여부'),
+        enableSelectionWithoutKeys: z.boolean().optional().describe('키 없이 선택 허용'),
+    }).optional().describe('행 선택 옵션'),
+    tooltipShowDelay: z.number().optional().describe('툴팁 표시 지연 시간'),
+    domLayout: z.enum(['normal', 'autoHeight', 'print']).optional().describe('그리드 레이아웃 방식'),
+    suppressCellFocus: z.boolean().optional().describe('셀 포커스 비활성화 (셀 클릭 이벤트 사용 시 필수: true)'),
+    suppressPaginationPanel: z.boolean().optional().describe('페이지네이션 패널 숨김'),
+    masterDetail: z.boolean().optional().describe('마스터/디테일 모드 사용'),
+    detailCellRenderer: z.any().optional().describe('디테일 셀 렌더러'),
+    pivotMode: z.boolean().optional().describe('피벗 모드 사용'),
+    autoGroupColumnDef: z.record(z.any()).optional().describe('자동 그룹 컬럼 정의'),
+    sideBar: z.enum(['columns', 'filters', 'custom']).optional().describe('사이드바 옵션'),
+    groupDefaultExpanded: z.number().optional().describe('기본 그룹 확장 단계'),
+    treeData: z.boolean().optional().describe('트리 데이터 사용 여부'),
+    getDataPath: z.string().optional().describe('트리 데이터 경로 반환 함수(stringified)'),
+    setDataPath: z.string().optional().describe('트리 데이터 경로 설정 함수(stringified)'),
+    pinnedBottomRowData: z.array(z.record(z.any())).optional().describe('하단 고정 행 데이터'),
+    onRowDragEnter: z.string().optional().describe('행 드래그 진입 이벤트 핸들러(stringified)'),
+    rowDragMultiRow: z.boolean().optional().describe('다중 행 드래그 사용'),
+    rowDragManaged: z.boolean().optional().describe('드래그 관리 모드'),
+    suppressMoveWhenRowDragging: z.boolean().optional().describe('드래그 시 이동 억제'),
+    alwaysMultiSort: z.boolean().optional().describe('항상 다중 정렬 사용'),
+    serverSideSortAllLevels: z.boolean().optional().describe('서버사이드 전체 레벨 정렬'),
+    getRowId: z.string().optional().describe('행 ID 반환 함수(stringified)'),
+    suppressMenuHide: z.boolean().optional().describe('메뉴 숨김 억제'),
+});
+const columnDefsSchema = z.lazy(() => z.object({
+    headerName: z.string().optional().describe('컬럼 헤더명'),
+    field: z.string().optional().describe('컬럼 데이터 필드명'),
+    colId: z.string().optional().describe('컬럼 고유 ID'),
+    groupId: z.string().optional().describe('컬럼 그룹 고유 ID'),
+    width: z.number().optional().describe('컬럼 너비'),
+    minWidth: z.number().describe('컬럼 최소 너비'),
+    maxWidth: z.number().optional().describe('컬럼 최대 너비'),
+    pinned: z.enum(['left', 'right']).optional().describe('컬럼 고정 위치'),
+    type: z.array(z.enum([
+        'number',
+        'cost',
+        'ratio',
+        'mixFormat',
+        'numberTooltip',
+        'ratioBar',
+        'dataBar',
+        'value'
+    ])).optional().describe(`컬럼 타입.
+    - ratioBar: 여러 색상/세그먼트로 구성 비율을 보여주는 스택 차트 스타일 바. 여러 필드의 비율을 시각화할 때 사용 (예: Cost Composition by Type). 'Ratio Bar' 예제 참고.
+    - dataBar: 단일 색상으로 셀 배경을 값에 비례하여 채우는 Excel 스타일 바. 단일 값의 크기를 시각화할 때 사용 (예: 월별 비용 트렌드). 'Data Bar' 예제 참고.`),
+    cellRenderer: z.any().optional().describe('셀 렌더러'),
+    cellRendererParams: z.object({
+        typeParams: z.object({
+            currency: z.string().optional().describe('통화 단위'),
+            digits: z.number().optional().describe('소수점 자리수'),
+            iconRight: z.boolean().optional().describe('오른쪽 아이콘 표시'),
+            isPercent: z.boolean().optional().describe('퍼센트 표시 여부'),
+            fields: z.array(z.string()).optional().describe('비율바 등에서 여러 필드'),
+            label: z.object({
+                postfix: z.string().optional().describe('라벨 접미사'),
+                location: z.enum(['left', 'right']).optional().describe('라벨 위치'),
+            }).optional().describe('라벨 옵션'),
+            value: z.object({
+                type: z.string().optional().describe('값 타입'),
+            }).optional().describe('값 옵션'),
+        }).catchall(z.any()).optional().describe('타입별 파라미터'),
+        component: z.any().optional().describe('커스텀 렌더러 컴포넌트'),
+    }).catchall(z.any()).optional().describe('셀 렌더러 파라미터'),
+    headerComponent: z.any().optional().describe('헤더 컴포넌트'),
+    headerComponentParams: z.object({
+        displayData1: z.string().optional().describe('헤더 표시 데이터 1'),
+        tooltipInfoText: z.string().optional().describe('헤더 툴팁 텍스트'),
+        filter: z.boolean().optional().describe('필터 사용 여부'),
+        filterParams: z.object({
+            showTooltips: z.boolean().optional().describe('툴팁 표시 여부'),
+            values: z.string().describe('필터 값 목록 또는 동적 값 제공 함수'),
+        }).catchall(z.any()).optional().describe('필터 파라미터'),
+        tooltipField: z.string().optional().describe('툴팁에 사용할 필드명'),
+        dropdownList: z.array(z.string()).optional().describe('드롭다운 리스트'),
+        defaultValue: z.any().optional().describe('드롭다운 등에서의 기본값'),
+        isUsedMenuFilter: z.boolean().optional().describe('메뉴/필터 버튼 노출 여부'),
+    }).catchall(z.any()).optional().describe('헤더 컴포넌트 파라미터'),
+    sortable: z.boolean().optional().describe('정렬 가능 여부'),
+    resizable: z.boolean().optional().describe('크기 조절 가능 여부'),
+    wrapText: z.boolean().optional().describe('텍스트 줄바꿈'),
+    autoHeight: z.boolean().optional().describe('자동 높이'),
+    suppressMenu: z.boolean().optional().describe('메뉴 숨김'),
+    unSortIcon: z.boolean().optional().describe('정렬 해제 아이콘 표시'),
+    rowDrag: z.boolean().optional().describe('행 드래그 사용'),
+    rowDragText: z.string().optional().describe('행 드래그 텍스트 함수(stringified)'),
+    valueFormatter: z.string().optional().describe('값 포맷터 함수(stringified)'),
+    cellStyle: z.record(z.any()).optional().describe('셀 스타일'),
+    hide: z.boolean().optional().describe('컬럼 숨김 여부'),
+    aggFunc: z.enum(['sum', 'min', 'max', 'count', 'avg']).optional().describe('집계 함수'),
+    enableRowGroup: z.boolean().optional().describe('행 그룹핑 허용'),
+    enablePivot: z.boolean().optional().describe('피벗 허용'),
+    enableValue: z.boolean().optional().describe('값 집계 허용'),
+    pivot: z.boolean().optional().describe('피벗 컬럼 여부'),
+    rowGroup: z.boolean().optional().describe('그룹핑 컬럼 여부'),
+    filter: z.boolean().optional().describe('필터 사용 여부'),
+    filterParams: z.any().optional().describe('필터 파라미터'),
+    cellRendererSelector: z.string().optional().describe('셀 렌더러 선택 함수(stringified)'),
+    colSpan: z.string().optional().describe('컬럼 병합 함수(stringified)'),
+    children: z.array(z.lazy(() => columnDefsSchema)).optional().describe('하위 컬럼 정의 배열 (컬럼 그룹화)'),
+}));
+const defaultColDefSchema = z.object({
+    wrapText: z.boolean().optional().describe('텍스트 줄바꿈'),
+    autoHeight: z.boolean().optional().describe('자동 높이'),
+    suppressMenu: z.boolean().optional().describe('메뉴 숨김'),
+    unSortIcon: z.boolean().optional().describe('정렬 해제 아이콘 표시'),
+    sortable: z.boolean().optional().describe('정렬 가능 여부'),
+    resizable: z.boolean().optional().describe('크기 조절 가능 여부'),
+    flex: z.number().optional().describe('flex 비율'),
+    suppressHeaderMenuButton: z.boolean().optional().describe('헤더 메뉴 버튼 숨김'),
+    minWidth: z.number().optional().describe('최소 너비'),
+    maxWidth: z.number().optional().describe('최대 너비'),
+    width: z.number().optional().describe('기본 너비'),
+});
+// ag-grid 기반 OpsnowCommonDataGrid 스키마 정의
+export const DataGridSchema = z.object({
+    totalPage: z.number().optional().describe('전체 페이지 수'),
+    initPageNum: z.number().optional().describe('초기 페이지 번호'),
+    dropdownSearchDefaultValue: z.string().optional().describe('드롭다운 검색 기본값'),
+    gridOptions: gridOptionsSchema.optional().describe('ag-grid 옵션'),
+    columnDefs: z.array(columnDefsSchema).describe("ag-grid 컬럼 정의").min(1),
+    defaultColDef: defaultColDefSchema.optional().describe('ag-grid 기본 컬럼 옵션'),
+    rowData: z.array(z.record(z.any())).optional().describe('그리드에 표시할 데이터'),
+    status: z.number().describe(`그리드 상태값: GRID.STATUS.LOADING(0), GRID.STATUS.DATA_EXISTS(1), GRID.STATUS.ERROR(9) 중 하나를 사용해야 합니다.
+
+    **필수 구현 패턴:**
+    반드시 useState로 상태를 관리하고, useEffect 등을 사용하여 데이터 로딩 로직을 구현해야 합니다.
+    사용자는 이 상태 제어 코드 안에 실제 비즈니스 로직(API 호출, 데이터 처리 등)을 추가할 수 있습니다.
+
+    예제:
+    const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING)
+    const [rowData, setRowData] = useState([])
+
+    useEffect(() => {
+      // 여기에 실제 비즈니스 로직을 추가합니다 (예: API 호출)
+      fetchData()
+        .then(data => {
+          setRowData(data)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        })
+        .catch(error => {
+          setStatus(CommonConst.GRID_STATUS.ERROR)
+        })
+    }, [])`),
+    gridHeight: z.number().optional().describe('그리드 높이'),
+    setClass: z.string().optional().describe('그리드 클래스명'),
+    localRowClass: z.string().optional().describe('로컬 행 클래스명'),
+    pagination: z.boolean().optional().describe('페이지네이션 사용 여부 (true로 설정 시 내부적으로 opsnow-common-pagination 컴포넌트 사용)'),
+    paginationPageSize: z.number().optional().describe('페이지당 행 수'),
+    textNoData: z.string().optional().describe('데이터 없음 텍스트'),
+    noDataDescription: z.string().optional().describe('데이터 없음 설명'),
+    textLoading: z.string().optional().describe('로딩 중 텍스트'),
+    textErrorTitle: z.string().optional().describe('에러 타이틀'),
+    textErrorDescription: z.string().optional().describe('에러 설명'),
+    filterSearchText: z.string().optional().describe('필터 검색 텍스트'),
+    searchTextNoData: z.string().optional().describe('검색 결과 없음 텍스트'),
+    searchTextNoDataDescription: z.string().optional().describe('검색 결과 없음 설명'),
+    pagingFromServer: z.boolean().optional().describe('서버 페이징 사용 여부'),
+    pageSizeList: z.array(z.object({
+        label: z.string().describe('페이지 사이즈 라벨'),
+        value: z.number().describe('페이지 사이즈 값')
+    })).optional().describe('페이지 사이즈 리스트 (예: [{ label: "5", value: 5 }, { label: "10", value: 10 }])'),
+    placeholderText: z.string().optional().describe('플레이스홀더 텍스트'),
+    usedRowClass: z.boolean().optional().describe('행 클래스 사용 여부 (셀 클릭 이벤트 사용 시 필수: true)'),
+    usedSearch: z.boolean().optional().describe('검색창 사용 여부'),
+    usedSearchAndDropdown: z.boolean().optional().describe('검색+드롭다운 동시 사용'),
+    useOpsnowUs: z.boolean().optional().describe('Opsnow US 스타일 사용'),
+    inTile: z.boolean().optional().describe('타일 내 그리드 여부'),
+    noDataCustomComponent: z.any().optional().describe('커스텀 No Data 컴포넌트'),
+    rowModelType: z.string().optional().describe('행 모델 타입'),
+    serverSideDatasource: z.record(z.any()).optional().describe('서버사이드 데이터소스'),
+    cacheBlockSize: z.number().optional().describe('서버사이드 캐시 블록 크기'),
+    usedMenuItem: z.boolean().optional().describe('메뉴 아이템 사용 여부'),
+    showSelectedRowCount: z.boolean().optional().describe('선택 행 개수 표시'),
+    isAutoSizeAllColumns: z.boolean().optional().describe('모든 컬럼 자동 크기 조정'),
+    langCd: z.string().optional().describe('언어 코드'),
+    useTreeDataDragDrop: z.boolean().optional().describe('트리 데이터 드래그 사용'),
+    getDropTargetNode: z.string().optional().describe('드롭 타겟 노드 반환 함수(stringified)'),
+    emitQuickFilterChange: z.boolean().optional().describe('빠른 필터 변경 이벤트 발생'),
+    searchAddon: z.any().optional().describe('검색창 왼쪽 추가 컴포넌트'),
+    children: z.any().optional().describe('그리드 children'),
+    onGridReady: z.string().optional().describe('그리드 준비 이벤트 핸들러(stringified)'),
+    onFirstDataRendered: z.string().optional().describe('첫 데이터 렌더링 이벤트 핸들러(stringified)'),
+    onGridSizeChanged: z.string().optional().describe('그리드 크기 변경 이벤트 핸들러(stringified)'),
+    onSelectionChanged: z.string().optional().describe('선택 변경 이벤트 핸들러(stringified)'),
+    onCellClick: z.string().optional().describe('셀 클릭 이벤트 핸들러(stringified)'),
+    onFilterChanged: z.string().optional().describe('필터 변경 이벤트 핸들러(stringified)'),
+    onUpdateFilter: z.string().optional().describe('필터 업데이트 이벤트 핸들러(stringified)'),
+    onSearchQueryChanged: z.string().optional().describe('검색어 변경 이벤트 핸들러(stringified)'),
+    onSetPage: z.string().optional().describe('페이지 변경 이벤트 핸들러(stringified)'),
+    serverSideTotalPageSize: z.number().optional().describe('서버사이드 전체 페이지 수')
+});
+// DataGrid 컴포넌트 함수 - 배열 반환
+export function createDataGridComponent() {
+    return [
+        {
+            name: "createDataGrid",
+            description: `데이터 그리드 컴포넌트 - 데이터를 테이블로 표시 및 관리하는 컴포넌트로 레이아웃을 구성하는 Grid와 구별되는 컴포넌트입니다.
+
+      **이 데이터 그리드 컴포넌트는 ag-grid를 기반으로 구현되었습니다.**
+      **데이터 그리드 데이터, 컬럼 정의 등의 데이터가 제공되지 않을 경우 목업 데이터를 사용하세요.**
+
+      **CRITICAL: Auto Row Height - 다음 경우 반드시 적용**
+      1. 긴 텍스트가 들어올 수 있는 컬럼이 있는 경우 (설명, 메시지, 항목, 이름, 제목, 코멘트, 비고, 등)
+      2. 컬럼이 resizable인 경우 - 사용자가 폭을 줄여도 텍스트가 잘리지 않고 여러 줄로 정상 표시되어야 함 (ellipsis로 자르면 안됨)
+
+      [필수] defaultColDef에 반드시 포함:
+      const defaultColDef = {
+        // ... 다른 설정들
+        wrapText: true,      // 필수 - 텍스트 줄바꿈
+        autoHeight: true,    // 필수 - 행 높이 자동 조절
+      };
+
+      [필수] gridOptions에 반드시 포함:
+      const gridOptions = {
+        // ... 다른 설정들
+        domLayout: 'autoHeight',  // 필수
+      };
+
+      [필수] 텍스트 컬럼에 반드시 포함:
+      {
+        headerName: '설명',
+        field: 'description',
+        flex: 2,                              // 필수 - flex 사용
+        minWidth: 200,
+        wrapText: true,                       // 필수 - 텍스트 줄바꿈
+        autoHeight: true,                     // 필수 - 행 높이 자동 조절
+        suppressSizeToFit: true,              // 필수
+        cellStyle: { alignItems: 'center' } // 필수 (flex-start도 가능)
+      }
+
+      ⚠️ defaultColDef에 wrapText, autoHeight가 없으면 텍스트가 넘칩니다!
+
+      **import:**
+      \`\`\`javascript
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext();
+      \`\`\`
+
+      **중요: 상태 관리 패턴 (필수 구현)**
+      데이터 그리드를 구현할 때는 반드시 아래의 세 가지 상태(LOADING, DATA_EXISTS, ERROR)를 모두 처리하는 코드를 포함해야 합니다.
+
+      **절대 하지 말아야 할 것:**
+      - useState에 직접 데이터를 넣지 마세요: const [rowData] = useState([{...}]) ❌
+      - status를 바로 DATA_EXISTS로 설정하지 마세요: const [status] = useState(CommonConst.GRID_STATUS.DATA_EXISTS) ❌
+      - useEffect 없이 구현하지 마세요 ❌
+
+      **반드시 따라야 할 구현 패턴:**
+      1. status는 반드시 CommonConst.GRID_STATUS.LOADING으로 시작
+      2. rowData는 반드시 빈 배열 []로 시작
+      3. useEffect를 반드시 사용하여 데이터 로딩 시뮬레이션
+      4. .then()으로 성공 처리 → CommonConst.GRID_STATUS.DATA_EXISTS로 변경
+      5. .catch()로 에러 처리 → CommonConst.GRID_STATUS.ERROR로 변경
+      6. OpsnowCommonDataGrid에 textErrorTitle, textErrorDescription 속성 반드시 포함
+
+      사용자는 생성된 코드의 useEffect 내부에 실제 비즈니스 로직(API 호출, 데이터 변환 등)을 추가할 수 있습니다.
+
+      **기본 패턴 예제 (정확히 이 구조를 따라야 함):**
+      \`\`\`javascript
+      // ✅ 올바른 방법: LOADING으로 시작, 빈 배열로 시작
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING);
+      const [rowData, setRowData] = useState([]);
+
+      // ✅ 올바른 방법: useEffect에서 데이터 로딩
+      useEffect(() => {
+        // 사용자가 여기에 실제 API 호출 등 비즈니스 로직을 추가합니다
+        const fetchData = async () => {
+          try {
+            // 실제로는 여기에 API 호출을 넣습니다
+            // 예: const response = await fetch('/api/data');
+            // const data = await response.json();
+
+            // 데모를 위한 시뮬레이션
+            await new Promise(resolve => setTimeout(resolve, 1000));
+
+            const mockData = [
+              { make: 'Toyota', model: 'Celica', price: 35000 },
+              { make: 'Ford', model: 'Mondeo', price: 32000 }
+            ];
+
+            setRowData(mockData);
+            setStatus(CommonConst.GRID_STATUS.DATA_EXISTS);
+          } catch (error) {
+            console.error('Error loading data:', error);
+            setStatus(CommonConst.GRID_STATUS.ERROR);
+          }
+        };
+
+        fetchData();
+      }, []);
+
+      // gridOptions 정의 (권장)
+      const gridOptions = {
+        animateRows: true,
+        rowSelection: { mode: 'singleRow', checkboxes: false, enableClickSelection: true },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+        suppressCellFocus: true,
+      };
+
+      // ✅ 올바른 방법: 에러 관련 속성 포함
+      <OpsnowCommonDataGrid
+        columnDefs={columnDefs}
+        rowData={rowData}
+        status={status}
+        gridOptions={gridOptions}
+        pagination={true}
+        paginationPageSize={5}
+        pageSizeList={[
+          { label: '5', value: 5 },
+          { label: '10', value: 10 },
+          { label: '20', value: 20 }
+        ]}
+        textErrorTitle="데이터 로드 실패"
+        textErrorDescription="데이터를 불러오는 중 오류가 발생했습니다."
+        langCd={i18n.getLocale()}
+      />
+      \`\`\``,
+            parameters: DataGridSchema,
+            handler: async (args) => {
+                // DataGridSchema의 모든 속성을 JSX prop으로 변환
+                const props = [];
+                const argsObj = args;
+                for (const key in argsObj) {
+                    if (argsObj[key] === undefined || argsObj[key] === null)
+                        continue;
+                    if (typeof argsObj[key] === 'function')
+                        continue;
+                    props.push(`${key}={${JSON.stringify(argsObj[key])}}`);
+                }
+                const code = `<OpsnowCommonDataGrid ${props.join(' ')} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        }
+    ];
+}

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

@@ -0,0 +1,139 @@
+import { z } from "zod";
+import { IconNamesMap, generateIconDescription } from "./data/icon-names.js";
+export const IconSchema = z.object({
+    iconName: z.enum(Object.keys(IconNamesMap)).describe(generateIconDescription({ format: 'nested' })),
+    size: z.number().optional().default(24).describe("아이콘 크기(px)"),
+    color: z.string().optional().describe("아이콘 색상"),
+    className: z.string().optional().describe("추가 CSS 클래스"),
+    onClick: z.string().optional().describe("클릭 이벤트 핸들러 함수명"),
+    disabled: z.boolean().optional().default(false).describe("비활성화 여부")
+});
+export const MuiIconSchema = z.object({
+    theme: z.string().optional().describe("테마명"),
+    hexColor: z.string().optional().describe("HEX 색상"),
+    size: z.number().optional().default(24).describe("아이콘 크기(px)"),
+    noCircle: z.boolean().optional().describe("원형 배경 없음"),
+    alpha: z.number().optional().describe("투명도"),
+    color: z.string().optional().describe("MUI 색상"),
+    label: z.string().optional().describe("MUI 아이콘 이름")
+});
+// export const MarkersSchema = z.object({
+//   theme: z.string().describe("마커 테마"),
+//   hexColor: z.string().optional().describe("HEX 색상"),
+//   lineAlpha: z.number().optional().describe("선 투명도"),
+//   size: z.number().optional().default(24).describe("마커 크기(px)")
+// });
+// export type MarkersProps = z.infer<typeof MarkersSchema>;
+export function createIconsComponent() {
+    return [
+        {
+            name: "createIcon",
+            description: `아이콘 컴포넌트 - iconName으로 다양한 아이콘 표시
+      
+      - iconName에 사용할 수 있는 아이콘 목록은 IconNamesMap을 참고하세요.
+      - 크기, 색상, 비활성화 등 다양한 옵션 지원
+      - 아이콘은 useOpsnowCommonIcons 훅을 통해 생성해야 합니다.
+      
+      **import 예시(React의 모든 훅(useState, useEffect, useOpsnowCommonIcons 등)은 반드시 함수 컴포넌트 내부에서 호출):**
+
+      \`\`\`javascript
+      import { useOpsnowCommonIcons } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonIcon } = useOpsnowCommonIcons();
+      \`\`\``,
+            parameters: IconSchema,
+            handler: async (args) => {
+                const props = [];
+                props.push(`iconName="${args.iconName}"`);
+                if (args.size)
+                    props.push(`size={${args.size}}`);
+                if (args.color)
+                    props.push(`color="${args.color}"`);
+                if (args.className)
+                    props.push(`className="${args.className}"`);
+                if (args.onClick)
+                    props.push(`onClick={${args.onClick}}`);
+                if (args.disabled)
+                    props.push(`disabled`);
+                const code = `<OpsnowCommonIcon ${props.join(" ")} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        },
+        {
+            name: "createMuiIcon",
+            description: `MUI/커스텀 아이콘 컴포넌트
+      
+      - MUI 아이콘 또는 커스텀 SVG 아이콘을 표시할 수 있습니다.
+      - theme, hexColor, noCircle, alpha 등 다양한 스타일 옵션 지원
+      - 아이콘은 useOpsnowCommonIcons 훅을 통해 생성해야 합니다.
+      
+      **import 예시:**
+      \`\`\`javascript
+      import { useOpsnowCommonIcons } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonMuiIcon } = useOpsnowCommonIcons();
+      \`\`\``,
+            parameters: MuiIconSchema,
+            handler: async (args) => {
+                const props = [];
+                if (args.theme)
+                    props.push(`theme="${args.theme}"`);
+                if (args.hexColor)
+                    props.push(`hexColor="${args.hexColor}"`);
+                if (args.size)
+                    props.push(`size={${args.size}}`);
+                if (args.noCircle)
+                    props.push(`noCircle`);
+                if (args.alpha)
+                    props.push(`alpha={${args.alpha}}`);
+                if (args.color)
+                    props.push(`color="${args.color}"`);
+                if (args.label)
+                    props.push(`label="${args.label}"`);
+                const code = `<OpsnowCommonMuiIcon ${props.join(" ")} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        },
+        // {
+        //   name: "createMarkers",
+        //   description: `마커 컴포넌트 - 그래프/차트용 심볼
+        //   - 그래프, 차트 등에서 포인트/마커로 활용
+        //   - theme(마커 테마), hexColor, lineAlpha, size 등 다양한 옵션 지원
+        //   - 아이콘은 useOpsnowCommonIcons 훅을 통해 생성해야 합니다.
+        //   **import 예시:**
+        //   \`\`\`javascript
+        //   import { useOpsnowCommonIcons } from '@opsnow-common/opsnow-finops-common-ui-loader';
+        //   const { OpsnowCommonMarkers } = useOpsnowCommonIcons();
+        //   \`\`\``,
+        //   parameters: MarkersSchema,
+        //   handler: async (args: MarkersProps) => {
+        //     const props: string[] = [];
+        //     props.push(`theme="${args.theme}"`);
+        //     if (args.hexColor) props.push(`hexColor="${args.hexColor}"`);
+        //     if (args.lineAlpha) props.push(`lineAlpha={${args.lineAlpha}}`);
+        //     if (args.size) props.push(`size={${args.size}}`);
+        //     const code = `<OpsnowCommonMarkers ${props.join(" ")} />`;
+        //     return {
+        //       content: [
+        //         {
+        //           type: "text" as const,
+        //           text: `\`\`\`jsx\n${code}\n\`\`\``
+        //         }
+        //       ]
+        //     };
+        //   }
+        // }
+    ];
+}

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

@@ -0,0 +1,141 @@
+import { z } from "zod";
+const GridLayoutSchema = z.object({
+    items: z.array(z.string()).describe("렌더링할 JSX 문자열 배열 (각 항목은 컴포넌트 호출 코드)"),
+    layout: z.array(z.object({
+        xs: z.number().optional(),
+        sm: z.number().optional(),
+        md: z.number().optional(),
+        lg: z.number().optional(),
+        xl: z.number().optional(),
+    }).partial()).optional().describe("각 항목별 브레이크포인트 레이아웃 배열"),
+    defaultLayout: z.object({
+        xs: z.number().optional(),
+        sm: z.number().optional(),
+        md: z.number().optional(),
+        lg: z.number().optional(),
+        xl: z.number().optional(),
+    }).optional().describe("기본 브레이크포인트 레이아웃"),
+    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("검색 결과 없음 텍스트"),
+    addText: z.string().optional().describe("개별 필터 추가 버튼 텍스트"),
+});
+export function createGridLayoutComponent() {
+    return [
+        {
+            name: "createGridLayout",
+            description: `Grid 및 Box 기반 레이아웃 생성
+
+        **import:**
+        \`\`\`jsx
+        import { Box, Grid } from '@mui/material';
+        \`\`\`
+        `,
+            parameters: GridLayoutSchema,
+            handler: async (args) => {
+                const { items, layout = [], defaultLayout = { xs: true }, spacing = 2, } = args;
+                const gridItems = items.map((item, i) => {
+                    const bp = layout[i] || defaultLayout;
+                    const bpProps = Object.entries(bp)
+                        .map(([k, v]) => `${k}={${v}}`)
+                        .join(" ");
+                    return `  <Grid item ${bpProps} key={${i}}>` +
+                        `\n    <Box sx={{` +
+                        `\n      border: '1px solid #ddd',` +
+                        `\n      borderRadius: '12px',` +
+                        `\n      padding: 2,` +
+                        `\n      display: 'flex',` +
+                        `\n      flexDirection: 'column',` +
+                        `\n      boxShadow: '2px 2px 8px 0 #4254663D',` +
+                        `\n    }}>` +
+                        `\n      ${item}` +
+                        `\n    </Box>` +
+                        `\n  </Grid>`;
+                }).join("\n");
+                const code = [
+                    `<Grid container wrap="nowrap" spacing={0} sx={{ padding: '27px', gap: '27px' }}>`,
+                    gridItems,
+                    `</Grid>`,
+                ].join("\n");
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            },
+        },
+        {
+            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}"`);
+                if (args.addText)
+                    props.push(`addText="${args.addText}"`);
+                const code = `<OpsnowCommonMegaFilter\n  ${props.join('\n  ')}\n/>`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            },
+        }
+    ];
+}