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

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-common/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\`\`\``
+                        }
+                    ]
+                };
+            }
+        }
+    ];
+}

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

@@ -0,0 +1,111 @@
+import { z } from "zod";
+// Tab 컴포넌트 관련 스키마 정의
+export const TabSchema = z.object({
+    items: z
+        .array(z.object({
+        label: z.string().describe("탭 라벨 - icon이 들어가지 않음 icon 사용 시 반드시 iconName으로 사용"),
+        content: z.string().describe("각 탭에 들어가는 내용"),
+        disabled: z
+            .boolean()
+            .optional()
+            .default(false)
+            .describe("탭 비활성화 여부"),
+        iconName: z.string().optional().describe("아이콘 이름"),
+    }))
+        .describe("탭 목록"),
+    orientation: z
+        .enum(["horizontal", "vertical"])
+        .optional()
+        .describe("탭 방향"),
+    contentGap: z
+        .enum(["small", "medium", "large"])
+        .optional()
+        .describe("탭 간격"),
+    fullWidth: z.boolean().optional().describe("탭 전체 너비 사용 여부"),
+    value: z
+        .string()
+        .describe("선택되어 있는 탭 값 - state 변수명(변경했을때 반영가능하도록 useSate), 숫자 "),
+    depth: z.number().min(1).max(3).optional().describe("탭 깊이 1~3"),
+    onChange: z.string().optional().describe("탭 변경 이벤트 핸들러 함수명"),
+    color: z.enum(["primary", "secondary"]).optional().describe("탭 색상"),
+}).describe("탭 컴포넌트 - createIconsComponent에서 iconName을 반드시 참조하여 string으로 입력");
+// Tab 컴포넌트 함수 - 배열 반환
+export function createTabComponent() {
+    return [
+        {
+            name: "createTab",
+            description: `탭 컴포넌트 - 탭 인터페이스 및 콘텐츠 관리
+      **import 예시:**
+      \`\`\`javascript
+      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonTab } = useCommonComponents();
+      \`\`\`
+      `,
+            parameters: TabSchema,
+            handler: async (args) => {
+                // 탭 컴포넌트 로직 구현
+                let code = "";
+                if (args.onChange) {
+                    code += `
+          const ${args.onChange} = (_event, newValue) => {
+            // 탭 변경 이벤트 핸들러 함수 구현
+          `;
+                }
+                const props = [];
+                if (args.value) {
+                    props.push(`value={${args.value}}`);
+                }
+                if (args.items) {
+                    const itemsArray = args.items
+                        .map((item) => {
+                        const itemProps = [];
+                        itemProps.push(`label: '${item.label}'`);
+                        if (item.content) {
+                            itemProps.push(`content: <div>${item.content}</div>`);
+                        }
+                        if (item.disabled) {
+                            itemProps.push(`disabled: ${item.disabled}`);
+                        }
+                        if (item.iconName) {
+                            itemProps.push(`iconName: '${item.iconName}'`);
+                        }
+                        return `{ ${itemProps.join(", ")} }`;
+                    })
+                        .join(",\n              ");
+                    props.push(`items={[
+              ${itemsArray}
+            ]}`);
+                }
+                if (args.orientation) {
+                    props.push(`orientation="${args.orientation}"`);
+                }
+                if (args.contentGap) {
+                    props.push(`contentGap="${args.contentGap}"`);
+                }
+                if (args.fullWidth) {
+                    props.push(`fullWidth={${args.fullWidth}}`);
+                }
+                if (args.depth) {
+                    props.push(`depth={${args.depth}}`);
+                }
+                if (args.onChange) {
+                    props.push(`onChange={${args.onChange}}`);
+                }
+                if (args.color) {
+                    props.push(`color="${args.color}"`);
+                }
+                code += `
+        <OpsnowCommonTab ${props.join(" ")} />
+        `;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``,
+                        },
+                    ],
+                };
+            },
+        },
+    ];
+}

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

