@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.39 → 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()}
           />
         </>`
@@ -2476,4 +2469,262 @@ export const DataGridExamples = [
           langCd={i18n.getLocale()}
         />`
     },
+    {
+        title: '셀 단위 로딩 (Partial Loading — refreshCells) + 컬럼 전체 / 실패·재시도',
+        description: '"이 셀만 갱신 중" 같은 부분 로딩 예제입니다. status={GRID_STATUS.LOADING}은 그리드 전체를 가리므로 부분 로딩에 쓸 수 없습니다 — status는 DATA_EXISTS로 두고, 로딩 중인 셀 키를 useRef(Set)에 담은 뒤 ref API refreshCells({ rowNodes, columns, force: true })로 해당 셀만 다시 그립니다. 값이 그대로라 force: true가 필수입니다. rowNodes를 생략하면 그 컬럼의 모든 셀이 대상(컬럼 단위)이며, 실패도 같은 패턴(별도 Set)으로 처리해 인라인 "재시도" 링크를 띄웁니다. 인디케이터로 셀 콘텐츠를 치환하지 말고 visibility: hidden으로 남기고 겹쳐야(CellProgress) autoHeight 행 높이가 유지됩니다.',
+        code_props_usage: `
+      import { useCallback, useMemo, useRef, useState } from 'react'
+      import Box from '@mui/material/Box'
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // 원래 콘텐츠를 hidden 으로 남겨 행 높이를 유지하고 인디케이터를 겹친다 (모듈 최상위에 둘 것)
+      const CellProgress = ({ children }) => {
+        const { OpsnowCommonLoading } = useCommonComponents()
+        return (
+          <Box sx={{ position: 'relative', display: 'inline-flex', alignItems: 'center', minWidth: '18px', minHeight: '20px' }}>
+            <Box aria-hidden sx={{ visibility: 'hidden' }}>{children}</Box>
+            <Box sx={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center' }}>
+              <OpsnowCommonLoading size={18} />
+            </Box>
+          </Box>
+        )
+      }
+
+      const formatCost = (value) => '$' + Number(value).toLocaleString()
+      const fakeApi = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+      const { OpsnowCommonDataGrid, OpsnowCommonButton, OpsnowCommonLink } = useCommonComponents()
+      const { CommonConst } = useGlobalContext()
+      const gridRef = useRef(null)
+
+      const [rowData] = useState([
+        { id: 'r1', account: 'opsnow-prod', service: 'Amazon EC2', cost: 12480 },
+        { id: 'r2', account: 'opsnow-dev', service: 'Amazon S3', cost: 3120 },
+        { id: 'r3', account: 'opsnow-stg', service: 'Amazon RDS', cost: 8640 },
+      ])
+      const status = CommonConst.GRID_STATUS.DATA_EXISTS
+
+      // state 가 아니라 ref — state 면 그리드 전체 리렌더로 스크롤이 튄다
+      const loadingCellsRef = useRef(new Set())
+      const errorCellsRef = useRef(new Set())
+
+      const refreshCostCells = useCallback((nodes) => {
+        gridRef.current?.refreshCells({
+          rowNodes: nodes,
+          columns: ['cost'],
+          force: true,   // 값이 그대로라 필수
+        })
+      }, [])
+
+      const fetchCost = useCallback(async (node) => {
+        const key = node.data.id + ':cost'
+        loadingCellsRef.current.add(key)
+        errorCellsRef.current.delete(key)
+        refreshCostCells([node])
+        try {
+          await fakeApi(1200)
+          if (node.data.id === 'r3' && !node.data.retried) {   // 데모: 첫 시도만 실패
+            node.data.retried = true
+            throw new Error('cost fetch failed')
+          }
+          node.setDataValue('cost', Math.round(node.data.cost * (0.9 + Math.random() * 0.3)))
+        } catch {
+          errorCellsRef.current.add(key)
+        } finally {
+          loadingCellsRef.current.delete(key)
+          refreshCostCells([node])
+        }
+      }, [refreshCostCells])
+
+      const refreshCostColumn = useCallback(async () => {
+        const nodes = []
+        gridRef.current?.forEachNode((node) => nodes.push(node))
+        nodes.forEach((node) => loadingCellsRef.current.add(node.data.id + ':cost'))
+        gridRef.current?.refreshCells({ columns: ['cost'], force: true })   // rowNodes 생략 = 컬럼 단위
+        await Promise.all(nodes.map((node) => fetchCost(node)))
+      }, [fetchCost])
+
+      const CostCell = useCallback((params) => {
+        const value = <span>{formatCost(params.value)}</span>
+        const key = params.data.id + ':' + params.colDef.field
+        if (loadingCellsRef.current.has(key)) return <CellProgress>{value}</CellProgress>
+        if (errorCellsRef.current.has(key)) {
+          // 버튼을 넣으면 행 높이가 바뀜 — 인라인 링크로
+          return (
+            <Box component="span" sx={(theme) => ({ display: 'inline-flex', alignItems: 'center', gap: '6px', color: theme.palette.error.main })}>
+              불러오기 실패
+              <OpsnowCommonLink color="primary" sx={{ cursor: 'pointer' }} onClick={() => fetchCost(params.node)}>재시도</OpsnowCommonLink>
+            </Box>
+          )
+        }
+        return value
+      }, [fetchCost])
+
+      const RecalcButtonCell = useCallback((params) => (
+        <OpsnowCommonButton label="재계산" size="small" variant="outlined" color="secondary" onClick={() => fetchCost(params.node)} />
+      ), [fetchCost])
+
+      // useMemo 로 고정 — 매 렌더마다 새로 만들면 그리드가 통째로 다시 그려진다
+      const columnDefs = useMemo(() => [
+        { headerName: '계정', field: 'account', flex: 1, minWidth: 140 },
+        { headerName: '서비스', field: 'service', flex: 1, minWidth: 160 },
+        { headerName: '비용', field: 'cost', flex: 1, minWidth: 200, cellRenderer: CostCell },
+        { headerName: '', colId: 'action', width: 110, sortable: false, cellRenderer: RecalcButtonCell },
+      ], [CostCell, RecalcButtonCell])
+
+      const gridOptions = useMemo(() => ({
+        domLayout: 'autoHeight',
+        suppressCellFocus: true,
+        animateRows: true,
+      }), [])
+    `,
+        code: `<>
+          <div style={{ marginBottom: '16px' }}>
+            <OpsnowCommonButton label="비용 컬럼 새로고침 (컬럼 전체)" size="large" variant="outlined" color="secondary" onClick={refreshCostColumn} />
+          </div>
+          <OpsnowCommonDataGrid
+            ref={gridRef}
+            langCd={i18n.getLocale()}
+            columnDefs={columnDefs}
+            rowData={rowData}
+            status={status}
+            gridOptions={gridOptions}
+          />
+        </>`
+    },
+    {
+        title: '행 단위 로딩 (Partial Loading — rowClassRules + redrawRows) + 선택 행 일괄 로딩',
+        description: '"이 행만 동기화 중" 같은 행 단위 부분 로딩 예제입니다. 로딩 중인 행 id를 useRef(Set)에 담고, gridOptions.rowClassRules로 그 행에 클래스를 붙여 dim + 클릭 차단하며, ref API redrawRows({ rowNodes })로 해당 행만 다시 그리면 rowClassRules가 재평가됩니다. 인디케이터는 컬럼 렌더러를 감싸 행 전체 컬럼(버튼 컬럼 포함)에 적용해야 로딩 중 행 높이가 유지됩니다. 여러 행(체크박스 선택)을 켤 때는 rowNodes 배열로 묶어 redrawRows를 한 번만 호출하고, 끌 때는 응답이 온 행부터 개별 해제합니다. 선택 노드는 forEachNode + node.isSelected()로 수집하고(getSelectedNodes는 ref API에 없음), onSelectionChanged는 gridOptions가 아니라 top-level prop으로 넘겨야 호출됩니다(인자 = 선택된 노드 배열).',
+        code_props_usage: `
+      import { useCallback, useMemo, useRef, useState } from 'react'
+      import Box from '@mui/material/Box'
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // '셀 단위 로딩' 예제와 동일
+      const CellProgress = ({ children }) => {
+        const { OpsnowCommonLoading } = useCommonComponents()
+        return (
+          <Box sx={{ position: 'relative', display: 'inline-flex', alignItems: 'center', minWidth: '18px', minHeight: '20px' }}>
+            <Box aria-hidden sx={{ visibility: 'hidden' }}>{children}</Box>
+            <Box sx={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center' }}>
+              <OpsnowCommonLoading size={18} />
+            </Box>
+          </Box>
+        )
+      }
+
+      const fakeApi = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+      const nowLabel = () => new Date().toLocaleTimeString()
+
+      const { OpsnowCommonDataGrid, OpsnowCommonButton } = useCommonComponents()
+      const { CommonConst } = useGlobalContext()
+      const gridRef = useRef(null)
+
+      const [rowData] = useState([
+        { id: 'r1', account: 'opsnow-prod', service: 'Amazon EC2', status: '동기화 완료' },
+        { id: 'r2', account: 'opsnow-dev', service: 'Amazon S3', status: '동기화 완료' },
+        { id: 'r3', account: 'opsnow-stg', service: 'Amazon RDS', status: '동기화 완료' },
+      ])
+      const status = CommonConst.GRID_STATUS.DATA_EXISTS
+
+      const loadingRowsRef = useRef(new Set())
+      const [selectedCount, setSelectedCount] = useState(0)
+      const [running, setRunning] = useState(false)
+
+      const setRowLoading = useCallback((node, loading) => {
+        if (loading) loadingRowsRef.current.add(node.data.id)
+        else loadingRowsRef.current.delete(node.data.id)
+        gridRef.current?.redrawRows({ rowNodes: [node] })   // rowClassRules 재평가
+      }, [])
+
+      const refreshRow = useCallback(async (node) => {
+        setRowLoading(node, true)
+        try {
+          await fakeApi(1800)
+          node.setDataValue('status', '동기화 ' + nowLabel())
+        } finally {
+          setRowLoading(node, false)
+        }
+      }, [setRowLoading])
+
+      const syncSelectedRows = useCallback(async () => {
+        const nodes = []
+        gridRef.current?.forEachNode((node) => { if (node.isSelected()) nodes.push(node) })   // getSelectedNodes 없음
+        if (nodes.length === 0) return
+        setRunning(true)
+        nodes.forEach((node) => loadingRowsRef.current.add(node.data.id))
+        gridRef.current?.redrawRows({ rowNodes: nodes })   // 묶어서 한 번만
+        await Promise.all(nodes.map(async (node, index) => {
+          await fakeApi(1000 + index * 600)
+          node.setDataValue('status', '동기화 ' + nowLabel())
+          loadingRowsRef.current.delete(node.data.id)
+          gridRef.current?.redrawRows({ rowNodes: [node] })
+        }))
+        setRunning(false)
+      }, [])
+
+      // defaultColDef 는 마운트 시점에 굳으므로 컬럼 렌더러를 감싼다
+      const withRowLoading = useCallback((Renderer) => {
+        const Wrapped = (params) => {
+          const content = Renderer ? <Renderer {...params} /> : <span>{params.value}</span>
+          return loadingRowsRef.current.has(params.data?.id) ? <CellProgress>{content}</CellProgress> : content
+        }
+        return Wrapped
+      }, [])
+
+      const RefreshButtonCell = useCallback((params) => (
+        <OpsnowCommonButton label="행 새로고침" size="small" variant="outlined" color="secondary" onClick={() => refreshRow(params.node)} />
+      ), [refreshRow])
+
+      // 감싼 렌더러는 useMemo 안에서 한 번만 만든다
+      const columnDefs = useMemo(() => {
+        const valueCell = withRowLoading()
+        return [
+          { headerName: '계정', field: 'account', flex: 1, minWidth: 140, cellRenderer: valueCell },
+          { headerName: '서비스', field: 'service', flex: 1, minWidth: 160, cellRenderer: valueCell },
+          { headerName: '상태', field: 'status', flex: 1, minWidth: 180, cellRenderer: valueCell },
+          // 버튼 컬럼도 감싸야 행 높이가 유지된다
+          { headerName: '', colId: 'action', width: 140, sortable: false, cellRenderer: withRowLoading(RefreshButtonCell) },
+        ]
+      }, [withRowLoading, RefreshButtonCell])
+
+      const gridOptions = useMemo(() => ({
+        domLayout: 'autoHeight',
+        suppressCellFocus: true,
+        animateRows: true,
+        rowSelection: { mode: 'multiRow', checkboxes: true, headerCheckbox: true, enableClickSelection: false },
+        rowClassRules: {
+          'row-loading': (params) => loadingRowsRef.current.has(params.data?.id),
+        },
+      }), [])
+
+      // gridOptions 가 아니라 top-level prop — 인자는 선택된 노드 배열
+      const handleSelectionChanged = useCallback((selectedNodes) => {
+        setSelectedCount(selectedNodes.length)
+      }, [])
+    `,
+        code: `<Box sx={{ '& .ag-row.row-loading': { opacity: 0.45, pointerEvents: 'none' } }}>
+          <div style={{ marginBottom: '16px' }}>
+            <OpsnowCommonButton
+              label={'선택 행 동기화 (' + selectedCount + ')'}
+              size="large"
+              variant="outlined"
+              color="secondary"
+              disabled={selectedCount === 0 || running}
+              onClick={syncSelectedRows}
+            />
+          </div>
+          <OpsnowCommonDataGrid
+            ref={gridRef}
+            langCd={i18n.getLocale()}
+            columnDefs={columnDefs}
+            rowData={rowData}
+            status={status}
+            gridOptions={gridOptions}
+            onSelectionChanged={handleSelectionChanged}
+          />
+        </Box>`
+    },
 ];

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: "툴팁 색상 예제입니다.",
-    },
+    }
 ];