@ncds/ui-admin 1.8.28-alpha.2 → 1.8.28-alpha.4

package/dist/esm/assets/scripts/table/rowSpanBlock.js

@@ -0,0 +1,85 @@
+const SINGLE_ROW = 1;
+const collectRanges = rowSpans => rowSpans.flatMap((spans, index) => spans.filter(span => span > SINGLE_ROW).map(span => ({
+  start: index,
+  end: Math.min(index + span - SINGLE_ROW, rowSpans.length - 1)
+})));
+const overlaps = (a, b) => a.start <= b.end && b.start <= a.end;
+/**
+ * 병합을 쪼개지 않고 통째로 옮길 수 있는 최소 행 구간을 구한다.
+ * 범위가 겹치면 어느 쪽도 쪼갤 수 없으므로 연결된 범위를 모두 합친다.
+ *
+ * @param rowSpans 행별 셀 rowSpan 목록. 병합에 덮여 생략된 셀은 포함하지 않는다
+ * @param index 기준 행의 위치
+ */
+export const computeRowSpanBlock = (rowSpans, index) => {
+  const ranges = collectRanges(rowSpans);
+  let block = {
+    start: index,
+    end: index
+  };
+  let expanded = true;
+  while (expanded) {
+    expanded = false;
+    for (const range of ranges) {
+      if (!overlaps(range, block)) continue;
+      const start = Math.min(block.start, range.start);
+      const end = Math.max(block.end, range.end);
+      if (start !== block.start || end !== block.end) {
+        block = {
+          start,
+          end
+        };
+        expanded = true;
+      }
+    }
+  }
+  return block;
+};
+/**
+ * 드롭을 받을 수 있는 변. 블록 가운데에 떨어뜨리면 그 블록이 쪼개지므로 경계만 연다.
+ */
+export const computeOpenEdges = (rowSpans, index) => {
+  const block = computeRowSpanBlock(rowSpans, index);
+  const edges = [];
+  if (index === block.start) edges.push('top');
+  if (index === block.end) edges.push('bottom');
+  return edges;
+};
+/** 고른 행들이 끌고 오는 행 전부. 병합 블록을 쪼개면 병합이 깨지므로 블록째 더한다. */
+export const collectBlockIndices = (rowSpans, indices) => {
+  const picked = new Set();
+  for (const index of indices) {
+    const block = computeRowSpanBlock(rowSpans, index);
+    for (let row = block.start; row <= block.end; row++) {
+      picked.add(row);
+    }
+  }
+  return Array.from(picked).sort((a, b) => a - b);
+};
+/** 행이 속한 `tbody` 와 그 안에서의 위치. 표 밖 요소면 `null`. */
+export const locateRow = rowEl => {
+  const body = rowEl.closest('tbody');
+  if (!body) return null;
+  const index = Array.from(body.rows).indexOf(rowEl);
+  return index < 0 ? null : {
+    body,
+    index
+  };
+};
+/** 표 본문의 행별 rowSpan 을 읽어 `computeRowSpanBlock` 에 넘길 형태로 만든다. */
+export const readRowSpans = body => Array.from(body.rows).map(row => Array.from(row.cells).map(cell => cell.rowSpan));
+/** 다중 선택으로 고른 행들이 끌고 오는 행 전부. 행 순서는 표에 놓인 순서를 따른다. */
+export const expandRowsToBlocks = rows => {
+  const perBody = new Map();
+  for (const row of rows) {
+    const located = locateRow(row);
+    if (!located) continue;
+    const picked = perBody.get(located.body) ?? [];
+    picked.push(located.index);
+    perBody.set(located.body, picked);
+  }
+  return Array.from(perBody).flatMap(_ref => {
+    let [body, indices] = _ref;
+    return collectBlockIndices(readRowSpans(body), indices).map(index => body.rows[index]);
+  });
+};

package/dist/esm/src/components/data-display/table/Table.js

