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

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

@@ -0,0 +1,366 @@
+// opsnow-common-typography 예제 데이터
+export const TypographyExamples = [
+    // Regular 예제
+    {
+        title: 'regular-variant-step1',
+        code: `<OpsnowCommonTypography variant="e-r1">e-r1 / 50px</OpsnowCommonTypography>`,
+        description: 'Regular 1단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'regular-variant-step2',
+        code: `<OpsnowCommonTypography variant="e-r2">e-r2 / 40px</OpsnowCommonTypography>`,
+        description: 'Regular 2단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'regular-variant-step3',
+        code: `<OpsnowCommonTypography variant="e-r3">e-r3 / 32px</OpsnowCommonTypography>`,
+        description: 'Regular 3단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'regular-variant-step4',
+        code: `<OpsnowCommonTypography variant="e-r4">e-r4 / 24px</OpsnowCommonTypography>`,
+        description: 'Regular 4단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'regular-variant-step5',
+        code: `<OpsnowCommonTypography variant="e-r5">e-r5 / 22px</OpsnowCommonTypography>`,
+        description: 'Regular 5단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'regular-variant-step6',
+        code: `<OpsnowCommonTypography variant="e-r6">e-r6 / 20px</OpsnowCommonTypography>`,
+        description: 'Regular 6단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'regular-variant-step7',
+        code: `<OpsnowCommonTypography variant="e-r7">e-r7 / 18px</OpsnowCommonTypography>`,
+        description: 'Regular 7단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'regular-variant-step8',
+        code: `<OpsnowCommonTypography variant="e-r8">e-r8 / 16px</OpsnowCommonTypography>`,
+        description: 'Regular 8단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'regular-variant-step9',
+        code: `<OpsnowCommonTypography variant="e-r9">e-r9 / 15px</OpsnowCommonTypography>`,
+        description: 'Regular 9단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'regular-variant-step10',
+        code: `<OpsnowCommonTypography variant="e-r10">e-r10 / 14px</OpsnowCommonTypography>`,
+        description: 'Regular 10단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'regular-variant-step11',
+        code: `<OpsnowCommonTypography variant="e-r11">e-r11 / 13px</OpsnowCommonTypography>`,
+        description: 'Regular 11단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'regular-variant-step12',
+        code: `<OpsnowCommonTypography variant="e-r12">e-r12 / 12px</OpsnowCommonTypography>`,
+        description: 'Regular 12단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'regular-variant-step13',
+        code: `<OpsnowCommonTypography variant="e-r13">e-r13 / 11px</OpsnowCommonTypography>`,
+        description: 'Regular 13단계 타이포그라피 예제입니다.'
+    },
+    // Medium 예제
+    {
+        title: 'medium-variant-step1',
+        code: `<OpsnowCommonTypography variant="e-m1">e-m1 / 50px</OpsnowCommonTypography>`,
+        description: 'Medium 1단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'medium-variant-step2',
+        code: `<OpsnowCommonTypography variant="e-m2">e-m2 / 40px</OpsnowCommonTypography>`,
+        description: 'Medium 2단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'medium-variant-step3',
+        code: `<OpsnowCommonTypography variant="e-m3">e-m3 / 32px</OpsnowCommonTypography>`,
+        description: 'Medium 3단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'medium-variant-step4',
+        code: `<OpsnowCommonTypography variant="e-m4">e-m4 / 24px</OpsnowCommonTypography>`,
+        description: 'Medium 4단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'medium-variant-step5',
+        code: `<OpsnowCommonTypography variant="e-m5">e-m5 / 22px</OpsnowCommonTypography>`,
+        description: 'Medium 5단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'medium-variant-step6',
+        code: `<OpsnowCommonTypography variant="e-m6">e-m6 / 20px</OpsnowCommonTypography>`,
+        description: 'Medium 6단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'medium-variant-step7',
+        code: `<OpsnowCommonTypography variant="e-m7">e-m7 / 18px</OpsnowCommonTypography>`,
+        description: 'Medium 7단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'medium-variant-step8',
+        code: `<OpsnowCommonTypography variant="e-m8">e-m8 / 16px</OpsnowCommonTypography>`,
+        description: 'Medium 8단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'medium-variant-step9',
+        code: `<OpsnowCommonTypography variant="e-m9">e-m9 / 15px</OpsnowCommonTypography>`,
+        description: 'Medium 9단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'medium-variant-step10',
+        code: `<OpsnowCommonTypography variant="e-m10">e-m10 / 14px</OpsnowCommonTypography>`,
+        description: 'Medium 10단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'medium-variant-step11',
+        code: `<OpsnowCommonTypography variant="e-m11">e-m11 / 13px</OpsnowCommonTypography>`,
+        description: 'Medium 11단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'medium-variant-step12',
+        code: `<OpsnowCommonTypography variant="e-m12">e-m12 / 12px</OpsnowCommonTypography>`,
+        description: 'Medium 12단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'medium-variant-step13',
+        code: `<OpsnowCommonTypography variant="e-m13">e-m13 / 11px</OpsnowCommonTypography>`,
+        description: 'Medium 13단계 타이포그라피 예제입니다.'
+    },
+    // Bold 예제
+    {
+        title: 'bold-variant-step1',
+        code: `<OpsnowCommonTypography variant="e-b1">e-b1 / 50px</OpsnowCommonTypography>`,
+        description: 'Bold 1단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'bold-variant-step2',
+        code: `<OpsnowCommonTypography variant="e-b2">e-b2 / 40px</OpsnowCommonTypography>`,
+        description: 'Bold 2단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'bold-variant-step3',
+        code: `<OpsnowCommonTypography variant="e-b3">e-b3 / 32px</OpsnowCommonTypography>`,
+        description: 'Bold 3단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'bold-variant-step4',
+        code: `<OpsnowCommonTypography variant="e-b4">e-b4 / 24px</OpsnowCommonTypography>`,
+        description: 'Bold 4단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'bold-variant-step5',
+        code: `<OpsnowCommonTypography variant="e-b5">e-b5 / 22px</OpsnowCommonTypography>`,
+        description: 'Bold 5단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'bold-variant-step6',
+        code: `<OpsnowCommonTypography variant="e-b6">e-b6 / 20px</OpsnowCommonTypography>`,
+        description: 'Bold 6단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'bold-variant-step7',
+        code: `<OpsnowCommonTypography variant="e-b7">e-b7 / 18px</OpsnowCommonTypography>`,
+        description: 'Bold 7단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'bold-variant-step8',
+        code: `<OpsnowCommonTypography variant="e-b8">e-b8 / 16px</OpsnowCommonTypography>`,
+        description: 'Bold 8단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'bold-variant-step9',
+        code: `<OpsnowCommonTypography variant="e-b9">e-b9 / 15px</OpsnowCommonTypography>`,
+        description: 'Bold 9단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'bold-variant-step10',
+        code: `<OpsnowCommonTypography variant="e-b10">e-b10 / 14px</OpsnowCommonTypography>`,
+        description: 'Bold 10단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'bold-variant-step11',
+        code: `<OpsnowCommonTypography variant="e-b11">e-b11 / 13px</OpsnowCommonTypography>`,
+        description: 'Bold 11단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'bold-variant-step12',
+        code: `<OpsnowCommonTypography variant="e-b12">e-b12 / 12px</OpsnowCommonTypography>`,
+        description: 'Bold 12단계 타이포그라피 예제입니다.'
+    },
+    {
+        title: 'bold-variant-step13',
+        code: `<OpsnowCommonTypography variant="e-b13">e-b13 / 11px</OpsnowCommonTypography>`,
+        description: 'Bold 13단계 타이포그라피 예제입니다.'
+    },
+    // Heading variants
+    {
+        title: 'heading-h1',
+        code: `<OpsnowCommonTypography variant="h1">typography/h1</OpsnowCommonTypography>`,
+        description: 'Heading h1 예제입니다.'
+    },
+    {
+        title: 'heading-h2',
+        code: `<OpsnowCommonTypography variant="h2">typography/h2</OpsnowCommonTypography>`,
+        description: 'Heading h2 예제입니다.'
+    },
+    {
+        title: 'heading-h3',
+        code: `<OpsnowCommonTypography variant="h3">typography/h3</OpsnowCommonTypography>`,
+        description: 'Heading h3 예제입니다.'
+    },
+    {
+        title: 'heading-h4',
+        code: `<OpsnowCommonTypography variant="h4">typography/h4</OpsnowCommonTypography>`,
+        description: 'Heading h4 예제입니다.'
+    },
+    {
+        title: 'heading-h5',
+        code: `<OpsnowCommonTypography variant="h5">typography/h5</OpsnowCommonTypography>`,
+        description: 'Heading h5 예제입니다.'
+    },
+    {
+        title: 'heading-h6',
+        code: `<OpsnowCommonTypography variant="h6">typography/h6</OpsnowCommonTypography>`,
+        description: 'Heading h6 예제입니다.'
+    },
+    // Caption, Overline, Subtitle, Body
+    {
+        title: 'caption-variant',
+        code: `<OpsnowCommonTypography variant="caption">typography/caption</OpsnowCommonTypography>`,
+        description: 'Caption 예제입니다.'
+    },
+    {
+        title: 'overline-variant',
+        code: `<OpsnowCommonTypography variant="overline">typography/overline</OpsnowCommonTypography>`,
+        description: 'Overline 예제입니다.'
+    },
+    {
+        title: 'subtitle1-variant',
+        code: `<OpsnowCommonTypography variant="subtitle1">typography/subtitle1</OpsnowCommonTypography>`,
+        description: 'Subtitle1 예제입니다.'
+    },
+    {
+        title: 'subtitle2-variant',
+        code: `<OpsnowCommonTypography variant="subtitle2">typography/subtitle2</OpsnowCommonTypography>`,
+        description: 'Subtitle2 예제입니다.'
+    },
+    {
+        title: 'body1-variant',
+        code: `<OpsnowCommonTypography variant="body1">typography/body1</OpsnowCommonTypography>`,
+        description: 'Body1 예제입니다.'
+    },
+    {
+        title: 'body2-variant',
+        code: `<OpsnowCommonTypography variant="body2">typography/body2</OpsnowCommonTypography>`,
+        description: 'Body2 예제입니다.'
+    },
+    // Theme variants
+    {
+        title: 'theme-primary',
+        code: `<OpsnowCommonTypography variant="h4" theme="primary">theme=primary</OpsnowCommonTypography>`,
+        description: 'primary 테마 예제입니다.'
+    },
+    {
+        title: 'theme-secondary',
+        code: `<OpsnowCommonTypography variant="h4" theme="secondary">theme=secondary</OpsnowCommonTypography>`,
+        description: 'secondary 테마 예제입니다.'
+    },
+    {
+        title: 'theme-warning',
+        code: `<OpsnowCommonTypography variant="h4" theme="warning">theme=warning</OpsnowCommonTypography>`,
+        description: 'warning 테마 예제입니다.'
+    },
+    {
+        title: 'theme-success',
+        code: `<OpsnowCommonTypography variant="h4" theme="success">theme=success</OpsnowCommonTypography>`,
+        description: 'success 테마 예제입니다.'
+    },
+    {
+        title: 'theme-error',
+        code: `<OpsnowCommonTypography variant="h4" theme="error">theme=error</OpsnowCommonTypography>`,
+        description: 'error 테마 예제입니다.'
+    },
+    {
+        title: 'theme-info',
+        code: `<OpsnowCommonTypography variant="h4" theme="info">theme=info</OpsnowCommonTypography>`,
+        description: 'info 테마 예제입니다.'
+    },
+    {
+        title: 'theme-description',
+        code: `<OpsnowCommonTypography variant="h4" theme="description">theme=description</OpsnowCommonTypography>`,
+        description: 'description 테마 예제입니다.'
+    },
+    {
+        title: 'theme-disabled',
+        code: `<OpsnowCommonTypography variant="h4" theme="disabled">theme=disabled</OpsnowCommonTypography>`,
+        description: 'disabled 테마 예제입니다.'
+    },
+    {
+        title: 'custom-color-green',
+        code: `<OpsnowCommonTypography variant="h4" color="commonPalette.green.300">custom color green.300</OpsnowCommonTypography>`,
+        description: 'custom color green.300 예제입니다.'
+    },
+    {
+        title: 'custom-color-orange',
+        code: `<OpsnowCommonTypography variant="h4" color="commonPalette.orange.300">custom color orange.300</OpsnowCommonTypography>`,
+        description: 'custom color orange.300 예제입니다.'
+    },
+    {
+        title: 'align-right',
+        code: `<OpsnowCommonTypography variant="h4" align="right">text align = right</OpsnowCommonTypography>`,
+        description: 'text align right 예제입니다.'
+    },
+    {
+        title: 'align-center',
+        code: `<OpsnowCommonTypography variant="h4" align="center">text align = center</OpsnowCommonTypography>`,
+        description: 'text align center 예제입니다.'
+    },
+    {
+        title: 'text-decoration',
+        code: `<OpsnowCommonTypography variant="h4" textDecoration="underline">text decoration</OpsnowCommonTypography>`,
+        description: 'text decoration underline 예제입니다.'
+    },
+    {
+        title: 'text-transform',
+        code: `<OpsnowCommonTypography variant="h4" textTransform="uppercase">text transform</OpsnowCommonTypography>`,
+        description: 'text transform uppercase 예제입니다.'
+    },
+    {
+        title: 'page-title',
+        code: `<Box sx={{ mb: 4, p: 3 }}>
+  <Stack spacing={1}>
+    <OpsnowCommonTypography
+      variant="e-b4"
+      color={'#0D0C22'}
+    >
+      Hub
+    </OpsnowCommonTypography>
+    <OpsnowCommonTypography
+      variant="e-r10"
+      color={'#5E6278'}
+    >
+      See a unified summary of your cloud financials, usage trends, and anomalies — across all accounts and providers
+    </OpsnowCommonTypography>
+  </Stack>
+</Box>`,
+        description: '페이지 타이틀 예제입니다. Bold 4단계(e-b4)로 제목을, Regular 10단계(e-r10)로 설명을 표시합니다.'
+    },
+    {
+        title: 'subtitle-with-icon',
+        code: `<Box sx={{ mb: 6, p: 3 }}>
+  <Stack direction="row" alignItems="center" spacing={1}>
+    <OpsnowCommonIcon iconName="PocketMoney" size={24} color={'#2B2F5A'}/>
+    <OpsnowCommonTypography variant="e-m7" color={'#2B2F5A'}>
+      AWS Commitment Savings for
+    </OpsnowCommonTypography>
+  </Stack>
+</Box>`,
+        description: '아이콘이 포함된 서브타이틀 예제입니다. Medium 7단계(e-m7)와 아이콘을 함께 사용합니다.'
+    }
+];

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

