diff options
Diffstat (limited to 'lib/email-template/table/delete-template-dialog.tsx')
| -rw-r--r-- | lib/email-template/table/delete-template-dialog.tsx | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/lib/email-template/table/delete-template-dialog.tsx b/lib/email-template/table/delete-template-dialog.tsx new file mode 100644 index 00000000..5bc7dc53 --- /dev/null +++ b/lib/email-template/table/delete-template-dialog.tsx @@ -0,0 +1,137 @@ +// delete-template-dialog.tsx +"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 TemplateListView } from "@/db/schema" + +import { deleteTemplate, bulkDeleteTemplates } from "../service" + +interface DeleteTemplateDialogProps + extends React.ComponentPropsWithRef<typeof Dialog> { + templates: TemplateListView[] + showTrigger?: boolean + onSuccess?: () => void +} + +export function DeleteTemplateDialog({ + templates, + showTrigger = true, + onSuccess, + ...props +}: DeleteTemplateDialogProps) { + const [isDeletePending, startDeleteTransition] = React.useTransition() + + const isMultiple = templates.length > 1 + const templateName = isMultiple ? `${templates.length}개 템플릿` : templates[0]?.name + + function onDelete() { + startDeleteTransition(async () => { + let result + + if (isMultiple) { + const ids = templates.map(t => t.id) + result = await bulkDeleteTemplates(ids) + } else { + result = await deleteTemplate(templates[0].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((template) => ( + <div key={template.id} className="text-xs text-muted-foreground"> + <div className="font-medium">{template.name}</div> + <div>Slug: <code className="bg-background px-1 rounded">{template.slug}</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> + ) +}
\ No newline at end of file |