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

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

@@ -0,0 +1,110 @@
+import { z } from "zod";
+// Notification 컴포넌트 관련 스키마 정의
+export const NotificationSchema = z.object({
+    severity: z
+        .enum([
+        "infoSuccess",
+        "infoError",
+        "infoWarning",
+        "success",
+        "error",
+        "warning",
+        "info",
+    ])
+        .describe(`알림 타입(색상/스타일):
+    - "info": 회색/ 흰색 배경 + 배경과 동일한 색상의 아이콘 + 컬러 라인 없음
+    - "infoSuccess": 흰/회색 배경 + 왼쪽 초록 컬러 라인 + 초록 아이콘(placement: page 전용)
+    - "infoWarning": 흰/회색 배경 + 왼쪽 주황 컬러 라인 + 주황 아이콘(placement: page 전용)
+    - "infoError": 흰/회색 배경 + 왼쪽 빨강 컬러 라인 + 빨강 아이콘(placement: page 전용)
+    - "success": 박스 내 초록 배경
+    - "error": 박스 내 빨강 배경
+    - "warning": 박스 내 주황 배경
+    ※ infoSuccess/infoWarning/infoError는 배경이 항상 흰색/회색이고, 컬러 라인 색상만 다릅니다.
+    ※ card 타입에서는 infoSuccess/infoWarning/infoError를 사용하지 않습니다.`),
+    useTitle: z.boolean().optional().describe("제목 사용 여부 - title 옵션 사용 시 true(true시 사용 예시 : useTitle (useTitle={true}처럼 쓰지 않음.)"),
+    title: z.string().optional().describe("볼드 처리 된 알림 제목 - 해당 옵션 사용하는 경우 useTitle true 필수"),
+    message: z.string().optional().describe("제목 아래 알림 메시지 내용"),
+    placement: z
+        .enum(["card", "page"])
+        .optional()
+        .describe(`알림 표시 위치/스타일:
+  - "page": 배경은 항상 회색/흰색, 왼쪽 컬러 라인 색상만 타입에 따라 변함. 모서리가 둥근 경우 사용.
+  - "card": 배경색 자체가 타입(success/ error/ warning/ info)에 따라 컬러풀하게 채워짐. 
+  ※ infoSuccess/infoWarning/infoError는 "page"에서만 사용 가능(배경 흰색, 컬러 라인 색상만 변함).
+  ※ "card"는 배경색이 타입에 따라 바뀌며, infoSuccess/infoWarning/infoError는 지원하지 않음.`),
+    closable: z.boolean().optional().describe("수동 닫기 가능 여부"),
+    bgWhite: z
+        .boolean()
+        .default(false)
+        .describe("배경 흰색 여부 - severity :  info 일때만 사용(true시 사용 예시 : bgWhite (bgWhite={true}처럼 쓰지 않음.)"),
+    action: z.string().optional().describe("액션 버튼 코드 - 예시: <OpsnowCommonButton label='확인' />"),
+    isCustom: z
+        .boolean()
+        .default(false)
+        .describe("커스텀 action 버튼 사용 여부 - action랑 같이 사용, default 버튼이 아닌 custom시 사용"),
+}).describe("알림 컴포넌트 - 박스 형태로 알림을 제공하는 컴포넌트. 알림 컴포넌트 내에 버튼 사용 시 (action, isCustom 옵션 사용 시) 반드시 버튼 컴포넌트 동시 호출 하여 action에 OpsnowCommonButton 컴포넌트를 string으로 전달");
+// Notification 컴포넌트 함수 - 배열 반환
+export function createNotificationComponent() {
+    return [
+        {
+            name: "createNotification",
+            description: `알림 컴포넌트 - 박스 형태로 알림을 제공하는 컴포넌트. 
+      알림 컴포넌트 내에 버튼 생성 시 action, isCustom 옵션 사용(버튼 컴포넌트 동시 호출 하여 action에 OpsnowCommonButton 컴포넌트를 string으로 전달)
+      **주의사항**:
+      message 옵션 사용 시 반드시 알림 컴포넌트 내부(children)에 메시지 작성(props로 사용 금지)
+      - '>' 버튼이 있는 경우 이동하는 버튼이며 placement가 card인 경우 버튼은 자동으로 생성됨(따로 버튼 추가 필요 없음)
+      - 좌측 외부 컬러 라인, 아이콘 색상 존재하고 모서리가 둥근 경우 알림 컴포넌트(severity:infoXXX, placement: page)사용
+      **import**:
+      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      const { OpsnowCommonButton, OpsnowCommonNotification } = useCommonComponents()
+      `,
+            parameters: NotificationSchema,
+            handler: async (args) => {
+                // 알림 컴포넌트 로직 구현
+                const props = [];
+                if (args.severity) {
+                    props.push(`severity="${args.severity}"`);
+                }
+                if (args.title && args.useTitle) {
+                    props.push("useTitle");
+                    props.push(`title="${args.title}"`);
+                }
+                if (args.placement) {
+                    props.push(`placement="${args.placement}"`);
+                }
+                if (args.bgWhite) {
+                    props.push("bgWhite");
+                }
+                if (args.action) {
+                    if (args.isCustom && args.closable && args.placement === `card`) {
+                        props.push(`customActionBtn={${args.action}}`);
+                    }
+                    else if (args.isCustom && !args.placement) {
+                        props.push(`customActionBtn={${args.action}}`);
+                    }
+                    else {
+                        props.push(`action={${args.action}}`);
+                    }
+                }
+                if (args.closable) {
+                    props.push(`onClose={() => {\n  // 닫힐때 실행할 함수\n  // 예시: setOpen(${!args.closable}})\n}}`);
+                }
+                let code = `<OpsnowCommonNotification\n  ${props.join("\n  ")}>
+        // 내부 메시지가 있는경우 children으로 작성
+        // title은 props로 사용
+        ${args.message ? args.message : ""}</OpsnowCommonNotification>`;
+                if (args.closable) {
+                    code = `const [open, setOpen] = useState(${args.closable});\n{open && (${code})}`;
+                }
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``,
+                        },
+                    ],
+                };
+            },
+        },
+    ];
+}

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

