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-simple-header.tsx | 61 ++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 components/data-table/data-table-column-simple-header.tsx

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

diff --git a/components/data-table/data-table-column-simple-header.tsx b/components/data-table/data-table-column-simple-header.tsx
new file mode 100644
index 00000000..a865df24
--- /dev/null
+++ b/components/data-table/data-table-column-simple-header.tsx
@@ -0,0 +1,61 @@
+"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 DataTableColumnHeaderSimpleProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>
+  title: string
+}
+
+export function DataTableColumnHeaderSimple<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderSimpleProps<TData, TValue>) {
+  // 정렬 불가능 시 → 제목만 보여주기
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>
+  }
+
+  // 정렬 상태: "asc" | "desc" | false
+  const sorted = column.getIsSorted()
+
+  // 아이콘 결정
+  let icon = <ChevronsUpDown className="w-4 h-4" aria-hidden="true" />
+  if (sorted === "asc") {
+    icon = <ArrowUp className="w-4 h-4" aria-hidden="true" />
+  } else if (sorted === "desc") {
+    icon = <ArrowDown className="w-4 h-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
+      onClick={handleClick}
+      className={cn(
+        "flex items-center justify-between cursor-pointer select-none gap-2",
+        className
+      )}
+    >
+      <span>{title}</span>
+      {icon}
+    </div>
+  )
+}
\ No newline at end of file
-- 
cgit v1.2.3