@@ -0,0 +1,135 @@
+import { z } from "zod";
+// Toast Popup 컴포넌트 관련 스키마 정의
+export const ToastPopupSchema = z.object({
+    message: z.string().describe("토스트에 표시될 메시지"),
+    options: z.object({
+        color: z
+            .enum(["success", "error", "info", "warning", "default"])
+            .optional()
+            .default("default")
+            .describe("토스트 타입"),
+        autoHideDuration: z
+            .number()
+            .optional()
+            .describe("토스트 메시지 노출 시간(ms)"),
+        useCancelButton: z
+            .boolean()
+            .optional()
+            .describe("취소 버튼 사용 여부"),
+        useTitle: z
+            .boolean()
+            .optional()
+            .describe("타이틀 사용 여부 - title 속성 사용 시 자동으로 true로 설정"),
+        title: z.string().optional().describe("토스트 팝업 타이틀"),
+        customAction: z.string().optional().describe("토스트 팝업 내부 버튼 커스텀 코드(반드시 OpsnowCommonButton 컴포넌트 사용) - 예시: <OpsnowCommonButton onClick={handleCustomAction} /> "),
+        anchorOrigin: z
+            .object({
+            vertical: z
+                .enum(["top", "bottom"])
+                .optional()
+                .describe("토스트 vertical 위치"),
+            horizontal: z
+                .enum(["left", "center", "right"])
+                .optional()
+                .describe("토스트 horizontal 위치"),
+        })
+            .optional()
+            .describe("토스트 위치 - vertical, horizontal"),
+        preventDuplicate: z
+            .boolean()
+            .optional()
+            .describe("중복 토스트 방지 여부"),
+        persist: z.boolean().optional().default(false).describe("토스트 지속 여부"),
+        transitionDuration: z
+            .object({
+            enter: z
+                .number()
+                .optional()
+                .default(300)
+                .describe("토스트 애니메이션 지속 시간(ms)"),
+            exit: z
+                .number()
+                .optional()
+                .default(300)
+                .describe("토스트 애니메이션 지속 시간(ms)"),
+        })
+            .optional()
+            .describe("토스트 애니메이션 지속 시간(ms)"),
+        action: z.string().optional().describe("JSX 노드 또는 key를 받아 노드를 반환하는 함수도 지원"),
+        TransitionComponent: z.string().optional().describe("MUI 트랜지션 컴포넌트(Grow, Zoom, Fade, Slide 등)를 import해서 함수명 그대로 입력 (예: Grow, Zoom})"),
+        style: z.record(z.string(), z.string()).optional().describe("토스트 팝업에 적용할 인라인 스타일 객체. 모든 CSS 속성(key)과 값(value)을 string으로 입력 (예: { 'boxShadow': '...', 'borderLeft': '...', 'backgroundColor': '...' })")
+    }),
+}).describe("토스트 팝업 - 버튼 컴포넌트 반드시 동시 호출 필요");
+// Toast Popup 컴포넌트 함수 - 배열 반환
+export function createToastPopupComponent() {
+    return [
+        {
+            name: "createToastPopup",
+            description: `토스트 팝업 컴포넌트 - 버튼 클릭 시 간단한 알림 메시지 표시
+      토스트 팝업 사용 시 버튼 컴포넌트의 onClick은 반드시 필요함. 
+      버튼 컴포넌트 onClick 함수 내부에 showToast를 사용하여 토스트 팝업 표시
+
+      **import**:
+      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonToastPopup, showToast, OpsnowCommonButton } = useCommonComponents();
+      `,
+            parameters: ToastPopupSchema,
+            handler: async (args) => {
+                // 토스트 팝업 컴포넌트 로직 구현
+                let code = "";
+                // 토스트 팝업 코드 생성
+                let toastCode = "";
+                if (args.options) {
+                    const optionProps = [];
+                    if (args.options.color)
+                        optionProps.push(`color: '${args.options.color}'`);
+                    if (args.options.autoHideDuration)
+                        optionProps.push(`autoHideDuration: ${args.options.autoHideDuration}`);
+                    if (args.options.useCancelButton)
+                        optionProps.push(`useCancelButton: ${args.options.useCancelButton}`);
+                    if (args.options.useTitle)
+                        optionProps.push(`useTitle: ${args.options.useTitle}`);
+                    if (args.options.title)
+                        optionProps.push(`title: ${args.options.title}`);
+                    if (args.options.customAction) {
+                        optionProps.push(`customAction: (${args.options.customAction})`);
+                    }
+                    if (args.options.anchorOrigin?.vertical || args.options.anchorOrigin?.horizontal)
+                        optionProps.push(`anchorOrigin:  ${args.options.anchorOrigin?.vertical ? `vertical: ${args.options.anchorOrigin?.vertical}` : ""}, ${args.options.anchorOrigin?.horizontal ? `horizontal: ${args.options.anchorOrigin?.horizontal}` : ""}`);
+                    if (args.options.preventDuplicate)
+                        optionProps.push(`preventDuplicate: ${args.options.preventDuplicate}`);
+                    if (args.options.persist)
+                        optionProps.push(`persist: ${args.options.persist}`);
+                    if (args.options.transitionDuration?.enter || args.options.transitionDuration?.exit)
+                        optionProps.push(`transitionDuration: ${args.options.transitionDuration?.enter ? `enter: ${args.options.transitionDuration?.enter}` : ""}, ${args.options.transitionDuration?.exit ? `exit: ${args.options.transitionDuration?.exit}` : ""}`);
+                    if (args.options.action)
+                        optionProps.push(`action: ${args.options.action}`);
+                    if (args.options.TransitionComponent)
+                        optionProps.push(`TransitionComponent: ${args.options.TransitionComponent}`);
+                    if (args.options.style) {
+                        optionProps.push(`style: {${Object.entries(args.options.style)
+                            .map(([key, value]) => `${key}: '${value}'`)
+                            .join(', ')}}`);
+                    }
+                    ;
+                    toastCode += `{
+            ${optionProps.join(', ')}
+          }`;
+                }
+                code += `
+        const (버튼 컴포넌트 onClick 함수명) = () => {
+          showToast(${args.message ? args.message + ", " : ""}${toastCode});
+        }
+        `;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``,
+                        },
+                    ],
+                };
+            },
+        },
+    ];
+}

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

