3/25 까지의 대표님 작업사항

1 files changed, 138 insertions, 0 deletions

diff --git a/components/form-data/form-data-table-columns.tsx b/components/form-data/form-data-table-columns.tsx
new file mode 100644
index 00000000..d44616f8
--- /dev/null
+++ b/components/form-data/form-data-table-columns.tsx
@@ -0,0 +1,138 @@
+import type { ColumnDef, Row } from "@tanstack/react-table"
+import { ClientDataTableColumnHeaderSimple } from "../client-data-table/data-table-column-simple-header"
+import { Button } from "@/components/ui/button"
+import { Ellipsis } from "lucide-react"
+import { formatDate } from "@/lib/utils"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+/** row 액션 관련 타입 */
+export interface DataTableRowAction<TData> {
+  row: Row<TData>
+  type: "open" | "edit" | "update"
+}
+
+/** 컬럼 타입 (필요에 따라 확장) */
+export type ColumnType = "STRING" | "NUMBER" | "LIST" 
+
+
+export interface DataTableColumnJSON {
+  key: string
+  /** 실제 Excel 등에서 구분용으로 쓰이는 label (고정) */
+  label: string
+
+  /** UI 표시용 label (예: 단위를 함께 표시) */
+  displayLabel?: string
+
+  type: ColumnType
+  options?: string[]
+  uom?: string
+}
+/** 
+ * getColumns 함수에 필요한 props 
+ * - TData: 테이블에 표시할 행(Row)의 타입
+ */
+interface GetColumnsProps<TData> {
+  columnsJSON: DataTableColumnJSON[]
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TData> | null>>
+}
+
+/**
+ * getColumns 함수
+ * 1) columnsJSON 배열을 순회하면서 accessorKey / header / cell 등을 설정
+ * 2) 마지막에 "Action" 칼럼(예: update 버튼) 추가
+ */
+export function getColumns<TData extends object>({
+  columnsJSON,
+  setRowAction,
+}: GetColumnsProps<TData>): ColumnDef<TData>[] {
+
+  // (1) 기본 컬럼들
+  const baseColumns: ColumnDef<TData>[] = columnsJSON.map((col) => ({
+    accessorKey: col.key,
+    header: ({ column }) => (
+      <ClientDataTableColumnHeaderSimple
+        column={column}
+        title={col.displayLabel || col.label}
+      />
+    ),
+
+    meta: {
+      excelHeader: col.label,
+      minWidth: 80,
+      paddingFactor: 1.2,
+      maxWidth: col.key ==="tagNumber"?120:150,
+    },
+    // (2) 실제 셀(cell) 렌더링: type에 따라 분기 가능
+    cell: ({ row }) => {
+      const cellValue = row.getValue(col.key)
+
+      // 데이터 타입별 처리
+      switch (col.type) {
+        case "NUMBER":
+          // 예: number인 경우 콤마 등 표시
+          return <div>{cellValue ? Number(cellValue).toLocaleString() : ""}</div>
+
+        // case "date":
+        //   // 예: 날짜 포맷팅
+        //   // 실제론 dayjs / date-fns 등으로 포맷
+        //   if (!cellValue) return <div></div>
+        //   const dateString = cellValue as string
+        //   if (!dateString) return null
+        //   return formatDate(new Date(dateString))
+
+        case "LIST":
+          // 예: select인 경우 label만 표시
+          return  <div>{String(cellValue ?? "")}</div>
+
+        case "STRING":
+        default:
+          return <div>{String(cellValue ?? "")}</div>
+      }
+    },
+  }))
+
+  // (3) 액션 칼럼 - update 버튼 예시
+  const actionColumn: ColumnDef<TData> = {
+    id: "update",
+    header: "",
+    cell: ({ row }) => (
+      <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          aria-label="Open menu"
+          variant="ghost"
+          className="flex size-8 p-0 data-[state=open]:bg-muted"
+        >
+          <Ellipsis className="size-4" aria-hidden="true" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-40">
+        <DropdownMenuItem
+          onSelect={() => setRowAction({ row, type: "update" })}
+        >
+          Edit
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+    ),
+    size:40,
+    meta:{
+      maxWidth:40
+    },
+    enablePinning: true,
+  }
+
+  // (4) 최종 반환
+  return [...baseColumns, actionColumn]
+}
\ No newline at end of file