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

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

@@ -1,2328 +0,0 @@
-// 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()}
-        />`
-    },
-];