diff options
Diffstat (limited to 'lib/approval-template/table')
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> + ) +} |