@@ -0,0 +1,228 @@
+import { z } from "zod";
+// Calendar 컴포넌트 관련 스키마 정의
+export const CalendarSchema = z.object({
+    // 캘린더 관련 파라미터들
+    type: z
+        .enum(["date", "dateRange", "dateTime", "dateTimeRange"])
+        .describe("단일 날짜, 날짜 범위, 날짜 + 시간 타입 중 선택"),
+    date: z
+        .enum(["month", "week", "day"])
+        .optional()
+        .describe("날짜 (YYYY-MM-DD 형식)"),
+    views: z
+        .array(z.enum(["month", "year", "week", "day", "hours", "minutes", "seconds"]))
+        .optional()
+        .describe("캘린더 뷰 타입 (여러개 선택 가능)"),
+    activate: z
+        .boolean()
+        .describe("캘린더 전체 활성화/비활성화 (false시 전체 캘린더 사용 불가)"),
+    disabledDates: z
+        .array(z.string())
+        .optional()
+        .describe("캘린더는 활성화된 상태에서 특정 날짜만 비활성화 (YYYY-MM-DD 형식 배열)"),
+    minDate: z.string().optional().describe("최소 날짜 (YYYY-MM-DD 형식)"),
+    maxDate: z.string().optional().describe("최대 날짜 (YYYY-MM-DD 형식)"),
+    // useShortcusts 부분
+    useShortcuts: z
+        .boolean()
+        .optional()
+        .describe("쇼트컷 - 달력에서 자주 사용하는 날짜 범위를 빠르게 선택할 수 있는 원클릭 버튼들 표시 여부 (예: 오늘, 어제, 지난 7일, 이번 달 등)"),
+    customShortcuts: z
+        .array(z
+        .object({
+        num: z.number().optional().describe("숫자 (예: 2, 7, 30)"),
+        date: z
+            .enum(["Months", "Weeks", "Days", "Reset"])
+            .optional()
+            .describe("단위 (Months, Weeks, Days, Reset)"),
+        direction: z
+            .enum(["Last", "Next"])
+            .optional()
+            .describe("쇼트컷 방향(예: Last : 지난 달, 지난 3개월, Next : 다음 달, 다음 3개월)"),
+    })
+        .refine((data) => {
+        const hasNum = data.num !== undefined;
+        const hasDate = data.date !== undefined;
+        const hasDirection = data.direction !== undefined;
+        if (data.date === "Reset") {
+            return !hasNum && !hasDirection;
+        }
+        if (data.date && ["Months", "Days"].includes(data.date)) {
+            return hasNum && hasDirection;
+        }
+        if (!hasDate) {
+            return !hasNum && !hasDirection;
+        }
+        return true;
+    }, {
+        message: "Reset일 때는 num, direction 없이 사용하고, Months/Weeks/Days 때는 num과 direction을 모두 설정하세요.",
+    }))
+        .optional()
+        .describe("커스텀 쇼트컷 - 기본 쇼트컷 대신 사용자가 원하는 날짜 범위 버튼들을 직접 설정 (예: {num: 2, date: 'Months', direction: 'Last'}, {date: 'Reset'})"),
+});
+// Calendar 컴포넌트 함수 - 배열 반환
+export function createCalendarComponent() {
+    return [
+        {
+            name: "createCalendar",
+            description: `캘린더 컴포넌트 - 날짜 선택 및 이벤트 관리
+      **주의사항:**
+      - 선택된 날짜를 표시할 때 selectedDate가 null인 경우 'None'으로 표시됩니다.      
+      **사용 예시:**
+      \`\`\`jsx
+      <p>
+        Selected Date: {selectedDate ? selectedDate.format('YYYY-MM-DD') : 'None'}
+      </p>
+      \`\`\`
+    **import:**
+    \`\`\`javascript
+    import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+    import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+    const { OpsnowCommonDatePicker } = useCommonComponents();
+    \`\`\``,
+            parameters: CalendarSchema,
+            handler: async (args) => {
+                // 캘린더 컴포넌트 로직 구현
+                // 함수 정의 생성
+                let functionDefinitions = `const [locale, setLocale] = useState(i18n.getLocale());
+          useEffect(() => {
+          // i18n 라이브러리에서 언어 변경 이벤트 감지하여 상태 업데이트
+          const handleLanguageChange = () => {
+            setLocale(i18n.getLocale())
+          }
+            
+          i18n.on('languageChanged', handleLanguageChange)
+
+          return () => {
+            i18n.off('languageChanged', handleLanguageChange)
+          }
+        }, [])`;
+                if (args.type) {
+                    const isRange = args.type.includes("Range");
+                    if (isRange) {
+                        functionDefinitions += `
+            const [selectedDateRange, setSelectedDateRange] = useState([dayjs(), dayjs()]);
+            `;
+                    }
+                    else {
+                        functionDefinitions += `
+            const [selectedDate, setSelectedDate] = useState(null);
+            `;
+                    }
+                }
+                if (args.disabledDates) {
+                    functionDefinitions += `const disableSpecificDates = (date) => {
+         const disabledDates = ${JSON.stringify(args.disabledDates)}
+         return disabledDates.includes(date.format('YYYY-MM-DD'))
+          }\n`;
+                }
+                // 커스텀 쇼트컷 생성
+                if (args.customShortcuts && args.customShortcuts.length > 0) {
+                    functionDefinitions += `const customShortcuts = [\n`;
+                    args.customShortcuts.forEach((shortcut) => {
+                        if (shortcut.date === "Reset") {
+                            // Reset 버튼
+                            functionDefinitions += `  {\n    label: 'Reset',\n    getValue: () => [null, null],\n  },\n`;
+                        }
+                        else {
+                            // 일반 날짜 계산 버튼
+                            const direction = shortcut.direction;
+                            const unit = shortcut.date;
+                            const num = shortcut.num;
+                            const label = `${direction} ${num} ${unit}`;
+                            if (direction === "Last" && unit) {
+                                if (unit === "Months") {
+                                    functionDefinitions += `  {\n    label: '${label}',\n    getValue: () => {\n      const today = dayjs()\n      return [\n        today.subtract(${num}, '${unit}').startOf('month'),\n        today.subtract(${num}, 'month').endOf('month')\n      ]\n    },\n  },\n`;
+                                }
+                                else {
+                                    functionDefinitions += `  {\n    label: '${label}',\n    getValue: () => {\n      const today = dayjs()\n      return [today.subtract(${num}, '${unit}'), today]\n    },\n  },\n`;
+                                }
+                            }
+                            else if (direction === "Next" && unit) {
+                                if (unit === "Months") {
+                                    functionDefinitions += `  {\n    label: '${label}',\n    getValue: () => {\n      const today = dayjs()\n      return [\n        today.add(${num}, 'month').startOf('month'),\n        today.add(${num}, '${unit}').endOf('month')\n      ]\n    },\n  },\n`;
+                                }
+                                else {
+                                    functionDefinitions += `  {\n    label: '${label}',\n    getValue: () => {\n      const today = dayjs()\n      return [today, today.add(${num}, '${unit}')]\n    },\n  },\n`;
+                                }
+                            }
+                        }
+                    });
+                    functionDefinitions += `]\n\n`;
+                }
+                // Props 생성
+                const props = [];
+                if (args.type)
+                    props.push(`type="${args.type}"`);
+                props.push(`value={selectedDate}`);
+                if (!args.activate) {
+                    props.push(`disabled={${!args.activate}}`);
+                    props.push(`onChange={(newValue) => {
+             console.log('Selected Disabled Date:', newValue)
+           }}`);
+                }
+                else if (args.disabledDates) {
+                    props.push(`shouldDisableDate={disableSpecificDates}`);
+                    props.push(`onChange={(newValue) => {
+             console.log('Selected Date with specific disabled dates:', newValue)
+             setSelectedDate(newValue)
+           }}`);
+                }
+                else {
+                    props.push(`onChange={(newValue) => {
+            console.log('Selected ${args.type}:', newValue)
+            setSelectedDate(newValue)
+          }}`);
+                }
+                if (args.minDate)
+                    props.push(`minDate={dayjs("${args.minDate}")}`);
+                if (args.maxDate)
+                    props.push(`maxDate={dayjs("${args.maxDate}")}`);
+                // customShortcuts가 있으면 useShortcuts는 무조건 true
+                if (args.useShortcuts || args.customShortcuts) {
+                    props.push("useShortcuts");
+                }
+                if (args.customShortcuts)
+                    props.push(`customShortcuts={customShortcuts}`);
+                props.push(`locale={locale}`);
+                if (args.views)
+                    props.push(`views={[${args.views.map((view) => `'${view}'`).join(", ")}]}`);
+                const datePickerCode = `<OpsnowCommonDatePicker ${props.join(" ")} />`;
+                // OpsnowCommonDatePicker 아래 <p> 태그 생성
+                const generateSelectedDateCode = () => {
+                    if (!args.activate || !args.type)
+                        return "";
+                    const isTime = args.type.includes("Time");
+                    const isRange = args.type.includes("Range");
+                    const format = isTime ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD";
+                    if (isRange) {
+                        const label = isTime
+                            ? "Selected DateTime Range"
+                            : "Selected Date Range";
+                        return `<p>
+           ${label}: \${selectedDateRange[0] && selectedDateRange[1]
+             ? \`\${selectedDateRange[0].format('${format}')} ~ \${selectedDateRange[1].format('${format}')}\`
+             : 'None'}
+         </p>`;
+                    }
+                    else {
+                        const label = isTime ? "Selected DateTime" : "Selected Date";
+                        return `<p>
+           ${label}: \${selectedDate ? selectedDate.format('${format}') : 'None'}
+         </p>`;
+                    }
+                };
+                const selectedDateCode = generateSelectedDateCode();
+                const code = `${functionDefinitions}\n${datePickerCode}\n${selectedDateCode}`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``,
+                        },
+                    ],
+                };
+            },
+        },
+    ];
+}