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

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

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

diff --git a/lib/email-template/table/update-template-sheet.tsx b/lib/email-template/table/update-template-sheet.tsx
new file mode 100644
index 00000000..58da0626
--- /dev/null
+++ b/lib/email-template/table/update-template-sheet.tsx
@@ -0,0 +1,215 @@
+"use client"
+
+import * as React from "react"
+import { type TemplateListView} from "@/db/schema"
+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 { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+
+import { updateTemplateAction } from "../service"
+import { TEMPLATE_CATEGORY_OPTIONS } from "../validations"
+
+// Validation Schema
+const updateTemplateSchema = z.object({
+  name: z.string().min(1, "템플릿 이름은 필수입니다").max(100, "템플릿 이름은 100자 이하여야 합니다"),
+  description: z.string().max(500, "설명은 500자 이하여야 합니다").optional(),
+  category: z.string().optional(),
+})
+
+type UpdateTemplateSchema = z.infer<typeof updateTemplateSchema>
+
+interface UpdateTemplateSheetProps
+  extends React.ComponentPropsWithRef<typeof Sheet> {
+  template: TemplateListView | null
+}
+
+export function UpdateTemplateSheet({ template, ...props }: UpdateTemplateSheetProps) {
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
+
+  const form = useForm<UpdateTemplateSchema>({
+    resolver: zodResolver(updateTemplateSchema),
+    defaultValues: {
+      name: template?.name ?? "",
+      description: template?.description ?? "",
+      category: template?.category ?? "",
+    },
+  })
+
+  React.useEffect(() => {
+    if (template) {
+      form.reset({
+        name: template.name ?? "",
+        description: template.description ?? "",
+        category: template.category ?? "",
+      })
+    }
+  }, [template, form])
+
+  function onSubmit(input: UpdateTemplateSchema) {
+    startUpdateTransition(async () => {
+      if (!template) return
+
+      // 현재 사용자 ID (실제로는 인증에서 가져와야 함)
+      const currentUserId = "current-user-id" // TODO: 실제 사용자 ID로 교체
+
+      const { error } = await updateTemplateAction(template.slug, {
+        name: input.name,
+        description: input.description || undefined,
+        // category는 일반적으로 수정하지 않는 것이 좋지만, 필요시 포함
+        updatedBy: currentUserId,
+      })
+
+      if (error) {
+        toast.error(error)
+        return
+      }
+
+      form.reset()
+      props.onOpenChange?.(false)
+      toast.success("템플릿이 업데이트되었습니다")
+      
+      // 페이지 새로고침으로 데이터 갱신
+      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>
+        <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="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>설명</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="템플릿에 대한 설명을 입력하세요"
+                      className="min-h-[80px]"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="category"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>카테고리</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="카테고리를 선택하세요" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="">카테고리 없음</SelectItem>
+                      {TEMPLATE_CATEGORY_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* 현재 정보 표시 */}
+            {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>Slug: <code className="bg-background px-1 rounded">{template.slug}</code></div>
+                  <div>버전: v{template.version}</div>
+                  <div>변수: {template.variableCount}개 (필수: {template.requiredVariableCount}개)</div>
+                  <div>수정일: {new Date(template.updatedAt).toLocaleString('ko-KR')}</div>
+                </div>
+              </div>
+            )}
+
+            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
+              <SheetClose asChild>
+                <Button type="button" variant="outline">
+                  취소
+                </Button>
+              </SheetClose>
+              <Button disabled={isUpdatePending}>
+                {isUpdatePending && (
+                  <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