diff options
Diffstat (limited to 'lib/email-template/table/update-template-sheet.tsx')
| -rw-r--r-- | lib/email-template/table/update-template-sheet.tsx | 215 |
1 files changed, 215 insertions, 0 deletions
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 |