테이블 칼럼 리사이즈 및 핀 충돌 해결

1 files changed, 16 insertions, 14 deletions

diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx
index 3d01994a..b1027cc0 100644
--- a/components/data-table/data-table.tsx
+++ b/components/data-table/data-table.tsx
@@ -41,8 +41,8 @@ export function DataTable<TData>({
   return (
     <div className={cn("w-full space-y-2.5 overflow-auto", className)} {...props}>
       {children}
-      <div className="max-w-[100vw]  overflow-auto" style={{maxHeight:'36.1rem'}}>
-      <Table className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed">
+      <div className="max-w-[100vw]  overflow-auto" style={{ maxHeight: '36.1rem' }}>
+        <Table className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed">
           {/* -------------------------------
               Table Header
               → 그룹핑된 컬럼의 헤더는 숨김 처리
@@ -60,24 +60,26 @@ export function DataTable<TData>({
                     <TableHead
                       key={header.id}
                       colSpan={header.colSpan}
-                      data-column-id={header.column.id} 
+                      data-column-id={header.column.id}
                       style={{
                         ...getCommonPinningStyles({ column: header.column }),
                         width: header.getSize(), // 리사이징을 위한 너비 설정
-                        position: "relative" // 리사이저를 위한 포지셔닝
+                        // position: "relative" // 리사이저를 위한 포지셔닝
                       }}
                     >
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
+                      <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} />
+                        )}
+                      </div>
                     </TableHead>
                   )
                 })}
@@ -115,7 +117,7 @@ export function DataTable<TData>({
                       data-state={row.getIsExpanded() && "expanded"}
                     >
                       {/* 그룹 헤더는 한 줄에 합쳐서 보여주고, 토글 버튼 + 그룹 라벨 + 값 표기 */}
-                      <TableCell  colSpan={table.getVisibleFlatColumns().length}>
+                      <TableCell colSpan={table.getVisibleFlatColumns().length}>
                         {/* 확장/축소 버튼 (아이콘 중앙 정렬 + Indent) */}
                         {row.getCanExpand() && (
                           <button
@@ -164,7 +166,7 @@ export function DataTable<TData>({
                       return (
                         <TableCell
                           key={cell.id}
-                          data-column-id={cell.column.id} 
+                          data-column-id={cell.column.id}
                           style={{
                             ...getCommonPinningStyles({ column: cell.column }),
                             width: cell.column.getSize(), // 리사이징을 위한 너비 설정