@mondrianai/runyourai-design-system 0.0.21 → 0.0.22

package/dist/index.mjs

@@ -435,6 +435,7 @@ var buttonVariants = cva(
        * outline      흰 배경 + 테두리, 검정 글자 / hover: accent 배경 (텍스트 색 변화 없음)
        * ghost        배경 없음, 검정 글자 / hover: accent 배경 (텍스트 색 변화 없음)
        * destructive  빨간 배경, 흰 글자(95% opacity) / hover: opacity-90
+       * ghostDestructive  배경 없음, destructive 색 글자 / hover: 옅은 destructive 배경
        * link         배경/테두리 없음, primary 색 글자 / hover: underline
        */
       variant: {
@@ -443,6 +444,7 @@ var buttonVariants = cva(
         outline: "border border-border bg-background text-foreground hover:bg-accent",
         ghost: "text-foreground hover:bg-accent",
         destructive: "bg-destructive text-white/95 shadow-button hover:opacity-90",
+        ghostDestructive: "text-destructive hover:bg-destructive/10",
         link: "text-primary underline-offset-4 hover:underline"
       },
       /**
@@ -1193,28 +1195,46 @@ import * as React6 from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
-var TooltipContent = React6.forwardRef((_a, ref) => {
-  var _b = _a, { className, side = "top", sideOffset = 4, children } = _b, props = __objRest(_b, ["className", "side", "sideOffset", "children"]);
-  return /* @__PURE__ */ jsx12(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
-    TooltipPrimitive.Content,
-    __spreadProps(__spreadValues({
-      ref,
-      side,
-      sideOffset,
-      className: cn(
-        "z-50 w-max max-w-[200px]",
-        "bg-primary rounded-md px-2.5 py-1.5",
-        "animate-in fade-in-0 zoom-in-95",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )
-    }, props), {
-      children: /* @__PURE__ */ jsx12("span", { className: "block text-xs font-normal leading-snug tracking-tight text-primary-foreground whitespace-normal break-words", children })
-    })
-  ) });
-});
+var DEFAULT_TOOLTIP_MAX_WIDTH = 280;
+var TooltipContent = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      side = "top",
+      sideOffset = 4,
+      maxWidth = DEFAULT_TOOLTIP_MAX_WIDTH,
+      style,
+      children
+    } = _b, props = __objRest(_b, [
+      "className",
+      "side",
+      "sideOffset",
+      "maxWidth",
+      "style",
+      "children"
+    ]);
+    return /* @__PURE__ */ jsx12(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
+      TooltipPrimitive.Content,
+      __spreadProps(__spreadValues({
+        ref,
+        side,
+        sideOffset,
+        className: cn(
+          "z-50 w-max",
+          "bg-primary rounded-md px-2.5 py-1.5",
+          "animate-in fade-in-0 zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        ),
+        style: __spreadValues({ maxWidth }, style)
+      }, props), {
+        children: /* @__PURE__ */ jsx12("span", { className: "block text-xs font-normal leading-snug tracking-tight text-primary-foreground whitespace-normal break-words", children })
+      })
+    ) });
+  }
+);
 TooltipContent.displayName = "TooltipContent";
 function Tooltip(_a) {
   var _b = _a, {
@@ -4056,6 +4076,12 @@ function MarkdownMessage({
 // src/components/ui/modal.tsx
 import * as React18 from "react";
 import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+function withIconSize(icon) {
+  if (!React18.isValidElement(icon)) return icon;
+  return React18.cloneElement(icon, {
+    className: cn("size-4", icon.props.className)
+  });
+}
 function Modal({
   id,
   trigger,
@@ -4066,15 +4092,29 @@ function Modal({
   description,
   showCloseButton = true,
   children,
-  cancelLabel = "\uCDE8\uC18C",
-  confirmLabel = "\uD655\uC778",
+  cancelButtonProps,
+  confirmButtonProps,
   onConfirm,
   onCancel,
-  confirmDisabled = false,
   closeOnOverlayClick = true,
-  className,
-  isLoading
+  className
 }) {
+  const {
+    label: cancelLabel = "\uCDE8\uC18C",
+    iconStart: cancelIconStart,
+    iconEnd: cancelIconEnd,
+    disabled: cancelDisabled = false,
+    isLoading: cancelLoading = false,
+    className: cancelClassName
+  } = cancelButtonProps != null ? cancelButtonProps : {};
+  const {
+    label: confirmLabel = "\uD655\uC778",
+    iconStart: confirmIconStart,
+    iconEnd: confirmIconEnd,
+    disabled: confirmDisabled = false,
+    isLoading: confirmLoading = false,
+    className: confirmClassName
+  } = confirmButtonProps != null ? confirmButtonProps : {};
   const isControlled = openProp !== void 0;
   const [openState, setOpenState] = React18.useState(false);
   const open = isControlled ? openProp : openState;
@@ -4087,7 +4127,7 @@ function Modal({
     },
     [isControlled, onOpenChange]
   );
-  const isLoadingCombined = loading || !!isLoading;
+  const isLoadingCombined = loading || confirmLoading;
   const loadingRef = React18.useRef(isLoadingCombined);
   loadingRef.current = isLoadingCombined;
   const handleClose = React18.useCallback(() => {
@@ -4138,7 +4178,7 @@ function Modal({
           {
             id,
             className: cn(
-              "bg-background border border-border rounded-2xl shadow-modal flex flex-col gap-4 p-6 w-423 animate-kb-modal-in",
+              "bg-background border border-border rounded-2xl shadow-modal flex flex-col gap-4 p-6 w-120 animate-kb-modal-in",
               className
             ),
             children: [
@@ -4173,7 +4213,11 @@ function Modal({
                   {
                     variant: "outline",
                     onClick: handleClose,
-                    disabled: isLoadingCombined,
+                    disabled: isLoadingCombined || cancelDisabled,
+                    loading: cancelLoading,
+                    iconStart: withIconSize(cancelIconStart),
+                    iconEnd: withIconSize(cancelIconEnd),
+                    className: cancelClassName,
                     children: cancelLabel
                   }
                 ),
@@ -4184,6 +4228,9 @@ function Modal({
                     onClick: handleConfirm,
                     disabled: confirmDisabled,
                     loading: isLoadingCombined,
+                    iconStart: withIconSize(confirmIconStart),
+                    iconEnd: withIconSize(confirmIconEnd),
+                    className: confirmClassName,
                     children: confirmLabel
                   }
                 )
@@ -6178,6 +6225,53 @@ function Table({
     ),
     [columns]
   );
+  const usesFlexLayout = React27.useMemo(
+    () => columns.some(
+      (c) => c.width != null || c.minWidth != null || c.grow != null
+    ),
+    [columns]
+  );
+  const scrollRef = React27.useRef(null);
+  const [containerWidth, setContainerWidth] = React27.useState(
+    null
+  );
+  React27.useEffect(() => {
+    if (!usesFlexLayout) return;
+    const el = scrollRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const measure = () => setContainerWidth(el.clientWidth);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [usesFlexLayout]);
+  const flexWidths = React27.useMemo(() => {
+    var _a2, _b2;
+    if (!usesFlexLayout) return null;
+    const selectionW = isSelectionActive ? 40 : 0;
+    const actionsW = rowActions ? 48 : 0;
+    const fixedSum = columns.reduce((sum, c) => {
+      var _a3;
+      return sum + ((_a3 = c.width) != null ? _a3 : 0);
+    }, 0);
+    const flexCols = columns.filter((c) => c.width == null);
+    const minSum = flexCols.reduce((sum, c) => {
+      var _a3;
+      return sum + ((_a3 = c.minWidth) != null ? _a3 : 0);
+    }, 0);
+    const growSum = flexCols.reduce((sum, c) => {
+      var _a3;
+      return sum + ((_a3 = c.grow) != null ? _a3 : 1);
+    }, 0) || 1;
+    const avail = (containerWidth != null ? containerWidth : 0) - selectionW - actionsW - fixedSum;
+    const free = Math.max(0, avail - minSum);
+    const byKey = {};
+    for (const c of columns) {
+      byKey[c.key] = c.width != null ? c.width : Math.round(((_a2 = c.minWidth) != null ? _a2 : 0) + free * ((_b2 = c.grow) != null ? _b2 : 1) / growSum);
+    }
+    const total = selectionW + actionsW + columns.reduce((sum, c) => sum + byKey[c.key], 0);
+    return { byKey, total, selectionW, actionsW };
+  }, [usesFlexLayout, columns, containerWidth, isSelectionActive, rowActions]);
   const { pageIndex } = (_c = table.getState().pagination) != null ? _c : { pageIndex: 0 };
   const totalPages = hasPagination ? table.getPageCount() : 1;
   const currentPage = pageIndex + 1;
@@ -6188,156 +6282,169 @@ function Table({
     /* @__PURE__ */ jsx52(
       "div",
       {
+        ref: scrollRef,
         className: cn("w-full overflow-x-auto", maxHeight && "overflow-y-auto"),
         style: maxHeight ? { maxHeight } : void 0,
-        children: /* @__PURE__ */ jsxs37("table", { className: "w-full border-collapse", children: [
-          /* @__PURE__ */ jsx52("thead", { className: cn(maxHeight && "sticky top-0 z-10 bg-background"), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx52("tr", { className: "border-b border-border", children: headerGroup.headers.map((header, headerIdx) => {
-            var _a2;
-            if (header.id === "__select__") {
-              return /* @__PURE__ */ jsx52("th", { className: "w-10 p-0 relative", children: isSelectionActive && /* @__PURE__ */ jsx52("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx52(
-                Checkbox,
-                {
-                  checked: table.getIsAllPageRowsSelected() ? true : table.getIsSomePageRowsSelected() ? "indeterminate" : false,
-                  onCheckedChange: (checked) => table.toggleAllPageRowsSelected(!!checked),
-                  "aria-label": "\uC804\uCCB4 \uC120\uD0DD"
+        children: /* @__PURE__ */ jsxs37(
+          "table",
+          {
+            className: "w-full table-fixed border-collapse",
+            style: flexWidths ? { minWidth: flexWidths.total } : void 0,
+            children: [
+              flexWidths && /* @__PURE__ */ jsxs37("colgroup", { children: [
+                isSelectionActive && /* @__PURE__ */ jsx52("col", { style: { width: flexWidths.selectionW } }),
+                columns.map((col) => /* @__PURE__ */ jsx52("col", { style: { width: flexWidths.byKey[col.key] } }, col.key)),
+                rowActions && /* @__PURE__ */ jsx52("col", { style: { width: flexWidths.actionsW } })
+              ] }),
+              /* @__PURE__ */ jsx52("thead", { className: cn(maxHeight && "sticky top-0 z-10 bg-background"), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx52("tr", { className: "border-b border-border", children: headerGroup.headers.map((header, headerIdx) => {
+                var _a2;
+                if (header.id === "__select__") {
+                  return /* @__PURE__ */ jsx52("th", { className: "w-10 p-0 relative", children: isSelectionActive && /* @__PURE__ */ jsx52("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx52(
+                    Checkbox,
+                    {
+                      checked: table.getIsAllPageRowsSelected() ? true : table.getIsSomePageRowsSelected() ? "indeterminate" : false,
+                      onCheckedChange: (checked) => table.toggleAllPageRowsSelected(!!checked),
+                      "aria-label": "\uC804\uCCB4 \uC120\uD0DD"
+                    }
+                  ) }) }, header.id);
                 }
-              ) }) }, header.id);
-            }
-            if (header.id === "__row_actions__") {
-              return /* @__PURE__ */ jsx52("th", { className: "w-12 px-2 py-3" }, header.id);
-            }
-            const { align, headerCls } = (_a2 = colMap[header.id]) != null ? _a2 : {
-              align: "left",
-              headerCls: ""
-            };
-            const canSort = header.column.getCanSort();
-            const sorted = header.column.getIsSorted();
-            const direction = sorted === "asc" ? "ASC" : sorted === "desc" ? "DESC" : null;
-            const isFirstDataCol = isSelectionActive ? headerIdx === 1 : headerIdx === 0;
-            const showSelectionLabel = isSelectionActive && hasSelection && isFirstDataCol;
-            const hideLabel = isSelectionActive && hasSelection && !isFirstDataCol;
-            return /* @__PURE__ */ jsx52(
-              "th",
-              {
-                className: cn(
-                  "px-2 py-3 text-sm font-medium text-muted-foreground transition-colors",
-                  align === "center" && "text-center",
-                  align === "right" && "text-right",
-                  align === "left" && "text-left",
-                  canSort && !hideLabel && !showSelectionLabel && "group cursor-pointer select-none hover:font-semibold hover:text-foreground",
-                  showSelectionLabel && "text-foreground",
-                  headerCls
-                ),
-                onClick: showSelectionLabel || hideLabel ? void 0 : header.column.getToggleSortingHandler(),
-                children: showSelectionLabel ? `${selectedCount}\uAC1C \uC120\uD0DD\uB428` : hideLabel ? null : /* @__PURE__ */ jsxs37(
-                  "div",
+                if (header.id === "__row_actions__") {
+                  return /* @__PURE__ */ jsx52("th", { className: "w-12 px-2 py-3" }, header.id);
+                }
+                const { align, headerCls } = (_a2 = colMap[header.id]) != null ? _a2 : {
+                  align: "left",
+                  headerCls: ""
+                };
+                const canSort = header.column.getCanSort();
+                const sorted = header.column.getIsSorted();
+                const direction = sorted === "asc" ? "ASC" : sorted === "desc" ? "DESC" : null;
+                const isFirstDataCol = isSelectionActive ? headerIdx === 1 : headerIdx === 0;
+                const showSelectionLabel = isSelectionActive && hasSelection && isFirstDataCol;
+                const hideLabel = isSelectionActive && hasSelection && !isFirstDataCol;
+                return /* @__PURE__ */ jsx52(
+                  "th",
                   {
                     className: cn(
-                      "inline-flex items-center gap-1",
-                      align === "center" && "justify-center",
-                      align === "right" && "justify-end"
+                      "px-2 py-3 text-sm font-medium text-muted-foreground transition-colors",
+                      align === "center" && "text-center",
+                      align === "right" && "text-right",
+                      align === "left" && "text-left",
+                      canSort && !hideLabel && !showSelectionLabel && "group cursor-pointer select-none hover:font-semibold hover:text-foreground",
+                      showSelectionLabel && "text-foreground",
+                      headerCls
                     ),
-                    children: [
-                      flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      ),
-                      canSort && /* @__PURE__ */ jsx52(SortIcon, { direction })
-                    ]
-                  }
-                )
-              },
-              header.id
-            );
-          }) }, headerGroup.id)) }),
-          /* @__PURE__ */ jsx52("tbody", { children: loading ? /* @__PURE__ */ jsx52("tr", { children: /* @__PURE__ */ jsx52("td", { colSpan: colCount, className: "py-16 text-center", children: /* @__PURE__ */ jsx52(
-            Icon,
-            {
-              name: "loader-2",
-              className: "mx-auto size-6 animate-spin text-muted-foreground"
-            }
-          ) }) }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx52("tr", { children: /* @__PURE__ */ jsx52("td", { colSpan: colCount, children: empty === void 0 ? /* @__PURE__ */ jsx52(Empty, { description: "No Data" }) : isEmptyConfig(empty) ? /* @__PURE__ */ jsx52(Empty, { description: empty.description }) : empty }) }) : table.getRowModel().rows.map((row) => {
-            var _a2;
-            const rowDisabled = (_a2 = isRowDisabled == null ? void 0 : isRowDisabled(row.original)) != null ? _a2 : false;
-            return /* @__PURE__ */ jsx52(
-              "tr",
-              {
-                "aria-disabled": rowDisabled || void 0,
-                onClick: !isSelectionActive && onRowClick && !rowDisabled ? () => onRowClick(row.original) : void 0,
-                className: cn(
-                  "group border-b border-border transition-colors hover:bg-accent/50 last:border-b-0",
-                  !isSelectionActive && onRowClick && !rowDisabled && "cursor-pointer",
-                  isSelectionActive && row.getIsSelected() && "bg-accent/30",
-                  rowDisabled && "cursor-not-allowed [&_td]:text-muted-foreground"
-                ),
-                children: row.getVisibleCells().map((cell) => {
-                  var _a3;
-                  if (cell.column.id === "__select__") {
-                    return /* @__PURE__ */ jsx52("td", { className: "w-10 p-0 relative", children: isSelectionActive && /* @__PURE__ */ jsx52("div", { className: "absolute inset-0 flex items-center justify-center", children: flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    ) }) }, cell.id);
-                  }
-                  if (cell.column.id === "__row_actions__") {
-                    return /* @__PURE__ */ jsx52(
-                      "td",
+                    onClick: showSelectionLabel || hideLabel ? void 0 : header.column.getToggleSortingHandler(),
+                    children: showSelectionLabel ? `${selectedCount}\uAC1C \uC120\uD0DD\uB428` : hideLabel ? null : /* @__PURE__ */ jsxs37(
+                      "div",
                       {
-                        className: "w-12 px-2 py-4 align-middle text-right",
-                        children: flexRender(
+                        className: cn(
+                          "inline-flex items-center gap-1",
+                          align === "center" && "justify-center",
+                          align === "right" && "justify-end"
+                        ),
+                        children: [
+                          flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          ),
+                          canSort && /* @__PURE__ */ jsx52(SortIcon, { direction })
+                        ]
+                      }
+                    )
+                  },
+                  header.id
+                );
+              }) }, headerGroup.id)) }),
+              /* @__PURE__ */ jsx52("tbody", { children: loading ? /* @__PURE__ */ jsx52("tr", { children: /* @__PURE__ */ jsx52("td", { colSpan: colCount, className: "py-16 text-center", children: /* @__PURE__ */ jsx52(
+                Icon,
+                {
+                  name: "loader-2",
+                  className: "mx-auto size-6 animate-spin text-muted-foreground"
+                }
+              ) }) }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx52("tr", { children: /* @__PURE__ */ jsx52("td", { colSpan: colCount, children: empty === void 0 ? /* @__PURE__ */ jsx52(Empty, { description: "No Data" }) : isEmptyConfig(empty) ? /* @__PURE__ */ jsx52(Empty, { description: empty.description }) : empty }) }) : table.getRowModel().rows.map((row) => {
+                var _a2;
+                const rowDisabled = (_a2 = isRowDisabled == null ? void 0 : isRowDisabled(row.original)) != null ? _a2 : false;
+                return /* @__PURE__ */ jsx52(
+                  "tr",
+                  {
+                    "aria-disabled": rowDisabled || void 0,
+                    onClick: !isSelectionActive && onRowClick && !rowDisabled ? () => onRowClick(row.original) : void 0,
+                    className: cn(
+                      "group border-b border-border transition-colors hover:bg-accent/50 last:border-b-0",
+                      !isSelectionActive && onRowClick && !rowDisabled && "cursor-pointer",
+                      isSelectionActive && row.getIsSelected() && "bg-accent/30",
+                      rowDisabled && "cursor-not-allowed [&_td]:text-muted-foreground"
+                    ),
+                    children: row.getVisibleCells().map((cell) => {
+                      var _a3;
+                      if (cell.column.id === "__select__") {
+                        return /* @__PURE__ */ jsx52("td", { className: "w-10 p-0 relative", children: isSelectionActive && /* @__PURE__ */ jsx52("div", { className: "absolute inset-0 flex items-center justify-center", children: flexRender(
                           cell.column.columnDef.cell,
                           cell.getContext()
-                        )
-                      },
-                      cell.id
-                    );
-                  }
-                  const {
-                    align,
-                    cellCls,
-                    ellipsis,
-                    ellipsisTooltip,
-                    cellFn
-                  } = (_a3 = colMap[cell.column.id]) != null ? _a3 : {
-                    align: "left",
-                    cellCls: "",
-                    ellipsis: false,
-                    ellipsisTooltip: void 0,
-                    cellFn: () => null
-                  };
-                  const rendered = flexRender(
-                    cell.column.columnDef.cell,
-                    cell.getContext()
-                  );
-                  const rawContent = ellipsis ? cellFn(row.original) : null;
-                  const cellContent = ellipsis ? /* @__PURE__ */ jsx52(
-                    EllipsisCell,
-                    {
-                      rendered: rawContent,
-                      tooltip: ellipsisTooltip ? ellipsisTooltip(row.original) : rawContent
-                    }
-                  ) : rendered;
-                  return /* @__PURE__ */ jsx52(
-                    "td",
-                    {
-                      className: cn(
-                        "px-2 py-4 text-sm leading-none text-foreground align-middle",
-                        align === "center" && "text-center",
-                        align === "right" && "text-right",
-                        // ellipsis 컬럼은 max-w-0으로 table 레이아웃상 너비를 고정하고
-                        // overflow-hidden으로 td 밖으로 나가는 콘텐츠를 클리핑
-                        ellipsis && "max-w-0 overflow-hidden",
-                        cellCls
-                      ),
-                      children: cellContent
-                    },
-                    cell.id
-                  );
-                })
-              },
-              getRowKey(row.original)
-            );
-          }) })
-        ] })
+                        ) }) }, cell.id);
+                      }
+                      if (cell.column.id === "__row_actions__") {
+                        return /* @__PURE__ */ jsx52(
+                          "td",
+                          {
+                            className: "w-12 px-2 py-4 align-middle text-right",
+                            children: flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
+                            )
+                          },
+                          cell.id
+                        );
+                      }
+                      const {
+                        align,
+                        cellCls,
+                        ellipsis,
+                        ellipsisTooltip,
+                        cellFn
+                      } = (_a3 = colMap[cell.column.id]) != null ? _a3 : {
+                        align: "left",
+                        cellCls: "",
+                        ellipsis: false,
+                        ellipsisTooltip: void 0,
+                        cellFn: () => null
+                      };
+                      const rendered = flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      );
+                      const rawContent = ellipsis ? cellFn(row.original) : null;
+                      const cellContent = ellipsis ? /* @__PURE__ */ jsx52(
+                        EllipsisCell,
+                        {
+                          rendered: rawContent,
+                          tooltip: ellipsisTooltip ? ellipsisTooltip(row.original) : rawContent
+                        }
+                      ) : rendered;
+                      return /* @__PURE__ */ jsx52(
+                        "td",
+                        {
+                          className: cn(
+                            "px-2 py-4 text-sm leading-none text-foreground align-middle",
+                            align === "center" && "text-center",
+                            align === "right" && "text-right",
+                            // ellipsis 컬럼은 max-w-0으로 table 레이아웃상 너비를 고정하고
+                            // overflow-hidden으로 td 밖으로 나가는 콘텐츠를 클리핑
+                            ellipsis && "max-w-0 overflow-hidden",
+                            cellCls
+                          ),
+                          children: cellContent
+                        },
+                        cell.id
+                      );
+                    })
+                  },
+                  getRowKey(row.original)
+                );
+              }) })
+            ]
+          }
+        )
       }
     ),
     !loading && hasPagination && totalPages > 1 && /* @__PURE__ */ jsx52("div", { className: "pt-4 flex justify-center", children: /* @__PURE__ */ jsx52(