From 9da494b0e3bbe7b513521d0915510fe9ee376b8b Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Mon, 21 Jul 2025 07:19:52 +0000
Subject: (대표님, 최겸) 작업사항 - 이메일 템플릿, 메일링, 기술영업 요구사항
 반영
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../table/duplicate-template-sheet.tsx             | 208 +++++++++++++++++++++
 1 file changed, 208 insertions(+)
 create mode 100644 lib/email-template/table/duplicate-template-sheet.tsx

(limited to 'lib/email-template/table/duplicate-template-sheet.tsx')

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
-- 
cgit v1.2.3