@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.26 → 1.0.27

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

@@ -2325,6 +2325,96 @@ export const DataGridExamples = [
           langCd={i18n.getLocale()}
         />`
     },
+    {
+        title: 'Auto Row Height (행 수 분기 + 스크롤)',
+        description: 'autoHeight는 모든 행을 펼쳐 그리드가 무한정 길어집니다. 행 수가 가변적이거나 많아질 수 있는 경우(목록/검색 결과 등) 행 수 기준으로 분기해야 합니다: 10행 이하면 autoHeight로 콘텐츠에 맞게 확장하고, 10행 초과면 고정 높이 + 내부 스크롤로 전환합니다. autoHeight 셀은 행마다 높이가 달라 정확한 "10행 높이"를 픽셀로 맞출 수 없으므로 고정 픽셀값(예: 600)을 사용합니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      const ROW_LIMIT = 10           // 이 행 수를 넘으면 고정 높이 + 스크롤
+      const SCROLL_HEIGHT = 600      // 초과 시 고정 높이(px)
+
+      const columnDefs = [
+        { headerName: 'ID', field: 'id', flex: 1, minWidth: 80 },
+        {
+          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 },
+      ]
+
+      const defaultColDef = {
+        wrapText: true,      // 텍스트 줄바꿈 활성화
+        autoHeight: true,    // 셀 높이 자동 조절
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents()
+      const { CommonConst } = useGlobalContext()
+
+      // 4행 데이터 (10행 이하 → autoHeight, 스크롤 없음)
+      const fewRowData = [
+        { id: 1, description: 'This is a very long description text that will wrap to multiple lines when the column width is not sufficient to display all content in a single line.', status: 'Active' },
+        { id: 2, description: 'Short text', status: 'Inactive' },
+        { id: 3, description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', status: 'Pending' },
+        { id: 4, description: 'Another example of long text content that needs multiple lines', status: 'Active' },
+      ]
+
+      // 12행 데이터 (10행 초과 → 고정 높이 600px + 내부 스크롤)
+      const manyRowData = Array.from({ length: 12 }, (_, i) => ({
+        id: i + 1,
+        description: 'Row ' + (i + 1) + ': long description text that wraps to multiple lines when the column is narrow, demonstrating autoHeight with scroll.',
+        status: i % 2 === 0 ? 'Active' : 'Inactive',
+      }))
+
+      const [rowData, setRowData] = useState([])
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING)
+
+      useEffect(() => {
+        const fetchData = async () => {
+          try {
+            await new Promise(resolve => setTimeout(resolve, 500))
+            setRowData(fewRowData)   // 실제로는 API 응답 데이터
+            setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+          } catch (error) {
+            setStatus(CommonConst.GRID_STATUS.ERROR)
+          }
+        }
+        fetchData()
+      }, [])
+
+      // 행 수 기준 분기 - 핵심
+      const isScroll = rowData.length > ROW_LIMIT
+      const gridOptions = {
+        animateRows: true,
+        rowSelection: { mode: 'singleRow', checkboxes: false, enableClickSelection: true },
+        tooltipShowDelay: 100,
+        domLayout: isScroll ? 'normal' : 'autoHeight',  // 10행 이하: 콘텐츠 맞춤 / 초과: 고정+스크롤
+        suppressCellFocus: true,
+      }
+    `,
+        code: `<>
+          <div style={{ marginBottom: '8px', display: 'flex', gap: '8px' }}>
+            <OpsnowCommonButton label="4행 (스크롤 X)" size="large" variant="outlined" color="secondary" onClick={() => setRowData(fewRowData)} />
+            <OpsnowCommonButton label="12행 (스크롤 O)" size="large" variant="outlined" color="secondary" onClick={() => setRowData(manyRowData)} />
+          </div>
+          <OpsnowCommonDataGrid
+            columnDefs={columnDefs}
+            defaultColDef={defaultColDef}
+            rowData={rowData}
+            status={status}
+            gridOptions={gridOptions}
+            gridHeight={isScroll ? SCROLL_HEIGHT : undefined}
+            langCd={i18n.getLocale()}
+          />
+        </>`
+    },
     {
         title: 'API 데이터 로딩 (getAxios 사용)',
         description: 'API에서 데이터를 가져와 그리드에 표시하는 예제입니다. axios 직접 사용 대신 반드시 getAxios를 사용해야 합니다.',

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

@@ -239,6 +239,19 @@ export function createDataGridComponent() {
 
       ⚠️ defaultColDef에 wrapText, autoHeight가 없으면 텍스트가 넘칩니다!
 
+      **CRITICAL: 행 수가 많을 수 있으면 - 높이 분기 필수**
+      autoHeight(domLayout:'autoHeight')는 모든 행을 펼쳐서 그리드가 무한정 길어짐.
+      행 수가 가변적이거나 많아질 수 있으면 행 수 기준으로 분기:
+
+      const ROW_LIMIT = 10;
+      const isScroll = rowData.length > ROW_LIMIT;
+      const gridOptions = {
+        // ... 다른 설정들
+        domLayout: isScroll ? 'normal' : 'autoHeight',  // 10행 이하: 콘텐츠 맞춤 / 초과: 고정+스크롤
+      };
+      // 10행 초과 시에만 고정 높이 부여 (autoHeight 셀은 가변이라 픽셀 고정값 사용)
+      <OpsnowCommonDataGrid gridOptions={gridOptions} gridHeight={isScroll ? 600 : undefined} />
+
       **import:**
       \`\`\`javascript
       import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opsnow-mcp/opsnow-mcp-common-ui-server",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "type": "module",
   "main": "index.js",
   "bin": {