2 files changed, 126 insertions, 0 deletions
diff --git a/lib/email-log/table/email-log-table-columns.tsx b/lib/email-log/table/email-log-table-columns.tsx
new file mode 100644
index 00000000..68f2795f
--- /dev/null
+++ b/lib/email-log/table/email-log-table-columns.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import { type ColumnDef } from "@tanstack/react-table"
+import { type InferSelectModel } from "drizzle-orm"
+import { emailLogs } from "@/db/schema/emailLogs"
+
+export function getColumns<T extends InferSelectModel<typeof emailLogs>>(): ColumnDef<T>[] {
+  return [
+   {
+      id: "subject",
+      header: () => <div className="text-left">Subject</div>,
+      accessorKey: "subject",
+      cell: ({ row }) => (
+        <div className="whitespace-pre-wrap break-all">{String(row.original.subject ?? "")}</div>
+      ),
+      size: 360,
+    },
+    {
+      id: "from",
+      header: () => <div className="text-left">From</div>,
+      accessorKey: "from",
+      cell: ({ row }) => (
+        <div className="whitespace-pre-wrap break-all">{String(row.original.from ?? "")}</div>
+      ),
+      size: 220,
+    },
+    {
+      id: "to",
+      header: () => <div className="text-left">To</div>,
+      accessorKey: "to",
+      cell: ({ row }) => (
+        <div className="whitespace-pre-wrap break-all">{String(row.original.to ?? "")}</div>
+      ),
+      size: 220,
+    },
+    {
+      id: "cc",
+      header: () => <div className="text-left">CC</div>,
+      accessorKey: "cc",
+      cell: ({ row }) => (
+        <div className="whitespace-pre-wrap break-all">{String(row.original.cc ?? "")}</div>
+      ),
+      size: 220,
+    },
+     {
+      id: "createdAt",
+      header: () => <div className="text-left">Created At</div>,
+      accessorKey: "createdAt",
+      cell: ({ row }) => (
+        <div className="whitespace-nowrap">
+          {new Date(row.original.createdAt as unknown as string).toLocaleString()}
+        </div>
+      ),
+      size: 180,
+    },
+   
+  ]
+}
+
+
diff --git a/lib/email-log/table/email-log-table.tsx b/lib/email-log/table/email-log-table.tsx
new file mode 100644
index 00000000..db627af5
--- /dev/null
+++ b/lib/email-log/table/email-log-table.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import type {
+  DataTableAdvancedFilterField,
+  DataTableFilterField,
+} from "@/types/table"
+
+import { useDataTable } from "@/hooks/use-data-table"
+import { DataTable } from "@/components/data-table/data-table"
+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
+import { getColumns } from "./email-log-table-columns"
+import { getEmailLogList } from "../service"
+import { type InferSelectModel } from "drizzle-orm"
+import { emailLogs } from "@/db/schema/emailLogs"
+
+interface EmailLogTableProps {
+  promises: Promise<[
+    Awaited<ReturnType<typeof getEmailLogList>>,
+  ]>
+}
+
+export function EmailLogTable({ promises }: EmailLogTableProps) {
+  const [{ data, pageCount }] = React.use(promises)
+
+  type EmailLog = InferSelectModel<typeof emailLogs>
+
+  const columns = React.useMemo(() => getColumns<EmailLog>(), [])
+
+  const filterFields: DataTableFilterField<EmailLog>[] = []
+
+  const advancedFilterFields: DataTableAdvancedFilterField<EmailLog>[] = [
+    { id: "from", label: "From", type: "text" },
+    { id: "to", label: "To", type: "text" },
+    { id: "subject", label: "Subject", type: "text" },
+    { id: "createdAt", label: "발송시간", type: "date" },
+  ]
+
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount,
+    filterFields,
+    enablePinning: true,
+    enableAdvancedFilter: true,
+    initialState: {
+      sorting: [{ id: "createdAt", desc: true }],
+    },
+    getRowId: (row) => String(row.id),
+    shallow: false,
+    clearOnDefault: true,
+  })
+
+  return (
+    <DataTable table={table}>
+      <DataTableAdvancedToolbar
+        table={table}
+        filterFields={advancedFilterFields}
+        shallow={false}
+      />
+    </DataTable>
+  )
+}
+
+