diff options
Diffstat (limited to 'lib/email-template/table/duplicate-template-sheet.tsx')
| -rw-r--r-- | lib/email-template/table/duplicate-template-sheet.tsx | 208 |
1 files changed, 208 insertions, 0 deletions
diff --git a/lib/email-template/table/duplicate-template-sheet.tsx b/lib/email-template/table/duplicate-template-sheet.tsx new file mode 100644 index 00000000..767a8bb6 --- /dev/null +++ b/lib/email-template/table/duplicate-template-sheet.tsx @@ -0,0 +1,208 @@ +"use client" + +import * as React from "react" +import { type TemplateListView } from "@/db/schema/template-views" +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, + FormDescription, +} from "@/components/ui/form" +import { Input } from "@/components/ui/input" +import { + Sheet, + SheetClose, + SheetContent, + SheetDescription, + SheetFooter, + SheetHeader, + SheetTitle, +} from "@/components/ui/sheet" + +import { duplicateTemplate } from "../service" + +// Validation Schema +const duplicateTemplateSchema = z.object({ + name: z.string().min(1, "템플릿 이름은 필수입니다").max(100, "템플릿 이름은 100자 이하여야 합니다"), + slug: z.string() + .min(1, "Slug는 필수입니다") + .max(50, "Slug는 50자 이하여야 합니다") + .regex(/^[a-z0-9-]+$/, "Slug는 소문자, 숫자, 하이픈만 사용 가능합니다"), +}) + +type DuplicateTemplateSchema = z.infer<typeof duplicateTemplateSchema> + +interface DuplicateTemplateSheetProps + extends React.ComponentPropsWithRef<typeof Sheet> { + template: TemplateListView | null +} + +export function DuplicateTemplateSheet({ template, ...props }: DuplicateTemplateSheetProps) { + const [isDuplicatePending, startDuplicateTransition] = React.useTransition() + const router = useRouter() + + const form = useForm<DuplicateTemplateSchema>({ + resolver: zodResolver(duplicateTemplateSchema), + defaultValues: { + name: "", + slug: "", + }, + }) + + React.useEffect(() => { + if (template) { + const copyName = `${template.name} (복사본)` + const copySlug = `${template.slug}-copy-${Date.now()}` + + form.reset({ + name: copyName, + slug: copySlug, + }) + } + }, [template, form]) + + // 이름 입력 시 자동으로 slug 생성 + const watchedName = form.watch("name") + React.useEffect(() => { + if (watchedName && !form.formState.dirtyFields.slug) { + const autoSlug = watchedName + .toLowerCase() + .replace(/[^a-z0-9\s-]/g, '') + .replace(/\s+/g, '-') + .replace(/-+/g, '-') + .trim() + .slice(0, 50) + + form.setValue("slug", autoSlug, { shouldValidate: false }) + } + }, [watchedName, form]) + + function onSubmit(input: DuplicateTemplateSchema) { + startDuplicateTransition(async () => { + if (!template) return + + // 현재 사용자 ID (실제로는 인증에서 가져와야 함) + const currentUserId = "current-user-id" // TODO: 실제 사용자 ID로 교체 + + const { error, data } = await duplicateTemplate( + template.id, + input.name, + input.slug, + currentUserId + ) + + if (error) { + toast.error(error) + return + } + + form.reset() + props.onOpenChange?.(false) + toast.success("템플릿이 복제되었습니다") + + // 복제된 템플릿의 세부 페이지로 이동 + if (data?.slug) { + router.push(`/evcp/templates/${data.slug}`) + } 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>Slug: <code className="bg-background px-1 rounded">{template.slug}</code></div> + <div>카테고리: {template.categoryDisplayName}</div> + <div>변수: {template.variableCount}개</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> + )} + /> + + <FormField + control={form.control} + name="slug" + render={({ field }) => ( + <FormItem> + <FormLabel>새 Slug</FormLabel> + <FormControl> + <Input + placeholder="복제된 템플릿의 slug를 입력하세요" + {...field} + /> + </FormControl> + <FormDescription> + 고유한 식별자여야 합니다. 소문자, 숫자, 하이픈만 사용 가능합니다. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + <SheetFooter className="gap-2 pt-2 sm:space-x-0"> + <SheetClose asChild> + <Button type="button" variant="outline"> + 취소 + </Button> + </SheetClose> + <Button disabled={isDuplicatePending}> + {isDuplicatePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + 복제하기 + </Button> + </SheetFooter> + </form> + </Form> + </SheetContent> + </Sheet> + ) +}
\ No newline at end of file |