(대표님) 컴포넌트 파트 커밋

1 files changed, 35 insertions, 10 deletions

diff --git a/components/client-data-table/data-table.tsx b/components/client-data-table/data-table.tsx
index 9067a475..b7851bb8 100644
--- a/components/client-data-table/data-table.tsx
+++ b/components/client-data-table/data-table.tsx
@@ -40,8 +40,9 @@ interface DataTableProps<TData, TValue> {
   data: TData[]
   advancedFilterFields: any[]
   autoSizeColumns?: boolean
+  compact?: boolean // compact 모드 추가
   onSelectedRowsChange?: (selected: TData[]) => void
-
+  maxHeight?: string | number 
   /** 추가로 표시할 버튼/컴포넌트 */
   children?: React.ReactNode
 }
@@ -51,11 +52,12 @@ export function ClientDataTable<TData, TValue>({
   data,
   advancedFilterFields,
   autoSizeColumns = true,
+  compact = true, // 기본값 true
   children,
+  maxHeight,
   onSelectedRowsChange
 }: DataTableProps<TData, TValue>) {
 
-  
   // (1) React Table 상태
   const [rowSelection, setRowSelection] = React.useState({})
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
@@ -65,7 +67,7 @@ export function ClientDataTable<TData, TValue>({
   const [columnSizing, setColumnSizing] = React.useState<ColumnSizingState>({})
   const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({
     left: ["TAG_NO", "TAG_DESC"],
-    right: ["update"],
+    right: ["update", 'actions'],
   })
   
   const table = useReactTable({
@@ -111,6 +113,23 @@ export function ClientDataTable<TData, TValue>({
     onSelectedRowsChange(selectedRows)
   }, [rowSelection, table, onSelectedRowsChange])
 
+  // 컴팩트 모드를 위한 클래스 정의
+  const compactStyles = compact ? {
+    row: "h-7", // 행 높이 축소
+    cell: "py-1 px-2 text-sm", // 셀 패딩 축소 및 폰트 크기 조정
+    header: "py-1 px-2 text-sm", // 헤더 패딩 축소
+    headerRow: "h-8", // 헤더 행 높이 축소
+    groupRow: "py-1 bg-muted/20 text-sm", // 그룹 행 패딩 축소
+    emptyRow: "h-16", // 데이터 없을 때 행 높이 조정
+  } : {
+    row: "",
+    cell: "",
+    header: "",
+    headerRow: "",
+    groupRow: "bg-muted/20",
+    emptyRow: "h-24",
+  }
+
   // (2) 렌더
   return (
     <div className="space-y-4">
@@ -124,13 +143,13 @@ export function ClientDataTable<TData, TValue>({
       </ClientDataTableAdvancedToolbar>
 
       <div className="rounded-md border">
-        <div className="overflow-auto" style={{maxHeight:'33.6rem'}}>
+        <div className="overflow-auto" style={{ maxHeight: maxHeight || '34rem' }} >
           <UiTable
             className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed"
           >
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
+                <TableRow key={headerGroup.id} className={compactStyles.headerRow}>
                   {headerGroup.headers.map((header) => {
                     // 만약 이 컬럼이 현재 "그룹핑" 상태라면 헤더도 표시하지 않음
                     if (header.column.getIsGrouped()) {
@@ -142,6 +161,7 @@ export function ClientDataTable<TData, TValue>({
                         key={header.id}
                         colSpan={header.colSpan}
                         data-column-id={header.column.id}
+                        className={compactStyles.header}
                         style={{
                           ...getCommonPinningStyles({ column: header.column }),
                           width: header.getSize()
@@ -189,11 +209,14 @@ export function ClientDataTable<TData, TValue>({
                     return (
                       <TableRow
                         key={row.id}
-                        className="bg-muted/20"
+                        className={compactStyles.groupRow}
                         data-state={row.getIsExpanded() && "expanded"}
                       >
                         {/* 그룹 헤더는 한 줄에 합쳐서 보여주고, 토글 버튼 + 그룹 라벨 + 값 표기 */}
-                        <TableCell colSpan={table.getVisibleFlatColumns().length}>
+                        <TableCell 
+                          colSpan={table.getVisibleFlatColumns().length}
+                          className={compact ? "py-1 px-2" : ""}
+                        >
                           {/* 확장/축소 버튼 (아이콘 중앙 정렬 + Indent) */}
                           {row.getCanExpand() && (
                             <button
@@ -205,9 +228,9 @@ export function ClientDataTable<TData, TValue>({
                               }}
                             >
                               {row.getIsExpanded() ? (
-                                <ChevronUp size={16} />
+                                <ChevronUp size={compact ? 14 : 16} />
                               ) : (
-                                <ChevronRight size={16} />
+                                <ChevronRight size={compact ? 14 : 16} />
                               )}
                             </button>
                           )}
@@ -231,6 +254,7 @@ export function ClientDataTable<TData, TValue>({
                   return (
                     <TableRow
                       key={row.id}
+                      className={compactStyles.row}
                       data-state={row.getIsSelected() && "selected"}
                     >
                       {row.getVisibleCells().map((cell) => {
@@ -243,6 +267,7 @@ export function ClientDataTable<TData, TValue>({
                           <TableCell
                             key={cell.id}
                             data-column-id={cell.column.id}
+                            className={compactStyles.cell}
                             style={{
                               ...getCommonPinningStyles({ column: cell.column }),
                               width: cell.column.getSize()
@@ -265,7 +290,7 @@ export function ClientDataTable<TData, TValue>({
                 <TableRow>
                   <TableCell
                     colSpan={table.getAllColumns().length}
-                    className="h-24 text-center"
+                    className={compactStyles.emptyRow + " text-center"}
                   >
                     No results.
                   </TableCell>