@@ -0,0 +1,164 @@
+import { z } from "zod";
+// Pagination 컴포넌트 관련 스키마 정의
+export const PaginationSchema = z.object({
+    page: z.number().describe("현재 페이지 번호"),
+    rowsPerPage: z.number().optional().default(10).describe("페이지당 항목 수"),
+    size: z
+        .enum(["medium", "small", "large"])
+        .describe("페이지네이션 컴포넌트 크기 (medium, small, large)"),
+    rowsPerPageOptions: z
+        .array(z.object({
+        label: z.string().describe("페이지 크기 옵션 라벨"),
+        value: z.number().describe("페이지 크기 옵션 값"),
+    }))
+        .optional()
+        .describe("페이지 크기 옵션들 - 한 페이지에 몇 개 씩 보여줄지"),
+    list: z.array(z.string()).optional().describe("페이지네이션에 표시할 데이터"),
+    onRowsPerPageChange: z
+        .string()
+        .optional()
+        .describe("rowsPerPage가 변경될 때 호출되는 핸들러 함수명 - 함수명만 필요함"),
+    isLocale: z.boolean().default(true).describe("locale(언어) 설정 여부"),
+    onChangePageNum: z
+        .string()
+        .optional()
+        .describe("페이지 번호(pageNum) 변경되었을때 핸들러 함수. 함수 내부 코드(문자열)로 전달하세요. 예시: console.log('페이지 번호가', pageNum, '으로 변경되었습니다.')"),
+    onChangePageSize: z
+        .string()
+        .optional()
+        .describe("페이지당 항목수 변경(pageSize) 및 현재 페이지(pageNum) 변경되었을때 핸들러 함수. 함수 내부 코드(문자열)로 전달하세요. 예시: console.log('페이지당 항목 수가',pageSize,'로 변경되고, 현재 페이지는',pageNum,'입니다.')"),
+    onNext: z
+        .string()
+        .optional()
+        .describe("pageNum이 다음페이지로 이동할때 핸들러 함수 코드. 함수 내부 코드(문자열)로 전달하세요. 예시: console.log('다음 페이지로 이동, 현재 페이지:', pageNum)"),
+    onPrevious: z
+        .string()
+        .optional()
+        .describe("pageNum이 이전페이지로 이동할때 핸들러 함수 코드. 함수 내부 코드(문자열)로 전달하세요. 예시: console.log('이전 페이지로 이동, 현재 페이지:', pageNum)"),
+    pagingFromServer: z
+        .boolean()
+        .default(false)
+        .describe("서버에서 페이지네이션 정보를 받아오는 여부"),
+    onPageChange: z
+        .string()
+        .optional()
+        .describe("pageData가 변경 되었을때 사용하는 핸들러 함수 코드. 함수 내부 코드(문자열)로 전달하세요. 예시: setCurrentPageData(pageData); console.log('Current Page Data:', pageData)"),
+});
+// Pagination 컴포넌트 함수 - 배열 반환
+export function createPaginationComponent() {
+    return [
+        {
+            name: "createPagination",
+            description: `페이지네이션 컴포넌트 - 페이지 이동 및 크기 조절
+
+      **import**:
+      \`\`\`jsx
+      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+      const { OpsnowCommonPagination } = useCommonComponents();
+      \`\`\`
+      `,
+            parameters: PaginationSchema,
+            handler: async (args) => {
+                // 기본값 설정
+                const props = [];
+                let code = "";
+                if (args.rowsPerPageOptions) {
+                    code += `
+          const [rowsPerPage, setRowsPerPage] = useState(${args.rowsPerPage});
+          `;
+                }
+                if (args.onRowsPerPageChange) {
+                    code += `
+          const ${args.onRowsPerPageChange} = (event) => {
+            // 함수 내부 코드 작성
+            // 예시 : setRowsPerPage(event.target.value);
+          };
+          `;
+                }
+                // 데이터 리스트 처리
+                if (args.list && Array.isArray(args.list)) {
+                    const listItems = args.list
+                        .map((item) => {
+                        const displayValue = typeof item === "string" ? item : JSON.stringify(item);
+                        return `<li>${displayValue}</li>`;
+                    })
+                        .join("\n            ");
+                    code += `
+          // 데이터 나열 예시
+          <ul>
+            ${listItems}
+          </ul>
+          `;
+                    props.push(`list={${JSON.stringify(args.list)}}`);
+                    props.push(`count={${args.list.length}}`);
+                }
+                // 기본 props 추가
+                if (args.isLocale) {
+                    props.push("locale={i18n.getLocale()}");
+                }
+                if (args.page) {
+                    props.push(`page={${args.page}}`);
+                }
+                if (args.size) {
+                    props.push(`size="${args.size}"`);
+                }
+                if (args.pagingFromServer) {
+                    props.push(`pagingFromServer={${args.pagingFromServer}}`);
+                }
+                // rowsPerPage 관련 props
+                if (args.rowsPerPageOptions) {
+                    const optionsString = args.rowsPerPageOptions
+                        .map((opt) => `{ label: "${opt.label}", value: ${opt.value} }`)
+                        .join(", ");
+                    props.push(`rowsPerPageOptions={[${optionsString}]}`);
+                    props.push("rowsPerPage={rowsPerPage}");
+                }
+                else if (args.rowsPerPage) {
+                    props.push(`rowsPerPage={${args.rowsPerPage}}`);
+                }
+                // 이벤트 핸들러 props
+                if (args.onRowsPerPageChange) {
+                    props.push(`onRowsPerPageChange={${args.onRowsPerPageChange}}`);
+                }
+                if (args.onChangePageNum) {
+                    props.push(`onChangePageNum={(pageNum) => {
+            ${args.onChangePageNum}
+          }}`);
+                }
+                if (args.onChangePageSize) {
+                    props.push(`onChangePageSize={(pageSize, pageNum) => {
+            ${args.onChangePageSize}
+          }}`);
+                }
+                if (args.onNext) {
+                    props.push(`onNext={(pageNum) => {
+            ${args.onNext}
+          }}`);
+                }
+                if (args.onPrevious) {
+                    props.push(`onPrevious={(pageNum) => {
+            ${args.onPrevious}
+          }}`);
+                }
+                if (args.onPageChange) {
+                    props.push(`onPageChange={(pageData) => {
+            ${args.onPageChange}
+          }}`);
+                }
+                // 컴포넌트 렌더링
+                code += `
+          <OpsnowCommonPagination ${props.join(" ")} />
+          `;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``,
+                        },
+                    ],
+                };
+            },
+        },
+    ];
+}

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

