1 files changed, 22 insertions, 21 deletions

diff --git a/components/client-data-table/data-table.tsx b/components/client-data-table/data-table.tsx
index 675fe192..9ea44775 100644
--- a/components/client-data-table/data-table.tsx
+++ b/components/client-data-table/data-table.tsx
@@ -47,6 +47,8 @@ interface DataTableProps<TData, TValue> {
   children?: React.ReactNode
   /** 선택 상태 초기화 트리거 */
   clearSelection?: boolean
+  initialColumnPinning?: ColumnPinningState  // 추가
+
 }
 
 export function ClientDataTable<TData, TValue>({
@@ -58,7 +60,8 @@ export function ClientDataTable<TData, TValue>({
   children,
   maxHeight,
   onSelectedRowsChange,
-  clearSelection
+  clearSelection,
+  initialColumnPinning
 }: DataTableProps<TData, TValue>) {
 
   // (1) React Table 상태
@@ -68,11 +71,12 @@ export function ClientDataTable<TData, TValue>({
   const [sorting, setSorting] = React.useState<SortingState>([])
   const [grouping, setGrouping] = React.useState<string[]>([])
   const [columnSizing, setColumnSizing] = React.useState<ColumnSizingState>({})
-  const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({
-    left: ["select","TAG_NO", "TAG_DESC", "status"],
-    right: ["update", 'actions'],
-  })
-  
+  const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>(
+    initialColumnPinning || {
+      left: ["select","TAG_NO", "TAG_DESC", "status"],
+      right: ["update", 'actions'],
+    }
+  )
   // 🎯 스크롤 상태 감지 추가
   const [isScrolled, setIsScrolled] = React.useState(false)
 
@@ -145,16 +149,18 @@ export function ClientDataTable<TData, TValue>({
         background: "hsl(var(--background))",
         transition: "none",
       }),
-      // 바디 셀은 핀된 경우에만 스크롤 상태에 따라 동적 변경
+      // 바디 셀 처리: 왼쪽과 오른쪽을 구분
       ...(!isHeader && pinnedSide && {
-        background: isScrolled 
-          ? "hsl(var(--background))" 
-          : "transparent",
+        background: 
+          pinnedSide === "right" 
+            ? "hsl(var(--background))" // 오른쪽 고정은 항상 불투명
+            : isScrolled 
+              ? "hsl(var(--background))" // 왼쪽 고정은 스크롤 시에만 불투명
+              : "transparent",
         transition: "background-color 0.15s ease-out",
       }),
     }
   }
-
   // 🎯 테이블 총 너비 계산
   const getTableWidth = React.useCallback(() => {
     const totalSize = table.getCenterTotalSize() + table.getLeftTotalSize() + table.getRightTotalSize()
@@ -180,7 +186,7 @@ export function ClientDataTable<TData, TValue>({
 
   // (2) 렌더
   return (
-    <div className="space-y-4">
+    <div className="w-full space-y-2.5 overflow-auto">
       {/* 툴바에 children을 넘기기 */}
       <ClientDataTableAdvancedToolbar
         table={table}
@@ -190,19 +196,14 @@ export function ClientDataTable<TData, TValue>({
         {children}
       </ClientDataTableAdvancedToolbar>
 
-      <div className="rounded-md border">
+
         <div 
-          className="overflow-auto" 
+          className="max-w-[100vw] overflow-auto" 
           style={{ maxHeight: maxHeight || '34rem' }}
           onScroll={handleScroll} // 🎯 스크롤 이벤트 핸들러 추가
         >
           <UiTable
-            className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10"
-            style={{ 
-              width: getTableWidth(), // 🎯 동적 너비 계산
-              minWidth: '100%'
-            }}
-          >
+          className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed">
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow key={headerGroup.id} className={compactStyles.headerRow}>
@@ -355,7 +356,7 @@ export function ClientDataTable<TData, TValue>({
             </TableBody>
           </UiTable>
         </div>
-      </div>
+
 
       <ClientDataTablePagination table={table} />
     </div>