(대표님) 변경사항 20250707 10시 43분

1 files changed, 26 insertions, 14 deletions

diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx
index 64afcb7e..33fca5b8 100644
--- a/components/data-table/data-table.tsx
+++ b/components/data-table/data-table.tsx
@@ -25,6 +25,25 @@ interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivElement> {
   compact?: boolean // 컴팩트 모드 옵션 추가
 }
 
+// ✅ compactStyles를 정적으로 정의 (매번 새로 생성 방지)
+const COMPACT_STYLES = {
+  row: "h-7", // 행 높이 축소
+  cell: "py-1 px-2 text-sm", // 셀 패딩 축소 및 폰트 크기 조정
+  groupRow: "py-1 bg-muted/20 text-sm", // 그룹 행 패딩 축소
+  emptyRow: "h-16", // 데이터 없을 때 행 높이 조정
+  header: "py-1 px-2 text-sm", // 헤더 패딩 축소
+  headerHeight: "h-8", // 헤더 높이 축소
+};
+
+const NORMAL_STYLES = {
+  row: "",
+  cell: "",
+  groupRow: "bg-muted/20",
+  emptyRow: "h-24",
+  header: "",
+  headerHeight: "",
+};
+
 /**
  * 멀티 그룹핑 + 그룹 토글 + 그룹 컬럼/헤더 숨김 + Indent + 리사이징 + 컴팩트 모드
  */
@@ -41,18 +60,11 @@ export function DataTable<TData>({
 
   useAutoSizeColumns(table, autoSizeColumns)
 
-  // 컴팩트 모드를 위한 클래스 정의
-  const compactStyles = compact ? {
-    row: "h-7", // 행 높이 축소
-    cell: "py-1 px-2 text-sm", // 셀 패딩 축소 및 폰트 크기 조정
-    groupRow: "py-1 bg-muted/20 text-sm", // 그룹 행 패딩 축소
-    emptyRow: "h-16", // 데이터 없을 때 행 높이 조정
-  } : {
-    row: "",
-    cell: "",
-    groupRow: "bg-muted/20",
-    emptyRow: "h-24",
-  }
+  // ✅ compactStyles를 useMemo로 메모이제이션
+  const compactStyles = React.useMemo(() => 
+    compact ? COMPACT_STYLES : NORMAL_STYLES, 
+    [compact]
+  );
 
   return (
     <div className={cn("w-full space-y-2.5 overflow-auto", className)} {...props}>
@@ -62,7 +74,7 @@ export function DataTable<TData>({
           {/* 테이블 헤더 */}
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id} className={compact ? "h-8" : ""}>
+              <TableRow key={headerGroup.id} className={compactStyles.headerHeight}>
                 {headerGroup.headers.map((header) => {
                   if (header.column.getIsGrouped()) {
                     return null
@@ -73,7 +85,7 @@ export function DataTable<TData>({
                       key={header.id}
                       colSpan={header.colSpan}
                       data-column-id={header.column.id}
-                      className={compact ? "py-1 px-2 text-sm" : ""}
+                      className={compactStyles.header}
                       style={{
                         ...getCommonPinningStylesWithBorder({ 
                           column: header.column,