1 files changed, 188 insertions, 94 deletions

diff --git a/lib/procurement-rfqs/vendor-response/table/vendor-quotations-table-columns.tsx b/lib/procurement-rfqs/vendor-response/table/vendor-quotations-table-columns.tsx
index 9eecc72f..bad793c3 100644
--- a/lib/procurement-rfqs/vendor-response/table/vendor-quotations-table-columns.tsx
+++ b/lib/procurement-rfqs/vendor-response/table/vendor-quotations-table-columns.tsx
@@ -48,9 +48,21 @@ function StatusBadge({ status }: { status: string }) {
 interface QuotationWithRfqCode extends ProcurementVendorQuotations {
   rfqCode?: string;
   rfq?: {
+    id?: number;
     rfqCode?: string;
+    status?: string;
     dueDate?: Date | string | null;
-
+    rfqSendDate?: Date | string | null;
+    item?: {
+      id?: number;
+      itemCode?: string;
+      itemName?: string;
+    } | null;
+  } | null;
+  vendor?: {
+    id?: number;
+    vendorName?: string;
+    vendorCode?: string;
   } | null;
 }
 
@@ -64,7 +76,7 @@ interface GetColumnsProps {
 }
 
 /**
- * tanstack table 컬럼 정의
+ * tanstack table 컬럼 정의 (RfqsTable 스타일)
  */
 export function getColumns({
   setRowAction,
@@ -99,13 +111,10 @@ export function getColumns({
     enableHiding: false,
   }
 
-
   // ----------------------------------------------------------------
-  // 3) 일반 컬럼들
+  // 2) actions 컬럼
   // ----------------------------------------------------------------
-  
-  // 견적서 액션 컬럼 (아이콘 버튼으로 변경)
-  const quotationActionColumn: ColumnDef<QuotationWithRfqCode> = {
+  const actionsColumn: ColumnDef<QuotationWithRfqCode> = {
     id: "actions",
     enableHiding: false,
     cell: ({ row }) => {
@@ -134,106 +143,191 @@ export function getColumns({
         </TooltipProvider>
       )
     },
-    size: 50, // 아이콘으로 변경했으므로 크기 줄임
-  }
-  
-  // RFQ 번호 컬럼
-  const rfqCodeColumn: ColumnDef<QuotationWithRfqCode> = {
-    accessorKey: "quotationCode",
-    header: ({ column }) => (
-      <DataTableColumnHeaderSimple column={column} title="RFQ 번호" />
-    ),
-    cell: ({ row }) => row.original.quotationCode || "-",
-    size: 150,
+    size: 50,
   }
 
-    // RFQ 버전 컬럼
-    const quotationVersionColumn: ColumnDef<QuotationWithRfqCode> = {
-      accessorKey: "quotationVersion",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="RFQ 버전" />
-      ),
-      cell: ({ row }) => row.original.quotationVersion || "-",
+  // ----------------------------------------------------------------
+  // 3) 컬럼 정의 배열
+  // ----------------------------------------------------------------
+  const columnDefinitions = [
+    {
+      id: "quotationCode",
+      label: "RFQ 번호",
+      group: null,
+      size: 150,
+      minSize: 100,
+      maxSize: 200,
+    },
+    {
+      id: "quotationVersion", 
+      label: "RFQ 버전",
+      group: null,
+      size: 100,
+      minSize: 80,
+      maxSize: 120,
+    },
+    {
+      id: "itemCode",
+      label: "자재 그룹 코드",
+      group: "RFQ 정보",
+      size: 120,
+      minSize: 100,
+      maxSize: 150,
+    },
+    {
+      id: "itemName",
+      label: "자재 이름",
+      group: "RFQ 정보",
+      // size를 제거하여 유연한 크기 조정 허용
+      minSize: 150,
+      maxSize: 300,
+    },
+    {
+      id: "rfqSendDate",
+      label: "RFQ 송부일",
+      group: "날짜 정보",
+      size: 150,
+      minSize: 120,
+      maxSize: 180,
+    },
+    {
+      id: "dueDate",
+      label: "RFQ 마감일",
+      group: "날짜 정보",
+      size: 150,
+      minSize: 120,
+      maxSize: 180,
+    },
+    {
+      id: "status",
+      label: "상태",
+      group: null,
       size: 100,
+      minSize: 80,
+      maxSize: 120,
+    },
+    {
+      id: "totalPrice",
+      label: "총액",
+      group: null,
+      size: 120,
+      minSize: 100,
+      maxSize: 150,
+    },
+    {
+      id: "submittedAt",
+      label: "제출일",
+      group: "날짜 정보",
+      size: 120,
+      minSize: 100,
+      maxSize: 150,
+    },
+    {
+      id: "validUntil",
+      label: "유효기간",
+      group: "날짜 정보",
+      size: 120,
+      minSize: 100,
+      maxSize: 150,
+    },
+  ];
+
+  // ----------------------------------------------------------------
+  // 4) 그룹별로 컬럼 정리 (중첩 헤더 생성)
+  // ----------------------------------------------------------------
+  const groupMap: Record<string, ColumnDef<QuotationWithRfqCode>[]> = {}
+
+  columnDefinitions.forEach((cfg) => {
+    const groupName = cfg.group || "_noGroup"
+
+    if (!groupMap[groupName]) {
+      groupMap[groupName] = []
     }
 
-    const dueDateColumn: ColumnDef<QuotationWithRfqCode> = {
-      accessorKey: "dueDate",
+    // 개별 컬럼 정의
+    const columnDef: ColumnDef<QuotationWithRfqCode> = {
+      accessorKey: cfg.id,
+      enableResizing: true,
       header: ({ column }) => (
-      <DataTableColumnHeaderSimple column={column} title="RFQ 마감일" />
+        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
       ),
-      cell: ({ row }) => {
-        // 타입 단언 사용
-        const rfq = row.original.rfq as any;
-        const date = rfq?.dueDate as string | null;
-        return date ? formatDateTime(new Date(date)) : "-";
+      cell: ({ row, cell }) => {
+        // 각 컬럼별 특별한 렌더링 처리
+        switch (cfg.id) {
+          case "quotationCode":
+            return row.original.quotationCode || "-"
+          
+          case "quotationVersion":
+            return row.original.quotationVersion || "-"
+          
+          case "itemCode":
+            const itemCode = row.original.rfq?.item?.itemCode;
+            return itemCode ? itemCode : "-";
+          
+          case "itemName":
+            const itemName = row.original.rfq?.item?.itemName;
+            return itemName ? itemName : "-";
+          
+          case "rfqSendDate":
+            const sendDate = row.original.rfq?.rfqSendDate;
+            return sendDate ? formatDateTime(new Date(sendDate)) : "-";
+          
+          case "dueDate":
+            const dueDate = row.original.rfq?.dueDate;
+            return dueDate ? formatDateTime(new Date(dueDate)) : "-";
+          
+          case "status":
+            return <StatusBadge status={row.getValue("status") as string} />
+          
+          case "totalPrice":
+            const price = parseFloat(row.getValue("totalPrice") as string || "0")
+            const currency = row.original.currency
+            return formatCurrency(price, currency)
+          
+          case "submittedAt":
+            const submitDate = row.getValue("submittedAt") as string | null
+            return submitDate ? formatDate(new Date(submitDate)) : "-"
+          
+          case "validUntil":
+            const validDate = row.getValue("validUntil") as string | null
+            return validDate ? formatDate(new Date(validDate)) : "-"
+          
+          default:
+            return row.getValue(cfg.id) ?? ""
+        }
       },
-      size: 100,
+      size: cfg.size,
+      minSize: cfg.minSize,
+      maxSize: cfg.maxSize,
     }
-  
-  // 상태 컬럼
-  const statusColumn: ColumnDef<QuotationWithRfqCode> = {
-    accessorKey: "status",
-    header: ({ column }) => (
-      <DataTableColumnHeaderSimple column={column} title="상태" />
-    ),
-    cell: ({ row }) => <StatusBadge status={row.getValue("status") as string} />,
-    size: 100,
-  }
-  
-  // 총액 컬럼
-  const totalPriceColumn: ColumnDef<QuotationWithRfqCode> = {
-    accessorKey: "totalPrice",
-    header: ({ column }) => (
-      <DataTableColumnHeaderSimple column={column} title="총액" />
-    ),
-    cell: ({ row }) => {
-      const price = parseFloat(row.getValue("totalPrice") as string || "0")
-      const currency = row.original.currency
-      
-      return formatCurrency(price, currency)
-    },
-    size: 120,
-  }
-  
-  // 제출일 컬럼
-  const submittedAtColumn: ColumnDef<QuotationWithRfqCode> = {
-    accessorKey: "submittedAt",
-    header: ({ column }) => (
-      <DataTableColumnHeaderSimple column={column} title="제출일" />
-    ),
-    cell: ({ row }) => {
-      const date = row.getValue("submittedAt") as string | null
-      return date ? formatDate(new Date(date)) : "-"
-    },
-    size: 120,
-  }
-  
-  // 유효기간 컬럼
-  const validUntilColumn: ColumnDef<QuotationWithRfqCode> = {
-    accessorKey: "validUntil",
-    header: ({ column }) => (
-      <DataTableColumnHeaderSimple column={column} title="유효기간" />
-    ),
-    cell: ({ row }) => {
-      const date = row.getValue("validUntil") as string | null
-      return date ? formatDate(new Date(date)) : "-"
-    },
-    size: 120,
-  }
+
+    groupMap[groupName].push(columnDef)
+  })
+
+  // ----------------------------------------------------------------
+  // 5) 그룹별 중첩 컬럼 생성
+  // ----------------------------------------------------------------
+  const nestedColumns: ColumnDef<QuotationWithRfqCode>[] = []
+  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
+    if (groupName === "_noGroup") {
+      // 그룹이 없는 컬럼들은 직접 추가
+      nestedColumns.push(...colDefs)
+    } else {
+      // 그룹이 있는 컬럼들은 중첩 구조로 추가
+      nestedColumns.push({
+        id: groupName,
+        header: groupName,
+        columns: colDefs,
+      })
+    }
+  })
 
   // ----------------------------------------------------------------
-  // 4) 최종 컬럼 배열
+  // 6) 최종 컬럼 배열
   // ----------------------------------------------------------------
   return [
     selectColumn,
-    rfqCodeColumn,
-    quotationVersionColumn,
-    dueDateColumn,
-    statusColumn,
-    totalPriceColumn,
-    submittedAtColumn,
-    validUntilColumn,
-    quotationActionColumn // 이름을 변경하고 마지막에 배치
+    ...nestedColumns,
+    actionsColumn,
   ]
 }
\ No newline at end of file