From b8e8328b1ffffb80bf4ebb776a4a24e5680fc5bc Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Fri, 28 Mar 2025 00:42:08 +0000
Subject: 테이블 칼럼 리사이즈 및 핀 충돌 해결
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/data-table/data-table-column-header.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

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

diff --git a/components/data-table/data-table-column-header.tsx b/components/data-table/data-table-column-header.tsx
index aa0c754b..795531c8 100644
--- a/components/data-table/data-table-column-header.tsx
+++ b/components/data-table/data-table-column-header.tsx
@@ -24,15 +24,18 @@ export function DataTableColumnHeader<TData, TValue>({
   className,
 }: DataTableColumnHeaderProps<TData, TValue>) {
   if (!column.getCanSort() && !column.getCanHide()) {
-    return <div className={cn(className)}>{title}</div>
+    return <div className={cn("w-full", className)}>{title}</div>
   }
 
   const ascValue = `${column.id}-asc`
   const descValue = `${column.id}-desc`
   const hideValue = `${column.id}-hide`
 
+  // 현재 컬럼 pinned 상태
+  const isPinned = column.getIsPinned();
+
   return (
-    <div className={cn("flex items-center gap-2", className)}>
+    <div className={cn("flex items-center gap-2 w-full", className)}>
       <Select
         value={
           column.getIsSorted() === "desc"
@@ -55,7 +58,11 @@ export function DataTableColumnHeader<TData, TValue>({
                 ? "Sorted ascending. Click to sort descending."
                 : "Not sorted. Click to sort ascending."
           }
-          className="-ml-3 h-8 w-fit border-none text-xs hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent [&>svg:last-child]:hidden"
+          className={cn(
+            "-ml-3 h-8 w-full border-none text-xs hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent [&>svg:last-child]:hidden",
+            // 고정된 상태일 때 추가 스타일
+            isPinned && "sticky-content"
+          )}
         >
           {title}
           <SelectIcon asChild>
@@ -106,4 +113,4 @@ export function DataTableColumnHeader<TData, TValue>({
       </Select>
     </div>
   )
-}
+}
\ No newline at end of file
-- 
cgit v1.2.3