@@ -6,8 +6,10 @@ import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-
 import { ChevronDown, ChevronSelectorVertical, ChevronUp, DotsGrid02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { Children, forwardRef, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { computeOpenEdges, readRowSpans } from '../../../../assets/scripts/table/rowSpanBlock';
 import { FloatingProvider } from '../../../contexts/FloatingContext';
 import { RowDndContext, TableDndContext } from './dnd-context';
+import { DRAG_ID_ATTRIBUTE, findRowSpanBlock, locateRow, planMoveIds } from './dnd-move';
 import { buildDragPreview, PREVIEW_BADGE_SIZE, TABLE_DND_ID_RADIX, TABLE_DND_ID_SLICE_END, TABLE_DND_ID_SLICE_START } from './dnd-preview';
 import { TABLE_HEADER_HEIGHT, useTableHorizontalScrollbar, useTableVerticalScrollbar } from './useTableScrollbars';
 // 가로 스크롤 디자인 기준 폭 — 14인치 모니터 + LNB 고려한 디자인 권장 너비
@@ -46,49 +48,51 @@ const Header = _ref => {
   });
 };
 Header.displayName = 'Table.Header';
+// 묶음마다 호출되므로 핸들러 없는 묶음이 있는 묶음을 덮지 않게 둔다.
+// 거둘 때는 자기가 넣은 것만 비운다 — 조건부로 넘긴 핸들러를 끄면 드롭도 멈춰야 한다.
+const useRowDropHandler = onRowDrop => {
+  const {
+    onRowDropRef
+  } = useContext(TableDndContext);
+  useEffect(() => {
+    if (!onRowDrop) {
+      return;
+    }
+    onRowDropRef.current = onRowDrop;
+    return () => {
+      if (onRowDropRef.current === onRowDrop) {
+        onRowDropRef.current = undefined;
+      }
+    };
+  }, [onRowDrop, onRowDropRef]);
+};
 const Body = _ref2 => {
   let {
     children,
     className,
     onRowDrop
   } = _ref2;
-  const {
-    tableId
-  } = useContext(TableDndContext);
-  // onRowDrop 참조를 ref로 유지 — 콜백이 매 렌더마다 재생성되어도 effect가 재구독하지 않도록
-  const onRowDropRef = useRef(onRowDrop);
-  onRowDropRef.current = onRowDrop;
-  useEffect(() => {
-    return monitorForElements({
-      canMonitor: _ref3 => {
-        let {
-          source
-        } = _ref3;
-        return source.data.tableId === tableId;
-      },
-      onDrop: _ref4 => {
-        let {
-          source,
-          location
-        } = _ref4;
-        if (!onRowDropRef.current) return;
-        const target = location.current.dropTargets[0];
-        if (!target) return;
-        const fromId = source.data.id;
-        const toId = target.data.id;
-        if (typeof fromId !== 'string' || typeof toId !== 'string' || fromId === toId) return;
-        const edge = extractClosestEdge(target.data);
-        onRowDropRef.current(fromId, toId, edge === 'bottom' ? 'bottom' : 'top');
-      }
-    });
-  }, [tableId]);
+  useRowDropHandler(onRowDrop);
   return _jsx("tbody", {
     className: classNames('ncua-table__body', className),
     children: children
   });
 };
 Body.displayName = 'Table.Body';
