From 356929b399ef31a4de82906267df438cf29ea59d Mon Sep 17 00:00:00 2001
From: 0-Zz-ang <s1998319@gmail.com>
Date: Thu, 10 Jul 2025 15:56:13 +0900
Subject: 인터페이스 관련 파일 수정
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../table/delete-integration-dialog.tsx            | 154 ++++++++++++
 lib/integration/table/integration-add-dialog.tsx   | 272 ++++++++++++++++++++
 .../table/integration-delete-dialog.tsx            | 122 +++++++++
 lib/integration/table/integration-edit-dialog.tsx  | 274 ++++++++++++++++++++
 lib/integration/table/integration-edit-sheet.tsx   | 278 +++++++++++++++++++++
 .../table/integration-table-columns.tsx            | 214 ++++++++++++++++
 .../table/integration-table-toolbar.tsx            |  53 ++++
 lib/integration/table/integration-table.tsx        | 166 ++++++++++++
 8 files changed, 1533 insertions(+)
 create mode 100644 lib/integration/table/delete-integration-dialog.tsx
 create mode 100644 lib/integration/table/integration-add-dialog.tsx
 create mode 100644 lib/integration/table/integration-delete-dialog.tsx
 create mode 100644 lib/integration/table/integration-edit-dialog.tsx
 create mode 100644 lib/integration/table/integration-edit-sheet.tsx
 create mode 100644 lib/integration/table/integration-table-columns.tsx
 create mode 100644 lib/integration/table/integration-table-toolbar.tsx
 create mode 100644 lib/integration/table/integration-table.tsx

(limited to 'lib/integration/table')

