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

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

@@ -0,0 +1,2389 @@
+// DataGrid 컴포넌트 예제 데이터
+export const DataGridExamples = [
+    {
+        title: '기본 데이터 그리드',
+        description: '기본 데이터 그리드 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // 컬럼 정의
+      const columnDefs = [
+        { headerName: 'Make', field: 'make' },
+        { headerName: 'Model', field: 'model' },
+        { headerName: 'Price', field: 'price' },
+      ]
+
+      // 데이터 정의
+      const initRowData = [
+        { make: 'Toyota', model: 'Celica', price: 35000 },
+        { make: 'Ford', model: 'Mondeo', price: 32000 },
+        { make: 'Porsche', model: 'Boxster', price: 72000 }
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        // 체크박스 사용하고 싶지 않으면 checkboxes 를 false로 해야됨.
+        // enableClickSelection: 행 선택은 활성화 시키고 싶으면 true로 설정
+        rowSelection: { mode: 'singleRow', checkboxes: false, enableClickSelection: true },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+      const gridRef = useRef(null)
+
+      // 데이터 지연 설정을 위한 useEffect
+      useEffect(() => {
+        // 1초 후에 데이터를 설정
+        const timeoutId = setTimeout(() => {
+          setRowData(initRowData)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+
+        // 컴포넌트 언마운트 시 타임아웃 클리어
+        return () => {
+          clearTimeout(timeoutId)
+        }
+      }, [])
+    `,
+        code: `<OpsnowCommonDataGrid
+          key={status}
+          columnDefs={columnDefs}
+          rowData={rowData}
+          status={status} // 상태를 전달
+          gridOptions={gridOptions}
+          langCd={i18n.getLocale()}
+        />`
+    },
+    {
+        title: 'Search + Pagination 추가',
+        description: 'Search + Pagination 추가 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // 컬럼 정의
+      const columnDefs = [
+        { headerName: 'Make', field: 'make' },
+        { headerName: 'Model', field: 'model' },
+        { headerName: 'Price', field: 'price' },
+      ]
+
+      // 데이터 정의
+      const initRowData = [
+        { make: 'Toyota', model: 'Celica', price: 35000 },
+        { make: 'Ford', model: 'Mondeo', price: 32000 },
+        { make: 'Porsche', model: 'Boxster', price: 72000 }
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        // 체크박스 사용하고 싶지 않으면 checkboxes 를 false로 해야됨.
+        // enableClickSelection: 행 선택은 활성화 시키고 싶으면 true로 설정
+        rowSelection: { mode: 'singleRow', checkboxes: false, enableClickSelection: true },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+      const gridRef = useRef(null)
+
+      // 데이터 지연 설정을 위한 useEffect
+      useEffect(() => {
+        // 1초 후에 데이터를 설정
+        const timeoutId = setTimeout(() => {
+          setRowData(initRowData)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+
+        // 컴포넌트 언마운트 시 타임아웃 클리어
+        return () => {
+          clearTimeout(timeoutId)
+        }
+      }, [])
+    `,
+        code: `<OpsnowCommonDataGrid
+          columnDefs={columnDefs}
+          rowData={rowData}
+          status={status} // 상태를 전달
+          gridOptions={gridOptions}
+          usedSearch={true}
+          pagination={true}
+          langCd={i18n.getLocale()}
+        />`
+    },
+    {
+        title: 'Insert Button Inside the Common Grid Search Section',
+        description: 'Insert Button Inside the Common Grid Search Section 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // 컬럼 정의
+      const columnDefs = [
+        { headerName: 'Make', field: 'make' },
+        { headerName: 'Model', field: 'model' },
+        { headerName: 'Price', field: 'price' },
+      ]
+
+      // 데이터 정의
+      const initRowData = [
+        { make: 'Toyota', model: 'Celica', price: 35000 },
+        { make: 'Ford', model: 'Mondeo', price: 32000 },
+        { make: 'Porsche', model: 'Boxster', price: 72000 }
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        // 체크박스 사용하고 싶지 않으면 checkboxes 를 false로 해야됨.
+        // enableClickSelection: 행 선택은 활성화 시키고 싶으면 true로 설정
+        rowSelection: { mode: 'singleRow', checkboxes: false, enableClickSelection: true },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+      }
+
+      const { OpsnowCommonDataGrid, OpsnowCommonButton } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+      const gridRef = useRef(null)
+
+      // 데이터 지연 설정을 위한 useEffect
+      useEffect(() => {
+        // 1초 후에 데이터를 설정
+        const timeoutId = setTimeout(() => {
+          setRowData(initRowData)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+
+        // 컴포넌트 언마운트 시 타임아웃 클리어
+        return () => {
+          clearTimeout(timeoutId)
+        }
+      }, [])
+
+      // 다운로드 핸들러
+      const downloadTest = () => {
+        if (gridRef.current) {
+          gridRef.current.downloadExcel('test.xlsx')
+          // 또는 CSV 다운로드
+          // gridRef1.current.downloadCsv('test.csv')
+        }
+      }
+    `,
+        code: `<OpsnowCommonDataGrid
+          ref={gridRef}
+          columnDefs={columnDefs}
+          rowData={rowData}
+          status={status} // 상태를 전달
+          gridOptions={gridOptions}
+          usedSearch={true}
+          pagination={true}
+          langCd={i18n.getLocale()}
+        >
+          <OpsnowCommonButton
+            label={'Download Excel'}
+            size="large"
+            variant="outlined"
+            color="secondary"
+            onClick={downloadTest}
+            style={{ marginRight: '8px' }}
+          />
+          <OpsnowCommonButton
+            label={'Download CSV'}
+            size="large"
+            variant="outlined"
+            color="secondary"
+            onClick={() => gridRef.current?.downloadCsv('test.csv')}
+          />
+        </OpsnowCommonDataGrid>`
+    },
+    {
+        title: 'Header Filter, Tooltip, Sort',
+        description: 'Header Filter, Tooltip, Sort 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // 컬럼 정의
+      const columnDefs = [
+        {
+          headerName: 'Make',
+          field: 'make',
+          colId: 'make',
+          headerComponentParams: { tooltipInfoText: 'Percentage Share of Sales' },
+        },
+        {
+          headerName: 'Model',
+          field: 'model',
+          colId: 'model',
+        },
+        {
+          headerName: 'Price',
+          field: 'price',
+          colId: 'price',
+          headerComponentParams: { filter: true },
+          // sortable: false,
+        },
+        {
+          headerName: 'Test1',
+          field: 'test1',
+          colId: 'test1',
+          headerComponentParams: {
+            tooltipInfoText: 'test22',
+            tooltipField: 'title',
+            filter: true,
+            filterParams: { showTooltips: true },
+          },
+        },
+      ]
+
+      // 데이터 정의
+      const initRowData = [
+        {
+          make: 'Toyota',
+          model: 'Celica',
+          price: 35000,
+          test1: 'abc',
+          test2: 'def'
+        },
+        {
+          make: 'Ford',
+          model: 'Mondeo',
+          price: 32000,
+          test1: 'abc',
+          test2: 'def'
+        },
+        {
+          make: 'Porsche',
+          model: 'Boxter',
+          price: 72000,
+          test1: 'abc',
+          test2: 'def'
+        },
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        rowSelection: { mode: 'multiRow', enableSelectionWithoutKeys: true, headerCheckbox: true },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+      }
+
+      const defaultColDef = {
+        wrapText: true,
+        autoHeight: true,
+        suppressMenu: true,
+        unSortIcon: true,
+        sortable: true,
+      }
+
+      const { OpsnowCommonDataGrid, OpsnowCommonButton } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+      const gridRef = useRef(null)
+
+      // 데이터 지연 설정을 위한 useEffect
+      useEffect(() => {
+        // 1초 후에 데이터를 설정
+        const timeoutId = setTimeout(() => {
+          setRowData(initRowData)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+
+        // 컴포넌트 언마운트 시 타임아웃 클리어
+        return () => {
+          clearTimeout(timeoutId)
+        }
+      }, [])
+
+      const filterClickTest = (columnName, data) => {
+        if (gridRef.current) {
+          gridRef.current.updateFilter(columnName, data)
+        }
+      }
+    `,
+        code: `<OpsnowCommonDataGrid
+          ref={gridRef}
+          key={status}
+          columnDefs={columnDefs}
+          defaultColDef={defaultColDef}
+          rowData={rowData}
+          status={status} // 상태를 전달
+          gridOptions={gridOptions}
+          langCd={i18n.getLocale()}
+        >
+          <OpsnowCommonButton
+            label={'Filter click'}
+            size="large"
+            variant="outlined"
+            color="secondary"
+            onClick={() => filterClickTest('test2', ['def', 'def1'])}
+            style={{ marginRight: '8px' }}
+          />
+        </OpsnowCommonDataGrid>`
+    },
+    {
+        title: 'Custom Header and Number Tooltip',
+        description: 'Custom Header and Number Tooltip 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+      import UserCustomHeaderCellRenderer from './renderer/UserCustomCellRenderer.jsx'
+
+      // 날짜 범위 정의
+      const dateRange = [
+        '2024-11-05',
+        '2024-11-06',
+        '2024-11-07'
+      ]
+
+      // 데이터 정의
+      const initRowData = [
+        {
+          'displayItem': 'OpsNow - NOS (557892227155)',
+          'item': '557892227155',
+          'total': 31102.50521165911,
+          'share': '34.08',
+          '2024-11-05': 519.7175092481002,
+          '2024-11-06': 609.6942034389001,
+          '2024-11-07': 519.8121360272003
+        },
+        {
+          'displayItem': 'OpsNow - PRD (216093335544)',
+          'item': '216093335544',
+          'total': 30617.525577458808,
+          'share': '33.55',
+          '2024-11-05': 1211.0008080524017,
+          '2024-11-06': 1044.3593467060014,
+          '2024-11-07': 1019.0596313015008
+        },
+        {
+          'displayItem': '766276932394 (766276932394)',
+          'item': '766276932394',
+          'total': 4723.605532871798,
+          'share': '5.18',
+          '2024-11-05': 0,
+          '2024-11-06': 0,
+          '2024-11-07': 0
+        },
+      ]
+
+      // 컬럼 정의
+      const columnDefs = [
+        {
+          headerName: 'Display Item',
+          field: 'displayItem',
+          pinned: 'left',
+          width: 300,
+          minWidth: 300,
+        },
+        {
+          headerName: 'Total Spend',
+          field: 'total',
+          pinned: 'left',
+          type: ['number', 'mixFormat'],
+          cellRendererParams: (params) => {
+            // any 대신 ICellRendererParams<RowData, number> 사용
+            // params.value가 number인지 확인하는 타입 가드
+            if (typeof params.value === 'number' && params.value > 4500) {
+              return {
+                typeParams: { isPercent: true },
+              }
+            }
+
+            return {
+              typeParams: { currency: 'USD' },
+            }
+          },
+        },
+        ...dateRange.map((element) => ({
+          headerName: element,
+          field: element,
+          width: 150,
+          minWidth: 150,
+          type: ['number', 'cost', 'numberTooltip'],
+          cellRendererParams: {
+            typeParams: {
+              currency: 'USD',
+              iconRight: true,
+            },
+          },
+          headerComponent: UserCustomHeaderCellRenderer,
+          headerComponentParams: { dropdownList: dateRange, defaultValue: element },
+        })),
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        rowSelection: { mode: 'multiRow', enableSelectionWithoutKeys: true },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+      }
+
+      const defaultColDef = {
+        wrapText: true,
+        autoHeight: true,
+        suppressMenu: true,
+        unSortIcon: true,
+        sortable: true,
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+      const [pinnedTopRowData, setPinnedTopRowData] = useState(null)
+      const gridRef = useRef(null)
+
+      // 데이터 지연 설정을 위한 useEffect
+      useEffect(() => {
+        const timeoutId = setTimeout(() => {
+          // (1) totalCost를 직접 계산하거나 임의로 지정
+          const totalCost = 99999.99
+
+          // (2) totalItem 생성
+          const totalItem = {
+            displayItem: 'Total',
+            total: totalCost,
+            share: totalCost === 0 ? '0' : '100.00',
+          }
+
+          // (3) 날짜별 합계 계산 → totalItem에 해당 날짜 키로 저장
+          dateRange.forEach((date) => {
+            totalItem[date] = initRowData.reduce((acc, obj) => {
+              return acc + (obj[date] || 0)
+            }, 0)
+          })
+
+          // (4) 기존 rowData 끝에 totalItem 추가
+          const newRowData = [...initRowData, totalItem]
+
+          // (5) pinned top row로 totalItem 설정
+          setPinnedTopRowData([totalItem])
+
+          // (6) setRowData 호출 → 실제 데이터 그리드 표에 표시될 rowData 갱신
+          setRowData(newRowData)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+
+        return () => {
+          clearTimeout(timeoutId)
+        }
+      }, [])
+    `,
+        code: `<OpsnowCommonDataGrid
+        ref={gridRef}
+        key={status}
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
+        rowData={rowData}
+        status={status} // 상태를 전달
+        gridOptions={gridOptions}
+        pagination={true}
+        pinnedTopRowData={pinnedTopRowData} // pinned row 전달
+        langCd={i18n.getLocale()}
+      />`
+    },
+    {
+        title: 'Using a three-dots header with a custom header (including filter and sort)',
+        description: 'Using a three-dots header with a custom header (including filter and sort) 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+      import SingleHeaderTwoLineCustomHeader from './renderer/SingleHeaderTwoLineCustomHeader' // 커스텀 헤더 컴포넌트
+
+      // 기본 컬럼 정의
+      const defaultColDef = {
+        wrapText: true,
+        autoHeight: true,
+        suppressMenu: true, // 개별 컬럼에서 메뉴를 노출하려면 재설정할 예정
+        resizable: true,
+        sortable: false,
+        unSortIcon: true,
+      }
+
+      // 컬럼 정의 (custom header 사용)
+      const columnDefs = [
+        {
+          headerName: 'Days (Values Not Provided)',
+          field: 'days',
+          headerComponent: SingleHeaderTwoLineCustomHeader,
+          headerComponentParams: {
+            displayData1: 'P1 (8/8-15)',
+            isUsedMenuFilter: false, // 필터 버튼은 노출하지 않음
+          },
+          sortable: true,
+        },
+        {
+          headerName: 'Numbers',
+          field: 'numbers',
+          // 필요한 경우 suppressHeaderMenuButton 등 추가 옵션 적용 가능
+        },
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        suppressCellFocus: true,
+        suppressPaginationPanel: true,
+        rowSelection: { mode: 'singleRow', checkboxes: false, enableSelectionWithoutKeys: true },
+        domLayout: 'autoHeight',
+        suppressMenuHide: false, // 마우스 오버 없이 메뉴 버튼 항상 표시 (필요시 조정)
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+      const gridRef = useRef(null)
+
+      // 데이터 지연 설정을 위한 useEffect
+      useEffect(() => {
+        const timeoutId = setTimeout(() => {
+          setRowData(getRowData())
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+
+        return () => {
+          clearTimeout(timeoutId)
+        }
+      }, [])
+
+      // 행 데이터 생성 함수
+      const getRowData = () => {
+        const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
+        const rows = []
+        for (let i = 0; i < 200; i++) {
+          const index = Math.floor(Math.random() * weekdays.length)
+          rows.push({ days: weekdays[index], numbers: index })
+        }
+        return rows
+      }
+    `,
+        code: `<OpsnowCommonDataGrid
+        ref={gridRef}
+        key={status}
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
+        rowData={rowData}
+        status={status} // 상태 전달
+        gridOptions={gridOptions}
+        usedSearch={true}
+        usedMenuItem={true}
+        langCd={i18n.getLocale()}
+      />`
+    },
+    {
+        title: 'Master / Detail Cell',
+        description: 'Master / Detail Cell 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+      import DetailCellRenderer from './renderer/DetailCellRenderer' // 커스텀 헤더 컴포넌트
+
+      // 컬럼 정의 (custom header 사용)
+      const columnDefs = [
+        {
+          field: 'make',
+          pinned: 'left',
+          lockPinned: true,
+          // AG Grid의 그룹 셀 렌더러 (마스터-디테일에서 그룹 펼치기/접기 사용)
+          cellRenderer: 'agGroupCellRenderer',
+        },
+        { field: 'model' },
+        { field: 'price' },
+        { field: 'test1' },
+        { field: 'test2' },
+      ]
+      
+      // 데이터 정의
+      const initRowData = [
+        { make: 'Total', price: 3948475 },
+        { make: 'Toyota', model: 'Celica', price: 35000, test1: 'test1', test2: 'test2' },
+        { make: 'Ford', model: 'Mondeo', price: 32000, test1: 'test1', test2: 'test2' },
+        { make: 'Porsche', model: 'Boxster', price: 72000, test1: 'test1', test2: 'test2' }
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        //rowSelection: { mode: 'multiRow', checkboxes: false, headerCheckbox: false },
+        masterDetail: true,
+        domLayout: 'autoHeight',
+        detailCellRenderer: DetailCellRenderer,
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+
+      // 마운트 시점에 데이터 로딩 시뮬레이션
+      useEffect(() => {
+        const timer = setTimeout(() => {
+          setRowData(initRowData)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+
+        return () => clearTimeout(timer)
+      }, [])
+    `,
+        code: `<OpsnowCommonDataGrid
+        columnDefs={columnDefs}
+        rowData={rowData}
+        status={status}
+        gridOptions={gridOptions}
+        langCd={i18n.getLocale()}
+      />`
+    },
+    {
+        title: 'No Data',
+        description: 'No Data 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // 컬럼 정의 (custom header 사용)
+      const columnDefs = [
+        { headerName: 'Make', field: 'make' },
+        { headerName: 'Model', field: 'model' },
+        { headerName: 'Price', field: 'price' },
+      ]
+
+      const defaultColDef = {
+        wrapText: true,
+        autoHeight: true,
+        suppressMenu: true,
+        unSortIcon: true,
+        sortable: false,
+      }
+
+      const gridOptions = {
+        animateRows: true,
+        domLayout: 'autoHeight',
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+    `,
+        code: `<OpsnowCommonDataGrid
+          columnDefs={columnDefs}
+          rowData={[]}
+          gridOptions={gridOptions}
+          status={CommonConst.GRID_STATUS.DATA_EXISTS}
+          defaultColDef={defaultColDef}
+          langCd={i18n.getLocale()}
+        />`
+    },
+    {
+        title: 'Custom No Data',
+        description: 'Custom No Data 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+      import CustomNoData from './renderer/CustomNoData'
+
+      // 컬럼 정의 (custom header 사용)
+      const columnDefs = [
+        { headerName: 'Make', field: 'make' },
+        { headerName: 'Model', field: 'model' },
+        { headerName: 'Price', field: 'price' },
+      ]
+
+      const defaultColDef = {
+        wrapText: true,
+        autoHeight: true,
+        suppressMenu: true,
+        unSortIcon: true,
+        sortable: false,
+      }
+
+      const gridOptions = {
+        animateRows: true,
+        domLayout: 'autoHeight',
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+    `,
+        code: `<OpsnowCommonDataGrid
+          columnDefs={columnDefs}
+          rowData={[]}
+          gridOptions={gridOptions}
+          status={CommonConst.GRID_STATUS.DATA_EXISTS}
+          defaultColDef={defaultColDef}
+          noDataCustomComponent={CustomNoData}
+          langCd={i18n.getLocale()}
+        />`
+    },
+    {
+        title: 'Pivot, Sidebar',
+        description: 'Pivot, Sidebar 예제입니다. 피벗이나 사이드바를 사용할 때는 높이가 항상 고정되어야 함(autoHeight는 허용되지 않음).',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // defaultColDef
+      const defaultColDef = {
+        suppressMenu: true,
+        unSortIcon: false,
+        sortable: false,
+        flex: 1,
+      }
+
+      // 컬럼 정의
+      const columnDefs = [
+        {
+          field: 'company_name',
+          rowGroup: true,
+          enableRowGroup: true,
+          enablePivot: true,
+        },
+        {
+          field: 'linked_account_id',
+          rowGroup: true,
+          pivot: true,
+          enableRowGroup: true,
+          enablePivot: true,
+        },
+        {
+          field: 'product_name',
+          rowGroup: true,
+          enableRowGroup: true,
+          enablePivot: true,
+        },
+        {
+          field: 'region_name',
+          rowGroup: true,
+          enableRowGroup: true,
+          enablePivot: true,
+        },
+        {
+          field: 'instance_family',
+          rowGroup: true,
+          enableRowGroup: true,
+          enablePivot: true,
+        },
+        {
+          field: 'on_demand_cost',
+          aggFunc: 'sum',
+          enableValue: true,
+          type: ['number', 'cost', 'numberTooltip'],
+          cellRendererParams: {
+            typeParams: {
+              currency: 'USD',
+            },
+          },
+        },
+        {
+          field: 'savings_plans_on_demand_cost_equivalent',
+          aggFunc: 'sum',
+          enableValue: true,
+          type: ['number', 'cost', 'numberTooltip'],
+          cellRendererParams: {
+            typeParams: {
+              currency: 'USD',
+            },
+          },
+        },
+        {
+          field: 'total_on_demand_cost_equivalent',
+          aggFunc: 'sum',
+          enableValue: true,
+          type: ['number', 'cost', 'numberTooltip'],
+          cellRendererParams: {
+            typeParams: {
+              currency: 'USD',
+            },
+          },
+        },
+      ]
+
+      // 데이터 정의
+      const initRowData = [
+        {
+          "company_name": "smilegate",
+          "linked_account_id": "008969382493",
+          "product_name": "EC2",
+          "region_name": "Asia Pacific (Tokyo)",
+          "instance_family": "t2",
+          "on_demand_cost": 0,
+          "savings_plans_on_demand_cost_equivalent": 80.79280000000004,
+          "total_on_demand_cost_equivalent": 80.79280000000004
+        },
+        {
+          "company_name": "smilegate",
+          "linked_account_id": "008969382493",
+          "product_name": "EC2",
+          "region_name": "Asia Pacific (Tokyo)",
+          "instance_family": "t3",
+          "on_demand_cost": 0,
+          "savings_plans_on_demand_cost_equivalent": 120.71359999999994,
+          "total_on_demand_cost_equivalent": 120.71359999999994
+        },
+        {
+          "company_name": "smilegate",
+          "linked_account_id": "050451403493",
+          "product_name": "EC2",
+          "region_name": "Asia Pacific (Seoul)",
+          "instance_family": "t2",
+          "on_demand_cost": 0,
+          "savings_plans_on_demand_cost_equivalent": 10.655999999999997,
+          "total_on_demand_cost_equivalent": 10.655999999999997
+        }
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        suppressCellFocus: true,
+        suppressPaginationPanel: true,
+        rowSelection: { mode: 'singleRow', enableClickSelection: true },
+        pivotMode: true, // pivot 기본 활성
+        autoGroupColumnDef: { minWidth: 300, sortable: false },
+        sideBar: 'columns', // 사이드바 활성
+        groupDefaultExpanded: -1,
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+
+      // 데이터 지연 설정을 위한 useEffect
+      useEffect(() => {
+        // 1초 후에 데이터를 설정
+        const timeoutId = setTimeout(() => {
+          setRowData(initRowData)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+
+        // 컴포넌트 언마운트 시 타임아웃 클리어
+        return () => {
+          clearTimeout(timeoutId)
+        }
+      }, [])
+    `,
+        code: `<OpsnowCommonDataGrid
+            rowData={currentDataList}
+            columnDefs={columnDefs}
+            defaultColDef={defaultColDef}
+            status={gridStatus}
+            gridOptions={gridOptions}
+            useOpsnowUs={true}
+            usedSearch={true}
+            gridHeight={800} // 높이 고정
+            langCd={i18n.getLocale()}
+          />`
+    },
+    {
+        title: 'Ratio Bar',
+        description: 'Ratio Bar 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // 컬럼 정의
+      const columnDefs = [
+        { headerName: 'Make', field: 'make', colId: 'make' },
+        { headerName: 'Model', field: 'model', colId: 'model' },
+        { headerName: 'Price', field: 'price', colId: 'price' },
+        {
+          headerName: 'Share',
+          field: 'shareRatio',
+          colId: 'shareRatio', // colId 추가
+          resizable: true,
+          cellStyle: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          },
+          width: 200,
+          minWidth: 150,
+          maxWidth: 200,
+          headerComponentParams: { tooltipInfoText: 'Percentage Share of Sales' }, // tooltipInfoText 수정
+          type: ['ratioBar'],
+          cellRendererParams: {
+            typeParams: {
+              value: {
+                type: 'ratio',
+              },
+              label: {
+                postfix: '%',
+                location: 'right',
+              },
+            },
+          },
+        },
+        {
+          headerName: 'Cost Composition by Type',
+          field: 'totalCost',
+          colId: 'totalCost', // colId 추가
+          resizable: true,
+          cellStyle: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          },
+          width: 230,
+          minWidth: 230,
+          maxWidth: 260,
+          type: ['ratioBar'],
+          cellRendererParams: {
+            typeParams: {
+              fields: ['riCost', 'spCost'],
+              value: {
+                type: 'value',
+              },
+            },
+          },
+        },
+      ]
+
+      // 데이터 정의
+      const initRowData = [
+        {
+          make: 'Toyota',
+          model: 'Celica',
+          price: 35000,
+          spCost: '2.5',
+          riCost: 20.5,
+          totalCost: 50.0,
+          shareRatio: 40,
+        },
+        {
+          make: 'Ford',
+          model: 'Mondeo',
+          price: 32000,
+          spCost: '3.0',
+          riCost: 15.0,
+          totalCost: 45.0,
+          shareRatio: 35,
+        },
+        {
+          make: 'Porsche',
+          model: 'Boxter',
+          price: 72000,
+          spCost: '4.0',
+          riCost: 25.0,
+          totalCost: 70.0,
+          shareRatio: 50,
+        }
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        rowSelection: { mode: 'multiRow' },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+      }
+
+      const defaultColDef = {
+        wrapText: true,
+        autoHeight: true,
+        suppressMenu: true,
+        unSortIcon: true,
+        sortable: true,
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+      const gridRef = useRef(null)
+
+      // 데이터 지연 설정을 위한 useEffect
+      useEffect(() => {
+        // 1초 후에 데이터를 설정
+        const timeoutId = setTimeout(() => {
+          setRowData(initRowData)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+
+        // 컴포넌트 언마운트 시 타임아웃 클리어
+        return () => {
+          clearTimeout(timeoutId)
+        }
+      }, [])
+    `,
+        code: `<OpsnowCommonDataGrid
+            ref={gridRef}
+            key={status}
+            columnDefs={columnDefs}
+            defaultColDef={defaultColDef}
+            rowData={rowData}
+            status={status} // 상태를 전달
+            gridOptions={gridOptions}
+            langCd={i18n.getLocale()}
+          />`
+    },
+    {
+        title: 'Data Bar',
+        description: 'Excel 스타일의 Data Bar 예제입니다. 셀 배경에 값에 비례하는 막대를 표시합니다. 월별 비용 데이터를 시각화하는 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // 월별 비용 데이터
+      const initRowData = [
+        { product: 'Amazon Elastic Compute Cloud', cost_202410: 11255, cost_202411: 18464, cost_202412: 17335, cost_202501: 18731, cost_202502: 20358, cost_202503: 27291 },
+        { product: 'Amazon CloudFront', cost_202410: 10055, cost_202411: 13741, cost_202412: 12527, cost_202501: 14702, cost_202502: 17044, cost_202503: 23615 },
+        { product: 'AWS Data Transfer', cost_202410: 13308, cost_202411: 18896, cost_202412: 16358, cost_202501: 16044, cost_202502: 15475, cost_202503: 21206 },
+        { product: 'Amazon Relational Database Service', cost_202410: 12057, cost_202411: 13592, cost_202412: 12883, cost_202501: 11609, cost_202502: 10681, cost_202503: 13413 },
+        { product: 'AmazonCloudWatch', cost_202410: 11107, cost_202411: 6883, cost_202412: 6623, cost_202501: 6391, cost_202502: 6295, cost_202503: 8128 },
+        { product: 'Amazon Managed Streaming for Apache Kafka', cost_202410: 5555, cost_202411: 5423, cost_202412: 5555, cost_202501: 6131, cost_202502: 6193, cost_202503: 7631 },
+        { product: 'Elastic Load Balancing', cost_202410: 2482, cost_202411: 4760, cost_202412: 3651, cost_202501: 4464, cost_202502: 4219, cost_202503: 6394 },
+        { product: 'AWS WAF', cost_202410: 3714, cost_202411: 4362, cost_202412: 3768, cost_202501: 3490, cost_202502: 3776, cost_202503: 4905 },
+      ]
+
+      // 월 필드 목록
+      const monthFields = [
+        'cost_202410', 'cost_202411', 'cost_202412',
+        'cost_202501', 'cost_202502', 'cost_202503'
+      ]
+
+      // 최대값 계산 (바 스케일링용)
+      const maxCost = Math.max(...initRowData.flatMap(row =>
+        monthFields.map(field => row[field])
+      ))
+
+      // 합계 행 계산
+      const totals = monthFields.reduce((acc, field) => {
+        acc[field] = initRowData.reduce((sum, r) => sum + r[field], 0)
+        return acc
+      }, { product: 'Total' })
+
+      // 컬럼 정의
+      const columnDefs = [
+        { headerName: 'Product', field: 'product', colId: 'product', width: 280, pinned: 'left' },
+        ...monthFields.map(field => {
+          const year = field.slice(5, 9)
+          const month = field.slice(9, 11)
+          return {
+            headerName: \`\${year}-\${month}\`,
+            field: field,
+            width: 120,
+            type: ['dataBar'],
+            cellRendererParams: {
+              typeParams: {
+                maxValue: maxCost,       // 모든 컬럼에서 동일한 스케일 적용
+                barColor: '#E91E8C',     // 막대 색상
+                barOpacity: 0.5,         // 막대 투명도
+                valuePrefix: '$',        // 값 앞에 $ 표시
+              },
+            },
+          }
+        })
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+        pinnedBottomRowData: [totals],  // 합계 행을 하단에 고정
+      }
+
+      const defaultColDef = {
+        suppressMenu: true,
+        sortable: true,
+        resizable: true,
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+      const gridRef = useRef(null)
+
+      // 데이터 지연 설정을 위한 useEffect
+      useEffect(() => {
+        // 1초 후에 데이터를 설정
+        const timeoutId = setTimeout(() => {
+          setRowData(initRowData)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+
+        // 컴포넌트 언마운트 시 타임아웃 클리어
+        return () => {
+          clearTimeout(timeoutId)
+        }
+      }, [])
+    `,
+        code: `<OpsnowCommonDataGrid
+            ref={gridRef}
+            key={status}
+            columnDefs={columnDefs}
+            defaultColDef={defaultColDef}
+            rowData={rowData}
+            status={status} // 상태를 전달
+            gridOptions={gridOptions}
+            langCd={i18n.getLocale()}
+          />`
+    },
+    {
+        title: 'How to insert into the slot to the left of the search',
+        description: 'Search 왼쪽에 컴포넌트를 추가하는 방법입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      const defaultColDef = {
+        wrapText: true,
+        autoHeight: true,
+        suppressMenu: true,
+        unSortIcon: true,
+        resizable: true,
+      }
+
+      // 컬럼 정의
+      const getColumnDefs = () => [
+        {
+          headerName: 'Period',
+          field: 'period',
+        },
+        {
+          headerName: 'Company',
+          field: 'company',
+          width: 150,
+          minWidth: 150,
+        },
+        {
+          headerName: 'Commit/h',
+          field: 'commit',
+          type: ['number', 'cost'],
+          cellRendererParams: {
+            typeParams: {
+              currency: 'USD',
+              digits: 0,
+            },
+          },
+        },
+        {
+          headerName: 'Transfer Amount',
+          field: 'amount',
+          type: ['number', 'cost', 'numberTooltip'],
+          cellRendererParams: {
+            typeParams: {
+              currency: 'USD',
+              iconRight: true,
+            },
+          },
+        },
+        {
+          headerName: 'P1->Est. Util',
+          field: 'util',
+          type: ['number', 'ratio'],
+        },
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        suppressCellFocus: true,
+        suppressPaginationPanel: true,
+        rowSelection: { mode: 'multiRow' },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+      const [colDefs, setColDefs] = useState([])
+      const [time, setTime] = useState(null) // 달력에서 선택된 날짜 (Dayjs 객체)
+      const gridRef = useRef(null)
+
+      // 행 데이터 설정
+      const getRowData = () => {
+        setStatus(CommonConst.GRID_STATUS.LOADING)
+        setTimeout(() => {
+          const data = [
+            { period: '2024-08', company: '111111', commit: '5', amount: 34.048487477575, util: 93 },
+            { period: '2024-08', company: '222222', commit: '5', amount: 56.048487477575, util: 100 },
+            { period: '2024-08', company: '333333', commit: '5', amount: 234.048487477575, util: 57 },
+            { period: '2024-07', company: '444444', commit: '5', amount: 77.048487477575, util: 99 },
+            { period: '2024-07', company: '555555', commit: '5', amount: 88.048487477575, util: 89 },
+            { period: '2024-06', company: '666666', commit: '5', amount: 12.048487477575, util: 100 },
+          ]
+          setRowData(data)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+      }
+
+      // 컴포넌트 마운트 시 초기화
+      useEffect(() => {
+        setColDefs(getColumnDefs())
+        getRowData()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [])
+
+      // gridStatus가 DATA_EXISTS일 때만 rowData1을 전달
+      const emptyComputedGridData =
+        status === CommonConst.GRID_STATUS.DATA_EXISTS && rowData ? rowData : []
+
+      // 달력에서 날짜 변경 시
+      const onChangeMonth = (newValue) => {
+        const selectedMonth = newValue ? newValue.format('YYYY-MM') : ''
+        let filteredData = rowData
+
+        if (selectedMonth) {
+          filteredData = rowData.filter(row => row.period === selectedMonth)
+        }
+
+        if (gridRef.current) {
+          // 필터링된 데이터 설정
+          gridRef.current.setRowData(filteredData)
+          // 약간의 지연 후에 컬럼 사이즈 맞추기
+          setTimeout(() => {
+            gridRef.current.sizeColumnsToFit()
+          }, 0)
+        }
+        setTime(newValue)
+      }
+    `,
+        code: `<OpsnowCommonDataGrid
+            ref={gridRef}
+            rowData={emptyComputedGridData}
+            columnDefs={colDefs}
+            defaultColDef={defaultColDef}
+            status={status}
+            gridOptions={gridOptions}
+            useOpsnowUs={true}
+            usedSearch={true}
+            langCd={i18n.getLocale()}
+            // 달력 컴포넌트를 searchAddon에 전달
+            searchAddon={
+              <OpsnowCommonDatePicker
+                clearable={true}
+                placeholderText="날짜를 선택해주세요"
+                type="date"
+                value={time}
+                onChange={onChangeMonth}
+              />
+            }
+          />`
+    },
+    {
+        title: 'Tree data drag',
+        description: 'Tree data drag 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+      import AddButtonRenderer from './renderer/AddButtonRenderer.jsx'
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      const [treeRowData, setTreeRowData] = useState([])
+      const [treeColumnDefs, setTreeColumnDefs] = useState([])
+      const [gridStatus, setGridStatus] = useState(CommonConst.GRID_STATUS.LOADING)
+      const [draggedNode, setDraggedNode] = useState(null) // onRowDragEnter에서 저장할 노드
+
+      // ▶ 변경: tempGroupCount를 useState 대신 useRef로 관리
+      // useState: 상태가 변하면 UI를 다시 그려야 하는 데이터를 관리 (→ 변경 시 컴포넌트 재렌더링).
+      // useRef: 렌더링과 직접 관련 없는 값을 관리하거나, DOM 요소를 직접 참조할 때 사용 (→ 값 변경해도 재렌더링 없음).
+      const tempGroupCountRef = useRef(1)
+
+      // OpsnowCommonDataGrid ref
+      const treeDataGridRef = useRef(null)
+
+      // 기본 컬럼 설정
+      const defaultColDef = {
+        wrapText: true,
+        autoHeight: true,
+        suppressMenu: true,
+        unSortIcon: true,
+        sortable: false,
+      }
+
+      // onAddRowClick: pinned bottom row에 있는 Add Group 버튼 클릭 시
+      const onAddRowClick = useCallback(() => {
+        // 현재 count를 ref에서 읽어옴
+        const currentCount = tempGroupCountRef.current
+
+        const newRow = [
+          {
+            id: Date.now(),
+            filePath: ['FinOps Practitioner', \`New Group\${currentCount}\`],
+            type: 'group',
+          },
+        ]
+        if (treeDataGridRef.current) {
+          // OpsnowCommonDataGrid의 applyTransaction API
+          treeDataGridRef.current.applyTransaction({ add: newRow })
+        }
+
+        // useRef로 관리하므로, React 재렌더링 없이 값만 업데이트
+        tempGroupCountRef.current = currentCount + 1
+      }, [])
+
+      // sizeFormatter: 'MB' 접미사 추가
+      const sizeFormatter = (params) => {
+        return params.value ? \`\${params.value} MB\` : ''
+      }
+
+      // Vue의 onRowDragEnter => React로 변환
+      const onRowDragEnter = useCallback((event) => {
+        // event.node에 드래그한 노드 정보가 담겨 있음
+        setDraggedNode(event.node)
+      }, [])
+
+      // myCustomDropTargetFunc: 특정 조건(type='group')만 drop 가능
+      const myCustomDropTargetFunc = useCallback(
+        (overNode) => {
+          if (!overNode) return null
+
+          let newPotentialParent =
+            overNode.data && overNode.data.type === 'group'
+              ? overNode
+              : overNode.parent
+
+          // draggedNode가 group이면서 자식이 있으면, 이동 불가 → 부모로 되돌림
+          if (
+            draggedNode &&
+            draggedNode.data &&
+            draggedNode.data.type === 'group' &&
+            draggedNode.childrenAfterGroup &&
+            draggedNode.childrenAfterGroup.length > 0
+          ) {
+            newPotentialParent = draggedNode.parent || null
+          }
+          return newPotentialParent
+        },
+        [draggedNode],
+      )
+
+      // gridOptions
+      const treeGridOptions = {
+        animateRows: true,
+        treeData: true,
+        suppressCellFocus: true,
+        autoGroupColumnDef: {
+          // 이거 설정 안해줘도 :useTreeDataDragDrop="true" 넘기면 자동 세팅
+          //rowDrag: true,
+          headerName: 'Files',
+          minWidth: 300,
+          unSortIcon: false,
+          sortable: false,
+          cellRendererParams: {
+            suppressCount: true,
+          },
+        },
+        groupDefaultExpanded: -1,
+        // row data에서 array로 들어오는 데이터를 path로 설정
+        getDataPath: (data) => data.filePath,
+        // dataPath가 data 에서도 키가 dataPath가 아닌이상
+        // dataPath 를 어디로 지정했는지 common-grid에 알려주어야함. (common-grid에서는 알수가없음)
+        // 즉, 키가 dataPath가 아닌 이상 필수
+        // ex) dataPath: ['FinOps Practitioner', 'Group 01', 'Sub Group 01-01'], -> setDataPath 필요없음
+        //     filePath: ['FinOps Practitioner', 'Group 01', 'Sub Group 01-01'], -> setDataPath 해줘야함
+        setDataPath: (data, newPath) => {
+          data.filePath = newPath
+        },
+        pinnedBottomRowData: [{ isAddButtonRow: true }],
+        // onRowDragEnter 이벤트 등록
+        onRowDragEnter: onRowDragEnter,
+      }
+
+      // 컬럼 정의
+      const getTreeColumnDefs = useCallback(() => {
+        return [
+          {
+            field: 'dateModified',
+            suppressHeaderMenuButton: true,
+            // pinned row인 경우 전체 컬럼 수만큼 병합
+            colSpan: (params) => {
+              if (params.node.rowPinned) {
+                // API가 없거나 이미 파괴된 경우엔 안전하게 1 반환
+                if (!params.api || (params.api.isDestroyed && params.api.isDestroyed())) {
+                  return 1
+                }
+                const allDisplayedColumns = params.api.getAllDisplayedColumns()
+                return allDisplayedColumns && allDisplayedColumns.length
+                  ? allDisplayedColumns.length
+                  : 1
+              }
+              return 1
+            },
+            // pinned row인 경우 AddButtonRenderer 사용
+            cellRendererSelector: (params) => {
+              if (params.node.rowPinned) {
+                return {
+                  component: AddButtonRenderer,
+                  params: {
+                    onClickAddGroup: () => {
+                      onAddRowClick()
+                    },
+                  },
+                }
+              }
+              return undefined
+            },
+          },
+          {
+            field: 'size',
+            valueFormatter: sizeFormatter,
+            suppressHeaderMenuButton: true,
+          },
+        ]
+      }, [onAddRowClick])
+
+      // 행 데이터 로딩
+      const getTreeRowData = useCallback(() => {
+        setGridStatus(CommonConst.GRID_STATUS.LOADING)
+        setTimeout(() => {
+          // ** 주의 **
+          // path 구성시 상위 그룹을 반드시 생성후 그 아래 자식 그룹 생성해주세요
+          // ex) 1단계 : filePath: ['FinOps Practitioner'] 생성
+          //     2단계 : filePath: ['FinOps Practitioner', 'Group 01'] 생성
+          //     1단계 없이 바로 2단계로 할 경우 이동이 올바르게 실행되지 않음.
+          const rowData = [
+            { id: 1, filePath: ['FinOps Practitioner'], type: 'parent' },
+            { id: 2, filePath: ['FinOps Practitioner', 'Group 01'], type: 'group' },
+            {
+              id: 3,
+              filePath: ['FinOps Practitioner', 'Group 01', 'Sub Group 01-01'],
+              type: 'sub-group',
+              dateModified: 'May 21 2017 01:50:00 PM',
+              size: 14.7,
+            },
+          ]
+          setTreeRowData(rowData)
+          setGridStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+      }, [])
+
+      // 컴포넌트 마운트 시 컬럼/데이터 초기화
+      useEffect(() => {
+        setTreeColumnDefs(getTreeColumnDefs())
+        getTreeRowData()
+      }, [getTreeColumnDefs, getTreeRowData])
+    `,
+        code: `<OpsnowCommonDataGrid
+            ref={treeDataGridRef}
+            rowData={treeRowData}
+            columnDefs={treeColumnDefs}
+            defaultColDef={defaultColDef}
+            status={gridStatus}
+            gridOptions={treeGridOptions}
+            pagination={true}
+            useOpsnowUs={true}
+            usedSearch={true}
+            usedMenuItem={true}
+            // 트리 데이터 드래그 기능
+            useTreeDataDragDrop={true}
+            // 특정 drop target 로직
+            getDropTargetNode={myCustomDropTargetFunc}
+            langCd={i18n.getLocale()}
+          />`
+    },
+    {
+        title: 'Grid row drag (transferring rows between two grids)',
+        description: 'Grid row drag 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+      
+      const { OpsnowCommonDataGrid } = useCommonComponents()
+      const { CommonConst } = useGlobalContext()
+      // 상태 정의
+      const [rowData1, setRowData1] = useState([])
+      const [rowData2, setRowData2] = useState([])
+      const [colDefs1, setColDefs1] = useState([])
+      const [colDefs2, setColDefs2] = useState([])
+      const defaultColDef = {
+        wrapText: true,
+        autoHeight: true,
+        suppressMenu: true,
+        unSortIcon: true,
+        resizable: true,
+      }
+      const gridOptions1 = {
+        animateRows: true,
+        suppressCellFocus: true,
+        suppressPaginationPanel: true,
+        rowSelection: { mode: 'multiRow', checkboxes: true, enableClickSelection: true, headerCheckbox: true },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+        rowDragMultiRow: true,
+        rowDragManaged: true,
+        suppressMoveWhenRowDragging: true,
+      }
+      const gridOptions2 = {
+        animateRows: true,
+        suppressCellFocus: true,
+        suppressPaginationPanel: true,
+        rowSelection: { mode: 'multiRow', checkboxes: true, enableClickSelection: true, headerCheckbox: true },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+        rowDragMultiRow: true,
+        rowDragManaged: true,
+        suppressMoveWhenRowDragging: true,
+      }
+      const [gridStatus1, setGridStatus1] = useState(CommonConst.GRID_STATUS.LOADING)
+      const [gridStatus2, setGridStatus2] = useState(CommonConst.GRID_STATUS.LOADING)
+      const [leftGridReady, setLeftGridReady] = useState(false)
+      const [rightGridReady, setRightGridReady] = useState(false)
+
+      // OpsnowCommonDataGrid ref
+      const leftGridRef = useRef(null)
+      const rightGridRef = useRef(null)
+
+
+      // 드래그 드랍 관련 함수
+      const addGridDropZone = useCallback(() => {
+        if (rightGridRef.current && leftGridRef.current) {
+          createDropZone(rightGridRef.current, leftGridRef.current)
+          createDropZone(leftGridRef.current, rightGridRef.current)
+        }
+      }, [])
+
+      const createDropZone = (sourceGrid, targetGrid) => {
+        const dropZoneParams = sourceGrid.getRowDropZoneParams({
+          onDragStop: (params) => {
+            const nodes = params.nodes
+            targetGrid.applyTransaction({
+              remove: nodes.map(node => node.data),
+            })
+          },
+        })
+        targetGrid.addRowDropZone(dropZoneParams)
+      }
+
+      // 데이터 그리드 준비 콜백
+      useEffect(() => {
+        if (leftGridReady && rightGridReady) {
+          addGridDropZone()
+        }
+      }, [leftGridReady, rightGridReady, addGridDropZone])
+
+      const onGridReady = useCallback((gridPosition) => {
+        if (gridPosition === 'left') {
+          setLeftGridReady(true)
+        } else if (gridPosition === 'right') {
+          setRightGridReady(true)
+        }
+      }, [])
+
+      // 컬럼 정의 함수
+      const getColumnDefs1 = () => {
+        return [
+          {
+            rowDrag: true,
+            maxWidth: 50,
+            minWidth: 50,
+            pinned: 'left',
+            sortable: false,
+            suppressHeaderMenuButton: true,
+            suppressHeaderFilterButton: true,
+            rowDragText: (params, dragItemCount) => {
+              if (dragItemCount > 1) {
+                return dragItemCount + ' Company'
+              }
+              return params.rowNode.data.company
+            },
+          },
+          {
+            headerName: 'Company',
+            field: 'company',
+            pinned: 'left',
+            width: 150,
+            minWidth: 150,
+            suppressHeaderMenuButton: true,
+            suppressHeaderFilterButton: true,
+          },
+          {
+            headerName: 'Commit/h',
+            field: 'commit',
+            type: ['number', 'cost'],
+            cellRendererParams: {
+              typeParams: {
+                currency: 'USD',
+                digits: 0,
+              },
+            },
+          },
+          {
+            headerName: 'Transfer Amount',
+            field: 'amount',
+            type: ['number', 'cost', 'numberTooltip'],
+            cellRendererParams: {
+              typeParams: {
+                currency: 'USD',
+                iconRight: true,
+              },
+            },
+          },
+          {
+            headerName: 'P1->Est. Util',
+            field: 'util',
+            type: ['number', 'ratio'],
+          },
+        ]
+      }
+
+      const getColumnDefs2 = () => {
+        return [
+          {
+            rowDrag: true,
+            maxWidth: 50,
+            minWidth: 50,
+            pinned: 'left',
+            sortable: false,
+            suppressHeaderMenuButton: true,
+            suppressHeaderFilterButton: true,
+            rowDragText: (params, dragItemCount) => {
+              if (dragItemCount > 1) {
+                return dragItemCount + ' Company'
+              }
+              return params.rowNode.data.company
+            },
+          },
+          {
+            headerName: 'Company',
+            field: 'company',
+            pinned: 'left',
+            width: 150,
+            minWidth: 150,
+            suppressHeaderMenuButton: true,
+            suppressHeaderFilterButton: true,
+          },
+          {
+            headerName: 'Commit/h',
+            field: 'commit',
+            type: ['number', 'cost'],
+            cellRendererParams: {
+              typeParams: {
+                currency: 'USD',
+                digits: 0,
+              },
+            },
+          },
+          {
+            headerName: 'Transfer Amount',
+            field: 'amount',
+            type: ['number', 'cost', 'numberTooltip'],
+            cellRendererParams: {
+              typeParams: {
+                currency: 'USD',
+                iconRight: true,
+              },
+            },
+          },
+          {
+            headerName: 'P1->Est. Cov',
+            field: 'util',
+            type: ['number', 'ratio'],
+          },
+        ]
+      }
+
+      // 행 데이터 함수 (1, 2번 데이터 그리드 각각)
+      const getRowData1 = () => {
+        setGridStatus1(CommonConst.GRID_STATUS.LOADING)
+        setTimeout(() => {
+          setRowData1([
+            { company: '111111', commit: '5', amount: 34.048487477575, util: 93 },
+            { company: '222222', commit: '5', amount: 56.048487477575, util: 100 }
+          ])
+          setGridStatus1(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+      }
+
+      const getRowData2 = () => {
+        setGridStatus2(CommonConst.GRID_STATUS.LOADING)
+        setTimeout(() => {
+          setRowData2([
+            { company: '123123', commit: '5', amount: 34.048487477575, util: 93 },
+            { company: '234234', commit: '5', amount: 56.048487477575, util: 100 }
+          ])
+          setGridStatus2(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+      }
+
+      // 컴포넌트 마운트 시 초기화
+      useEffect(() => {
+        setColDefs1(getColumnDefs1())
+        setColDefs2(getColumnDefs2())
+        getRowData1()
+        getRowData2()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [])
+    `,
+        code: `<Box style={{ flex: 1 }}>
+              <h3>left grid</h3>
+              <OpsnowCommonDataGrid
+                ref={leftGridRef}
+                rowData={rowData1}
+                columnDefs={colDefs1}
+                defaultColDef={defaultColDef}
+                status={gridStatus1}
+                gridOptions={gridOptions1}
+                usedSearch={true}
+                showSelectedRowCount={true}
+                langCd={i18n.getLocale()}
+                onGridReady={() => onGridReady('left')}
+              />
+            </Box>
+            <Box style={{ flex: 1 }}>
+              <h3>right grid</h3>
+              <OpsnowCommonDataGrid
+                ref={rightGridRef}
+                rowData={rowData2}
+                columnDefs={colDefs2}
+                defaultColDef={defaultColDef}
+                status={gridStatus2}
+                gridOptions={gridOptions2}
+                usedSearch={true}
+                showSelectedRowCount={true}
+                langCd={i18n.getLocale()}
+                onGridReady={() => onGridReady('right')}
+              />
+            </Box>
+          </Box>`
+    },
+    {
+        title: 'Server side row model',
+        description: 'Server side row model 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+      import { assetAlarmServiceGetServerSideAlarmHistory } from './data/serverSideAlarmService'
+      import CloudServiceCellRenderer from './renderer/CloudServiceCellRenderer'
+      import DetailCellRenderer from './renderer/DetailCellRenderer'
+      
+      const { OpsnowCommonDataGrid } = useCommonComponents()
+      const { CommonConst } = useGlobalContext()
+      const [gridStatus, setGridStatus] = useState(CommonConst.GRID_STATUS.LOADING)
+      const [serverSideDatasource, setServerSideDatasource] = useState(null)
+
+      // 서버 전체 데이터(필터 생성용) - 필요시 로컬 state로 저장
+      const [filterOptions, setFilterOptions] = useState({})
+      // 페이지 사이즈
+      const [paginationPageSize] = useState(10)
+      const [totalRowCount, setTotalRowCount] = useState(0)
+
+      const severSideCheckBoxGridRef = useRef(null)
+
+      // 검색어 변경 확인을 위한 ref
+      const lastSearchQueryRef = useRef('')
+
+      // 공통 컬럼 정의
+      const defaultColDef = {
+        wrapText: true,
+        autoHeight: true,
+        suppressMenu: true,
+        unSortIcon: true,
+        sortable: false,
+      }
+
+      // (1) columnDefs를 useMemo로 감싸기
+      const checkBoxColumnDefs = useMemo(() => {
+        return [
+          {
+            field: 'no',
+            headerName: 'No.',
+            cellStyle: { justifyContent: 'center', alignItems: 'center' },
+            width: 110,
+            maxWidth: 110,
+            sortable: true,
+          },
+          {
+            field: 'cloudService',
+            headerName: '클라우드 서비스',
+            cellStyle: { justifyContent: 'left', alignItems: 'center' },
+            width: 200,
+            maxWidth: 200,
+            sortable: true,
+            cellRenderer: CloudServiceCellRenderer,
+            headerComponentParams: {
+              filter: true,
+              filterParams: {
+                values: (params) => {
+                  if (params && typeof params.success === 'function') {
+                    params.success(filterOptions.cloudService || [])
+                  }
+                },
+              },
+            },
+          },
+          {
+            field: 'account',
+            headerName: '계정',
+            resizable: true,
+            cellStyle: { justifyContent: 'left', alignItems: 'center' },
+            width: 230,
+            minWidth: 230,
+            maxWidth: 260,
+            hide: true,
+          },
+          {
+            field: 'title',
+            headerName: '알람 제목',
+            resizable: true,
+            cellStyle: { justifyContent: 'left', alignItems: 'center' },
+            hide: true,
+            maxWidth: 300,
+          },
+          {
+            field: 'message',
+            headerName: '알람 메시지',
+            sortable: true,
+            resizable: true,
+            cellStyle: { justifyContent: 'left', alignItems: 'center' },
+          },
+          {
+            field: 'date',
+            headerName: '알람 일시',
+            sortable: true,
+            cellStyle: { justifyContent: 'left', alignItems: 'center' },
+          },
+          {
+            field: 'detail',
+            headerName: '상세',
+            width: 110,
+            maxWidth: 110,
+            cellRenderer: DetailCellRenderer,
+          },
+        ]
+      }, [filterOptions])
+
+      const gridOptions = useMemo(() => ({
+        animateRows: true,
+        rowSelection: { mode: 'multiRow', enableSelectionWithoutKeys: true, headerCheckbox: true },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+        alwaysMultiSort: true,
+        serverSideSortAllLevels: true,
+        getRowId: (params) => params.data.no,
+      }), [])
+
+      // (2) serverSideDatasource 생성 함수
+      const setupServerSideDatasource = useCallback((searchQuery = '') => {
+        setGridStatus(CommonConst.GRID_STATUS.LOADING)
+        return {
+          getRows: (params) => {
+            console.log('getRows 호출', params, searchQuery)
+
+            assetAlarmServiceGetServerSideAlarmHistory(params, searchQuery)
+              .then((data) => {
+                // data: { success, allData, rows, lastRow }
+
+                // OpsnowCommonDataGrid의 setServerSideFilterList 사용
+                if (severSideGridRef.current) {
+                  const newFilterOpts = severSideGridRef.current.setServerSideFilterList(data.allData)
+
+                  // (3) 이전 filterOptions와 달라야만 업데이트
+                  setFilterOptions(prev => {
+                    const prevStr = JSON.stringify(prev)
+                    const newStr = JSON.stringify(newFilterOpts)
+                    if (prevStr === newStr) {
+                      return prev
+                    }
+                    return newFilterOpts
+                  })
+                }
+
+                setTotalRowCount(data.lastRow)
+                // 데이터 그리드에 데이터 전달
+                params.success({
+                  rowData: data.rows,
+                  rowCount: data.lastRow,
+                })
+                setGridStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+              })
+              .catch((error) => {
+                console.error('Error while loading data:', error)
+                setGridStatus(CommonConst.GRID_STATUS.ERROR)
+                params.fail()
+              })
+          },
+        }
+      }, [])
+
+      // (4) 컴포넌트 마운트 시 1회
+      useEffect(() => {
+        const ds = setupServerSideDatasource('')
+        setServerSideDatasource(ds)
+      }, [setupServerSideDatasource])
+
+      const handleSearchQueryChange = (searchQuery) => {
+        if (lastSearchQueryRef.current === searchQuery) return
+        lastSearchQueryRef.current = searchQuery
+        const newDs = setupServerSideDatasource(searchQuery)
+        severSideGridRef.current?.setServerSideDatasource(newDs)
+        severSideCheckBoxGridRef.current?.setServerSideDatasource(newDs)
+      }
+
+      // 페이지 사이즈 변경 (Vue 예제: @changePageSize="getChangePageSize")
+      const getChangePageSize = (num, size) => {
+        console.log('Page changed:', num, size)
+      }
+
+      // selectionChanged
+      const selectionChanged = (selectedNodes) => {
+        console.log('Selected nodes:', selectedNodes)
+      }
+
+      // resetCheckBox
+      const resetCheckBox = () => {
+        severSideCheckBoxGridRef.current?.clearSelectionState()
+      }
+      // loadCheckBox
+      const loadCheckBox = () => {
+        severSideCheckBoxGridRef.current?.loadSelectionState()
+      }
+      // setCheckBox
+      const setCheckBox = () => {
+        severSideCheckBoxGridRef.current?.setSelectionState({
+          selectAll: false,
+          toggledNodes: ['50', '48', '35'],
+        })
+      }
+
+      // 아직 datasource가 준비 안 되었으면 로딩 표시
+      if (!serverSideDatasource) {
+        return <div>Loading datasource...</div>
+      }
+    `,
+        code: `<OpsnowCommonDataGrid
+            ref={severSideCheckBoxGridRef}
+            usedSearch={true}
+            columnDefs={checkBoxColumnDefs}
+            defaultColDef={defaultColDef}
+            status={gridStatus}
+            gridOptions={gridOptions}
+            useOpsnowUs={true}
+            rowModelType="serverSide"
+            serverSideDatasource={serverSideDatasource}
+            pagination={true}
+            cacheBlockSize={10}
+            paginationPageSize={paginationPageSize}
+            serverSideTotalPageSize={totalRowCount}
+            langCd={i18n.getLocale()}
+            onSearchQueryChanged={handleSearchQueryChange}
+            onSelectionChanged={selectionChanged}
+          >
+            <button onClick={resetCheckBox} style={{ marginRight: '1rem' }}>
+              reset check box
+            </button>
+            <button onClick={loadCheckBox} style={{ marginRight: '1rem' }}>
+              load check box
+            </button>
+            <button onClick={setCheckBox}>set check box</button>
+          </OpsnowCommonDataGrid>`
+    },
+    {
+        title: 'Column Group - Basic',
+        description: 'children 속성을 사용한 기본 컬럼 그룹 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // 컬럼 그룹 정의 - children을 사용한 예제
+      const columnDefs = [
+        {
+          groupId: 'vehicleGroup',
+          headerName: 'Vehicle Info',
+          children: [
+            { headerName: 'Make', field: 'make' },
+            { headerName: 'Model', field: 'model' },
+          ],
+        },
+        {
+          groupId: 'financialGroup',
+          headerName: 'Financial Info',
+          children: [
+            {
+              headerName: 'Price',
+              field: 'price',
+              valueFormatter: params => params.value ? \`$\${params.value.toLocaleString()}\` : ''
+            },
+            {
+              headerName: 'Tax',
+              field: 'tax',
+              valueFormatter: params => params.value ? \`$\${params.value.toLocaleString()}\` : ''
+            },
+          ],
+        },
+        {
+          groupId: 'salesGroup',
+          headerName: 'Sales Info',
+          children: [
+            { headerName: 'Year', field: 'year' },
+            { headerName: 'Country', field: 'country' },
+          ],
+        },
+      ]
+
+      // 초기 행 데이터
+      const initialRowData = [
+        { make: 'Toyota', model: 'Celica', price: 35000, tax: 3500, year: 2020, country: 'Japan' },
+        { make: 'Ford', model: 'Mondeo', price: 32000, tax: 3200, year: 2019, country: 'USA' },
+        { make: 'Porsche', model: 'Boxter', price: 72000, tax: 7200, year: 2021, country: 'Germany' },
+        { make: 'BMW', model: 'M3', price: 65000, tax: 6500, year: 2020, country: 'Germany' },
+        { make: 'Honda', model: 'Civic', price: 28000, tax: 2800, year: 2019, country: 'Japan' },
+        { make: 'Tesla', model: 'Model S', price: 95000, tax: 9500, year: 2022, country: 'USA' },
+        { make: 'Audi', model: 'A4', price: 45000, tax: 4500, year: 2020, country: 'Germany' },
+        { make: 'Mercedes', model: 'C-Class', price: 55000, tax: 5500, year: 2021, country: 'Germany' },
+        { make: 'Nissan', model: 'Altima', price: 30000, tax: 3000, year: 2019, country: 'Japan' },
+        { make: 'Chevrolet', model: 'Malibu', price: 33000, tax: 3300, year: 2020, country: 'USA' },
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        rowSelection: { mode: 'singleRow', checkboxes: false, enableClickSelection: true },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+        suppressCellFocus: true,
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+
+      // 데이터 지연 설정을 위한 useEffect
+      useEffect(() => {
+        // 1초 후에 데이터를 설정
+        const timeoutId = setTimeout(() => {
+          setRowData(initialRowData)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+
+        // 컴포넌트 언마운트 시 타임아웃 클리어
+        return () => {
+          clearTimeout(timeoutId)
+        }
+      }, [])
+    `,
+        code: `<OpsnowCommonDataGrid
+          columnDefs={columnDefs}
+          rowData={rowData}
+          status={status}
+          gridOptions={gridOptions}
+          usedSearch={true}
+          pagination={true}
+          paginationPageSize={5}
+          pageSizeList={[
+              { label: '5', value: 5 },
+              { label: '10', value: 10 },
+              { label: '20', value: 20 },
+          ]}
+          langCd={i18n.getLocale()}
+        />`
+    },
+    {
+        title: 'Column Group - Nested',
+        description: '다층 구조의 중첩된 컬럼 그룹 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // 중첩된 컬럼 그룹 정의
+      const nestedColumnDefs = [
+        {
+          groupId: 'vehicleMainGroup',
+          headerName: 'Vehicle',
+          children: [
+            {
+              groupId: 'vehicleBasicGroup',
+              headerName: 'Basic Info',
+              children: [
+                { headerName: 'Make', field: 'make' },
+                { headerName: 'Model', field: 'model' },
+              ],
+            },
+            {
+              groupId: 'vehicleDetailsGroup',
+              headerName: 'Details',
+              children: [
+                { headerName: 'Year', field: 'year' },
+                { headerName: 'Country', field: 'country' },
+              ],
+            },
+          ],
+        },
+        {
+          groupId: 'financialMainGroup',
+          headerName: 'Financial',
+          children: [
+            {
+              headerName: 'Price',
+              field: 'price',
+              valueFormatter: params => params.value ? \`$\${params.value.toLocaleString()}\` : ''
+            },
+            {
+              headerName: 'Tax',
+              field: 'tax',
+              valueFormatter: params => params.value ? \`$\${params.value.toLocaleString()}\` : ''
+            },
+          ],
+        },
+      ]
+
+      // 초기 행 데이터
+      const initialRowData = [
+        { make: 'Toyota', model: 'Celica', price: 35000, tax: 3500, year: 2020, country: 'Japan' },
+        { make: 'Ford', model: 'Mondeo', price: 32000, tax: 3200, year: 2019, country: 'USA' },
+        { make: 'Porsche', model: 'Boxter', price: 72000, tax: 7200, year: 2021, country: 'Germany' },
+        { make: 'BMW', model: 'M3', price: 65000, tax: 6500, year: 2020, country: 'Germany' },
+        { make: 'Honda', model: 'Civic', price: 28000, tax: 2800, year: 2019, country: 'Japan' },
+        { make: 'Tesla', model: 'Model S', price: 95000, tax: 9500, year: 2022, country: 'USA' },
+        { make: 'Audi', model: 'A4', price: 45000, tax: 4500, year: 2020, country: 'Germany' },
+        { make: 'Mercedes', model: 'C-Class', price: 55000, tax: 5500, year: 2021, country: 'Germany' },
+        { make: 'Nissan', model: 'Altima', price: 30000, tax: 3000, year: 2019, country: 'Japan' },
+        { make: 'Chevrolet', model: 'Malibu', price: 33000, tax: 3300, year: 2020, country: 'USA' },
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        rowSelection: { mode: 'singleRow', checkboxes: false, enableClickSelection: true },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+        suppressCellFocus: true,
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+
+      // 데이터 지연 설정을 위한 useEffect
+      useEffect(() => {
+        // 1초 후에 데이터를 설정
+        const timeoutId = setTimeout(() => {
+          setRowData(initialRowData)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+
+        // 컴포넌트 언마운트 시 타임아웃 클리어
+        return () => {
+          clearTimeout(timeoutId)
+        }
+      }, [])
+    `,
+        code: `<OpsnowCommonDataGrid
+          key={status}
+          columnDefs={nestedColumnDefs}
+          rowData={rowData}
+          status={status}
+          gridOptions={gridOptions}
+          usedSearch={true}
+          langCd={i18n.getLocale()}
+        />`
+    },
+    {
+        title: 'Error Status',
+        description: 'Error Status 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // 컬럼 정의
+      const columnDefs = [
+        { headerName: 'Make', field: 'make' },
+        { headerName: 'Model', field: 'model' },
+        { headerName: 'Price', field: 'price' },
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        rowSelection: { mode: 'singleRow', checkboxes: false, enableClickSelection: true },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+        suppressCellFocus: true,
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // errorStatus 상태를 관리
+      const [errorStatus, setErrorStatus] = useState(CommonConst.GRID_STATUS.LOADING)
+
+      // 에러 상태 시뮬레이션을 위한 useEffect
+      useEffect(() => {
+        // 1초 후에 에러 상태로 설정
+        const timeoutId = setTimeout(() => {
+          setErrorStatus(CommonConst.GRID_STATUS.ERROR)
+        }, 1000)
+
+        // 컴포넌트 언마운트 시 타임아웃 클리어
+        return () => {
+          clearTimeout(timeoutId)
+        }
+      }, [])
+    `,
+        code: `<OpsnowCommonDataGrid
+          columnDefs={columnDefs}
+          rowData={[]}
+          status={errorStatus}
+          gridOptions={gridOptions}
+          textErrorTitle="데이터 로드 실패"
+          textErrorDescription="데이터를 불러오는 중 오류가 발생했습니다."
+          langCd={i18n.getLocale()}
+        />`
+    },
+    {
+        title: 'Auto Row Height',
+        description: '행 높이 자동 조절 예제입니다. 다음 경우 반드시 적용: 1) 긴 텍스트가 들어올 수 있는 컬럼이 있는 경우 (설명, 메시지, 항목, 이름, 제목, 등) 2) 컬럼이 resizable인 경우 - 폭을 줄여도 텍스트가 잘리지 않고 여러 줄로 정상 표시되어야 함 (ellipsis로 자르면 안됨)',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // Long Text용 컬럼 정의
+      const columnDefs = [
+        {
+          headerName: 'ID',
+          field: 'id',
+          flex: 1,
+          minWidth: 80
+        },
+        {
+          headerName: 'Description',
+          field: 'description',
+          flex: 3,  // 가장 넓은 비율
+          minWidth: 300,
+          wrapText: true,            // 텍스트 줄바꿈 - 필수
+          autoHeight: true,          // 행 높이 자동 조절 - 필수
+          suppressSizeToFit: true,   // 자동 리사이즈 방지
+          cellStyle: {
+            alignItems: 'center'  // autoHeight 작동을 위해 필수
+          }
+        },
+        {
+          headerName: 'Status',
+          field: 'status',
+          flex: 1,
+          minWidth: 120
+        },
+      ]
+
+      // Long Text용 행 데이터
+      const rowData = [
+        {
+          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. This demonstrates the autoHeight feature.',
+          status: 'Active'
+        },
+        {
+          id: 2,
+          description: 'Short text',
+          status: 'Inactive'
+        },
+        {
+          id: 3,
+          description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.',
+          status: 'Pending'
+        },
+        {
+          id: 4,
+          description: 'Another example of long text content that needs multiple lines',
+          status: 'Active'
+        },
+      ]
+
+      const defaultColDef = {
+        wrapText: true,      // 텍스트 줄바꿈 활성화
+        autoHeight: true,    // 셀 높이 자동 조절
+      }
+
+      const gridOptions = {
+        animateRows: true,
+        rowSelection: { mode: 'singleRow', checkboxes: false, enableClickSelection: true },
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',  // 그리드 전체 레이아웃 자동 높이
+        suppressCellFocus: true,
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+    `,
+        code: `<OpsnowCommonDataGrid
+          columnDefs={columnDefs}
+          defaultColDef={defaultColDef}
+          rowData={rowData}
+          status={CommonConst.GRID_STATUS.DATA_EXISTS}
+          gridOptions={gridOptions}
+          langCd={i18n.getLocale()}
+        />`
+    },
+    {
+        title: 'API 데이터 로딩 (getAxios 사용)',
+        description: 'API에서 데이터를 가져와 그리드에 표시하는 예제입니다. axios 직접 사용 대신 반드시 getAxios를 사용해야 합니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import { getAxios } from '@opsnow-common/opsnow-finops-common-axios'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // ⚠️ 주의: axios 직접 import 금지!
+      // import axios from 'axios'  // ❌ 금지
+      // import { getAxios } from '@opsnow-common/opsnow-finops-common-axios'  // ✅ 필수
+
+      const columnDefs = [
+        { headerName: 'ID', field: 'id' },
+        { headerName: 'Name', field: 'name' },
+        { headerName: 'Value', field: 'value' },
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        rowSelection: { mode: 'singleRow', checkboxes: false, enableClickSelection: true },
+        domLayout: 'autoHeight',
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents()
+      const { CommonConst } = useGlobalContext()
+
+      const [rowData, setRowData] = useState([])
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING)
+
+      // API 데이터 로딩
+      const fetchData = async () => {
+        try {
+          setStatus(CommonConst.GRID_STATUS.LOADING)
+          const response = await getAxios().get('/api/your-endpoint')
+
+          if (response.data && response.data.length > 0) {
+            setRowData(response.data)
+            setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+          } else {
+            setRowData([])
+            setStatus(CommonConst.GRID_STATUS.NO_DATA)
+          }
+        } catch (error) {
+          console.error('API 호출 에러:', error)
+          setStatus(CommonConst.GRID_STATUS.ERROR)
+        }
+      }
+
+      useEffect(() => {
+        fetchData()
+      }, [])
+    `,
+        code: `<OpsnowCommonDataGrid
+          columnDefs={columnDefs}
+          rowData={rowData}
+          status={status}
+          gridOptions={gridOptions}
+          langCd={i18n.getLocale()}
+        />`
+    },
+];