From e0b2367d88dd80eece67390574e60c9eacdee14d Mon Sep 17 00:00:00 2001
From: rlaks5757 <rlaks5757@gmail.com>
Date: Wed, 26 Mar 2025 16:51:54 +0900
Subject: po, vendor-data-form-report

---
 components/form-data/form-data-table-columns.tsx | 112 +++++++++++++----------
 1 file changed, 62 insertions(+), 50 deletions(-)

(limited to 'components/form-data/form-data-table-columns.tsx')

diff --git a/components/form-data/form-data-table-columns.tsx b/components/form-data/form-data-table-columns.tsx
index d44616f8..b23b2e70 100644
--- a/components/form-data/form-data-table-columns.tsx
+++ b/components/form-data/form-data-table-columns.tsx
@@ -1,8 +1,8 @@
-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 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,
@@ -15,36 +15,38 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
 /** row 액션 관련 타입 */
 export interface DataTableRowAction<TData> {
-  row: Row<TData>
-  type: "open" | "edit" | "update"
+  row: Row<TData>;
+  type: "open" | "edit" | "update";
 }
 
 /** 컬럼 타입 (필요에 따라 확장) */
-export type ColumnType = "STRING" | "NUMBER" | "LIST" 
-
+export type ColumnType = "STRING" | "NUMBER" | "LIST";
 
 export interface DataTableColumnJSON {
-  key: string
+  key: string;
   /** 실제 Excel 등에서 구분용으로 쓰이는 label (고정) */
-  label: string
+  label: string;
 
   /** UI 표시용 label (예: 단위를 함께 표시) */
-  displayLabel?: string
+  displayLabel?: string;
 
-  type: ColumnType
-  options?: string[]
-  uom?: string
+  type: ColumnType;
+  options?: string[];
+  uom?: string;
 }
-/** 
- * getColumns 함수에 필요한 props 
+/**
+ * getColumns 함수에 필요한 props
  * - TData: 테이블에 표시할 행(Row)의 타입
  */
 interface GetColumnsProps<TData> {
-  columnsJSON: DataTableColumnJSON[]
-  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TData> | null>>
+  columnsJSON: DataTableColumnJSON[];
+  setRowAction: React.Dispatch<
+    React.SetStateAction<DataTableRowAction<TData> | null>
+  >;
+  setReportData: React.Dispatch<React.SetStateAction<{ [key: string]: any }[]>>;
 }
 
 /**
@@ -55,8 +57,8 @@ interface GetColumnsProps<TData> {
 export function getColumns<TData extends object>({
   columnsJSON,
   setRowAction,
+  setReportData,
 }: GetColumnsProps<TData>): ColumnDef<TData>[] {
-
   // (1) 기본 컬럼들
   const baseColumns: ColumnDef<TData>[] = columnsJSON.map((col) => ({
     accessorKey: col.key,
@@ -71,17 +73,19 @@ export function getColumns<TData extends object>({
       excelHeader: col.label,
       minWidth: 80,
       paddingFactor: 1.2,
-      maxWidth: col.key ==="tagNumber"?120:150,
+      maxWidth: col.key === "tagNumber" ? 120 : 150,
     },
     // (2) 실제 셀(cell) 렌더링: type에 따라 분기 가능
     cell: ({ row }) => {
-      const cellValue = row.getValue(col.key)
+      const cellValue = row.getValue(col.key);
 
       // 데이터 타입별 처리
       switch (col.type) {
         case "NUMBER":
           // 예: number인 경우 콤마 등 표시
-          return <div>{cellValue ? Number(cellValue).toLocaleString() : ""}</div>
+          return (
+            <div>{cellValue ? Number(cellValue).toLocaleString() : ""}</div>
+          );
 
         // case "date":
         //   // 예: 날짜 포맷팅
@@ -93,14 +97,14 @@ export function getColumns<TData extends object>({
 
         case "LIST":
           // 예: select인 경우 label만 표시
-          return  <div>{String(cellValue ?? "")}</div>
+          return <div>{String(cellValue ?? "")}</div>;
 
         case "STRING":
         default:
-          return <div>{String(cellValue ?? "")}</div>
+          return <div>{String(cellValue ?? "")}</div>;
       }
     },
-  }))
+  }));
 
   // (3) 액션 칼럼 - update 버튼 예시
   const actionColumn: ColumnDef<TData> = {
@@ -108,31 +112,39 @@ export function getColumns<TData extends object>({
     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>
+        <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>
+          <DropdownMenuItem
+            onSelect={() => {
+              const { original } = row;
+              setReportData([original]);
+            }}
+          >
+            Create Report
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     ),
-    size:40,
-    meta:{
-      maxWidth:40
+    size: 40,
+    meta: {
+      maxWidth: 40,
     },
     enablePinning: true,
-  }
+  };
 
   // (4) 최종 반환
-  return [...baseColumns, actionColumn]
-}
\ No newline at end of file
+  return [...baseColumns, actionColumn];
+}
-- 
cgit v1.2.3