From 1cb88984e8269a70ab47fe223e7c94c69d92c90b Mon Sep 17 00:00:00 2001
From: Lee-Dongwook <dlehddnr0713@gmail.com>
Date: Wed, 23 Oct 2024 19:20:08 +0900
Subject: [PATCH] feat : DataTable with Sample init

---
 client/src/components/DocumentTable/index.tsx | 29 +++++++++++++++++++
 client/src/components/ui/DataTable/index.tsx  |  2 +-
 client/src/template/DocumentListPage.tsx      |  5 +++-
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/DocumentTable/index.tsx

diff --git a/client/src/components/DocumentTable/index.tsx b/client/src/components/DocumentTable/index.tsx
new file mode 100644
index 0000000..d6e4f31
--- /dev/null
+++ b/client/src/components/DocumentTable/index.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import type { PaymentType } from "@/types/paymentType";
+import { columns } from "@/components/ui/column";
+import { DataTable } from "@/components/ui/DataTable";
+
+async function getData(): Promise<PaymentType[]> {
+  const res = await fetch(
+    "https://my.api.mockaroo.com/payment_info.json?key=f0933e60"
+  );
+  if (!res.ok) {
+    throw new Error("Failed to fetch data");
+  }
+
+  return res.json();
+}
+
+export default function DocumentTable() {
+  const [paymentData, setPaymentData] = useState<PaymentType[]>([]);
+  useEffect(() => {
+    const data = async () => {
+      const result = await getData();
+      setPaymentData(result);
+    };
+    data();
+  }, []);
+  return <DataTable columns={columns} data={paymentData} />;
+}
diff --git a/client/src/components/ui/DataTable/index.tsx b/client/src/components/ui/DataTable/index.tsx
index e0ae655..8c105c1 100644
--- a/client/src/components/ui/DataTable/index.tsx
+++ b/client/src/components/ui/DataTable/index.tsx
@@ -64,7 +64,7 @@ export function DataTable<TData, TValue>({
   });
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-8">
       <DataTableToolbar table={table} />
       <div className="rounded-md border">
         <Table>
diff --git a/client/src/template/DocumentListPage.tsx b/client/src/template/DocumentListPage.tsx
index 7eecfa0..5fbf196 100644
--- a/client/src/template/DocumentListPage.tsx
+++ b/client/src/template/DocumentListPage.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import API from "@/lib/api";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
+import DocumentTable from "@/components/DocumentTable";
 
 interface Document {
   id?: string;
@@ -47,6 +48,8 @@ export default function DocumentListPage() {
   }, []);
 
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center"></div>
+    <div className="min-h-screen flex flex-col items-center justify-center">
+      <DocumentTable />
+    </div>
   );
 }