diff --git a/lib/integration/table/delete-integration-dialog.tsx b/lib/integration/table/delete-integration-dialog.tsx
new file mode 100644
index 00000000..5ce9676d
--- /dev/null
+++ b/lib/integration/table/delete-integration-dialog.tsx
@@ -0,0 +1,154 @@
+"use client"
+
+import * as React from "react"
+import { type Row } from "@tanstack/react-table"
+import { Loader, Trash } from "lucide-react"
+import { toast } from "sonner"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+
+import { deleteIntegration } from "../service"
+import { integrations } from "@/db/schema/integration"
+
+interface DeleteIntegrationDialogProps
+  extends React.ComponentPropsWithoutRef<typeof Dialog> {
+  integrations: Row<typeof integrations.$inferSelect>["original"][]
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function DeleteIntegrationDialog({
+  integrations: integrationData = [],
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: DeleteIntegrationDialogProps) {
+  const [isDeletePending, startDeleteTransition] = React.useTransition()
+  const isDesktop = useMediaQuery("(min-width: 640px)")
+
+  function onDelete() {
+    startDeleteTransition(async () => {
+      try {
+        // 각 통합을 순차적으로 삭제
+        for (const integrationItem of integrationData) {
+          const result = await deleteIntegration(integrationItem.id)
+          if (!result.success) {
+            toast.error(`인터페이스 ${integrationItem.name} 삭제 실패: ${result.error}`)
+            return
+          }
+        }
+
+        props.onOpenChange?.(false)
+        toast.success("인터페이스가 성공적으로 삭제되었습니다.")
+        onSuccess?.()
+      } catch (error) {
+        console.error("Delete error:", error)
+        toast.error("인터페이스 삭제 중 오류가 발생했습니다.")
+      }
+    })
+  }
+
+  if (isDesktop) {
+    return (
+      <Dialog {...props}>
+        {showTrigger ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Trash className="mr-2 size-4" aria-hidden="true" />
+              Delete ({integrationData?.length ?? 0})
+            </Button>
+          </DialogTrigger>
+        ) : null}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>정말로 삭제하시겠습니까?</DialogTitle>
+            <DialogDescription>
+              이 작업은 되돌릴 수 없습니다. 선택된{" "}
+              <span className="font-medium">{integrationData?.length ?? 0}</span>
+              개의 인터페이스를 서버에서 영구적으로 삭제합니다.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:space-x-0">
+            <DialogClose asChild>
+              <Button variant="outline">취소</Button>
+            </DialogClose>
+            <Button
+              aria-label="선택된 행 삭제"
+              variant="destructive"
+              onClick={onDelete}
+              disabled={isDeletePending}
+            >
+              {isDeletePending && (
+                <Loader
+                  className="mr-2 size-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              삭제
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer {...props}>
+      {showTrigger ? (
+        <DrawerTrigger asChild>
+          <Button variant="outline" size="sm">
+            <Trash className="mr-2 size-4" aria-hidden="true" />
+            Delete ({integrationData?.length ?? 0})
+          </Button>
+        </DrawerTrigger>
+      ) : null}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>정말로 삭제하시겠습니까?</DrawerTitle>
+          <DrawerDescription>
+            이 작업은 되돌릴 수 없습니다. 선택된{" "}
+            <span className="font-medium">{integrationData?.length ?? 0}</span>
+            개의 인터페이스를 서버에서 영구적으로 삭제합니다.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="gap-2 sm:space-x-0">
+          <DrawerClose asChild>
+            <Button variant="outline">취소</Button>
+          </DrawerClose>
+          <Button
+            aria-label="선택된 행 삭제"
+            variant="destructive"
+            onClick={onDelete}
+            disabled={isDeletePending}
+          >
+            {isDeletePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            삭제
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+} 
\ No newline at end of file
diff --git a/lib/integration/table/integration-add-dialog.tsx b/lib/integration/table/integration-add-dialog.tsx
new file mode 100644
index 00000000..aeab2a5f
--- /dev/null
+++ b/lib/integration/table/integration-add-dialog.tsx
@@ -0,0 +1,272 @@
+"use client";
+
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Plus, Loader2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { createIntegration } from "../service";
+import { toast } from "sonner";
+
+const createIntegrationSchema = z.object({
+  code: z.string().min(1, "코드는 필수입니다."),
+  name: z.string().min(1, "이름은 필수입니다."),
+  type: z.enum(["rest_api", "soap", "db_to_db"], { required_error: "타입은 필수입니다." }),
+  description: z.string().optional(),
+  sourceSystem: z.string().min(1, "소스 시스템은 필수입니다."),
+  targetSystem: z.string().min(1, "타겟 시스템은 필수입니다."),
+  status: z.enum(["active", "inactive", "deprecated"]).default("active"),
+  metadata: z.any().optional(),
+});
+
+type CreateIntegrationFormValues = z.infer<typeof createIntegrationSchema>;
+
+interface IntegrationAddDialogProps {
+  onSuccess?: () => void;
+}
+
+export function IntegrationAddDialog({ onSuccess }: IntegrationAddDialogProps) {
+  const [open, setOpen] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const form = useForm<CreateIntegrationFormValues>({
+    resolver: zodResolver(createIntegrationSchema),
+    defaultValues: {
+      code: "",
+      name: "",
+      type: "rest_api",
+      description: "",
+      sourceSystem: "",
+      targetSystem: "",
+      status: "active",
+      metadata: {},
+    },
+  });
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (!newOpen) {
+      form.reset();
+    }
+  };
+
+  const handleCancel = () => {
+    form.reset();
+    setOpen(false);
+  };
+
+  const onSubmit = async (data: CreateIntegrationFormValues) => {
+    setIsLoading(true);
+    try {
+      const result = await createIntegration(data);
+      if (result.data) {
+        toast.success("인터페이스가 성공적으로 추가되었습니다.");
+        form.reset();
+        setOpen(false);
+        if (onSuccess) {
+          onSuccess();
+        }
+      } else {
+        toast.error(result.error || "생성 중 오류가 발생했습니다.");
+      }
+    } catch (error) {
+      console.error("인터페이스 생성 오류:", error);
+      toast.error("인터페이스 생성에 실패했습니다.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          <Plus className="mr-2 h-4 w-4" />
+          인터페이스 추가
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>새 인터페이스 추가</DialogTitle>
+          <DialogDescription>
+            새로운 인터페이스를 추가합니다. 필수 정보를 입력해주세요.
+            <span className="text-red-500 mt-1 block text-sm">* 표시된 항목은 필수 입력사항입니다.</span>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="code"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    코드 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder="INT_OPS_001" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    이름 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder="인터페이스 이름" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="type"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    타입 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="타입 선택" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="rest_api">REST API</SelectItem>
+                      <SelectItem value="soap">SOAP</SelectItem>
+                      <SelectItem value="db_to_db">DB to DB</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="sourceSystem"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    소스 시스템 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder="ERP, WMS 등" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="targetSystem"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    타겟 시스템 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder="ERP, WMS 등" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    상태 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="상태 선택" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="active">활성</SelectItem>
+                      <SelectItem value="inactive">비활성</SelectItem>
+                      <SelectItem value="deprecated">사용중단</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>설명</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="인터페이스에 대한 설명" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isLoading}
+          >
+            취소
+          </Button>
+          <Button
+            type="submit"
+            onClick={form.handleSubmit(onSubmit)}
+            disabled={isLoading}
+          >
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {isLoading ? "생성 중..." : "추가"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+} 
\ No newline at end of file
diff --git a/lib/integration/table/integration-delete-dialog.tsx b/lib/integration/table/integration-delete-dialog.tsx
new file mode 100644
index 00000000..dfabd17f
--- /dev/null
+++ b/lib/integration/table/integration-delete-dialog.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import { Trash2, Loader2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { deleteIntegration } from "../service";
+import { toast } from "sonner";
+import type { Integration } from "../validations";
+
+interface IntegrationDeleteDialogProps {
+  integration: Integration;
+  onSuccess?: () => void;
+}
+
+export function IntegrationDeleteDialog({ integration, onSuccess }: IntegrationDeleteDialogProps) {
+  const [open, setOpen] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+  };
+
+  const handleCancel = () => {
+    setOpen(false);
+  };
+
+  const handleDelete = async () => {
+    setIsLoading(true);
+    try {
+      const result = await deleteIntegration(integration.id);
+      if (result.success) {
+        toast.success("인터페이스가 성공적으로 삭제되었습니다.");
+        setOpen(false);
+        if (onSuccess) {
+          onSuccess();
+        }
+      } else {
+        toast.error(result.error || "삭제 중 오류가 발생했습니다.");
+      }
+    } catch (error) {
+      console.error("인터페이스 삭제 오류:", error);
+      toast.error("인터페이스 삭제에 실패했습니다.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className="text-red-600 hover:text-red-700">
+          <Trash2 className="mr-2 h-4 w-4" />
+          삭제
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>인터페이스 삭제</DialogTitle>
+          <DialogDescription>
+            정말로 이 인터페이스를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="rounded-lg border p-4">
+            <h4 className="font-medium mb-2">삭제할 인터페이스 정보</h4>
+            <div className="space-y-2 text-sm">
+              <div>
+                <span className="font-medium">코드:</span> {integration.code}
+              </div>
+              <div>
+                <span className="font-medium">이름:</span> {integration.name}
+              </div>
+              <div>
+                <span className="font-medium">타입:</span> {integration.type}
+              </div>
+              <div>
+                <span className="font-medium">소스 시스템:</span> {integration.sourceSystem}
+              </div>
+              <div>
+                <span className="font-medium">타겟 시스템:</span> {integration.targetSystem}
+              </div>
+              <div>
+                <span className="font-medium">상태:</span> {integration.status}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isLoading}
+          >
+            취소
+          </Button>
+          <Button
+            type="button"
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={isLoading}
+          >
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {isLoading ? "삭제 중..." : "삭제"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+} 
\ No newline at end of file
diff --git a/lib/integration/table/integration-edit-dialog.tsx b/lib/integration/table/integration-edit-dialog.tsx
new file mode 100644
index 00000000..8ded0ee9
--- /dev/null
+++ b/lib/integration/table/integration-edit-dialog.tsx
@@ -0,0 +1,274 @@
+"use client";
+
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Edit, Loader2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { updateIntegration } from "../service";
+import { toast } from "sonner";
+import type { Integration } from "../validations";
+
+const updateIntegrationSchema = z.object({
+  code: z.string().min(1, "코드는 필수입니다."),
+  name: z.string().min(1, "이름은 필수입니다."),
+  type: z.enum(["rest_api", "soap", "db_to_db"], { required_error: "타입은 필수입니다." }),
+  description: z.string().optional(),
+  sourceSystem: z.string().min(1, "소스 시스템은 필수입니다."),
+  targetSystem: z.string().min(1, "타겟 시스템은 필수입니다."),
+  status: z.enum(["active", "inactive", "deprecated"]),
+  metadata: z.any().optional(),
+});
+
+type UpdateIntegrationFormValues = z.infer<typeof updateIntegrationSchema>;
+
+interface IntegrationEditDialogProps {
+  integration: Integration;
+  onSuccess?: () => void;
+}
+
+export function IntegrationEditDialog({ integration, onSuccess }: IntegrationEditDialogProps) {
+  const [open, setOpen] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const form = useForm<UpdateIntegrationFormValues>({
+    resolver: zodResolver(updateIntegrationSchema),
+    defaultValues: {
+      code: integration.code || "",
+      name: integration.name || "",
+      type: integration.type || "rest_api",
+      description: integration.description || "",
+      sourceSystem: integration.sourceSystem || "",
+      targetSystem: integration.targetSystem || "",
+      status: integration.status || "active",
+      metadata: integration.metadata || {},
+    },
+  });
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (!newOpen) {
+      form.reset();
+    }
+  };
+
+  const handleCancel = () => {
+    form.reset();
+    setOpen(false);
+  };
+
+  const onSubmit = async (data: UpdateIntegrationFormValues) => {
+    setIsLoading(true);
+    try {
+      const result = await updateIntegration(integration.id, data);
+      if (result.data) {
+        toast.success("인터페이스가 성공적으로 수정되었습니다.");
+        form.reset();
+        setOpen(false);
+        if (onSuccess) {
+          onSuccess();
+        }
+      } else {
+        toast.error(result.error || "수정 중 오류가 발생했습니다.");
+      }
+    } catch (error) {
+      console.error("인터페이스 수정 오류:", error);
+      toast.error("인터페이스 수정에 실패했습니다.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          <Edit className="mr-2 h-4 w-4" />
+          수정
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>인터페이스 수정</DialogTitle>
+          <DialogDescription>
+            인터페이스 정보를 수정합니다. 필수 정보를 입력해주세요.
+            <span className="text-red-500 mt-1 block text-sm">* 표시된 항목은 필수 입력사항입니다.</span>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="code"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    코드 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder="INT_OPS_001" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    이름 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder="인터페이스 이름" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="type"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    타입 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="타입 선택" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="rest_api">REST API</SelectItem>
+                      <SelectItem value="soap">SOAP</SelectItem>
+                      <SelectItem value="db_to_db">DB to DB</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="sourceSystem"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    소스 시스템 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder="ERP, WMS 등" {...field} />
+                  </FormControl>ㄹ
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="targetSystem"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    타겟 시스템 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder="ERP, WMS 등" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    상태 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="상태 선택" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="active">활성</SelectItem>
+                      <SelectItem value="inactive">비활성</SelectItem>
+                      <SelectItem value="deprecated">사용중단</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>설명</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="인터페이스에 대한 설명" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isLoading}
+          >
+            취소
+          </Button>
+          <Button
+            type="submit"
+            onClick={form.handleSubmit(onSubmit)}
+            disabled={isLoading}
+          >
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {isLoading ? "수정 중..." : "수정"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+} 
\ No newline at end of file
diff --git a/lib/integration/table/integration-edit-sheet.tsx b/lib/integration/table/integration-edit-sheet.tsx
new file mode 100644
index 00000000..553a7870
--- /dev/null
+++ b/lib/integration/table/integration-edit-sheet.tsx
@@ -0,0 +1,278 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import * as z from "zod"
+import { Loader2 } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+import { updateIntegration } from "../service"
+import { integrations } from "@/db/schema/integration"
+
+const updateIntegrationSchema = z.object({
+  code: z.string().min(1, "코드는 필수입니다."),
+  name: z.string().min(1, "이름은 필수입니다."),
+  type: z.enum(["rest_api", "soap", "db_to_db"], { required_error: "타입은 필수입니다." }),
+  description: z.string().optional(),
+  sourceSystem: z.string().min(1, "소스 시스템은 필수입니다."),
+  targetSystem: z.string().min(1, "타겟 시스템은 필수입니다."),
+  status: z.enum(["active", "inactive", "deprecated"]),
+  metadata: z.any().optional(),
+})
+
+type UpdateIntegrationFormValues = z.infer<typeof updateIntegrationSchema>
+
+interface IntegrationEditSheetProps {
+  data: typeof integrations.$inferSelect | null
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  onSuccess?: () => void
+}
+
+export function IntegrationEditSheet({ data, open, onOpenChange, onSuccess }: IntegrationEditSheetProps) {
+  const [isLoading, setIsLoading] = React.useState(false)
+
+  const form = useForm<UpdateIntegrationFormValues>({
+    resolver: zodResolver(updateIntegrationSchema),
+    defaultValues: {
+      code: data?.code || "",
+      name: data?.name || "",
+      type: data?.type || "rest_api",
+      description: data?.description || "",
+      sourceSystem: data?.sourceSystem || "",
+      targetSystem: data?.targetSystem || "",
+      status: data?.status || "active",
+      metadata: data?.metadata || {},
+    },
+  })
+
+  React.useEffect(() => {
+    if (data) {
+      form.reset({
+        code: data.code || "",
+        name: data.name || "",
+        type: data.type || "rest_api",
+        description: data.description || "",
+        sourceSystem: data.sourceSystem || "",
+        targetSystem: data.targetSystem || "",
+        status: data.status || "active",
+        metadata: data.metadata || {},
+      })
+    }
+  }, [data, form])
+
+  const handleCancel = () => {
+    form.reset()
+    onOpenChange?.(false)
+  }
+
+  const onSubmit = async (formData: UpdateIntegrationFormValues) => {
+    if (!data) return
+    
+    setIsLoading(true)
+    try {
+      const result = await updateIntegration(data.id, formData)
+      if (result.data) {
+        toast.success("인터페이스가 성공적으로 수정되었습니다.")
+        form.reset()
+        onOpenChange?.(false)
+        if (onSuccess) {
+          onSuccess()
+        }
+      } else {
+        toast.error(result.error || "수정 중 오류가 발생했습니다.")
+      }
+    } catch (error) {
+      console.error("인터페이스 수정 오류:", error)
+      toast.error("인터페이스 수정에 실패했습니다.")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-[400px] sm:w-[540px]">
+        <SheetHeader>
+          <SheetTitle>인터페이스 수정</SheetTitle>
+          <SheetDescription>
+            인터페이스 정보를 수정합니다. 필수 정보를 입력해주세요.
+            <span className="text-red-500 mt-1 block text-sm">* 표시된 항목은 필수 입력사항입니다.</span>
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 mt-6">
+            <FormField
+              control={form.control}
+              name="code"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    코드 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder="INT_OPS_001" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    이름 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder="인터페이스 이름" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="type"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    타입 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="타입 선택" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="rest_api">REST API</SelectItem>
+                      <SelectItem value="soap">SOAP</SelectItem>
+                      <SelectItem value="db_to_db">DB to DB</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="sourceSystem"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    소스 시스템 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder="ERP, WMS 등" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="targetSystem"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    타겟 시스템 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder="ERP, WMS 등" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    상태 <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="상태 선택" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="active">활성</SelectItem>
+                      <SelectItem value="inactive">비활성</SelectItem>
+                      <SelectItem value="deprecated">사용중단</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>설명</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="인터페이스에 대한 설명" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+
+        <SheetFooter className="mt-6">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isLoading}
+          >
+            취소
+          </Button>
+          <Button
+            type="submit"
+            onClick={form.handleSubmit(onSubmit)}
+            disabled={isLoading}
+          >
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {isLoading ? "수정 중..." : "수정"}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+} 
\ No newline at end of file
diff --git a/lib/integration/table/integration-table-columns.tsx b/lib/integration/table/integration-table-columns.tsx
new file mode 100644
index 00000000..330b7797
--- /dev/null
+++ b/lib/integration/table/integration-table-columns.tsx
@@ -0,0 +1,214 @@
+"use client"
+
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { MoreHorizontal } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { integrations } from "@/db/schema/integration"
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<typeof integrations.$inferSelect> | null>>;
+}
+
+/**
+ * tanstack table 컬럼 정의
+ */
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<typeof integrations.$inferSelect>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<typeof integrations.$inferSelect> = {
+    id: "select",
+    header: ({ table }) => (
+      <input
+        type="checkbox"
+        checked={table.getIsAllPageRowsSelected()}
+        onChange={(value) => table.toggleAllPageRowsSelected(!!value.target.checked)}
+        aria-label="Select all"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <input
+        type="checkbox"
+        checked={row.getIsSelected()}
+        onChange={(value) => row.toggleSelected(!!value.target.checked)}
+        aria-label="Select row"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) 데이터 컬럼들
+  // ----------------------------------------------------------------
+  const dataColumns: ColumnDef<typeof integrations.$inferSelect>[] = [
+    {
+      accessorKey: "code",
+      header: "코드",
+      filterFn: "includesString",
+      enableSorting: true,
+      enableHiding: false,
+      cell: ({ row }) => {
+        const code = row.getValue("code") as string;
+        return <div className="font-medium">{code}</div>;
+      },
+      minSize: 100
+    },
+    {
+      accessorKey: "name",
+      header: "이름",
+      filterFn: "includesString",
+      enableSorting: true,
+      enableHiding: false,
+      cell: ({ row }) => {
+        const name = row.getValue("name") as string;
+        return <div>{name}</div>;
+      },
+      minSize: 150
+    },
+    {
+      accessorKey: "type",
+      header: "타입",
+      filterFn: "includesString",
+      enableSorting: true,
+      enableHiding: false,
+      cell: ({ row }) => {
+        const type = row.getValue("type") as string;
+        return getTypeBadge(type);
+      },
+      minSize: 100
+    },
+    {
+      accessorKey: "sourceSystem",
+      header: "소스 시스템",
+      filterFn: "includesString",
+      enableSorting: true,
+      enableHiding: false,
+      cell: ({ row }) => {
+        const sourceSystem = row.getValue("sourceSystem") as string;
+        return <div>{sourceSystem}</div>;
+      },
+      minSize: 120
+    },
+    {
+      accessorKey: "targetSystem",
+      header: "타겟 시스템",
+      filterFn: "includesString",
+      enableSorting: true,
+      enableHiding: false,
+      cell: ({ row }) => {
+        const targetSystem = row.getValue("targetSystem") as string;
+        return <div>{targetSystem}</div>;
+      },
+      minSize: 120
+    },
+    {
+      accessorKey: "status",
+      header: "상태",
+      filterFn: "includesString",
+      enableSorting: true,
+      enableHiding: false,
+      cell: ({ row }) => {
+        const status = row.getValue("status") as string;
+        return getStatusBadge(status);
+      },
+      minSize: 80
+    },
+    {
+      accessorKey: "description",
+      header: "설명",
+      filterFn: "includesString",
+      enableSorting: true,
+      enableHiding: false,
+      cell: ({ row }) => {
+        const description = row.getValue("description") as string;
+        return <div className="max-w-xs truncate">{description || "-"}</div>;
+      },
+      minSize: 150
+    },
+    {
+      accessorKey: "createdAt",
+      header: "생성일",
+      filterFn: "includesString",
+      enableSorting: true,
+      enableHiding: false,
+      cell: ({ row }) => {
+        const createdAt = row.getValue("createdAt") as string;
+        return <div>{new Date(createdAt).toLocaleDateString()}</div>;
+      },
+      minSize: 80
+    },
+  ]
+
+  // ----------------------------------------------------------------
+  // 4) 컬럼 조합
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<typeof integrations.$inferSelect> = {
+    id: "actions",
+    header: "",
+    enableSorting: false,
+    enableHiding: false,
+    cell: function Cell({ row }) {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-40">
+            <DropdownMenuItem onClick={() => setRowAction({ type: "update", row })}>
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => setRowAction({ type: "delete", row })}>
+              Delete
+              <span className="ml-auto text-xs text-muted-foreground">⌘⌫</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  }
+
+  return [selectColumn, ...dataColumns, actionsColumn]
+}
+
+const getStatusBadge = (status: string) => {
+  switch (status) {
+    case "active":
+      return <Badge variant="default">활성</Badge>;
+    case "inactive":
+      return <Badge variant="secondary">비활성</Badge>;
+    case "deprecated":
+      return <Badge variant="destructive">사용중단</Badge>;
+    default:
+      return <Badge variant="outline">{status}</Badge>;
+  }
+};
+
+const getTypeBadge = (type: string) => {
+  switch (type) {
+    case "rest_api":
+      return <Badge variant="outline">REST API</Badge>;
+    case "soap":
+      return <Badge variant="outline">SOAP</Badge>;
+    case "db_to_db":
+      return <Badge variant="outline">DB to DB</Badge>;
+    default:
+      return <Badge variant="outline">{type}</Badge>;
+  }
+}; 
\ No newline at end of file
diff --git a/lib/integration/table/integration-table-toolbar.tsx b/lib/integration/table/integration-table-toolbar.tsx
new file mode 100644
index 00000000..a53eac2f
--- /dev/null
+++ b/lib/integration/table/integration-table-toolbar.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import { type Table } from "@tanstack/react-table";
+import { Download, Plus } from "lucide-react";
+
+import { exportTableToExcel } from "@/lib/export";
+import { Button } from "@/components/ui/button";
+import { DeleteIntegrationDialog } from "./delete-integration-dialog";
+import { IntegrationAddDialog } from "./integration-add-dialog";
+import { integrationTable } from "@/db/schema/integration";
+
+interface IntegrationTableToolbarActionsProps<TData> {
+  table: Table<TData>;
+  onSuccess?: () => void;
+}
+
+export function IntegrationTableToolbarActions<TData>({
+  table,
+  onSuccess,
+}: IntegrationTableToolbarActionsProps<TData>) {
+  const selectedRows = table.getFilteredSelectedRowModel().rows.map((row) => row.original);
+  return (
+    <div className="flex items-center gap-2">
+      {selectedRows.length > 0 && (
+        <DeleteIntegrationDialog
+          integrations={selectedRows}
+          onSuccess={() => {
+            table.toggleAllRowsSelected(false);
+            onSuccess?.();
+          }}
+        />
+      )}
+      <IntegrationAddDialog onSuccess={onSuccess} />
+
+      {/** 3) Export 버튼 */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          exportTableToExcel(table, {
+            filename: "interface-list",
+            excludeColumns: ["select", "actions"],
+          })
+        }
+        className="gap-2"
+      >
+        <Download className="size-4" aria-hidden="true" />
+        <span className="hidden sm:inline">Export</span>
+      </Button>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/lib/integration/table/integration-table.tsx b/lib/integration/table/integration-table.tsx
new file mode 100644
index 00000000..7a075fb4
--- /dev/null
+++ b/lib/integration/table/integration-table.tsx
@@ -0,0 +1,166 @@
+"use client";
+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 { getIntegrations } from "../service";
+import { getColumns } from "./integration-table-columns";
+import { DeleteIntegrationDialog } from "./delete-integration-dialog";
+import { IntegrationEditSheet } from "./integration-edit-sheet";
+import { IntegrationTableToolbarActions } from "./integration-table-toolbar";
+import { integrations } from "@/db/schema/integration";
+import { GetIntegrationsSchema } from "../validations";
+
+interface IntegrationTableProps {
+  promises?: Promise<[{ data: typeof integrations.$inferSelect[]; pageCount: number }] >;
+}
+
+export function IntegrationTable({ promises }: IntegrationTableProps) {
+  const [rawData, setRawData] = React.useState<{ data: typeof integrations.$inferSelect[]; pageCount: number }>({ data: [], pageCount: 0 });
+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<typeof integrations.$inferSelect> | null>(null);
+
+  React.useEffect(() => {
+    if (promises) {
+      promises.then(([result]) => {
+        setRawData(result);
+      });
+    } else {
+      // fallback: 클라이언트에서 직접 fetch (CSR)
+      (async () => {
+        try {
+          const result = await getIntegrations({
+            page: 1,
+            perPage: 10,
+            search: "",
+            sort: [{ id: "createdAt", desc: true }],
+            filters: [],
+            joinOperator: "and",
+            flags: ["advancedTable"],
+            code: "",
+            name: "",
+            type: "",
+            description: "",
+            sourceSystem: "",
+            targetSystem: "",
+            status: ""
+          });
+          setRawData(result);
+        } catch (error) {
+          console.error("Error refreshing data:", error);
+        }
+      })();
+    }
+  }, [promises]);
+
+  const fetchIntegrations = React.useCallback(async (params: Record<string, unknown>) => {
+    try {
+      const result = await getIntegrations(params as GetIntegrationsSchema);
+      return result;
+    } catch (error) {
+      console.error("Error fetching integrations:", error);
+      throw error;
+    }
+  }, []);
+
+  const refreshData = React.useCallback(async () => {
+    try {
+      const result = await fetchIntegrations({
+        page: 1,
+        perPage: 10,
+        search: "",
+        sort: [{ id: "createdAt", desc: true }],
+        filters: [],
+        joinOperator: "and",
+        flags: ["advancedTable"],
+        code: "",
+        name: "",
+        type: "",
+        description: "",
+        sourceSystem: "",
+        targetSystem: "",
+        status: ""
+      });
+      setRawData(result);
+    } catch (error) {
+      console.error("Error refreshing data:", error);
+    }
+  }, [fetchIntegrations]);
+
+  // 컬럼 설정 - 외부 파일에서 가져옴
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  )
+
+  // 고급 필터 필드 설정
+  const advancedFilterFields: DataTableAdvancedFilterField<typeof integrations.$inferSelect>[] = [
+    { id: "code", label: "코드", type: "text" },
+    { id: "name", label: "이름", type: "text" },
+    { id: "type", label: "타입", type: "select", options: [
+      { label: "REST API", value: "rest_api" },
+      { label: "SOAP", value: "soap" },
+      { label: "DB to DB", value: "db_to_db" },
+    ]},
+    { id: "description", label: "설명", type: "text" },
+    { id: "sourceSystem", label: "소스 시스템", type: "text" },
+    { id: "targetSystem", label: "타겟 시스템", type: "text" },
+    {
+      id: "status", label: "상태", type: "select", options: [
+        { label: "활성", value: "active" },
+        { label: "비활성", value: "inactive" },
+        { label: "사용중단", value: "deprecated" },
+      ]
+    },
+    { id: "createdAt", label: "생성일", type: "date" },
+  ];
+
+  const { table } = useDataTable({
+      data: rawData.data,
+      columns,
+      pageCount: rawData.pageCount,
+      enablePinning: true,
+      enableAdvancedFilter: true,
+      initialState: {
+        sorting: [{ id: "createdAt", desc: true }],
+        columnPinning: { right: ["actions"] },
+      },
+      getRowId: (originalRow) => String(originalRow.id),
+      shallow: false,
+      clearOnDefault: true,
+    })
+
+  return (
+    <>
+      <DataTable table={table}>
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+        >
+          <IntegrationTableToolbarActions table={table} onSuccess={refreshData} />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+
+      <DeleteIntegrationDialog
+        open={rowAction?.type === "delete"}
+        onOpenChange={() => setRowAction(null)}
+        integrations={rowAction?.row.original ? [rowAction?.row.original] : []}
+        showTrigger={false}
+        onSuccess={() => {
+          rowAction?.row.toggleSelected(false)
+          refreshData()
+        }}
+      />
+
+      <IntegrationEditSheet
+        open={rowAction?.type === "update"}
+        onOpenChange={() => setRowAction(null)}
+        data={rowAction?.row.original ?? null}
+        onSuccess={refreshData}
+      />
+    </>
+  );
+} 
\ No newline at end of file
-- 
cgit v1.2.3