diff options
Diffstat (limited to 'lib/email-template/table')
| -rw-r--r-- | lib/email-template/table/duplicate-template-sheet.tsx | 142 | ||||
| -rw-r--r-- | lib/email-template/table/email-template-table.tsx | 2 | ||||
| -rw-r--r-- | lib/email-template/table/template-table-columns.tsx | 187 |
3 files changed, 156 insertions, 175 deletions
diff --git a/lib/email-template/table/duplicate-template-sheet.tsx b/lib/email-template/table/duplicate-template-sheet.tsx index 767a8bb6..d59d80f0 100644 --- a/lib/email-template/table/duplicate-template-sheet.tsx +++ b/lib/email-template/table/duplicate-template-sheet.tsx @@ -1,15 +1,8 @@ -"use client" +'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 */ +import { Button } from '@/components/ui/button'; +import { duplicateTemplate, getCurrentUserId } from '../service'; import { Form, FormControl, @@ -18,8 +11,10 @@ import { FormLabel, FormMessage, FormDescription, -} from "@/components/ui/form" -import { Input } from "@/components/ui/input" +} from '@/components/ui/form'; +import { getCategoryDisplayName } from '../validations'; +import { Input } from '@/components/ui/input'; +import { Loader } from 'lucide-react'; import { Sheet, SheetClose, @@ -28,53 +23,59 @@ import { SheetFooter, SheetHeader, SheetTitle, -} from "@/components/ui/sheet" - -import { duplicateTemplate } from "../service" - -// Validation Schema +} from '@/components/ui/sheet'; +import { toast } from 'sonner'; +import { type ComponentPropsWithRef, useEffect, useTransition } from 'react'; +import { type TemplateListView } from '@/db/schema'; +import { useForm } from 'react-hook-form'; +import { useRouter } from 'next/navigation'; +import { z } from 'zod'; +import { zodResolver } from '@hookform/resolvers/zod'; + +// ---------------------------------------------------------------------------------------------------- + +/* TYPES */ const duplicateTemplateSchema = z.object({ - name: z.string().min(1, "템플릿 이름은 필수입니다").max(100, "템플릿 이름은 100자 이하여야 합니다"), + 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 + .min(1, 'Slug는 필수입니다.') + .max(50, 'Slug는 50자 이하여야 합니다.') + .regex(/^[a-z0-9-]+$/, 'Slug는 소문자, 숫자, 하이픈만 사용 가능합니다.'), +}); +type DuplicateTemplateSchema = z.infer<typeof duplicateTemplateSchema>; +interface DuplicateTemplateSheetProps extends ComponentPropsWithRef<typeof Sheet> { + template: TemplateListView | null; } -export function DuplicateTemplateSheet({ template, ...props }: DuplicateTemplateSheetProps) { - const [isDuplicatePending, startDuplicateTransition] = React.useTransition() - const router = useRouter() +// ---------------------------------------------------------------------------------------------------- +/* DUPLICATE EMAIL TEMPLATE SHEET COMPONENT */ +function DuplicateTemplateSheet({ template, ...props }: DuplicateTemplateSheetProps) { + const [isDuplicatePending, startDuplicateTransition] = useTransition(); const form = useForm<DuplicateTemplateSchema>({ resolver: zodResolver(duplicateTemplateSchema), defaultValues: { - name: "", - slug: "", + name: '', + slug: '', }, }) + const router = useRouter(); + const watchedName = form.watch('name'); - React.useEffect(() => { + useEffect(() => { if (template) { - const copyName = `${template.name} (복사본)` - const copySlug = `${template.slug}-copy-${Date.now()}` - + const copyName = `${template.name} (복사본)`; + const copySlug = `${template.slug}-copy-${Date.now()}`; form.reset({ name: copyName, slug: copySlug, - }) + }); } - }, [template, form]) + }, [template, form]); - // 이름 입력 시 자동으로 slug 생성 - const watchedName = form.watch("name") - React.useEffect(() => { + useEffect(() => { if (watchedName && !form.formState.dirtyFields.slug) { const autoSlug = watchedName .toLowerCase() @@ -82,42 +83,40 @@ export function DuplicateTemplateSheet({ template, ...props }: DuplicateTemplate .replace(/\s+/g, '-') .replace(/-+/g, '-') .trim() - .slice(0, 50) - - form.setValue("slug", autoSlug, { shouldValidate: false }) + .slice(0, 50); + form.setValue('slug', autoSlug, { shouldValidate: false }); } - }, [watchedName, form]) + }, [watchedName, form]); function onSubmit(input: DuplicateTemplateSchema) { startDuplicateTransition(async () => { - if (!template) return - - // 현재 사용자 ID (실제로는 인증에서 가져와야 함) - const currentUserId = "current-user-id" // TODO: 실제 사용자 ID로 교체 + if (!template) { + return; + } + const currentUserId = await getCurrentUserId(); const { error, data } = await duplicateTemplate( template.id, input.name, input.slug, - currentUserId - ) + currentUserId, + ); if (error) { - toast.error(error) - return + toast.error(error); + return; } - form.reset() - props.onOpenChange?.(false) - toast.success("템플릿이 복제되었습니다") + form.reset(); + props.onOpenChange?.(false); + toast.success('템플릿이 복제되었습니다.'); - // 복제된 템플릿의 세부 페이지로 이동 if (data?.slug) { - router.push(`/evcp/templates/${data.slug}`) + router.push(`/evcp/email-template/${data.slug}`); } else { - window.location.reload() + window.location.reload(); } - }) + }); } return ( @@ -129,19 +128,17 @@ export function DuplicateTemplateSheet({ template, ...props }: DuplicateTemplate 기존 템플릿을 복사하여 새로운 템플릿을 생성합니다. 모든 내용과 변수가 복제됩니다. </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>카테고리: {getCategoryDisplayName(template.category)}</div> <div>변수: {template.variableCount}개</div> </div> </div> )} - <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)} @@ -155,7 +152,7 @@ export function DuplicateTemplateSheet({ template, ...props }: DuplicateTemplate <FormLabel>새 템플릿 이름</FormLabel> <FormControl> <Input - placeholder="복제된 템플릿의 이름을 입력하세요" + placeholder="복제된 템플릿의 이름을 입력하세요." {...field} /> </FormControl> @@ -163,7 +160,6 @@ export function DuplicateTemplateSheet({ template, ...props }: DuplicateTemplate </FormItem> )} /> - <FormField control={form.control} name="slug" @@ -172,7 +168,7 @@ export function DuplicateTemplateSheet({ template, ...props }: DuplicateTemplate <FormLabel>새 Slug</FormLabel> <FormControl> <Input - placeholder="복제된 템플릿의 slug를 입력하세요" + placeholder="복제된 템플릿의 Slug를 입력하세요." {...field} /> </FormControl> @@ -183,7 +179,6 @@ export function DuplicateTemplateSheet({ template, ...props }: DuplicateTemplate </FormItem> )} /> - <SheetFooter className="gap-2 pt-2 sm:space-x-0"> <SheetClose asChild> <Button type="button" variant="outline"> @@ -204,5 +199,10 @@ export function DuplicateTemplateSheet({ template, ...props }: DuplicateTemplate </Form> </SheetContent> </Sheet> - ) -}
\ No newline at end of file + ); +} + +// ---------------------------------------------------------------------------------------------------- + +/* EXPORT */ +export default DuplicateTemplateSheet; diff --git a/lib/email-template/table/email-template-table.tsx b/lib/email-template/table/email-template-table.tsx index 65e93a10..acce0ace 100644 --- a/lib/email-template/table/email-template-table.tsx +++ b/lib/email-template/table/email-template-table.tsx @@ -17,7 +17,7 @@ import { type TemplateListView } from "@/db/schema" import { getTemplateList } from "../service" import { UpdateTemplateSheet } from "./update-template-sheet" import { CreateTemplateSheet } from "./create-template-sheet" -import { DuplicateTemplateSheet } from "./duplicate-template-sheet" +import DuplicateTemplateSheet from './duplicate-template-sheet'; import { DeleteTemplateDialog } from "./delete-template-dialog" interface TemplateTableProps { diff --git a/lib/email-template/table/template-table-columns.tsx b/lib/email-template/table/template-table-columns.tsx index a678a20a..9c3e69c2 100644 --- a/lib/email-template/table/template-table-columns.tsx +++ b/lib/email-template/table/template-table-columns.tsx @@ -1,41 +1,46 @@ -"use client" +'use client'; -import * as React from "react" -import { type ColumnDef } from "@tanstack/react-table" -import { ArrowUpDown, Copy, MoreHorizontal, Edit, Trash, Eye } from "lucide-react" -import Link from "next/link" - -import { Badge } from "@/components/ui/badge" -import { Button } from "@/components/ui/button" -import { Checkbox } from "@/components/ui/checkbox" +/* IMPORT */ +import { Badge } from '@/components/ui/badge'; +import { Button } from '@/components/ui/button'; +import { Checkbox } from '@/components/ui/checkbox'; +import { Copy, Eye, MoreHorizontal, Trash } from 'lucide-react'; +import { DataTableColumnHeaderSimple } from '@/components/data-table/data-table-column-simple-header'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" -import { toast } from "sonner" -import { formatDate } from "@/lib/utils" -import { type TemplateListView } from "@/db/schema" -import { type DataTableRowAction } from "@/types/table" -import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" -import { getCategoryDisplayName, getCategoryVariant } from "../validations" +} from '@/components/ui/dropdown-menu'; +import { formatDate } from '@/lib/utils'; +import { getCategoryDisplayName, getCategoryVariant } from '../validations'; +import Link from 'next/link'; +import { type ColumnDef } from '@tanstack/react-table'; +import { type Dispatch, type SetStateAction } from 'react'; +import { type DataTableRowAction } from '@/types/table'; +import { type TemplateListView } from '@/db/schema'; + +// ---------------------------------------------------------------------------------------------------- +/* TYPES */ interface GetColumnsProps { - setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TemplateListView> | null>> + setRowAction: Dispatch<SetStateAction<DataTableRowAction<TemplateListView> | null>>; } +// ---------------------------------------------------------------------------------------------------- + +/* FUNCTION FOR GETTING COLUMNS SETTING */ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<TemplateListView>[] { return [ - // 체크박스 컬럼 + // [1] Checkbox Column { - id: "select", + id: 'select', header: ({ table }) => ( <Checkbox checked={ table.getIsAllPageRowsSelected() || - (table.getIsSomePageRowsSelected() && "indeterminate") + (table.getIsSomePageRowsSelected() && 'indeterminate') } onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" @@ -53,10 +58,9 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat enableSorting: false, enableHiding: false, }, - - // 템플릿 이름 컬럼 (클릭 시 세부 페이지로) + // [2] Template Name Column { - accessorKey: "name", + accessorKey: 'name', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="템플릿 이름" /> ), @@ -80,34 +84,33 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat }, enableSorting: true, enableHiding: false, - size:200 + size: 200, }, - + // [3] Email Subject Column { - accessorKey: "subject", - header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="이메일 제목" /> - ), - cell: ({ getValue }) => { - const subject = getValue() as string - return ( - <div className="text-sm text-muted-foreground"> - {subject} - </div> - ) - }, - enableSorting: true, - size:250 + accessorKey: 'subject', + header: ({ column }) => ( + <DataTableColumnHeaderSimple column={column} title="이메일 제목" /> + ), + cell: ({ getValue }) => { + const subject = getValue() as string; + return ( + <div className="text-sm text-muted-foreground"> + {subject} + </div> + ) }, - - // Slug 컬럼 + enableSorting: true, + size: 250, + }, + // [4] Slug Column { - accessorKey: "slug", + accessorKey: 'slug', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="Slug" /> ), cell: ({ getValue }) => { - const slug = getValue() as string + const slug = getValue() as string; return ( <div className="font-mono text-sm text-muted-foreground"> {slug} @@ -115,44 +118,40 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat ) }, enableSorting: true, - size:120 - + size: 120, }, - - // 카테고리 컬럼 + // [5] Category Column { - accessorKey: "category", + accessorKey: 'category', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="카테고리" /> ), cell: ({ row }) => { - const category = row.original.category - const displayName = getCategoryDisplayName(category) - const variant = getCategoryVariant(category) + const category = row.original.category; + const displayName = getCategoryDisplayName(category); + const variant = getCategoryVariant(category); return ( <Badge variant={variant}> {displayName} </Badge> - ) + ); }, - enableSorting: true, filterFn: (row, id, value) => { - return value.includes(row.getValue(id)) + return value.includes(row.getValue(id)); }, - size:120 - + enableSorting: true, + size: 120, }, - - // 변수 개수 컬럼 + // [6] Variable Count Column { - accessorKey: "variableCount", + accessorKey: 'variableCount', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="변수" /> ), cell: ({ row }) => { - const variableCount = row.original.variableCount - const requiredCount = row.original.requiredVariableCount + const variableCount = row.original.variableCount; + const requiredCount = row.original.requiredVariableCount; return ( <div className="text-center"> @@ -163,21 +162,20 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat </div> )} </div> - ) + ); }, enableSorting: true, - size:80 - + size: 80, }, - - // 버전 컬럼 + // [7] Version Column { - accessorKey: "version", + accessorKey: 'version', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="버전" /> ), cell: ({ getValue }) => { - const version = getValue() as number + const version = getValue() as number; + return ( <div className="text-center"> <Badge variant="outline" className="font-mono text-xs"> @@ -187,18 +185,17 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat ) }, enableSorting: true, - size:80 - + size: 80, }, - - // 생성일 컬럼 + // [8] Created At Column { - accessorKey: "createdAt", + accessorKey: 'createdAt', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="생성일" /> ), cell: ({ cell }) => { - const date = cell.getValue() as Date + const date = cell.getValue() as Date; + return ( <div className="text-sm text-muted-foreground"> {formatDate(date)} @@ -206,18 +203,17 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat ) }, enableSorting: true, - size:200 - + size: 150, }, - - // 수정일 컬럼 + // [9] Updated At Column { - accessorKey: "updatedAt", + accessorKey: 'updatedAt', header: ({ column }) => ( <DataTableColumnHeaderSimple column={column} title="수정일" /> ), cell: ({ cell }) => { - const date = cell.getValue() as Date + const date = cell.getValue() as Date; + return ( <div className="text-sm text-muted-foreground"> {formatDate(date)} @@ -225,15 +221,13 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat ) }, enableSorting: true, - size:200 - + size: 150, }, - - // Actions 컬럼 + // [10] Actions Column { - id: "actions", + id: 'actions', cell: ({ row }) => { - const template = row.original + const template = row.original; return ( <DropdownMenu> @@ -253,30 +247,18 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat 상세 보기 </Link> </DropdownMenuItem> - - {/* <DropdownMenuItem - onClick={() => { - setRowAction({ type: "update", row }) - }} - > - <Edit className="mr-2 size-4" aria-hidden="true" /> - 업데이트 - </DropdownMenuItem> */} - <DropdownMenuItem onClick={() => { - setRowAction({ type: "duplicate", row }) + setRowAction({ type: 'duplicate', row }) }} > <Copy className="mr-2 size-4" aria-hidden="true" /> 복제하기 </DropdownMenuItem> - <DropdownMenuSeparator /> - <DropdownMenuItem onClick={() => { - setRowAction({ type: "delete", row }) + setRowAction({ type: 'delete', row }) }} className="text-destructive focus:text-destructive" > @@ -290,7 +272,6 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<Templat enableSorting: false, enableHiding: false, size:80 - }, - ] -}
\ No newline at end of file + ]; +} |