From e0dfb55c5457aec489fc084c4567e791b4c65eb1 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Wed, 26 Mar 2025 00:37:41 +0000
Subject: 3/25 까지의 대표님 작업사항
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-table/data-table-column-resizable.tsx     | 57 ++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 components/data-table/data-table-column-resizable.tsx

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

diff --git a/components/data-table/data-table-column-resizable.tsx b/components/data-table/data-table-column-resizable.tsx
new file mode 100644
index 00000000..2a91c998
--- /dev/null
+++ b/components/data-table/data-table-column-resizable.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { type Column } from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react"
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>
+  title: string
+}
+
+export function DataTableColumnHeaderResizable<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  // 정렬 상태: "asc" | "desc" | false
+  const sorted = column.getIsSorted()
+  
+  // 아이콘 결정
+  let icon = <ChevronsUpDown className="ml-1 size-4" aria-hidden="true" />
+  if (sorted === "asc") {
+    icon = <ArrowUp className="ml-1 size-4" aria-hidden="true" />
+  } else if (sorted === "desc") {
+    icon = <ArrowDown className="ml-1 size-4" aria-hidden="true" />
+  }
+
+  // 클릭 핸들러: 무정렬 → asc → desc → 무정렬
+  function handleClick() {
+    if (!sorted) {
+      // 현재 무정렬 → asc
+      column.toggleSorting(false)
+    } else if (sorted === "asc") {
+      // asc → desc
+      column.toggleSorting(true)
+    } else {
+      // desc → 무정렬
+      column.toggleSorting(false)
+    }
+  }
+
+  return (
+    <div className={cn("relative flex items-center", className)}>
+      <div
+        onClick={handleClick}
+        className={cn(
+          "flex cursor-pointer select-none items-center gap-1"
+        )}
+      >
+        <span>{title}</span>
+        {column.getCanSort() && icon}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
-- 
cgit v1.2.3