@@ -0,0 +1,71 @@
+import { z } from "zod";
+// Popup 컴포넌트 관련 스키마 정의
+export const PopupSchema = z.object({
+    title: z.string().describe("팝업 제목"),
+    visible: z.boolean().optional().default(false).describe("팝업 표시 여부"),
+    width: z.number().optional().describe("팝업 너비 (px)"),
+    height: z.number().optional().describe("팝업 높이 (px)"),
+    closable: z.boolean().optional().default(true).describe("닫기 버튼 표시 여부"),
+    maskClosable: z.boolean().optional().default(true).describe("마스크 클릭으로 닫기 가능 여부"),
+    disableEscapeKeyDown: z.boolean().optional().default(false).describe('ESC 키 입력으로 닫기 방지 여부'),
+    type: z.enum(['wing', 'standard', 'bottom']).optional().default('standard').describe("팝업 타입"),
+    size: z.enum(['sm', 'md', 'lg']).optional().describe('팝업 크기 (sm, md, lg)'),
+    confirmButton: z.object({
+        color: z.string().describe('확인 버튼 색상'),
+        variant: z.string().describe('확인 버튼 변형'),
+    }).optional().describe('확인 버튼 설정'),
+    useCustomHeader: z.boolean().optional().default(false).describe('커스텀 헤더 사용 여부'),
+    useCustomFooter: z.boolean().optional().default(false).describe('커스텀 푸터 사용 여부'),
+    headerContent: z.any().optional().describe('커스텀 헤더 내용 (JSX)'),
+    footerContent: z.any().optional().describe('커스텀 푸터 내용 (JSX)'),
+});
+// Popup 컴포넌트 함수 - 배열 반환
+export function createPopupComponent() {
+    return [
+        {
+            name: "createPopup",
+            description: `팝업 컴포넌트 - 모달/다이얼로그 UI를 표시합니다.
+    
+    사용 예시(React 함수 컴포넌트 내부에서 아래와 같이 import 후 사용하세요):
+    \`\`\`javascript
+    import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+    const { OpsnowCommonPopup } = useCommonComponents();
+    \`\`\``,
+            parameters: PopupSchema,
+            handler: async (args) => {
+                // <OpsnowCommonPopup ...> 코드만 동적으로 생성
+                const { title = 'Example Popup', visible = false, width, height, closable = true, maskClosable = true, disableEscapeKeyDown = false, size, confirmButton, useCustomHeader = false, useCustomFooter = false, headerContent, footerContent, type = 'standard', } = args;
+                // prop 문자열 생성
+                const propStr = [
+                    `title=\"${title}\"`,
+                    `open={${visible}}`,
+                    `onClose={handleClose}`,
+                    width ? `width={${width}}` : '',
+                    height ? `height={${height}}` : '',
+                    closable === false ? 'closable={false}' : '',
+                    maskClosable === false ? 'maskClosable={false}' : '',
+                    disableEscapeKeyDown ? 'disableEscapeKeyDown' : '',
+                    `type=\"${type}\"`,
+                    `size=\"${size}\"`,
+                    confirmButton ? `confirmButton={${JSON.stringify(confirmButton)}}` : '',
+                    useCustomHeader ? 'useCustomHeader' : '',
+                    useCustomFooter ? 'useCustomFooter' : '',
+                    headerContent ? `headerContent={${headerContent}}` : '',
+                    footerContent ? `footerContent={${footerContent}}` : '',
+                ].filter(Boolean).join('\n  ');
+                const code = `<OpsnowCommonPopup
+                      ${propStr}
+                    >
+                    </OpsnowCommonPopup>`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        }
+    ];
+}

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

@@ -0,0 +1,177 @@
+import { z } from "zod";
+const COMMON_VARIANTS = ["indeterminate", "determinate"];
+const LINE_VARIANTS = ["buffer"];
+const COMMON_COLORS = ["primary", "secondary", "inherit"];
+const CIRCLE_COLORS = ["error", "info", "warning", "success"];
+// 공통 Progress 스키마
+export const BaseProgressSchema = z.object({
+    percent: z
+        .number()
+        .min(0)
+        .max(100)
+        .optional()
+        .describe("진행률 (0-100)(dot 형태, indeterminate일때는 필요 없음, variant가 buffer인 경우 초기값으로 사용)"),
+    size: z
+        .number()
+        .optional()
+        .describe("progress 크기 (dot 형태일 때는 필요 없음)"),
+    showInfo: z
+        .boolean()
+        .default(false)
+        .describe("퍼센트 정보 표시 여부 - percent value가 존재하는 경우만 true"),
+}).describe("진행률 컴포넌트 - 로딩 관련 버튼이 필요하면 createButtonComponent 호출");
+// Line Type(Progress) 스키마
+export const LineProgressSchema = BaseProgressSchema.extend({
+    variant: z
+        .enum([...COMMON_VARIANTS, ...LINE_VARIANTS])
+        .describe("Progress 형태 타입"),
+    strokeColor: z
+        .enum([...COMMON_COLORS])
+        .optional()
+        .describe("Progress 바 색상"),
+    valueBuffer: z
+        .number()
+        .optional()
+        .describe("Progress 바 버퍼 값 - variant가 buffer일때 필요"),
+});
+// Circle Type(Loading) 스키마
+export const CircleProgressSchema = BaseProgressSchema.extend({
+    variant: z
+        .enum([...COMMON_VARIANTS])
+        .optional()
+        .describe("Loading Progress 타입 - dot 형태일때는 필요 없음"),
+    strokeColor: z
+        .enum([...COMMON_COLORS, ...CIRCLE_COLORS])
+        .optional()
+        .describe("Loading 원형 색상"),
+    loadingDots: z
+        .object({
+        dotSize: z.number().describe("도트 크기"),
+        dotIndex: z.number().describe("도트 인덱스"),
+    })
+        .partial()
+        .optional()
+        .describe("도트 형태 일때 도트 속성(dotSize, dotIndex)"),
+    open: z.boolean().default(false).describe("open, setOpen useState 사용 여부"),
+    isFullScreen: z.boolean().default(false).describe("전체 화면 표시 여부"),
+}).describe("단일 진행률인 경우 사용");
+// Progress 컴포넌트 함수 - 여러 tool을 반환
+export function createProgressComponent() {
+    return [
+        {
+            name: "createProgressCircle",
+            description: `진행률 컴포넌트 생성 - 단일 진행률(%)을 표시하기 위한 원 형태의 컴포넌트 생성(원형, 도트 형태)
+      - 도트형태: 점(●)이 여러 개, 진행률 숫자/원형 바 없음(하나의 컴포넌트에 점 세개)
+      - 원형: 하나의 원, 진행률 숫자/텍스트/원형 바가 있음(앙에 숫자/텍스트/원형 바가 있으면 무조건 원형)
+      **주의사항:**
+      - 도트 형태를 사용하는 경우, <OpsnowCommonLoading loadingDots dotSize={8}/> 와 같이 loadingDots, dotSize, dotIndex와 한꺼번에 묶어서 사용하지 않음
+      - 금지 : isLoadingDots = { dotSize: 8, dotIndex: 0 } - 해당 예시처럼 사용 금지
+       **import:**
+      \`\`\`javascript
+      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonLoading, OpsnowCommonButton } = useCommonComponents();
+      `,
+            parameters: CircleProgressSchema,
+            handler: async (args) => {
+                // 진행률 컴포넌트 생성 로직 구현
+                let functionDefinitions = ``;
+                if (args.open) {
+                    functionDefinitions += `
+            const [open, setOpen] = useState(false);
+          `;
+                }
+                // Props 생성
+                const props = [];
+                if (args.percent)
+                    props.push(`value={${args.percent}}`);
+                if (args.variant)
+                    props.push(`variant="${args.variant}"`);
+                if (args.size)
+                    props.push(`size={${args.size}}`);
+                if (args.showInfo)
+                    props.push(`label`);
+                if (args.strokeColor)
+                    props.push(`color="${args.strokeColor}"`);
+                if (args.open)
+                    props.push(`open={open}`);
+                if (args.isFullScreen)
+                    props.push(`isFullScreen`);
+                if (args.loadingDots) {
+                    if (args.loadingDots.dotSize || args.loadingDots.dotIndex) {
+                        props.push("loadingDots");
+                    }
+                    if (args.loadingDots?.dotSize)
+                        props.push(`dotSize={${args.loadingDots.dotSize}}`);
+                    if (args.loadingDots?.dotIndex)
+                        props.push(`index={${args.loadingDots.dotIndex}}`);
+                }
+                // 컴포넌트 코드 생성
+                let componentCode = `
+          <OpsnowCommonLoading
+            ${props.join("\n            ")}
+          />`;
+                const fullCode = `${componentCode}`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${fullCode}\n\`\`\``,
+                        },
+                    ],
+                };
+            },
+        },
+        {
+            name: "createProgressLine",
+            description: `진행률 컴포넌트 생성 - 단일 진행률(%)을 라인 형태로 표시를 위한 컴포넌트 생성(라인, 바 형태)
+      **import:**
+      \`\`\`javascript클라
+      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonProgress } = useCommonComponents();
+      `,
+            parameters: LineProgressSchema,
+            handler: async (args) => {
+                let functionDefinitions = ``;
+                if (args.valueBuffer) {
+                    functionDefinitions += `
+            const [progress, setProgress] = useState(${args.percent});
+            const [buffer, setBuffer] = useState(${args.valueBuffer});
+            // 아래에 버퍼 값 업데이트 로직 추가
+            // 그 외 필요한 함수 추가
+          `;
+                }
+                let componentCode = "";
+                const props = [];
+                props.push(`value={${args.percent}}`);
+                if (args.variant)
+                    props.push(`variant="${args.variant}"`);
+                if (args.percent && args.valueBuffer) {
+                    props.push(`value = {progress}`);
+                    props.push(`valueBuffer={buffer}`);
+                }
+                else if (args.percent) {
+                    props.push(`value=${args.percent}`);
+                }
+                if (args.size)
+                    props.push(`size="${args.size}"`);
+                if (args.showInfo)
+                    props.push(`label`);
+                if (args.strokeColor)
+                    props.push(`color="${args.strokeColor}"`);
+                componentCode += `
+          <OpsnowCommonProgress ${props.join("\n        ")} />
+        `;
+                const code = `${functionDefinitions}\n${componentCode}`;
+                // 진행률 업데이트 로직 구현
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``,
+                        },
+                    ],
+                };
+            },
+        },
+    ];
+}

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

