From dfdfae3018f8499240f48d28ce634f4a5c56e006 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Wed, 2 Apr 2025 09:54:08 +0000
Subject: 벤더 코멘트 처리
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/client-data-table/data-table.tsx | 84 ++++++-----------------------
 1 file changed, 15 insertions(+), 69 deletions(-)

(limited to 'components/client-data-table/data-table.tsx')

diff --git a/components/client-data-table/data-table.tsx b/components/client-data-table/data-table.tsx
index ff10bfe4..9336db62 100644
--- a/components/client-data-table/data-table.tsx
+++ b/components/client-data-table/data-table.tsx
@@ -63,24 +63,6 @@ export function ClientDataTable<TData, TValue>({
   const [sorting, setSorting] = React.useState<SortingState>([])
   const [grouping, setGrouping] = React.useState<string[]>([])
   const [columnSizing, setColumnSizing] = React.useState<ColumnSizingState>({})
-  
-  // 실제 리사이징 상태만 추적
-  const [isResizing, setIsResizing] = React.useState(false)
-  
-  // 리사이징 상태를 추적하기 위한 ref
-  const isResizingRef = React.useRef(false)
-
-  // 리사이징 이벤트 핸들러
-  const handleResizeStart = React.useCallback(() => {
-    isResizingRef.current = true
-    setIsResizing(true)
-  }, [])
-
-  const handleResizeEnd = React.useCallback(() => {
-    isResizingRef.current = false
-    setIsResizing(false)
-  }, [])
-
   const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({
     left: [],
     right: ["update"],
@@ -115,41 +97,12 @@ export function ClientDataTable<TData, TValue>({
     getGroupedRowModel: getGroupedRowModel(),
     autoResetPageIndex: false,
     getExpandedRowModel: getExpandedRowModel(),
-    enableColumnPinning:true,
-    onColumnPinningChange:setColumnPinning
-
+    enableColumnPinning: true,
+    onColumnPinningChange: setColumnPinning
   })
 
   useAutoSizeColumns(table, autoSizeColumns)
 
-  // 컴포넌트 마운트 시 강제로 리사이징 상태 초기화
-  React.useEffect(() => {
-    // 강제로 초기 상태는 리사이징 비활성화
-    setIsResizing(false)
-    isResizingRef.current = false
-    
-    // 전역 마우스 이벤트 핸들러
-    const handleMouseUp = () => {
-      if (isResizingRef.current) {
-        handleResizeEnd()
-      }
-    }
-    
-    // 이벤트 리스너 등록
-    window.addEventListener('mouseup', handleMouseUp)
-    window.addEventListener('touchend', handleMouseUp)
-    
-    return () => {
-      // 이벤트 리스너 정리
-      window.removeEventListener('mouseup', handleMouseUp)
-      window.removeEventListener('touchend', handleMouseUp)
-      
-      // 컴포넌트 언마운트 시 정리
-      setIsResizing(false)
-      isResizingRef.current = false
-    }
-  }, [handleResizeEnd])
-
   React.useEffect(() => {
     if (!onSelectedRowsChange) return
     const selectedRows = table
@@ -188,27 +141,25 @@ export function ClientDataTable<TData, TValue>({
                       <TableHead
                         key={header.id}
                         colSpan={header.colSpan}
-                        className="relative"
+                        data-column-id={header.column.id}
                         style={{
                           ...getCommonPinningStyles({ column: header.column }),
                           width: header.getSize()
                         }}
                       >
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
+                        <div style={{ position: "relative" }}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                            
+                          {/* 리사이즈 핸들 - 헤더에만 추가 */}
+                          {header.column.getCanResize() && (
+                            <DataTableResizer header={header} />
                           )}
-                          
-                        {/* 리사이즈 핸들 - 헤더에만 추가 */}
-                        {header.column.getCanResize() && (
-                          <DataTableResizer 
-                            header={header} 
-                            onResizeStart={handleResizeStart}
-                            onResizeEnd={handleResizeEnd}
-                          />
-                        )}
+                        </div>
                       </TableHead>
                     )
                   })}
@@ -322,11 +273,6 @@ export function ClientDataTable<TData, TValue>({
               )}
             </TableBody>
           </UiTable>
-          
-          {/* 리사이징 시에만 캡처 레이어 활성화 */}
-          {isResizing && (
-            <div className="fixed inset-0 cursor-col-resize select-none z-50" />
-          )}
         </div>
       </div>
 
-- 
cgit v1.2.3