(김준회) 리치텍스트에디터 (결재템플릿을 위한 공통컴포넌트), command-menu 에러 수정, 결재 템플릿 관리, 결재선 관리, ECC RFQ+PR Item 수신시 비즈니스테이블(ProcurementRFQ) 데이터 적재, WSDL 오류 수정

7 files changed, 877 insertions, 0 deletions

diff --git a/lib/approval-template/table/approval-template-table-columns.tsx b/lib/approval-template/table/approval-template-table-columns.tsx
new file mode 100644
index 00000000..8447c7d2
--- /dev/null
+++ b/lib/approval-template/table/approval-template-table-columns.tsx
@@ -0,0 +1,165 @@
+"use client"
+
+import * as React from 'react';
+import { type ColumnDef } from '@tanstack/react-table';
+import { MoreHorizontal, Copy, Trash, Eye } from 'lucide-react';
+import Link from 'next/link';
+
+import { Checkbox } from '@/components/ui/checkbox';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { formatDate } from '@/lib/utils';
+import { DataTableColumnHeaderSimple } from '@/components/data-table/data-table-column-simple-header';
+import { type ApprovalTemplate } from '@/lib/approval-template/service';
+import { type DataTableRowAction } from '@/types/table';
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<ApprovalTemplate> | null>>
+}
+
+export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<ApprovalTemplate>[] {
+  return [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && 'indeterminate')
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+          className="translate-y-0.5"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+          className="translate-y-0.5"
+        />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+    },
+    {
+      accessorKey: 'name',
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="템플릿 이름" />,
+      cell: ({ row: _row }) => {
+        const t = _row.original;
+        return (
+          <div className="flex flex-col gap-1">
+            <span className="font-medium">{t.name}</span>
+            {t.description && (
+              <div className="text-xs text-muted-foreground line-clamp-2">{t.description}</div>
+            )}
+          </div>
+        );
+      },
+      enableSorting: true,
+      enableHiding: false,
+      size: 220,
+    },
+    {
+      accessorKey: 'subject',
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="제목" />,
+      cell: ({ getValue }) => {
+        const subject = getValue() as string;
+        return <div className="text-sm text-muted-foreground">{subject}</div>;
+      },
+      enableSorting: true,
+      size: 250,
+    },
+    {
+      accessorKey: 'category',
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="카테고리" />,
+      cell: ({ getValue }) => {
+        const category = getValue() as string | null;
+        if (!category) return <div>-</div>;
+        return <Badge variant="outline">{category}</Badge>;
+      },
+      enableSorting: true,
+      size: 120,
+    },
+    {
+      accessorKey: 'createdAt',
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="생성일" />,
+      cell: ({ cell }) => {
+        const date = cell.getValue() as Date;
+        return <div className="text-sm text-muted-foreground">{formatDate(date)}</div>;
+      },
+      enableSorting: true,
+      size: 200,
+    },
+    {
+      accessorKey: 'updatedAt',
+      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="수정일" />,
+      cell: ({ cell }) => {
+        const date = cell.getValue() as Date;
+        return <div className="text-sm text-muted-foreground">{formatDate(date)}</div>;
+      },
+      enableSorting: true,
+      size: 200,
+    },
+    {
+      id: 'actions',
+      cell: ({ row }) => {
+        const template = row.original;
+
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                aria-label="Open menu"
+                variant="ghost"
+                className="flex size-8 p-0 data-[state=open]:bg-muted"
+              >
+                <MoreHorizontal className="size-4" aria-hidden="true" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-40">
+              <DropdownMenuItem asChild>
+                <Link href={`/evcp/approval/template/${template.id}`}>
+                  <Eye className="mr-2 size-4" aria-hidden="true" />
+                  상세 보기
+                </Link>
+              </DropdownMenuItem>
+
+              <DropdownMenuItem
+                onClick={() => {
+                  setRowAction({ type: 'duplicate', row });
+                }}
+              >
+                <Copy className="mr-2 size-4" aria-hidden="true" />
+                복제하기
+              </DropdownMenuItem>
+
+              <DropdownMenuSeparator />
+
+              <DropdownMenuItem
+                onClick={() => {
+                  setRowAction({ type: 'delete', row });
+                }}
+                className="text-destructive focus:text-destructive"
+              >
+                <Trash className="mr-2 size-4" aria-hidden="true" />
+                삭제하기
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+      enableSorting: false,
+      enableHiding: false,
+      size: 80,
+    },
+  ];
+} 
\ No newline at end of file
diff --git a/lib/approval-template/table/approval-template-table-toolbar-actions.tsx b/lib/approval-template/table/approval-template-table-toolbar-actions.tsx
new file mode 100644
index 00000000..08aba97a
--- /dev/null
+++ b/lib/approval-template/table/approval-template-table-toolbar-actions.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from "react"
+import { type Table } from "@tanstack/react-table"
+import { Download, Plus, Trash } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { type ApprovalTemplate } from "@/lib/approval-template/service"
+import { toast } from "sonner"
+import { DeleteApprovalTemplateDialog } from "./delete-approval-template-dialog"
+
+interface ApprovalTemplateTableToolbarActionsProps {
+  table: Table<ApprovalTemplate>
+  onCreateTemplate: () => void
+}
+
+export function ApprovalTemplateTableToolbarActions({
+  table,
+  onCreateTemplate,
+}: ApprovalTemplateTableToolbarActionsProps) {
+  const [showDeleteDialog, setShowDeleteDialog] = React.useState(false)
+
+  const selectedRows = table.getFilteredSelectedRowModel().rows
+  const selectedTemplates = selectedRows.map((row) => row.original)
+
+  // CSV 내보내기
+  const exportToCsv = React.useCallback(() => {
+    const headers = [
+      "이름",
+      "제목",
+      "카테고리",
+      "생성일",
+      "수정일",
+    ]
+
+    const csvData = [
+      headers,
+      ...table.getFilteredRowModel().rows.map((row) => {
+        const t = row.original
+        return [
+          t.name,
+          t.subject,
+          t.category ?? "-",
+          new Date(t.createdAt).toLocaleDateString("ko-KR"),
+          new Date(t.updatedAt).toLocaleDateString("ko-KR"),
+        ]
+      }),
+    ]
+
+    const csvContent = csvData
+      .map((row) => row.map((field) => `"${field}"`).join(","))
+      .join("\n")
+
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
+    const link = document.createElement("a")
+
+    if (link.download !== undefined) {
+      const url = URL.createObjectURL(blob)
+      link.setAttribute("href", url)
+      link.setAttribute(
+        "download",
+        `approval_templates_${new Date().toISOString().split("T")[0]}.csv`,
+      )
+      link.style.visibility = "hidden"
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    }
+
+    toast.success("템플릿 목록이 CSV로 내보내졌습니다.")
+  }, [table])
+
+  return (
+    <div className="flex items-center gap-2">
+      {/* 새 템플릿 버튼 */}
+      <Button variant="default" size="sm" onClick={onCreateTemplate}>
+        <Plus className="mr-2 size-4" aria-hidden="true" />
+        새 템플릿
+      </Button>
+
+      {/* CSV 내보내기 */}
+      <Button variant="outline" size="sm" onClick={exportToCsv}>
+        <Download className="mr-2 size-4" aria-hidden="true" />
+        내보내기
+      </Button>
+
+      {/* 일괄 삭제 */}
+      {selectedTemplates.length > 0 && (
+        <>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setShowDeleteDialog(true)}
+            className="text-destructive hover:text-destructive"
+          >
+            <Trash className="mr-2 size-4" aria-hidden="true" />
+            삭제 ({selectedTemplates.length})
+          </Button>
+
+          <DeleteApprovalTemplateDialog
+            open={showDeleteDialog}
+            onOpenChange={setShowDeleteDialog}
+            templates={selectedTemplates}
+            showTrigger={false}
+            onSuccess={() => {
+              table.toggleAllRowsSelected(false)
+              setShowDeleteDialog(false)
+            }}
+          />
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/lib/approval-template/table/approval-template-table.tsx b/lib/approval-template/table/approval-template-table.tsx
new file mode 100644
index 00000000..d7f0e478
--- /dev/null
+++ b/lib/approval-template/table/approval-template-table.tsx
@@ -0,0 +1,135 @@
+"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,
+  DataTableFilterField,
+  DataTableRowAction,
+} from '@/types/table';
+
+import { getColumns } from './approval-template-table-columns';
+import { getApprovalTemplateList } from '../service';
+import { type ApprovalTemplate } from '../service';
+import { ApprovalTemplateTableToolbarActions } from './approval-template-table-toolbar-actions';
+import { CreateApprovalTemplateSheet } from './create-approval-template-sheet';
+import { UpdateApprovalTemplateSheet } from './update-approval-template-sheet';
+import { DuplicateApprovalTemplateSheet } from './duplicate-approval-template-sheet';
+import { DeleteApprovalTemplateDialog } from './delete-approval-template-dialog';
+
+interface ApprovalTemplateTableProps {
+  promises: Promise<[
+    Awaited<ReturnType<typeof getApprovalTemplateList>>,
+  ]>;
+}
+
+export function ApprovalTemplateTable({ promises }: ApprovalTemplateTableProps) {
+  const [{ data, pageCount }] = React.use(promises);
+
+  const [rowAction, setRowAction] = 
+    React.useState<DataTableRowAction<ApprovalTemplate> | null>(null);
+
+  const [showCreateSheet, setShowCreateSheet] = React.useState(false);
+
+  const columns = React.useMemo(
+    () => getColumns({ setRowAction }),
+    [setRowAction]
+  );
+
+  // 기본 & 고급 필터 필드 (추후 확장 가능)
+  const filterFields: DataTableFilterField<ApprovalTemplate>[] = [];
+  const advancedFilterFields: DataTableAdvancedFilterField<ApprovalTemplate>[] = [
+    {
+      id: 'name',
+      label: '템플릿 이름',
+      type: 'text',
+    },
+    {
+      id: 'subject',
+      label: '제목',
+      type: 'text',
+    },
+    {
+      id: 'category',
+      label: '카테고리',
+      type: 'text',
+    },
+    {
+      id: 'createdAt',
+      label: '생성일',
+      type: 'date',
+    },
+    {
+      id: 'updatedAt',
+      label: '수정일',
+      type: 'date',
+    },
+  ];
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: 'updatedAt', desc: true }],
+      columnPinning: { right: ['actions'] },
+    },
+    getRowId: (row) => String(row.id),
+    shallow: false,
+    clearOnDefault: true,
+  });
+
+  return (
+    <>
+      <DataTable table={table}>
+        <DataTableAdvancedToolbar
+          table={table}
+          filterFields={advancedFilterFields}
+          shallow={false}
+        >
+          <ApprovalTemplateTableToolbarActions
+            table={table}
+            onCreateTemplate={() => setShowCreateSheet(true)}
+          />
+        </DataTableAdvancedToolbar>
+      </DataTable>
+
+      {/* 새 템플릿 생성 Sheet */}
+      <CreateApprovalTemplateSheet
+        open={showCreateSheet}
+        onOpenChange={setShowCreateSheet}
+      />
+
+      {/* 템플릿 수정 Sheet */}
+      <UpdateApprovalTemplateSheet
+        open={rowAction?.type === "update"}
+        onOpenChange={() => setRowAction(null)}
+        template={rowAction?.type === "update" ? rowAction.row.original : null}
+      />
+
+      {/* 템플릿 복제 Sheet */}
+      <DuplicateApprovalTemplateSheet
+        open={rowAction?.type === "duplicate"}
+        onOpenChange={() => setRowAction(null)}
+        template={rowAction?.type === "duplicate" ? rowAction.row.original : null}
+      />
+
+      {/* 템플릿 삭제 Dialog */}
+      <DeleteApprovalTemplateDialog
+        open={rowAction?.type === "delete"}
+        onOpenChange={() => setRowAction(null)}
+        templates={rowAction?.type === "delete" ? [rowAction.row.original] : []}
+        showTrigger={false}
+        onSuccess={() => {
+          setRowAction(null)
+          // 테이블 새로고침은 server action에서 자동으로 처리됨
+        }}
+      />
+    </>
+  );
+} 
\ No newline at end of file
diff --git a/lib/approval-template/table/create-approval-template-sheet.tsx b/lib/approval-template/table/create-approval-template-sheet.tsx
new file mode 100644
index 00000000..7e899175
--- /dev/null
+++ b/lib/approval-template/table/create-approval-template-sheet.tsx
@@ -0,0 +1,174 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+import { useRouter } from "next/navigation"
+import { useSession } from "next-auth/react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+
+import { createApprovalTemplate } from "../service"
+
+const createSchema = z.object({
+  name: z.string().min(1, "이름은 필수입니다").max(100, "100자 이하"),
+  subject: z.string().min(1, "제목은 필수입니다").max(200, "200자 이하"),
+  category: z.string().optional(),
+  description: z.string().optional(),
+})
+
+type CreateSchema = z.infer<typeof createSchema>
+
+interface CreateApprovalTemplateSheetProps extends React.ComponentPropsWithRef<typeof Sheet> {}
+
+export function CreateApprovalTemplateSheet({ ...props }: CreateApprovalTemplateSheetProps) {
+  const [isPending, startTransition] = React.useTransition()
+  const router = useRouter()
+  const { data: session } = useSession()
+
+  const form = useForm<CreateSchema>({
+    resolver: zodResolver(createSchema),
+    defaultValues: {
+      name: "",
+      subject: "",
+      category: undefined,
+      description: "",
+    },
+  })
+
+  function onSubmit(values: CreateSchema) {
+    startTransition(async () => {
+      if (!session?.user?.id) {
+        toast.error("로그인이 필요합니다")
+        return
+      }
+
+      const defaultContent = `<p>{{content}}</p>`
+
+      try {
+        const template = await createApprovalTemplate({
+          name: values.name,
+          subject: values.subject,
+          content: defaultContent,
+          category: values.category || undefined,
+          description: values.description || undefined,
+          createdBy: Number(session.user.id),
+          variables: [],
+        })
+
+        toast.success("템플릿이 생성되었습니다")
+        props.onOpenChange?.(false)
+
+        router.push(`/evcp/approval/template/${template.id}`)
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : "생성에 실패했습니다")
+      }
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+        <SheetHeader className="text-left">
+          <SheetTitle>새 템플릿 생성</SheetTitle>
+          <SheetDescription>새로운 결재 템플릿을 생성합니다.</SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>템플릿 이름</FormLabel>
+                  <FormControl>
+                    <Input placeholder="예: 견적 승인 요청" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="subject"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>제목</FormLabel>
+                  <FormControl>
+                    <Input placeholder="예: 견적 승인 요청" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="category"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>카테고리 (선택)</FormLabel>
+                  <FormControl>
+                    <Input placeholder="카테고리" {...field} />
+                  </FormControl>
+                  <FormDescription>카테고리를 입력하지 않으면 미분류로 저장됩니다.</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>설명 (선택)</FormLabel>
+                  <FormControl>
+                    <Input placeholder="설명" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  취소
+                </Button>
+              </SheetClose>
+              <Button disabled={isPending}>
+                {isPending && <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />}
+                생성 후 편집하기
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/lib/approval-template/table/delete-approval-template-dialog.tsx b/lib/approval-template/table/delete-approval-template-dialog.tsx
new file mode 100644
index 00000000..9fa0a078
--- /dev/null
+++ b/lib/approval-template/table/delete-approval-template-dialog.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import * as React from "react"
+import { Loader, Trash } from "lucide-react"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { type ApprovalTemplate } from "@/lib/approval-template/service"
+
+import { deleteApprovalTemplate } from "../service"
+
+interface DeleteApprovalTemplateDialogProps extends React.ComponentPropsWithRef<typeof Dialog> {
+  templates: ApprovalTemplate[]
+  showTrigger?: boolean
+  onSuccess?: () => void
+}
+
+export function DeleteApprovalTemplateDialog({
+  templates,
+  showTrigger = true,
+  onSuccess,
+  ...props
+}: DeleteApprovalTemplateDialogProps) {
+  const [isDeletePending, startDeleteTransition] = React.useTransition()
+
+  const isMultiple = templates.length > 1
+  const templateName = isMultiple ? `${templates.length}개 템플릿` : templates[0]?.name
+
+  function onDelete() {
+    startDeleteTransition(async () => {
+      if (templates.length === 0) return
+
+      // 여러 개면 순차 삭제 (간단히 처리)
+      for (const t of templates) {
+        const result = await deleteApprovalTemplate(t.id)
+        if (result.error) {
+          toast.error(result.error)
+          return
+        }
+      }
+
+      props.onOpenChange?.(false)
+      onSuccess?.()
+      toast.success(
+        isMultiple ? `${templates.length}개 템플릿이 삭제되었습니다` : "템플릿이 삭제되었습니다",
+      )
+
+      // 새로고침으로 반영
+      window.location.reload()
+    })
+  }
+
+  return (
+    <Dialog {...props}>
+      {showTrigger && (
+        <DialogTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className="text-destructive hover:text-destructive"
+          >
+            <Trash className="mr-2 size-4" aria-hidden="true" />
+            삭제
+          </Button>
+        </DialogTrigger>
+      )}
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>템플릿 삭제 확인</DialogTitle>
+          <DialogDescription>
+            정말로 <strong>{templateName}</strong>을(를) 삭제하시겠습니까?
+            {!isMultiple && (
+              <>
+                <br />이 작업은 되돌릴 수 없습니다.
+              </>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        {templates.length > 0 && (
+          <div className="rounded-lg bg-muted p-3 max-h-40 overflow-y-auto">
+            <h4 className="text-sm font-medium mb-2">삭제될 템플릿</h4>
+            <div className="space-y-1">
+              {templates.map((t) => (
+                <div key={t.id} className="text-xs text-muted-foreground">
+                  <div className="font-medium">{t.name}</div>
+                  <div>ID: <code className="bg-background px-1 rounded">{t.id}</code></div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => props.onOpenChange?.(false)}
+            disabled={isDeletePending}
+          >
+            취소
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onDelete}
+            disabled={isDeletePending}
+          >
+            {isDeletePending && <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />}
+            {isMultiple ? `${templates.length}개 삭제` : "삭제"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/lib/approval-template/table/duplicate-approval-template-sheet.tsx b/lib/approval-template/table/duplicate-approval-template-sheet.tsx
new file mode 100644
index 00000000..e49000ff
--- /dev/null
+++ b/lib/approval-template/table/duplicate-approval-template-sheet.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Loader } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+import { useRouter } from "next/navigation"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+
+import { type ApprovalTemplate } from "@/lib/approval-template/service"
+import { duplicateApprovalTemplate } from "../service"
+import { useSession } from "next-auth/react"
+
+const duplicateSchema = z.object({
+  name: z.string().min(1, "템플릿 이름은 필수입니다").max(100, "100자 이내여야 합니다"),
+})
+
+type DuplicateSchema = z.infer<typeof duplicateSchema>
+
+interface DuplicateApprovalTemplateSheetProps extends React.ComponentPropsWithRef<typeof Sheet> {
+  template: ApprovalTemplate | null
+}
+
+export function DuplicateApprovalTemplateSheet({ template, ...props }: DuplicateApprovalTemplateSheetProps) {
+  const [isPending, startTransition] = React.useTransition()
+  const router = useRouter()
+  const { data: session } = useSession()
+
+  const form = useForm<DuplicateSchema>({
+    resolver: zodResolver(duplicateSchema),
+    defaultValues: { name: "" },
+  })
+
+  React.useEffect(() => {
+    if (template) {
+      form.reset({ name: `${template.name} (복사본)` })
+    }
+  }, [template, form])
+
+  function onSubmit(values: DuplicateSchema) {
+    startTransition(async () => {
+      if (!template) return
+      if (!session?.user?.id) {
+        toast.error("로그인이 필요합니다")
+        return
+      }
+
+      const { success, error, data } = await duplicateApprovalTemplate(
+        template.id,
+        values.name,
+        Number(session.user.id),
+      )
+
+      if (!success || error) {
+        toast.error(error ?? "복제에 실패했습니다")
+        return
+      }
+
+      toast.success("템플릿이 복제되었습니다")
+      props.onOpenChange?.(false)
+
+      // 상세 페이지로 이동 (id 기반)
+      if (data?.id) {
+        router.push(`/evcp/approval/template/${data.id}`)
+      } else {
+        window.location.reload()
+      }
+    })
+  }
+
+  return (
+    <Sheet {...props}>
+      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
+        <SheetHeader className="text-left">
+          <SheetTitle>템플릿 복제</SheetTitle>
+          <SheetDescription>기존 템플릿을 복사하여 새로운 템플릿을 생성합니다.</SheetDescription>
+        </SheetHeader>
+
+        {template && (
+          <div className="rounded-lg bg-muted p-3">
+            <h4 className="text-sm font-medium mb-2">원본 템플릿</h4>
+            <div className="space-y-1 text-xs text-muted-foreground">
+              <div>이름: {template.name}</div>
+              <div>ID: <code className="bg-background px-1 rounded">{template.id}</code></div>
+              <div>카테고리: {template.category ?? "-"}</div>
+            </div>
+          </div>
+        )}
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>새 템플릿 이름</FormLabel>
+                  <FormControl>
+                    <Input placeholder="복제된 템플릿 이름" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  취소
+                </Button>
+              </SheetClose>
+              <Button disabled={isPending}>
+                {isPending && <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />}
+                복제하기
+              </Button>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/lib/approval-template/table/update-approval-template-sheet.tsx b/lib/approval-template/table/update-approval-template-sheet.tsx
new file mode 100644
index 00000000..05f4069c
--- /dev/null
+++ b/lib/approval-template/table/update-approval-template-sheet.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Sheet } from "@/components/ui/sheet"
+import { type ApprovalTemplate } from "@/lib/approval-template/service"
+
+interface UpdateApprovalTemplateSheetProps extends React.ComponentPropsWithRef<typeof Sheet> {
+  template: ApprovalTemplate | null
+}
+
+export function UpdateApprovalTemplateSheet({ template, ...props }: UpdateApprovalTemplateSheetProps) {
+  // 현재 프로젝트 요구사항 범위 내에서는 상세 편집 페이지 또는 별도 에디터가 준비되지 않았으므로
+  // 업데이트 시트는 추후 구현합니다. (이메일 템플릿에서는 사용되지 않아 주석 처리되어 있었음)
+  // 이를 사용하려 할 경우 안내 문구만 표시합니다.
+
+  return (
+    <Sheet {...props}>
+      <div className="p-6 text-sm text-muted-foreground">
+        템플릿 편집 기능은 아직 구현되지 않았습니다.
+      </div>
+    </Sheet>
+  )
+}