-const Row = /*#__PURE__*/forwardRef((_ref5, forwardedRef) => {
+const RowGroup = _ref3 => {
+  let {
+    children,
+    className,
+    onRowDrop
+  } = _ref3;
+  useRowDropHandler(onRowDrop);
+  return _jsx("tbody", {
+    className: classNames('ncua-table__body', 'ncua-table__row-group', className),
+    children: children
+  });
+};
+RowGroup.displayName = 'Table.RowGroup';
+const Row = /*#__PURE__*/forwardRef((_ref4, forwardedRef) => {
   let {
     children,
     className,
@@ -96,7 +100,7 @@ const Row = /*#__PURE__*/forwardRef((_ref5, forwardedRef) => {
     status,
     dragId,
     ...rest
-  } = _ref5;
+  } = _ref4;
   const {
     isDraggable,
     tableId
@@ -114,8 +118,32 @@ const Row = /*#__PURE__*/forwardRef((_ref5, forwardedRef) => {
   }, [forwardedRef]);
   useEffect(() => {
     if (!isDraggable || !dragId || !internalRef.current) return;
+    // 끌고 있는 블록 안쪽은 드롭 대상이 아니다 — 거기 놓으면 병합이 쪼개진다
+    const isInsideDraggedBlock = data => {
+      const {
+        blockBody,
+        blockStart,
+        blockEnd
+      } = data;
+      if (typeof blockStart !== 'number' || typeof blockEnd !== 'number' || blockStart < 0) return false;
+      const located = internalRef.current ? locateRow(internalRef.current) : null;
+      if (!located || located.bodyIndex !== blockBody) return false;
+      return located.index >= blockStart && located.index <= blockEnd;
+    };
+    // 병합 블록 가운데에 놓으면 그 블록이 쪼개진다 — 받을 수 있는 변만 연다
+    const openEdges = () => {
+      const located = internalRef.current ? locateRow(internalRef.current) : null;
+      if (!located) return ['top', 'bottom'];
+      return computeOpenEdges(readRowSpans(located.body), located.index);
+    };
     return dropTargetForElements({
       element: internalRef.current,
+      canDrop: _ref5 => {
+        let {
+          source
+        } = _ref5;
+        return !isInsideDraggedBlock(source.data) && openEdges().length > 0;
+      },
       getData: _ref6 => {
         let {
           input,
@@ -127,7 +155,7 @@ const Row = /*#__PURE__*/forwardRef((_ref5, forwardedRef) => {
         }, {
           input,
           element,
-          allowedEdges: ['top', 'bottom']
+          allowedEdges: openEdges()
         });
       },
       onDragEnter: _ref7 => {
@@ -195,10 +223,28 @@ const DragHeaderCell = _ref9 => {
   });
 };
 DragHeaderCell.displayName = 'Table.DragHeaderCell';
+// 미리보기에 그릴 행과 배지에 적을 건수를 정한다 — 묶음은 행이 여러 개여도 한 건이다
+const planDragPreview = (rowEl, input) => {
+  const rowRect = rowEl.getBoundingClientRect();
+  const badgeHalf = PREVIEW_BADGE_SIZE / 2;
+  // 묶음마다 `tbody` 가 생기므로 표 전체에서 모은다 — 자기 `tbody` 기준이면 자기 묶음만 보인다.
+  // 대상은 `Table.Body` 가 그린 `tbody` 뿐이다 — 맨 `tbody` 의 행까지 세면 TB-10 의 단일 프리뷰가 깨진다
+  const tableEl = rowEl.classList.contains('ncua-table__row--selected') ? rowEl.closest('table') : null;
+  const selectedRows = tableEl ? Array.from(tableEl.querySelectorAll('.ncua-table__body > .ncua-table__row--selected')) : [];
+  const isMultiSelect = selectedRows.length > 1;
+  return {
+    rows: isMultiSelect ? selectedRows : findRowSpanBlock(rowEl)?.rows ?? [rowEl],
+    itemCount: isMultiSelect ? selectedRows.length : 1,
+    rowRect,
+    offsetX: Math.round(input.clientX - rowRect.left) + badgeHalf,
+    offsetY: Math.round(input.clientY - rowRect.top) + badgeHalf
+  };
+};
 const DragCell = _ref0 => {
   let {
     disabled,
     className,
+    rowSpan,
     children
   } = _ref0;
   const {
@@ -217,34 +263,31 @@ const DragCell = _ref0 => {
     let pendingPreview = null;
     return makeDraggable({
       element: handleRef.current,
-      getInitialData: () => ({
-        id: dragId,
-        tableId
-      }),
+      getInitialData: () => {
+        const rowEl = handleRef.current?.closest('tr');
+        const block = rowEl ? findRowSpanBlock(rowEl) : null;
+        // 블록 전체가 움직이므로 소비자에게는 블록 첫 행을 출발점으로 알린다
+        const blockId = block?.rows[0]?.getAttribute(DRAG_ID_ATTRIBUTE) ?? dragId;
+        return {
+          id: blockId,
+          tableId,
+          moveIds: rowEl ? planMoveIds(rowEl) : [],
+          blockBody: block?.bodyIndex ?? -1,
+          blockStart: block?.start ?? -1,
+          blockEnd: block?.end ?? -1
+        };
+      },
       onGenerateDragPreview: _ref1 => {
         let {
           nativeSetDragImage,
           location
         } = _ref1;
-        if (!handleRef.current) return;
-        const rowEl = handleRef.current.closest('tr');
+        const rowEl = handleRef.current?.closest('tr');
         if (!rowEl) return;
         disableNativeDragPreview({
           nativeSetDragImage
         });
-        const rowRect = rowEl.getBoundingClientRect();
-        const badgeHalf = PREVIEW_BADGE_SIZE / 2;
-        const offsetX = Math.round(location.initial.input.clientX - rowRect.left) + badgeHalf;
-        const offsetY = Math.round(location.initial.input.clientY - rowRect.top) + badgeHalf;
-        const isSelected = rowEl.classList.contains('ncua-table__row--selected');
-        const bodyEl = rowEl.closest('.ncua-table__body');
-        const selectedRows = isSelected && bodyEl ? Array.from(bodyEl.querySelectorAll('.ncua-table__row--selected')) : [];
-        pendingPreview = {
-          rows: selectedRows.length > 1 ? selectedRows : [rowEl],
-          rowRect,
-          offsetX,
-          offsetY
-        };
+        pendingPreview = planDragPreview(rowEl, location.initial.input);
       },
       onDragStart: _ref10 => {
         let {
@@ -254,11 +297,12 @@ const DragCell = _ref0 => {
         if (!pendingPreview) return;
         const {
           rows,
+          itemCount,
           rowRect,
           offsetX,
           offsetY
         } = pendingPreview;
-        overlay = buildDragPreview(rows, rowRect);
+        overlay = buildDragPreview(rows, rowRect, itemCount);
         overlay.style.left = `${Math.round(location.initial.input.clientX) - offsetX}px`;
         overlay.style.top = `${Math.round(location.initial.input.clientY) - offsetY}px`;
         document.body.appendChild(overlay);
@@ -282,6 +326,7 @@ const DragCell = _ref0 => {
   }, [isDraggable, dragId, tableId, disabled, setIsDragging]);
   return _jsx("td", {
     className: classNames('ncua-table__drag-cell', className),
+    rowSpan: rowSpan,
     children: _jsxs("span", {
       className: "ncua-table__drag-cell-inner",
       children: [isDraggable && _jsx("button", {
@@ -454,9 +499,21 @@ const sortChildren = children => {
   });
   return result;
 };
-// ──────────────────────────────────────────────
-// Main Table component
-// ──────────────────────────────────────────────
+const readRowDrop = (sourceData, target) => {
+  if (!target) return null;
+  const fromId = sourceData.id;
+  const toId = target.data.id;
+  if (typeof fromId !== 'string' || typeof toId !== 'string' || fromId === toId) return null;
+  const isStringArray = v => Array.isArray(v) && v.every(x => typeof x === 'string');
+  const moveIds = isStringArray(sourceData.moveIds) ? sourceData.moveIds : [fromId];
+  const edge = extractClosestEdge(target.data) === 'bottom' ? 'bottom' : 'top';
+  return {
+    fromId,
+    toId,
+    edge,
+    moveIds
+  };
+};
 const TableComponent = /*#__PURE__*/forwardRef((_ref17, ref) => {
   let {
     type = 'horizontal',
@@ -473,6 +530,25 @@ const TableComponent = /*#__PURE__*/forwardRef((_ref17, ref) => {
   } = _ref17;
   const tableIdRef = useRef(`ncua-table-${Math.random().toString(TABLE_DND_ID_RADIX).slice(TABLE_DND_ID_SLICE_START, TABLE_DND_ID_SLICE_END)}`);
   const tableId = tableIdRef.current;
+  // 콜백이 매 렌더마다 재생성되어도 effect 가 재구독하지 않도록 ref 로 유지한다.
+  const onRowDropRef = useRef(undefined);
+  useEffect(() => monitorForElements({
+    canMonitor: _ref18 => {
+      let {
+        source
+      } = _ref18;
+      return source.data.tableId === tableId;
+    },
+    onDrop: _ref19 => {
+      let {
+        source,
+        location
+      } = _ref19;
+      const drop = readRowDrop(source.data, location.current.dropTargets[0]);
+      if (!drop) return;
+      onRowDropRef.current?.(drop.fromId, drop.toId, drop.edge, drop.moveIds);
+    }
+  }), [tableId]);
   const effectiveDraggable = draggable && type === 'horizontal';
   const tableClasses = classNames('ncua-table', className, {
     'ncua-table--horizontal': type === 'horizontal',
@@ -561,7 +637,8 @@ const TableComponent = /*#__PURE__*/forwardRef((_ref17, ref) => {
   };
   const dndContextValue = {
     isDraggable: effectiveDraggable,
-    tableId
+    tableId,
+    onRowDropRef
   };
   // horizontalScroll=true 시 외곽 wrapper + FloatingProvider 부착.
   // 핵심 — __h-scroll-container 는 <table>(또는 scroll-area) 만 감싸고, footer/pagination 은
@@ -638,6 +715,7 @@ TableComponent.displayName = 'Table';
 export const Table = Object.assign(TableComponent, {
   Header,
   Body,
+  RowGroup,
   Row,
   DragHeaderCell,
   DragCell,

package/dist/esm/src/components/data-display/table/__tests__/Table.dnd.dragCell.test.js

@@ -49,12 +49,17 @@ describe('Table.DragCell 핸들 등록 (TB-08)', () => {
     expect(draggableArgsOf('a').element).toBe(handle);
     expect(view.querySelectorAll('button.ncua-table__drag-handle')).toHaveLength(ROW_IDS.length);
   });
-  it('TB-08 getInitialData 는 {id: dragId, tableId} 를 돌려준다', () => {
+  it('TB-08 getInitialData 는 {id: dragId, tableId} 와 옮길 행·블록 좌표를 돌려준다', () => {
     render(draggableTable(vi.fn()));
     const tableId = sourceDataOf('b').tableId;
+    // 병합이 없으면 블록은 자기 행 한 칸이고 옮길 행도 자기 자신뿐이다
     expect(draggableArgsOf('a').getInitialData?.({})).toEqual({
       id: 'a',
-      tableId
+      tableId,
+      moveIds: ['a'],
+      blockBody: 0,
+      blockStart: 0,
+      blockEnd: 0
     });
   });
   it('TB-08 disabled 면 button 을 disabled 로 렌더하고 draggable 로 등록하지 않는다', () => {

package/dist/esm/src/components/data-display/table/__tests__/Table.dnd.test.js

@@ -30,14 +30,14 @@ describe('Table 행 드롭 → onRowDrop (TB-01)', () => {
     const source = sourceDataOf('a');
     dropOnMonitors(source, [targetDataOf('b', LOWER_HALF_Y, source)]);
     expect(onRowDrop).toHaveBeenCalledTimes(1);
-    expect(onRowDrop).toHaveBeenCalledWith('a', 'b', 'bottom');
+    expect(onRowDrop).toHaveBeenCalledWith('a', 'b', 'bottom', ['a']);
   });
   it('TB-01 다른 행의 위쪽 절반에 놓으면 edge 는 "top" 이다', () => {
     const onRowDrop = vi.fn();
     render(draggableTable(onRowDrop));
     const source = sourceDataOf('c');
     dropOnMonitors(source, [targetDataOf('a', UPPER_HALF_Y, source)]);
-    expect(onRowDrop).toHaveBeenCalledWith('c', 'a', 'top');
+    expect(onRowDrop).toHaveBeenCalledWith('c', 'a', 'top', ['c']);
   });
   it('TB-01 target 에 closest edge 정보가 없으면 "top" 으로 전달한다', () => {
     const onRowDrop = vi.fn();
@@ -47,7 +47,7 @@ describe('Table 행 드롭 → onRowDrop (TB-01)', () => {
       id: 'b',
       tableId: source.tableId
     }]);
-    expect(onRowDrop).toHaveBeenCalledWith('a', 'b', 'top');
+    expect(onRowDrop).toHaveBeenCalledWith('a', 'b', 'top', ['a']);
   });
   it('TB-01 여러 drop target 이 겹치면 가장 안쪽(첫 번째) target 기준으로 전달한다', () => {
     const onRowDrop = vi.fn();
@@ -55,15 +55,20 @@ describe('Table 행 드롭 → onRowDrop (TB-01)', () => {
     const source = sourceDataOf('a');
     dropOnMonitors(source, [targetDataOf('c', LOWER_HALF_Y, source), targetDataOf('b', UPPER_HALF_Y, source)]);
     expect(onRowDrop).toHaveBeenCalledTimes(1);
-    expect(onRowDrop).toHaveBeenCalledWith('a', 'c', 'bottom');
+    expect(onRowDrop).toHaveBeenCalledWith('a', 'c', 'bottom', ['a']);
   });
   it('TB-01 행의 source·target data 에 이 테이블의 tableId 가 실린다', () => {
     render(draggableTable(vi.fn()));
     const source = sourceDataOf('a');
     const target = targetDataOf('b', LOWER_HALF_Y, source);
+    // 블록 좌표는 병합 블록 드롭 판정에 쓰인다. 병합이 없으면 자기 행 한 칸이다
     expect(source).toEqual({
       id: 'a',
-      tableId: expect.stringMatching(/^ncua-table-/)
+      tableId: expect.stringMatching(/^ncua-table-/),
+      moveIds: ['a'],
+      blockBody: 0,
+      blockStart: 0,
+      blockEnd: 0
     });
     expect(target.id).toBe('b');
     expect(target.tableId).toBe(source.tableId);
@@ -134,7 +139,7 @@ describe('Table.Body canMonitor — 테이블 격리 (TB-04)', () => {
       id: 'b',
       tableId: source.tableId
     }]);
-    expect(first).toHaveBeenCalledWith('a', 'b', 'top');
+    expect(first).toHaveBeenCalledWith('a', 'b', 'top', ['a']);
     expect(second).not.toHaveBeenCalled();
     expect(sourceDataOf('a', sectionOf('second')).tableId).not.toBe(source.tableId);
   });
@@ -164,7 +169,7 @@ describe('Table.Body canMonitor — 테이블 격리 (TB-04)', () => {
       id: 'c',
       tableId: foreignTarget.tableId
     }]);
-    expect(first).toHaveBeenCalledWith('a', 'c', 'top');
+    expect(first).toHaveBeenCalledWith('a', 'c', 'top', ['a']);
     expect(second).not.toHaveBeenCalled();
   });
   it.todo('TB-04 다른 테이블의 행 위에 놓으면 어느 테이블의 onRowDrop 도 호출하지 않는다 (canDrop 또는 target tableId 검사)');
@@ -181,7 +186,7 @@ describe('Table.Body onRowDrop ref 갱신 (TB-05)', () => {
     expect(monitors()).toHaveLength(1);
     expect(monitors()[0]).toBe(monitorBefore);
     expect(first).not.toHaveBeenCalled();
-    expect(latest).toHaveBeenCalledWith('a', 'b', 'bottom');
+    expect(latest).toHaveBeenCalledWith('a', 'b', 'bottom', ['a']);
   });
   it('TB-05 onRowDrop 을 undefined 로 바꾸면 이후 drop 은 무시된다', () => {
     const first = vi.fn();

package/dist/esm/src/components/data-display/table/__tests__/Table.rowGroup.test.js

@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+/**
+ * `Table.RowGroup` 의 DOM 계약만 다룬다.
+ * hover·selected 배경은 CSS 캐스케이드 결과이므로 jsdom 으로 판정할 수 없다 (브라우저에서 확인).
+ */
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { Table } from '../Table';
+let container;
+let root;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+  });
+});
+afterEach(() => {
+  act(() => {
+    root.unmount();
+  });
+  container.remove();
+});
+// `children` 은 TableRowGroupProps 의 필수 prop 이라 createElement 의 props 인자에 담는다.
+const rowGroupProps = className => ({
+  className,
+  children: /*#__PURE__*/createElement('tr', null, /*#__PURE__*/createElement('td', null, '셀'))
+});
+const renderRowGroup = className => {
+  act(() => {
+    root.render(/*#__PURE__*/createElement('table', null, /*#__PURE__*/createElement(Table.RowGroup, rowGroupProps(className))));
+  });
+  const tbody = container.querySelector('tbody');
+  if (!tbody) throw new Error('tbody 가 렌더되지 않았다.');
+  return tbody;
+};
+describe('Table.RowGroup', () => {
+  it('ncua-table__body 와 ncua-table__row-group 을 가진 tbody 를 렌더한다', () => {
+    const tbody = renderRowGroup();
+    expect(tbody.classList.contains('ncua-table__body')).toBe(true);
+    expect(tbody.classList.contains('ncua-table__row-group')).toBe(true);
+  });
+  it('전달한 className 을 기본 클래스와 함께 붙인다', () => {
+    const tbody = renderRowGroup('custom-group');
+    expect(tbody.classList.contains('custom-group')).toBe(true);
+    expect(tbody.classList.contains('ncua-table__body')).toBe(true);
+    expect(tbody.classList.contains('ncua-table__row-group')).toBe(true);
+  });
+});