@@ -0,0 +1,204 @@
+import { z } from "zod";
+// Tooltip 컴포넌트 관련 스키마 정의
+export const TooltipSchema = z.object({
+    isIconTooltip: z
+        .boolean()
+        .optional()
+        .describe("아이콘으로 툴팁 사용 여부(아이콘 호버 시 툴팁 표시) - 미사용 시 Tooltip 컴포넌트 내부 버튼 필요"),
+    titleProps: z
+        .object({
+        imgSrc: z.string().optional().describe("이미지 소스"),
+        imgAlt: z.string().optional().describe("이미지 대체 텍스트"),
+        title: z.string().optional().describe("툴팁 내용"),
+    })
+        .optional()
+        .describe("titleProps를 사용할 경우 title or imgSrc 중 하나 필수"),
+    placement: z
+        .enum([
+        "bottom-end",
+        "bottom-start",
+        "bottom",
+        "left-end",
+        "left-start",
+        "left",
+        "right-end",
+        "right-start",
+        "right",
+        "top-end",
+        "top-start",
+        "top",
+    ])
+        .optional()
+        .describe("툴팁 표시 위치 (top, bottom, left, right 및 각각의 start/end 변형)"),
+    iconTooltipProps: z
+        .object({
+        iconName: z
+            .string()
+            .optional()
+            .describe("아이콘 이름 - iconProps.useIcon이 true일 경우 필수"),
+        useIcon: z.boolean().optional().describe("아이콘 사용 여부 - iconName이 있을 경우 iconProps.useIcon은 true여야 함, useMuiIcon 과 동시에 true안됨"),
+        useMuiIcon: z.boolean().optional().describe("MUI 아이콘 사용 여부 - useIcon 과 동시에 true 안됨"),
+        alignItems: z.string().optional().describe("아이콘 정렬 방식"),
+        justifyContent: z.string().optional().describe("아이콘 정렬 방식"),
+        label: z.string().describe("툴팁 라벨"),
+        colorProps: z
+            .object({
+            commonColor: z.string().optional().describe("툴팁 색상"),
+            muiColor: z
+                .enum([
+                "primary",
+                "secondary",
+                "error",
+                "info",
+                "success",
+                "warning",
+            ])
+                .optional()
+                .describe("툴팁 MUI 색상"),
+        })
+            .optional()
+            .describe("툴팁 색상 설정- color, muiColor 둘 중 하나만 사용 가능"),
+        size: z.number().optional().describe("아이콘 툴팁 크기"),
+    })
+        .optional()
+        .describe("isIconTooltip이 true일 경우 추가 필드"),
+    onOpen: z.string().optional().describe("툴팁 열림 시 실행할 함수명"),
+    onClose: z.string().optional().describe("툴팁 닫힘 시 실행할 함수명"),
+    disableFocusListener: z.boolean().describe("포커스 리스너 비활성화 여부"),
+    disableHoverListener: z.boolean().describe("호버 리스너 비활성화 여부"),
+    disableTouchListener: z.boolean().describe("터치 리스너 비활성화 여부"),
+    disableInteractive: z.boolean().describe("대화형 컴포넌트 비활성화 여부"),
+    enterDelay: z.number().optional().describe("툴팁 진입 지연 시간 (ms)"),
+    enterTouchDelay: z
+        .number()
+        .optional()
+        .describe("툴팁 진입 터치 지연 시간 (ms)"),
+    enterNextDelay: z
+        .number()
+        .optional()
+        .describe("툴팁 진입 다음 지연 시간 (ms)"),
+    leaveDelay: z.number().optional().describe("툴팁 이탈 지연 시간 (ms)"),
+    leaveNextDelay: z
+        .number()
+        .optional()
+        .describe("툴팁 이탈 다음 지연 시간 (ms)"),
+    open: z.boolean().describe("툴팁 열림 여부"),
+    tooltipFullWidth: z
+        .boolean()
+        .optional()
+        .describe("툴팁 open시 전체 너비 사용 여부"),
+    tooltipPreview: z.boolean().optional().describe("툴팁 미리보기 사용 여부"),
+    ref: z
+        .string()
+        .optional()
+        .describe("ref를 사용할 경우, ref 변수 명만 문자열로 입력"),
+}).describe("iconName을 사용하는 경우 - createIconsComponent에서 iconName을 반드시 참조하여 string으로 입력, useIcon/useMuiIcon 둘 중 true");
+// Tooltip 컴포넌트 함수 - 배열 반환
+export function createTooltipComponent() {
+    return [
+        {
+            name: "createTooltip",
+            description: `툴팁 컴포넌트 - 요소에 대한 추가 정보 표시
+      **import 예시:**
+      \`\`\`javascript
+      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonTooltip, OpsnowCommonIconTooltip } = useCommonComponents();
+      \`\`\`
+      `,
+            parameters: TooltipSchema,
+            handler: async (args) => {
+                let code = "";
+                const props = [];
+                if (args.ref) {
+                    code += `const ${args.ref} = useRef(null);
+          // ref 객체에는 openTooltip(), closeTooltip(), getOpenState() 메서드가 제공됨`;
+                    props.push(`ref={${args.ref}}`);
+                }
+                if (args.titleProps) {
+                    if (args.titleProps.title)
+                        props.push(`title="${args.titleProps.title}"`);
+                    else if (args.titleProps.imgSrc) {
+                        props.push(`title = {<img src="${args.titleProps.imgSrc}" ${args.titleProps.imgAlt ? "alt= " + args.titleProps.imgAlt : ""} />}`);
+                    }
+                }
+                if (args.iconTooltipProps) {
+                    if (args.iconTooltipProps.iconName)
+                        props.push(`iconName={"${args.iconTooltipProps.iconName}"}`);
+                    if (args.placement)
+                        props.push(`placement="${args.placement}"`);
+                    if (args.iconTooltipProps.useIcon)
+                        props.push(`useIcon={${args.iconTooltipProps.useIcon}}`);
+                    if (args.iconTooltipProps.useMuiIcon)
+                        props.push(`useMuiIcon={${args.iconTooltipProps.useMuiIcon}}`);
+                    if (args.iconTooltipProps.alignItems)
+                        props.push(`alignItems="${args.iconTooltipProps.alignItems}"`);
+                    if (args.iconTooltipProps.justifyContent)
+                        props.push(`justifyContent="${args.iconTooltipProps.justifyContent}"`);
+                    if (args.iconTooltipProps.colorProps) {
+                        if (args.iconTooltipProps.colorProps.commonColor)
+                            props.push(`commonColor={'${args.iconTooltipProps.colorProps.commonColor}'}`);
+                        if (args.iconTooltipProps.colorProps.muiColor)
+                            props.push(`muiColor={'${args.iconTooltipProps.colorProps.muiColor}'}`);
+                    }
+                    if (args.iconTooltipProps.size)
+                        props.push(`size={${args.iconTooltipProps.size}}`);
+                }
+                if (args.disableFocusListener)
+                    props.push(`disableFocusListener`);
+                if (args.disableHoverListener)
+                    props.push(`disableHoverListener`);
+                if (args.disableTouchListener)
+                    props.push(`disableTouchListener`);
+                if (args.disableInteractive)
+                    props.push(`disableInteractive`);
+                if (args.enterDelay)
+                    props.push(`enterDelay={${args.enterDelay}}`);
+                if (args.enterTouchDelay)
+                    props.push(`enterTouchDelay={${args.enterTouchDelay}}`);
+                if (args.enterNextDelay)
+                    props.push(`enterNextDelay={${args.enterNextDelay}}`);
+                if (args.leaveDelay)
+                    props.push(`leaveDelay={${args.leaveDelay}}`);
+                if (args.leaveNextDelay)
+                    props.push(`leaveNextDelay={${args.leaveNextDelay}}`);
+                if (args.open)
+                    props.push(`open={${args.open}}`);
+                if (args.tooltipFullWidth)
+                    props.push(`tooltipFullWidth={${args.tooltipFullWidth}}`);
+                if (args.tooltipPreview) {
+                    if (args.isIconTooltip)
+                        props.push(`tooltipPreview={${args.tooltipPreview}}`);
+                    else
+                        props.push(`useTooltipPreview={${args.tooltipPreview}}`);
+                }
+                if (args.onOpen)
+                    props.push(`onOpen={${args.onOpen}}`);
+                if (args.onClose)
+                    props.push(`onClose={${args.onClose}}`);
+                if (args.isIconTooltip) {
+                    code += `
+          <OpsnowCommonIconTooltip ${props.join(" ")}>
+          </OpsnowCommonIconTooltip>
+          `;
+                }
+                else {
+                    code += `
+          <OpsnowCommonTooltip ${props.join(" ")}
+          >
+          // Button 컴포넌트 필요(Mui Button or OpsnowCommonButton)
+          </OpsnowCommonTooltip>
+          `;
+                }
+                // 툴팁 컴포넌트 로직 구현
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``,
+                        },
+                    ],
+                };
+            },
+        },
+    ];
+}

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