@@ -0,0 +1,135 @@
+import { z } from "zod";
+// Select 컴포넌트 관련 스키마 정의
+export const SelectSchema = z.object({
+    items: z.array(z.object({
+        value: z.string(),
+        label: z.any(), // string | JSX 가능
+        disabled: z.boolean().optional().default(false)
+    })).describe("셀렉트 옵션 목록"),
+    value: z.any().optional().describe("선택된 값(단일/다중)"),
+    multiple: z.boolean().optional().default(false).describe("다중 선택 가능 여부"),
+    placeholder: z.string().optional().describe("플레이스홀더 텍스트"),
+    variant: z.enum(["standard", "outlined", "filled", "noLine"]).optional().describe("셀렉트 variant"),
+    size: z.enum(["small", "medium"]).optional().describe("셀렉트 크기"),
+    error: z.boolean().optional().default(false).describe("에러 상태"),
+    disabled: z.boolean().optional().default(false).describe("비활성화 여부"),
+    searchable: z.boolean().optional().default(false).describe("검색 가능 여부")
+});
+// Autocomplete Select 컴포넌트 관련 스키마 정의
+export const AutocompleteSelectSchema = z.object({
+    items: z.array(z.object({
+        value: z.string(),
+        label: z.string(),
+        group: z.string().optional(),
+        iconName: z.string().optional(),
+        disabled: z.boolean().optional().default(false)
+    })).describe("오토컴플리트 옵션 목록"),
+    value: z.any().optional().describe("선택된 값/값들 (단일/다중)"),
+    multiple: z.boolean().optional().default(false).describe("다중 선택 가능 여부"),
+    useCheckboxOption: z.boolean().optional().default(false).describe("체크박스 옵션 사용 여부"),
+    useSelectAll: z.boolean().optional().default(false).describe("전체 선택 옵션 사용 여부"),
+    disableCloseOnSelect: z.boolean().optional().default(false).describe("선택 시 닫힘 방지 여부"),
+    loading: z.boolean().optional().default(false).describe("로딩 상태 표시 여부"),
+    label: z.string().optional().describe("라벨 텍스트"),
+    placeholder: z.string().optional().describe("플레이스홀더 텍스트"),
+    disabled: z.boolean().optional().default(false).describe("전체 비활성화 여부")
+});
+// Select 컴포넌트 함수 - 배열 반환
+export function createSelectComponent() {
+    return [
+        {
+            name: "createSelect",
+            description: `기본 셀렉트 컴포넌트 예제입니다.
+
+      - items: 옵션 배열 (value, label, disabled 등 지원)
+      - multiple, placeholder, variant, size, error, disabled, searchable 등 다양한 props 지원
+      - value/onChange는 단일/다중 선택에 따라 배열 또는 단일 값
+
+      **import:**
+      \`\`\`javascript
+      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonSelect } = useCommonComponents();
+      \`\`\``,
+            parameters: SelectSchema,
+            handler: async (args) => {
+                const props = [];
+                if (args.items)
+                    props.push(`items={${JSON.stringify(args.items)}}`);
+                if (args.value !== undefined)
+                    props.push(`value={value}`);
+                if (args.multiple)
+                    props.push(`multiple`);
+                if (args.placeholder)
+                    props.push(`placeholder=\"${args.placeholder}\"`);
+                if (args.variant)
+                    props.push(`variant=\"${args.variant}\"`);
+                if (args.size)
+                    props.push(`size=\"${args.size}\"`);
+                if (args.error)
+                    props.push(`error`);
+                if (args.disabled)
+                    props.push(`disabled`);
+                if (args.searchable)
+                    props.push(`searchable`);
+                props.push(`onChange={e => setValue(e.target.value)}`);
+                const code = `<OpsnowCommonSelect ${props.join(' ')} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        },
+        {
+            name: "createAutocompleteSelect",
+            description: `오토컴플리트 셀렉트 컴포넌트 예제입니다.
+      - 그룹 옵션 및 전체 선택 옵션 지원
+      - items: 옵션 배열 (value, label, group, iconName, disabled 등 지원)
+      - multiple, useCheckboxOption, useSelectAll, disableCloseOnSelect, loading 등 다양한 props 지원
+      - value/onChange는 단일/다중 선택에 따라 배열 또는 단일 값
+
+      **import:**
+      \`\`\`javascript
+      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonAutocomplete } = useCommonComponents();
+      \`\`\``,
+            parameters: AutocompleteSelectSchema,
+            handler: async (args) => {
+                const props = [];
+                if (args.items)
+                    props.push(`items={${JSON.stringify(args.items)}}`);
+                if (args.value !== undefined)
+                    props.push(`value={value}`);
+                if (args.multiple)
+                    props.push(`multiple`);
+                if (args.useCheckboxOption)
+                    props.push(`useCheckboxOption`);
+                if (args.useSelectAll)
+                    props.push(`useSelectAll`);
+                if (args.disableCloseOnSelect)
+                    props.push(`disableCloseOnSelect`);
+                if (args.loading)
+                    props.push(`loading`);
+                if (args.label)
+                    props.push(`label=\"${args.label}\"`);
+                if (args.placeholder)
+                    props.push(`placeholder=\"${args.placeholder}\"`);
+                if (args.disabled)
+                    props.push(`disabled`);
+                props.push(`onChange={setValue}`);
+                const code = `<OpsnowCommonAutocomplete ${props.join(' ')} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        }
+    ];
+}