1 files changed, 62 insertions, 40 deletions

diff --git a/lib/incoterms/table/incoterms-table.tsx b/lib/incoterms/table/incoterms-table.tsx
index c5b5bba4..c98de810 100644
--- a/lib/incoterms/table/incoterms-table.tsx
+++ b/lib/incoterms/table/incoterms-table.tsx
@@ -3,13 +3,16 @@ import * as React from "react";
 import { useDataTable } from "@/hooks/use-data-table";
 import { DataTable } from "@/components/data-table/data-table";
 import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar";
+import type {
+  DataTableAdvancedFilterField,
+  DataTableRowAction,
+} from "@/types/table"
+import { getIncoterms } from "../service";
 import { getColumns } from "./incoterms-table-columns";
-import { incoterms } from "@/db/schema/procurementRFQ";
-import { IncotermsTableToolbar } from "./incoterms-table-toolbar";
-import { toast } from "sonner";
+import { DeleteIncotermsDialog } from "./delete-incoterms-dialog";
 import { IncotermsEditSheet } from "./incoterms-edit-sheet";
-import { Row } from "@tanstack/react-table";
-import { getIncoterms } from "../service";
+import { IncotermsTableToolbarActions } from "./incoterms-table-toolbar";
+import { incoterms } from "@/db/schema/procurementRFQ";
 
 interface IncotermsTableProps {
   promises?: Promise<[{ data: typeof incoterms.$inferSelect[]; pageCount: number }] >;
@@ -17,8 +20,7 @@ interface IncotermsTableProps {
 
 export function IncotermsTable({ promises }: IncotermsTableProps) {
   const [rawData, setRawData] = React.useState<{ data: typeof incoterms.$inferSelect[]; pageCount: number }>({ data: [], pageCount: 0 });
-  const [isEditSheetOpen, setIsEditSheetOpen] = React.useState(false);
-  const [selectedRow, setSelectedRow] = React.useState<typeof incoterms.$inferSelect | null>(null);
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<typeof incoterms.$inferSelect> | null>(null);
 
   React.useEffect(() => {
     if (promises) {
@@ -44,7 +46,6 @@ export function IncotermsTable({ promises }: IncotermsTableProps) {
           setRawData(result);
         } catch (error) {
           console.error("Error refreshing data:", error);
-          toast.error("데이터를 불러오는 중 오류가 발생했습니다.");
         }
       })();
     }
@@ -67,50 +68,71 @@ export function IncotermsTable({ promises }: IncotermsTableProps) {
       setRawData(result);
     } catch (error) {
       console.error("Error refreshing data:", error);
-      toast.error("데이터를 불러오는 중 오류가 발생했습니다.");
     }
   }, []);
 
-  const handleRowAction = async (action: { type: string; row: Row<typeof incoterms.$inferSelect> }) => {
-    if (action.type === "edit") {
-      setSelectedRow(action.row.original);
-      setIsEditSheetOpen(true);
-    }
-  };
+  // 컬럼 설정 - 외부 파일에서 가져옴
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
 
-  const columns = React.useMemo(() => getColumns({ setRowAction: handleRowAction, onSuccess: refreshData }), [refreshData]);
+  // 고급 필터 필드 설정
+  const advancedFilterFields: DataTableAdvancedFilterField<typeof incoterms.$inferSelect>[] = [
+    { id: "code", label: "코드", type: "text" },
+    {
+      id: "isActive", label: "상태", type: "select", options: [
+        { label: "활성", value: "true" },
+        { label: "비활성", value: "false" },
+      ]
+    },
+    { id: "description", label: "설명", type: "text" },
+    { id: "createdAt", label: "생성일", type: "date" },
+  ];
 
   const { table } = useDataTable({
-    data: rawData.data,
-    columns,
-    pageCount: rawData.pageCount,
-    filterFields: [],
-    enablePinning: true,
-    enableAdvancedFilter: true,
-    initialState: {
-      sorting: [{ id: "createdAt", desc: true }],
-      columnPinning: { right: ["actions"] },
-    },
-    getRowId: (originalRow) => String(originalRow.code),
-    shallow: false,
-    clearOnDefault: true,
-  });
+      data: rawData.data,
+      columns,
+      pageCount: rawData.pageCount,
+      enablePinning: true,
+      enableAdvancedFilter: true,
+      initialState: {
+        sorting: [{ id: "createdAt", desc: true }],
+        columnPinning: { right: ["actions"] },
+      },
+      getRowId: (originalRow) => String(originalRow.code),
+      shallow: false,
+      clearOnDefault: true,
+    })
 
   return (
     <>
       <DataTable table={table}>
-        <DataTableAdvancedToolbar table={table} filterFields={[]} shallow={false}>
-          <IncotermsTableToolbar onSuccess={refreshData} />
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+        >
+          <IncotermsTableToolbarActions table={table} onSuccess={refreshData} />
         </DataTableAdvancedToolbar>
       </DataTable>
-      {isEditSheetOpen && selectedRow && (
-        <IncotermsEditSheet
-          open={isEditSheetOpen}
-          onOpenChange={setIsEditSheetOpen}
-          data={selectedRow}
-          onSuccess={refreshData}
-        />
-      )}
+
+      <DeleteIncotermsDialog
+        open={rowAction?.type === "delete"}
+        onOpenChange={() => setRowAction(null)}
+        incoterms={rowAction?.row.original ? [rowAction?.row.original] : []}
+        showTrigger={false}
+        onSuccess={() => {
+          rowAction?.row.toggleSelected(false)
+          refreshData()
+        }}
+      />
+
+      <IncotermsEditSheet
+        open={rowAction?.type === "update"}
+        onOpenChange={() => setRowAction(null)}
+        data={rowAction?.row.original ?? null}
+        onSuccess={refreshData}
+      />
     </>
   );
 } 
\ No newline at end of file