From 1c790b57447aff36820437d6f18a969de9b45baa Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Tue, 13 May 2025 03:12:10 +0000
Subject: (대표님) lib/rfq-ships
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vendor-table/vendors-table-columns.tsx         | 255 +++++++++++++++++++++
 1 file changed, 255 insertions(+)
 create mode 100644 lib/rfqs-ship/vendor-table/vendors-table-columns.tsx

(limited to 'lib/rfqs-ship/vendor-table/vendors-table-columns.tsx')

diff --git a/lib/rfqs-ship/vendor-table/vendors-table-columns.tsx b/lib/rfqs-ship/vendor-table/vendors-table-columns.tsx
new file mode 100644
index 00000000..8b2e01cc
--- /dev/null
+++ b/lib/rfqs-ship/vendor-table/vendors-table-columns.tsx
@@ -0,0 +1,255 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis, MessageSquare } from "lucide-react"
+
+import { formatDate } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useRouter } from "next/navigation"
+
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+import { RfqShipVendorRow, rfqShipColumnsConfig } from "@/config/vendorRfqShipColumnsConfig"
+
+type NextRouter = ReturnType<typeof useRouter>;
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<RfqShipVendorRow> | null>>;
+  router: NextRouter;
+  openCommentSheet: (rfqId: number) => void;
+}
+
+/**
+ * tanstack table 컬럼 정의 (중첩 헤더 버전)
+ */
+export function getColumns({ setRowAction, router, openCommentSheet }: GetColumnsProps): ColumnDef<RfqShipVendorRow>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<RfqShipVendorRow> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) 그룹별로 컬럼 구성
+  // ----------------------------------------------------------------
+  const groupMap: Record<string, ColumnDef<RfqShipVendorRow>[]> = {}
+
+  rfqShipColumnsConfig.forEach((cfg) => {
+    // 그룹이 없으면 "_noGroup" 처리
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
+    }
+
+    // 컬럼 정의
+    const column: ColumnDef<RfqShipVendorRow> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
+      ),
+      meta: {
+        excelHeader: cfg.excelHeader,
+        group: cfg.group,
+        type: cfg.type,
+      },
+      cell: ({ row, cell }) => {
+        // commercialResponseStatus는 배지로 표시
+        if (cfg.id === "commercialResponseStatus") {
+          const status = row.getValue(cfg.id) as string | null
+          if (!status) return null
+          
+          // 상태에 따라 배지 색상 지정
+          const variant = 
+            status === "SUBMITTED" ? "secondary" : 
+            status === "DRAFT" ? "outline" :
+            status === "REJECTED" ? "destructive" : "default"
+            
+          return (
+            <Badge variant={variant}>
+              {status}
+            </Badge>
+          )
+        }
+        
+        // totalPrice는 통화와 함께 표시
+        if (cfg.id === "totalPrice") {
+          const price = row.getValue(cfg.id) as number | null
+          const currency = row.getValue("currency") as string | null
+          
+          if (!price) return null
+          
+          return `${currency || ''} ${price.toLocaleString()}`
+        }
+        
+        // 날짜 포맷팅
+        if (cfg.id === "respondedAt") {
+          const dateVal = cell.getValue() as Date | null
+          if (!dateVal) return null
+          return formatDate(dateVal)
+        }
+        
+        // 기본 데이터 표시
+        return row.getValue(cfg.id) ?? ""
+      },
+    }
+
+    // 그룹에 추가
+    groupMap[groupName].push(column)
+  })
+
+  // ----------------------------------------------------------------
+  // 3) 코멘트 컬럼
+  // ----------------------------------------------------------------
+  const commentsColumn: ColumnDef<RfqShipVendorRow> = {
+    id: "comments",
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="Comments" />
+    ),
+    cell: ({ row }) => {
+      const vendor = row.original
+      const commCount = vendor.comments?.length ?? 0
+      
+      function handleClick() {
+        // rowAction + openCommentSheet
+        setRowAction({ row, type: "comments" })
+        openCommentSheet(Number(vendor.id) ?? 0)
+      }
+      
+      return (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="relative h-8 w-8 p-0 group"
+          onClick={handleClick}
+          aria-label={
+            commCount > 0 ? `View ${commCount} comments` : "No comments"
+          }
+        >
+          <MessageSquare className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+          {commCount > 0 && (
+            <Badge
+              variant="secondary"
+              className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center"
+            >
+              {commCount}
+            </Badge>
+          )}
+          <span className="sr-only">
+            {commCount > 0 ? `${commCount} Comments` : "No Comments"}
+          </span>
+        </Button>
+      )
+    },
+    enableSorting: false,
+    maxSize: 80
+  }
+  
+  // ----------------------------------------------------------------
+  // 4) 액션 컬럼
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<RfqShipVendorRow> = {
+    id: "actions",
+    header: ({ column }) => (
+      <DataTableColumnHeaderSimple column={column} title="Actions" />
+    ),
+    cell: ({ row }) => {
+      const vendor = row.original
+      
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
+            >
+              <Ellipsis className="h-4 w-4" />
+              <span className="sr-only">Open menu</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-[160px]">
+            <DropdownMenuItem
+              onClick={() => {
+                // 정보 보기
+                router.push(`/vendors/${vendor.vendorId}`)
+              }}
+            >
+              정보 보기
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                // CBE 요청
+                setRowAction({ row, type: "invite" })
+              }}
+            >
+              CBE 요청
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    }
+  }
+
+  // ----------------------------------------------------------------
+  // 5) 그룹별 컬럼 생성
+  // ----------------------------------------------------------------
+  const groupedColumns: ColumnDef<RfqShipVendorRow>[] = []
+
+  // 그룹별로 컬럼 생성
+  Object.entries(groupMap).forEach(([groupName, columns]) => {
+    if (groupName === "_noGroup") {
+      // 그룹 없는 컬럼은 바로 추가
+      groupedColumns.push(...columns)
+    } else {
+      // 그룹 있는 컬럼은 그룹으로 묶기
+      groupedColumns.push({
+        id: groupName,
+        header: groupName,
+        columns: columns,
+      })
+    }
+  })
+
+  // ----------------------------------------------------------------
+  // 6) 최종 컬럼 배열
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...groupedColumns,
+    commentsColumn,
+    actionsColumn
+  ]
+}
\ No newline at end of file
-- 
cgit v1.2.3