@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.0

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

@@ -0,0 +1,163 @@
+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-finops-common-ui-loader'
+      import i18n from '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-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-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-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,132 @@
+import { z } from "zod";
+// Select 컴포넌트 관련 스키마 정의
+export const SelectSchema = z.object({
+    options: 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("라벨 텍스트"),
+    disabled: z.boolean().optional().default(false).describe("전체 비활성화 여부")
+});
+// Select 컴포넌트 함수 - 배열 반환
+export function createSelectComponent() {
+    return [
+        {
+            name: "createSelect",
+            description: `기본 셀렉트 컴포넌트 예제입니다.
+
+      - options: 옵션 배열 (value, label, disabled 등 지원)
+      - multiple, placeholder, variant, size, error, disabled, searchable 등 다양한 props 지원
+      - value/onChange는 단일/다중 선택에 따라 배열 또는 단일 값
+
+      **import:**
+      \`\`\`javascript
+      import { useCommonComponents } from 'opsnow-finops-common-ui-loader';
+      const { OpsnowCommonSelect } = useCommonComponents();
+      \`\`\``,
+            parameters: SelectSchema,
+            handler: async (args) => {
+                const props = [];
+                if (args.options)
+                    props.push(`items={${JSON.stringify(args.options)}}`);
+                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={setValue}`);
+                const code = `<OpsnowCommonSelect ${props.join(' ')} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\u0060\u0060\u0060jsx\n${code}\n\u0060\u0060\u0060`
+                        }
+                    ]
+                };
+            }
+        },
+        {
+            name: "createAutocompleteSelect",
+            description: `오토컴플리트 셀렉트 컴포넌트 예제입니다.
+      - 그룹 옵션 및 전체 선택 옵션 지원
+      - items: 옵션 배열 (value, label, group, iconName, disabled 등 지원)
+      - multiple, useCheckboxOption, useSelectAll, disableCloseOnSelect, loading 등 다양한 props 지원
+      - value/onChange는 단일/다중 선택에 따라 배열 또는 단일 값
+
+      **import:**
+      \`\`\`javascript
+      import { useCommonComponents } from '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.disabled)
+                    props.push(`disabled`);
+                props.push(`onChange={setValue}`);
+                const code = `<OpsnowCommonAutocomplete ${props.join(' ')} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        }
+    ];
+}

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

@@ -0,0 +1,72 @@
+import { z } from "zod";
+// Stepper 컴포넌트 관련 스키마 정의 (예제 코드에 맞게 확장)
+export const StepperSchema = z.object({
+    steps: z.array(z.object({
+        label: z.string().describe("스텝 라벨"),
+        status: z.string().optional().describe("스텝 상태 (NotStarted, Completed, Error 등)"),
+        optionalText: z.string().optional().describe("옵셔널 텍스트"),
+        description: z.string().optional(),
+        icon: z.string().optional(),
+        // slot은 StepContent에서만 사용
+    })).describe("스텝 목록"),
+    activeStep: z.number().optional().default(0).describe("현재 스텝 인덱스"),
+    orientation: z.enum(["horizontal", "vertical"]).optional().default("horizontal").describe("스텝 방향"),
+    align: z.enum(["left", "center", "right"]).optional().describe("스텝 정렬"),
+    isSimpleView: z.boolean().optional().describe("심플 뷰 여부"),
+    connector: z.string().optional().describe("커스텀 커넥터 컴포넌트(JSX 문자열)"),
+    onStepClick: z.string().optional().describe("스텝 클릭 핸들러 함수명"),
+    contentPadding: z.string().optional().describe("컨텐츠 패딩 스타일"),
+    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("스텝 클릭 가능 여부")
+});
+// Stepper 컴포넌트 함수 - 배열 반환
+export function createStepperComponent() {
+    return [
+        {
+            name: "createStepper",
+            description: `스텝퍼 컴포넌트 - 단계별 진행 상황 표시
+
+      **import 예시(React의 모든 훅(useState, useEffect, useCommonComponents 등)은 반드시 함수 컴포넌트 내부에서 호출):**
+      \`\`\`javascript
+      import { useCommonComponents } from 'opsnow-finops-common-ui-loader';
+      const { OpsnowCommonStepper, OpsnowCommonStepContent } = useCommonComponents();
+      \`\`\``,
+            parameters: StepperSchema,
+            handler: async (args) => {
+                const { steps, activeStep = 0, orientation = "horizontal", align, isSimpleView, connector, onStepClick, contentPadding, contentHeight, nonLinear, contentDependency, size = "default", onChange, clickable } = args;
+                // 태그 props만 생성
+                const propList = [
+                    `steps={steps}`,
+                    `activeStep={activeStep}`,
+                    `orientation=\"${orientation}\"`,
+                    align ? `align=\"${align}\"` : '',
+                    isSimpleView ? 'isSimpleView' : '',
+                    connector ? `connector={${connector}}` : '',
+                    onStepClick ? `onStepClick={${onStepClick}}` : '',
+                    contentPadding ? `contentPadding=\"${contentPadding}\"` : '',
+                    contentHeight ? `contentHeight=\"${contentHeight}\"` : '',
+                    nonLinear ? 'nonLinear' : '',
+                    typeof contentDependency === 'boolean' ? `contentDependency={${contentDependency}}` : '',
+                    `size=\"${size}\"`,
+                    onChange ? `onChange={${onChange}}` : '',
+                    clickable ? 'clickable' : ''
+                ].filter(Boolean);
+                // StepContent 샘플
+                const stepContent = steps.map((_, idx) => `  <OpsnowCommonStepContent stepIndex={${idx}} />`).join('\n');
+                const code = `<OpsnowCommonStepper\n  ${propList.join('\n  ')}\n>\n${stepContent}\n</OpsnowCommonStepper>`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        }
+    ];
+}