1 files changed, 161 insertions, 0 deletions
diff --git a/lib/b-rfq/vendor-response/response-detail-table.tsx b/lib/b-rfq/vendor-response/response-detail-table.tsx
new file mode 100644
index 00000000..124d5241
--- /dev/null
+++ b/lib/b-rfq/vendor-response/response-detail-table.tsx
@@ -0,0 +1,161 @@
+"use client"
+
+import * as React from "react"
+import { ClientDataTable } from "@/components/client-data-table/data-table"
+import type { EnhancedVendorResponse } from "@/lib/b-rfq/service"
+import { DataTableAdvancedFilterField } from "@/types/table"
+import { DataTableRowAction, getColumns } from "./response-detail-columns"
+
+interface FinalRfqResponseTableProps {
+  data: EnhancedVendorResponse[]
+  // ✅ 헤더 정보를 props로 받기
+  statistics?: {
+    total: number
+    upToDate: number
+    versionMismatch: number
+    pending: number
+    revisionRequested: number
+    waived: number
+  }
+  showHeader?: boolean
+  title?: string
+}
+
+/**
+ * FinalRfqResponseTable: RFQ 응답 데이터를 표시하는 표
+ */
+export function FinalRfqResponseTable({ 
+  data, 
+  statistics,
+  showHeader = true,
+  title = "첨부파일별 응답 현황"
+}: FinalRfqResponseTableProps) {
+  const [rowAction, setRowAction] = 
+    React.useState<DataTableRowAction<EnhancedVendorResponse> | null>(null)
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  // 고급 필터 필드 정의
+  const advancedFilterFields: DataTableAdvancedFilterField<EnhancedVendorResponse>[] = [
+    {
+      id: "effectiveStatus",
+      label: "상태",
+      type: "select",
+      options: [
+        { label: "미응답", value: "NOT_RESPONDED" },
+        { label: "최신", value: "UP_TO_DATE" },
+        { label: "업데이트 필요", value: "VERSION_MISMATCH" },
+        { label: "수정요청", value: "REVISION_REQUESTED" },
+        { label: "포기", value: "WAIVED" },
+      ],
+    },
+    {
+      id: "attachmentType",
+      label: "첨부파일 분류",
+      type: "text",
+    },
+    {
+      id: "serialNo",
+      label: "시리얼 번호",
+      type: "text",
+    },
+    {
+      id: "isVersionMatched",
+      label: "버전 일치",
+      type: "select",
+      options: [
+        { label: "일치", value: "true" },
+        { label: "불일치", value: "false" },
+      ],
+    },
+    {
+      id: "hasMultipleRevisions",
+      label: "다중 리비전",
+      type: "select",
+      options: [
+        { label: "있음", value: "true" },
+        { label: "없음", value: "false" },
+      ],
+    },
+  ]
+
+  if (data.length === 0) {
+    return (
+      <div className="border rounded-lg p-12 text-center">
+        <div className="mx-auto mb-4 h-12 w-12 text-muted-foreground">
+          📄
+        </div>
+        <p className="text-muted-foreground">응답할 첨부파일이 없습니다.</p>
+      </div>
+    )
+  }
+
+  return (
+    // ✅ 상위 컨테이너 구조 단순화 및 너비 제한 해제
+<>
+      {/* 코멘트 범례 */}
+      <div className="flex items-center gap-6 text-xs text-muted-foreground bg-muted/30 p-3 rounded-lg">
+        <span className="font-medium">코멘트 범례:</span>
+        <div className="flex items-center gap-1">
+          <div className="w-2 h-2 rounded-full bg-blue-500"></div>
+          <span>벤더 응답</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <div className="w-2 h-2 rounded-full bg-green-500"></div>
+          <span>내부 메모</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <div className="w-2 h-2 rounded-full bg-red-500"></div>
+          <span>수정 요청</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <div className="w-2 h-2 rounded-full bg-orange-500"></div>
+          <span>발주처 리비전</span>
+        </div>
+      </div>
+      <div style={{ 
+        width: '100%', 
+        maxWidth: '100%', 
+        overflow: 'hidden',
+        contain: 'layout'
+      }}>
+      {/* 데이터 테이블 - 컨테이너 제약 최소화 */}
+      <ClientDataTable
+        data={data}
+        columns={columns}
+        advancedFilterFields={advancedFilterFields}
+               autoSizeColumns={true}
+        compact={true}
+        // ✅ RFQ 테이블에 맞는 컬럼 핀고정
+        initialColumnPinning={{
+          left: ["serialNo", "attachmentType"],
+          right: ["actions"]
+        }}
+      >
+             {showHeader && (
+        <div className="flex items-center justify-between">
+   
+          {statistics && (
+            <div className="flex items-center gap-4 text-sm text-muted-foreground">
+              <span>전체 {statistics.total}개</span>
+              <span className="text-green-600">최신 {statistics.upToDate}개</span>
+              <span className="text-blue-600">업데이트필요 {statistics.versionMismatch}개</span>
+              <span className="text-orange-600">미응답 {statistics.pending}개</span>
+              {statistics.revisionRequested > 0 && (
+                <span className="text-yellow-600">수정요청 {statistics.revisionRequested}개</span>
+              )}
+              {statistics.waived > 0 && (
+                <span className="text-gray-600">포기 {statistics.waived}개</span>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+        </ClientDataTable>
+      </div>
+      </>
+  )
+}