1 files changed, 77 insertions, 0 deletions
diff --git a/lib/material/vendor-material/confirmed-materials-table.tsx b/lib/material/vendor-material/confirmed-materials-table.tsx
new file mode 100644
index 00000000..11282a24
--- /dev/null
+++ b/lib/material/vendor-material/confirmed-materials-table.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import * as React from "react";
+import { DataTable } from "@/components/data-table/data-table";
+import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
+import { Button } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+import { confirmedMaterialsColumns } from "./columns";
+import { useDataTable } from "@/hooks/use-data-table";
+import { getConfirmedMaterials, VendorPossibleMaterial } from "../vendor-possible-material-service";
+
+interface ConfirmedMaterialsTableProps {
+  vendorId: number;
+  data: VendorPossibleMaterial[];
+  pageCount: number;
+}
+
+export function ConfirmedMaterialsTable({
+  vendorId,
+  data,
+  pageCount,
+}: ConfirmedMaterialsTableProps) {
+  const { table } = useDataTable({
+    data,
+    columns: confirmedMaterialsColumns,
+    pageCount,
+    filterFields: [
+      {
+        id: "itemCode",
+        label: "자재그룹",
+        placeholder: "자재그룹 검색...",
+      },
+      {
+        id: "itemName", 
+        label: "자재그룹명",
+        placeholder: "자재그룹명 검색...",
+      },
+    ],
+  });
+
+  const handleAddMaterial = () => {
+    // TODO: 확정정보 추가 다이얼로그 열기
+    console.log("확정정보 추가 버튼 클릭");
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">확정정보</h3>
+        <Button onClick={handleAddMaterial} className="gap-2">
+          <Plus className="h-4 w-4" />
+          추가등록
+        </Button>
+      </div>
+      
+      <DataTable table={table}>
+        <DataTableToolbar 
+          table={table} 
+          filterFields={[
+            {
+              id: "itemCode",
+              label: "자재그룹",
+              placeholder: "자재그룹 검색...",
+            },
+            {
+              id: "itemName", 
+              label: "자재그룹명",
+              placeholder: "자재그룹명 검색...",
+            },
+          ]}
+        >
+          {/* 컬럼 선택 기능 제거 - DataTableViewOptions 없음 */}
+        </DataTableToolbar>
+      </DataTable>
+    </div>
+  );
+}