@@ -0,0 +1,93 @@
+import { z } from "zod";
+// MUI typography variants to support in addition to e-r/e-m/e-b
+const muiVariants = [
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+    'subtitle1', 'subtitle2',
+    'body1', 'body2',
+    'caption', 'overline',
+];
+// 지원하는 variant만 명확히 제한
+const variantList = [
+    ...Array.from({ length: 13 }, (_, i) => `e-r${i + 1}`),
+    ...Array.from({ length: 13 }, (_, i) => `e-m${i + 1}`),
+    ...Array.from({ length: 13 }, (_, i) => `e-b${i + 1}`),
+    ...muiVariants,
+];
+// z.enum에 [string, ...string[]] 타입으로 변환
+const variantListForEnum = variantList;
+// 1. CommonPalette 색상 그룹과 단계 정의
+const commonPaletteColors = [
+    'gray', 'darkblue', 'blue', 'skyblue', 'green', 'cyan', 'yellow', 'pink', 'purple', 'orange', 'red',
+    // 필요시 etc. 추가
+];
+const commonPaletteDepths = [
+    '100', '200', '300', '400', '500', '600', '700', '800', '900',
+];
+// 2. 모든 조합을 string literal union 타입으로 생성
+const commonPaletteList = commonPaletteColors.flatMap(color => commonPaletteDepths.map(depth => `commonPalette.${color}.${depth}`));
+const commonPaletteListForEnum = commonPaletteList;
+export const TypographySchema = z.object({
+    text: z.string().describe("표시할 텍스트"),
+    variant: z.enum(variantListForEnum).describe("타이포그래피 스타일(variant, e-r1~e-b13만 허용)"),
+    color: z.enum(commonPaletteListForEnum).optional().describe("텍스트 색상 또는 CommonPalette 팔레트 값만 허용 (예: commonPalette.green.300)"),
+    theme: z.enum([
+        "primary", "secondary", "warning", "success", "error", "info", "description", "disabled"
+    ]).optional().describe("테마 색상"),
+    align: z.enum([
+        "inherit", "left", "center", "right", "justify"
+    ]).optional().describe("정렬 방식"),
+    gutterBottom: z.boolean().optional().describe("하단 마진 추가 여부"),
+    noWrap: z.boolean().optional().describe("텍스트 줄바꿈 방지 여부"),
+    paragraph: z.boolean().optional().describe("paragraph 스타일 적용 여부"),
+    component: z.string().optional().describe("커스텀 태그(component) 지정"),
+    textDecoration: z.string().optional().describe("텍스트 데코레이션(underline 등)"),
+    textTransform: z.string().optional().describe("텍스트 변환(uppercase 등)"),
+});
+export function createTypographyComponent() {
+    return [
+        {
+            name: "createTypography",
+            description: `타이포그래피 컴포넌트 - e-r1~e-b13 variant만 지원
+      
+      - variant: e-r1~e-b13만 허용
+      - 예제 테이블 스타일에 맞는 Typography만 생성 가능
+
+      \`\`\`javascript
+      import { OpsnowCommonTypography } from '@opsnow-common/opsnow-common-style'
+      \`\`\`
+      `,
+            parameters: TypographySchema,
+            handler: async (args) => {
+                const props = [`variant="${args.variant}"`];
+                if (args.color)
+                    props.push(`color="${args.color}"`);
+                if (args.theme)
+                    props.push(`theme="${args.theme}"`);
+                if (args.align)
+                    props.push(`align="${args.align}"`);
+                if (args.gutterBottom)
+                    props.push(`gutterBottom`);
+                if (args.noWrap)
+                    props.push(`noWrap`);
+                if (args.paragraph)
+                    props.push(`paragraph`);
+                if (args.component)
+                    props.push(`component="${args.component}"`);
+                if (args.textDecoration)
+                    props.push(`textDecoration="${args.textDecoration}"`);
+                if (args.textTransform)
+                    props.push(`textTransform="${args.textTransform}"`);
+                const propsString = props.join(' ');
+                const code = `<OpsnowCommonTypography ${propsString}>${args.text}</OpsnowCommonTypography>`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        }
+    ];
+}