@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.40 → 1.0.41

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

@@ -492,9 +492,8 @@ export const DataGridExamples = [
         defaultColDef={defaultColDef}
         rowData={rowData}
         status={status} // 상태를 전달
-        gridOptions={gridOptions}
+        gridOptions={{ ...gridOptions, pinnedTopRowData }} // pinned row는 gridOptions로 전달
         pagination={true}
-        pinnedTopRowData={pinnedTopRowData} // pinned row 전달
         langCd={i18n.getLocale()}
       />`
     },
@@ -1271,8 +1270,6 @@ export const DataGridExamples = [
             // 달력 컴포넌트를 searchAddon에 전달
             searchAddon={
               <OpsnowCommonDatePicker
-                clearable={true}
-                placeholderText="날짜를 선택해주세요"
                 type="date"
                 value={time}
                 onChange={onChangeMonth}
@@ -2309,7 +2306,7 @@ export const DataGridExamples = [
         animateRows: true,
         rowSelection: { mode: 'singleRow', checkboxes: false, enableClickSelection: true },
         tooltipShowDelay: 100,
-        domLayout: 'autoHeight',  // 그리드 전체 레이아웃 자동 높이
+        domLayout: 'autoHeight',  // 콘텐츠 높이에 맞춤, 최대 maxGridHeight(기본 600px)까지, 넘치면 내부 스크롤
         suppressCellFocus: true,
       }
 
@@ -2326,15 +2323,12 @@ export const DataGridExamples = [
         />`
     },
     {
-        title: 'Auto Row Height (행 수 분기 + 스크롤)',
-        description: 'autoHeight는 모든 행을 펼쳐 그리드가 무한정 길어집니다. 행 수가 가변적이거나 많아질 수 있는 경우(목록/검색 결과 등) 행 수 기준으로 분기해야 합니다: 10행 이하면 autoHeight로 콘텐츠에 맞게 확장하고, 10행 초과면 고정 높이 + 내부 스크롤로 전환합니다. autoHeight 셀은 행마다 높이가 달라 정확한 "10행 높이"를 픽셀로 맞출 수 없으므로 고정 픽셀값(예: 600)을 사용합니다.',
+        title: 'Auto Row Height (최대 높이 + 스크롤)',
+        description: 'domLayout: \'autoHeight\'는 행이 적으면 콘텐츠 높이에 맞추고, maxGridHeight(기본 600px, 헤더 42px 포함)를 넘으면 본문에 세로 스크롤이 자동으로 생깁니다(grid ≥2.0.6). 행 수로 domLayout을 분기하지 마세요 — domLayout: \'normal\'을 주면 그리드 높이가 0이 되어 화면에서 사라집니다. 상한은 maxGridHeight로 바꾸고, 모든 행을 펼치려면 unlimitedHeight를 씁니다. 고정 높이가 필요하면 domLayout 키를 빼고 gridHeight를 지정합니다.',
         code_props_usage: `
       import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
       import i18n from '@opsnow-common/opsnow-finops-common-i18n'
 
-      const ROW_LIMIT = 10           // 이 행 수를 넘으면 고정 높이 + 스크롤
-      const SCROLL_HEIGHT = 600      // 초과 시 고정 높이(px)
-
       const columnDefs = [
         { headerName: 'ID', field: 'id', flex: 1, minWidth: 80 },
         {
@@ -2355,10 +2349,10 @@ export const DataGridExamples = [
         autoHeight: true,    // 셀 높이 자동 조절
       }
 
-      const { OpsnowCommonDataGrid } = useCommonComponents()
+      const { OpsnowCommonDataGrid, OpsnowCommonButton } = useCommonComponents()
       const { CommonConst } = useGlobalContext()
 
-      // 4행 데이터 (10행 이하 → autoHeight, 스크롤 없음)
+      // 4행 데이터 (최대 높이 미만 → 콘텐츠 높이, 스크롤 없음)
       const fewRowData = [
         { id: 1, description: 'This is a very long description text that will wrap to multiple lines when the column width is not sufficient to display all content in a single line.', status: 'Active' },
         { id: 2, description: 'Short text', status: 'Inactive' },
@@ -2366,8 +2360,8 @@ export const DataGridExamples = [
         { id: 4, description: 'Another example of long text content that needs multiple lines', status: 'Active' },
       ]
 
-      // 12행 데이터 (10행 초과 → 고정 높이 600px + 내부 스크롤)
-      const manyRowData = Array.from({ length: 12 }, (_, i) => ({
+      // 30행 데이터 (최대 높이 초과 → 600px에서 잘리고 내부 스크롤)
+      const manyRowData = Array.from({ length: 30 }, (_, i) => ({
         id: i + 1,
         description: 'Row ' + (i + 1) + ': long description text that wraps to multiple lines when the column is narrow, demonstrating autoHeight with scroll.',
         status: i % 2 === 0 ? 'Active' : 'Inactive',
@@ -2389,20 +2383,19 @@ export const DataGridExamples = [
         fetchData()
       }, [])
 
-      // 행 수 기준 분기 - 핵심
-      const isScroll = rowData.length > ROW_LIMIT
+      // 행 수와 무관하게 autoHeight 하나만 — 높이 상한은 그리드가 처리
       const gridOptions = {
         animateRows: true,
         rowSelection: { mode: 'singleRow', checkboxes: false, enableClickSelection: true },
         tooltipShowDelay: 100,
-        domLayout: isScroll ? 'normal' : 'autoHeight',  // 10행 이하: 콘텐츠 맞춤 / 초과: 고정+스크롤
+        domLayout: 'autoHeight',
         suppressCellFocus: true,
       }
     `,
         code: `<>
-          <div style={{ marginBottom: '8px', display: 'flex', gap: '8px' }}>
+          <div style={{ marginBottom: 'var(--opsnow-spacing-filter-label-gap)', display: 'flex', gap: 'var(--opsnow-spacing-filter-label-gap)' }}>
             <OpsnowCommonButton label="4행 (스크롤 X)" size="large" variant="outlined" color="secondary" onClick={() => setRowData(fewRowData)} />
-            <OpsnowCommonButton label="12행 (스크롤 O)" size="large" variant="outlined" color="secondary" onClick={() => setRowData(manyRowData)} />
+            <OpsnowCommonButton label="30행 (스크롤 O)" size="large" variant="outlined" color="secondary" onClick={() => setRowData(manyRowData)} />
           </div>
           <OpsnowCommonDataGrid
             columnDefs={columnDefs}
@@ -2410,7 +2403,7 @@ export const DataGridExamples = [
             rowData={rowData}
             status={status}
             gridOptions={gridOptions}
-            gridHeight={isScroll ? SCROLL_HEIGHT : undefined}
+            maxGridHeight={600}   // 기본값과 같음. 상한을 바꾸려면 이 값만 조정 (모두 펼치려면 unlimitedHeight)
             langCd={i18n.getLocale()}
           />
         </>`

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

@@ -2,10 +2,10 @@
 export const GridLayoutExamples = [
     {
         title: '4열 그리드 레이아웃',
-        description: 'Wrap="nowrap"와 간격 토큰(pagePadding·sectionGap·cardPadding·cardGap)을 적용한 4열 레이아웃 예제입니다. 색상 토큰처럼 theme.commonSpacing 을 참조하며 px 하드코딩하지 않습니다.',
+        description: 'MUI 9 Grid size 문법과 간격 토큰(pagePadding·sectionGap·cardPadding·cardGap)을 적용한 4열 레이아웃 예제입니다. 섹션 간격은 Grid spacing에 토큰 CSS 변수로 지정합니다(sx gap은 size 폭 계산에 들어가지 않아 줄바꿈이 깨짐). 색상 토큰처럼 theme.commonSpacing 을 참조하며 px 하드코딩하지 않습니다.',
         code: `
-<Grid container wrap="nowrap" spacing={0} sx={theme => ({ padding: theme.commonSpacing.pagePadding, gap: theme.commonSpacing.sectionGap })}>
-  <Grid item xs={12} sm={6} md={3} key={0}>
+<Grid container spacing="var(--opsnow-spacing-section-gap)" sx={theme => ({ padding: theme.commonSpacing.pagePadding })}>
+  <Grid size={{ xs: 12, sm: 6, md: 3 }} key={0}>
     <Box sx={theme => ({
       border: '1px solid #ddd',
       borderRadius: '12px',
@@ -17,8 +17,7 @@ export const GridLayoutExamples = [
     })}>
     </Box>
   </Grid>
-  <!-- 총 4개 아이템 반복 -->
-  <!-- ... -->
+  {/* 총 4개 아이템 반복 (sm: 2열, md: 4열) */}
 </Grid>
 `,
     },
@@ -26,12 +25,12 @@ export const GridLayoutExamples = [
         title: '2열 그리드 레이아웃',
         description: '2개의 박스를 한 줄에 배치하는 예제입니다.',
         code: `
-<Grid container wrap="nowrap" spacing={0} sx={theme => ({ padding: theme.commonSpacing.pagePadding, gap: theme.commonSpacing.sectionGap })}>
-  <Grid item xs={12} md={6} key={0}>
+<Grid container spacing="var(--opsnow-spacing-section-gap)" sx={theme => ({ padding: theme.commonSpacing.pagePadding })}>
+  <Grid size={{ xs: 12, md: 6 }} key={0}>
     <Box sx={{ /* 동일한 스타일 */ }}>
     </Box>
   </Grid>
-  <Grid item xs={12} md={6} key={1}>
+  <Grid size={{ xs: 12, md: 6 }} key={1}>
     <Box sx={{ /* 동일한 스타일 */ }}>
     </Box>
   </Grid>
@@ -42,16 +41,16 @@ export const GridLayoutExamples = [
         title: '3열 그리드 레이아웃',
         description: '3개의 박스를 한 줄에 배치하는 예제입니다.',
         code: `
-<Grid container wrap="nowrap" spacing={0} sx={theme => ({ padding: theme.commonSpacing.pagePadding, gap: theme.commonSpacing.sectionGap })}>
-  <Grid item xs={12} md={4} key={0}>
+<Grid container spacing="var(--opsnow-spacing-section-gap)" sx={theme => ({ padding: theme.commonSpacing.pagePadding })}>
+  <Grid size={{ xs: 12, md: 4 }} key={0}>
     <Box sx={{ /* 동일한 스타일 */ }}>
     </Box>
   </Grid>
-  <Grid item xs={12} md={4} key={1}>
+  <Grid size={{ xs: 12, md: 4 }} key={1}>
     <Box sx={{ /* 동일한 스타일 */ }}>
     </Box>
   </Grid>
-  <Grid item xs={12} md={4} key={2}>
+  <Grid size={{ xs: 12, md: 4 }} key={2}>
     <Box sx={{ /* 동일한 스타일 */ }}>
     </Box>
   </Grid>
@@ -61,7 +60,7 @@ export const GridLayoutExamples = [
     {
         title: 'Tile with Checkbox UI',
         description: 'Tile 내부에 체크박스와 텍스트가 포함된 2열 레이아웃 예제입니다.',
-        code: `<Grid container spacing={3} sx={{ marginTop: '20px' }}><Grid item xs={12} md={6} sx={{ display: 'flex' }}><OpsnowCommonTile sx={{ width: '100%' }}><OpsnowCommonTile.Content><Stack direction="row" alignItems="flex-start" spacing={2}><OpsnowCommonCheckbox name="organizationScope" checked={checkboxStates.organizationScope} onChange={handleCheckboxChange} color="primary" /><Stack spacing={1}><OpsnowCommonTypography variant="e-b10">Use Organization Scope(Cost Allocation)</OpsnowCommonTypography><OpsnowCommonTypography variant="e-r11" color="commonPalette.gray.600">The same scope defined in Organization Settings is used as the baseline for Budget and KPI tracking.</OpsnowCommonTypography></Stack></Stack></OpsnowCommonTile.Content></OpsnowCommonTile></Grid><Grid item xs={12} md={6} sx={{ display: 'flex' }}><OpsnowCommonTile sx={{ width: '100%' }}><OpsnowCommonTile.Content><Stack direction="row" alignItems="flex-start" spacing={2}><OpsnowCommonCheckbox name="customizeScope" checked={checkboxStates.customizeScope} onChange={handleCheckboxChange} color="primary" /><Stack spacing={1}><OpsnowCommonTypography variant="e-b10">Customize Scope</OpsnowCommonTypography><OpsnowCommonTypography variant="e-r11" color="commonPalette.gray.600">Apply only to selected dimensions, such as specific services (e.g., EC2)</OpsnowCommonTypography></Stack></Stack></OpsnowCommonTile.Content></OpsnowCommonTile></Grid></Grid>`,
+        code: `<Grid container spacing={3} sx={{ marginTop: '20px' }}><Grid size={{ xs: 12, md: 6 }} sx={{ display: 'flex' }}><OpsnowCommonTile><OpsnowCommonTile.Content><Stack direction="row" alignItems="flex-start" spacing={2}><OpsnowCommonCheckbox name="organizationScope" checked={checkboxStates.organizationScope} onChange={handleCheckboxChange} color="primary" /><Stack spacing={1}><OpsnowCommonTypography variant="e-b10">Use Organization Scope(Cost Allocation)</OpsnowCommonTypography><OpsnowCommonTypography variant="e-r11" color="commonPalette.gray.600">The same scope defined in Organization Settings is used as the baseline for Budget and KPI tracking.</OpsnowCommonTypography></Stack></Stack></OpsnowCommonTile.Content></OpsnowCommonTile></Grid><Grid size={{ xs: 12, md: 6 }} sx={{ display: 'flex' }}><OpsnowCommonTile><OpsnowCommonTile.Content><Stack direction="row" alignItems="flex-start" spacing={2}><OpsnowCommonCheckbox name="customizeScope" checked={checkboxStates.customizeScope} onChange={handleCheckboxChange} color="primary" /><Stack spacing={1}><OpsnowCommonTypography variant="e-b10">Customize Scope</OpsnowCommonTypography><OpsnowCommonTypography variant="e-r11" color="commonPalette.gray.600">Apply only to selected dimensions, such as specific services (e.g., EC2)</OpsnowCommonTypography></Stack></Stack></OpsnowCommonTile.Content></OpsnowCommonTile></Grid></Grid>`,
     },
 ];
 export const MegaFilterExamples = [

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

@@ -23,27 +23,27 @@ export const PopupExamples = [
     },
     {
         title: 'Footer 버튼 커스텀',
-        code: `<OpsnowCommonPopup title="Footer Custom" open={true} onClose={handleClose} footer={[{ text: '확인', type: 'primary', action: 'onConfirm' }, { text: '취소', type: 'default', action: 'onCancel' }]}>
-  <p>Popup content here</p>
-</OpsnowCommonPopup>`,
-        description: 'footer prop을 통해 하단 버튼을 커스텀하는 예제입니다.'
-    },
-    {
-        title: 'Closable/MaskClosable 옵션',
-        code: `<OpsnowCommonPopup title="Closable Popup" open={true} onClose={handleClose} closable={false} maskClosable={false}>
+        code: `<OpsnowCommonPopup
+  title="Footer Custom"
+  open={true}
+  onClose={handleClose}
+  confirmButton={{ text: '확인', variant: 'contained' }}
+  cancelButton={{ text: '취소', variant: 'outlined' }}
+  onConfirm={handleConfirm}
+>
   <p>Popup content here</p>
 </OpsnowCommonPopup>`,
-        description: '닫기 버튼과 마스크 클릭으로 닫기 비활성화 예제입니다.'
+        description: '하단 버튼은 confirmButton/cancelButton 객체({ text, variant, disabled, color })로 커스텀합니다. 취소 버튼은 기본 표시(useFooterCancelBtn 기본 true)이며 onClose가 호출됩니다. footer prop은 없습니다.'
     },
     {
-        title: 'Position(위치) 지정',
-        code: `<OpsnowCommonPopup title="Bottom Popup" open={true} onClose={handleClose} position="bottom">
+        title: '헤더 닫기(X) 버튼 숨김',
+        code: `<OpsnowCommonPopup title="No Close Button" open={true} onClose={handleClose} hideHeaderClose>
   <p>Popup content here</p>
 </OpsnowCommonPopup>`,
-        description: '팝업 위치를 bottom으로 지정한 예제입니다.'
+        description: 'hideHeaderClose로 헤더의 닫기(X) 버튼을 숨깁니다. closable/maskClosable prop은 없습니다.'
     },
     {
-        title: 'Wing 타입, 작은 사이즈 + cancel/confirm + disableEscapeKeyDown',
+        title: 'Wing 타입, 작은 사이즈 + cancel/confirm',
         code: `<OpsnowCommonPopup
   title="Example Popup"
   open={true}
@@ -52,11 +52,10 @@ export const PopupExamples = [
   cancelButton={{ variant: 'outlined' }}
   confirmButton={{ color: 'primary', text: 'Save' }}
   type="wing"
-  disableEscapeKeyDown
 >
   <p>Popup content here</p>
 </OpsnowCommonPopup>`,
-        description: 'wing 타입, 작은 사이즈(sm)에 cancel/confirm 버튼과 disableEscapeKeyDown 옵션을 적용한 예제입니다.'
+        description: 'wing 타입, 작은 사이즈(sm)에 cancel/confirm 버튼을 적용한 예제입니다. (ESC·배경 클릭으로 닫히지 않게 하는 옵션은 없음 — onClose가 reason을 받지 않음)'
     },
     {
         title: 'Wing 타입, md, Special Title & Footer Action Button',
@@ -188,18 +187,5 @@ export const PopupExamples = [
   <p>Popup content here</p>
 </OpsnowCommonPopup>`,
         description: 'bottom 타입에서 cancelButton과 confirmButton을 사용하는 예제입니다.'
-    },
-    {
-        title: '고정 크기(width/height)',
-        code: `<OpsnowCommonPopup
-  title="Size Popup"
-  open={true}
-  onClose={handleClose}
-  width={400}
-  height={300}
->
-  <p>Popup content here</p>
-</OpsnowCommonPopup>`,
-        description: '팝업의 너비와 높이를 고정(px)으로 지정하는 예제입니다.'
     }
 ];

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

@@ -5,11 +5,6 @@ export const ProgressExamples = [
         code: `<OpsnowCommonProgress value={50} />`,
         description: "50% 진행률을 보여주는 기본 Progress 예제입니다.",
     },
-    {
-        title: "value-size",
-        code: `<OpsnowCommonProgress value={50} size={32}/>`,
-        description: "사이즈가 32이고 value가 50인 기본 Progress 예제입니다.",
-    },
     {
         title: "value-inherit",
         code: `<OpsnowCommonProgress value={75} color="inherit" />`,

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

@@ -62,12 +62,11 @@ export const StepperExamples = [
         description: 'Simplified stepper view without connectors.'
     },
     {
-        title: 'Right-aligned Stepper with Custom Connector',
+        title: 'Right-aligned Stepper',
         code: `<OpsnowCommonStepper
   steps={steps}
   activeStep={activeStepRight}
   align="right"
-  connector={<CustomConnector />}
 >
   <OpsnowCommonStepContent stepIndex={0}>
     <TextField label="Input 1" variant="outlined" fullWidth value={input1} onChange={(e) => setInput1(e.target.value)} />
@@ -79,7 +78,7 @@ export const StepperExamples = [
     <Typography>This is the content for Step 3</Typography>
   </OpsnowCommonStepContent>
 </OpsnowCommonStepper>`,
-        description: 'Stepper aligned to the right with a custom connector style.'
+        description: 'Stepper aligned to the right. (커넥터는 내부에서 고정되어 connector prop으로 바꿀 수 없음)'
     },
     {
         title: 'Vertical Non-linear Stepper',

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

@@ -1,8 +1,27 @@
-// Storage 컴포넌트 예제 데이터
+// Storage 예제 데이터 (컴포넌트가 아니라 useGlobalContext()의 스토리지 API)
 export const StorageExamples = [
     {
-        title: '기본 스토리지',
-        code: `<OpsnowCommonStorage />`,
-        description: '기본 스토리지 예제입니다.'
+        title: '로컬 스토리지 읽기/쓰기',
+        code: `const { commonUILocalStorage } = useGlobalContext()
+
+// 저장: 문자열·숫자·객체 모두 가능 (객체는 내부에서 직렬화)
+commonUILocalStorage.setItem('cost-filter', { vendor: 'AWS', period: '3M' })
+
+// 읽기: 파싱된 값 반환, 없으면 null
+const saved = commonUILocalStorage.getItem('cost-filter')
+
+// 삭제 / 접두사로 일괄 삭제
+commonUILocalStorage.removeItem('cost-filter')
+commonUILocalStorage.clear('cost-')`,
+        description: 'localStorage 래퍼입니다. import { useGlobalContext } from \'@opsnow-common/opsnow-finops-common-ui-loader\' 후 함수 컴포넌트 안에서 꺼내 씁니다. 그 밖에 getItemsByPrefix(prefix), getKeysByPrefix(prefix), setItemByApi(...)(API 응답 캐시), 암호화 저장(setItem의 secretKey 인자)을 지원합니다.'
+    },
+    {
+        title: '세션 스토리지 읽기/쓰기',
+        code: `const { commonUISessionStorage } = useGlobalContext()
+
+commonUISessionStorage.setItem('wizard-step', 2)
+const step = commonUISessionStorage.getItem('wizard-step') ?? 0
+commonUISessionStorage.removeItem('wizard-step')`,
+        description: 'sessionStorage 래퍼입니다. getItem, setItem, removeItem, clear 4개만 제공합니다 (clear는 접두사 인자 없음).'
     }
 ];

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

@@ -52,29 +52,9 @@ export const TooltipExamples = [
         code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom" enterDelay={1000}><Button>Hover me</Button></OpsnowCommonTooltip>`,
         description: "툴팁 열림 지연 시간 예제입니다.",
     },
-    {
-        title: "titleProps.title-bottom-enterTouchDelay",
-        code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom" enterTouchDelay={1000}><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "툴팁 열림 터치 지연 시간 예제입니다.",
-    },
-    {
-        title: "titleProps.title-bottom-enterNextDelay",
-        code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom" enterNextDelay={1000}><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "툴팁 열림 다음 지연 시간 예제입니다.",
-    },
     {
         title: "titleProps.title-bottom-leaveDelay",
         code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom" leaveDelay={1000}><Button>Hover me</Button></OpsnowCommonTooltip>`,
         description: "툴팁 닫힘 지연 시간 예제입니다.",
-    },
-    {
-        title: "titleProps.title-bottom-leaveNextDelay",
-        code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom" leaveNextDelay={1000}><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "툴팁 닫힘 다음 지연 시간 예제입니다.",
-    },
-    {
-        title: "titleProps.title-bottom-green",
-        code: `<OpsnowCommonTooltip title="툴팁 내용" placement="bottom" color={'green'}><Button>Hover me</Button></OpsnowCommonTooltip>`,
-        description: "툴팁 색상 예제입니다.",
-    },
+    }
 ];

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

@@ -3,12 +3,12 @@ import { z } from "zod";
 export const CalendarSchema = z.object({
     // 캘린더 관련 파라미터들
     type: z
-        .enum(["date", "dateRange", "dateTime", "dateTimeRange"])
-        .describe("단일 날짜, 날짜 범위, 날짜 + 시간 타입 중 선택"),
+        .enum(["date", "dateRange", "dateTime", "dateTimeRange", "time"])
+        .describe("단일 날짜, 날짜 범위, 날짜 + 시간, 시간만(time — TimePicker) 중 선택"),
     views: z
         .array(z.enum(["month", "year", "day", "hours", "minutes", "seconds"]))
         .optional()
-        .describe("캘린더 뷰 타입 (여러개 선택 가능)"),
+        .describe("캘린더 뷰 타입 (여러개 선택 가능). date·dateRange·dateTimeRange는 day/month/year만, time은 hours/minutes/seconds만 유효. 월 단위 레인지는 type: 'dateRange' + views: ['year', 'month']"),
     activate: z
         .boolean()
         .describe("캘린더 전체 활성화/비활성화 (false시 전체 캘린더 사용 불가)"),
@@ -16,8 +16,17 @@ export const CalendarSchema = z.object({
         .array(z.string())
         .optional()
         .describe("캘린더는 활성화된 상태에서 특정 날짜만 비활성화 (YYYY-MM-DD 형식 배열)"),
-    minDate: z.string().optional().describe("최소 날짜 (YYYY-MM-DD 형식)"),
-    maxDate: z.string().optional().describe("최대 날짜 (YYYY-MM-DD 형식)"),
+    minDate: z.string().optional().describe("최소 날짜 (YYYY-MM-DD 형식) — 생성기 입력. 실제 prop 타입은 Dayjs이므로 직접 작성 시 minDate={dayjs('2026-01-01')}"),
+    maxDate: z.string().optional().describe("최대 날짜 (YYYY-MM-DD 형식) — 생성기 입력. 실제 prop 타입은 Dayjs이므로 직접 작성 시 maxDate={dayjs('2026-12-31')}"),
+    // 이하 실제 DatePicker prop
+    value: z.string().optional().describe("선택값 상태 변수명. 단일 타입은 Dayjs | null, range 타입은 [Dayjs | null, Dayjs | null]"),
+    disabled: z.boolean().optional().describe("캘린더 전체 비활성화"),
+    shouldDisableDate: z.string().optional().describe("특정 날짜 비활성화 함수명 ((date: Dayjs) => boolean)"),
+    format: z.string().optional().describe("입력 표시 포맷 (예: 'YYYY-MM-DD')"),
+    disablePast: z.boolean().optional().describe("오늘 이전 날짜 선택 불가"),
+    disableFuture: z.boolean().optional().describe("오늘 이후 날짜 선택 불가"),
+    readOnly: z.boolean().optional().describe("읽기 전용"),
+    size: z.enum(["small", "medium"]).optional().describe("입력 필드 크기"),
     // useShortcusts 부분
     useShortcuts: z
         .boolean()
@@ -54,9 +63,10 @@ export const CalendarSchema = z.object({
         message: "Reset일 때는 num, direction 없이 사용하고, Months/Weeks/Days 때는 num과 direction을 모두 설정하세요.",
     }))
         .optional()
-        .describe("커스텀 쇼트컷 - 기본 쇼트컷 대신 사용자가 원하는 날짜 범위 버튼들을 직접 설정 (예: {num: 2, date: 'Months', direction: 'Last'}, {date: 'Reset'}). ⚠️ type이 'dateRange'일 때만 동작 (다른 타입에서는 무시됨)"),
+        .describe("커스텀 쇼트컷 - 기본 쇼트컷 대신 사용자가 원하는 날짜 범위 버튼들을 직접 설정 (예: {num: 2, date: 'Months', direction: 'Last'}, {date: 'Reset'}). ⚠️ type이 'dateRange'일 때만 동작 (다른 타입에서는 무시됨). ⚠️ 이 {num, date, direction} 형식은 생성기 입력이고, 실제 prop은 [{ label: string, getValue: () => [Dayjs, Dayjs] }] — 직접 작성 시 이 형식으로"),
     locale: z.enum(["ko", "en", "ja", "zh"]).optional().describe("달력 표시 언어 로케일 ('ko' | 'en' | 'ja' | 'zh'). 생성 코드는 항상 i18n.getLocale()과 연동된 locale 상태를 자동 전달하므로 보통 지정 불필요. 특정 언어로 고정하려면 생성된 코드의 locale 값을 직접 수정"),
     onChange: z.string().optional().describe("날짜 선택(변경) 시 호출되는 콜백 - 라이브러리 prop으로 (newValue, context) 인자를 받음. 생성 코드에 setSelectedDate 기반 onChange 핸들러가 항상 자동 포함되므로 보통 지정 불필요. 추가 로직은 생성된 onChange 내부에 덧붙이면 됨"),
+    copilotId: z.string().optional().describe("Copilot 연동 ID — Copilot 매니페스트의 bind.copilotId와 매칭되어 AI가 이 컨트롤을 조작할 수 있게 함. useCommonComponents()로 받은 컴포넌트에서만 동작(로더 HOC가 소비 후 제거)"),
 });
 // Calendar 컴포넌트 함수 - 배열 반환
 export function createCalendarComponent() {
@@ -83,6 +93,7 @@ export function createCalendarComponent() {
     \`\`\`javascript
     import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
     import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+    import dayjs from 'dayjs' // calendar 2.x의 peer 의존성 — 앱 package.json에 dayjs 설치 필요
     const { OpsnowCommonDatePicker } = useCommonComponents();
     \`\`\``,
             parameters: CalendarSchema,
@@ -157,10 +168,13 @@ export function createCalendarComponent() {
                     functionDefinitions += `]\n\n`;
                 }
                 // Props 생성
+                const isRangeType = !!args.type && args.type.includes("Range");
+                const valueVar = isRangeType ? "selectedDateRange" : "selectedDate";
+                const setValueFn = isRangeType ? "setSelectedDateRange" : "setSelectedDate";
                 const props = [];
                 if (args.type)
                     props.push(`type="${args.type}"`);
-                props.push(`value={selectedDate}`);
+                props.push(`value={${valueVar}}`);
                 if (!args.activate) {
                     props.push(`disabled={${!args.activate}}`);
                     props.push(`onChange={(newValue) => {
@@ -171,13 +185,13 @@ export function createCalendarComponent() {
                     props.push(`shouldDisableDate={disableSpecificDates}`);
                     props.push(`onChange={(newValue) => {
              console.log('Selected Date with specific disabled dates:', newValue)
-             setSelectedDate(newValue)
+             ${setValueFn}(newValue)
            }}`);
                 }
                 else {
                     props.push(`onChange={(newValue) => {
             console.log('Selected ${args.type}:', newValue)
-            setSelectedDate(newValue)
+            ${setValueFn}(newValue)
           }}`);
                 }
                 if (args.minDate)
@@ -191,8 +205,15 @@ export function createCalendarComponent() {
                 if (isDateRangeType && args.customShortcuts)
                     props.push(`customShortcuts={customShortcuts}`);
                 props.push(`locale={locale}`);
-                if (args.views)
-                    props.push(`views={[${args.views.map((view) => `'${view}'`).join(", ")}]}`);
+                // range·date 타입은 day/month/year 뷰만 허용
+                const dayOnlyViews = isRangeType || args.type === "date";
+                const views = dayOnlyViews
+                    ? args.views?.filter((view) => ["day", "month", "year"].includes(view))
+                    : args.type === "time"
+                        ? args.views?.filter((view) => ["hours", "minutes", "seconds"].includes(view))
+                        : args.views;
+                if (views && views.length > 0)
+                    props.push(`views={[${views.map((view) => `'${view}'`).join(", ")}]}`);
                 const datePickerCode = `<OpsnowCommonDatePicker ${props.join(" ")} />`;
                 // OpsnowCommonDatePicker 아래 <p> 태그 생성
                 const generateSelectedDateCode = () => {
@@ -200,21 +221,21 @@ export function createCalendarComponent() {
                         return "";
                     const isTime = args.type.includes("Time");
                     const isRange = args.type.includes("Range");
-                    const format = isTime ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD";
+                    const format = args.type === "time" ? "HH:mm" : 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]
+           ${label}: {selectedDateRange[0] && selectedDateRange[1]
              ? \`\${selectedDateRange[0].format('${format}')} ~ \${selectedDateRange[1].format('${format}')}\`
              : 'None'}
          </p>`;
                     }
                     else {
-                        const label = isTime ? "Selected DateTime" : "Selected Date";
+                        const label = args.type === "time" ? "Selected Time" : isTime ? "Selected DateTime" : "Selected Date";
                         return `<p>
-           ${label}: \${selectedDate ? selectedDate.format('${format}') : 'None'}
+           ${label}: {selectedDate ? selectedDate.format('${format}') : 'None'}
          </p>`;
                     }
                 };