From 3be48f27bb8f95abada610a587ad8da2f272a284 Mon Sep 17 00:00:00 2001
From: inthree3 <42310616+inthree3@users.noreply.github.com>
Date: Fri, 7 Jun 2024 16:07:34 +0900
Subject: [PATCH] chore: add color theme

---
 src/pages/PostListPage.tsx | 61 ++++++++++++++++++++------------------
 1 file changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/pages/PostListPage.tsx b/src/pages/PostListPage.tsx
index aa5eb9b..354786a 100644
--- a/src/pages/PostListPage.tsx
+++ b/src/pages/PostListPage.tsx
@@ -1,4 +1,4 @@
-import { Box, Table, Button } from '@mantine/core';
+import { Box, Table, Button, useMantineTheme } from '@mantine/core';
 
 import useSWR from 'swr';
 import { Post } from '../api/post';
@@ -6,37 +6,40 @@ import { Link } from 'react-router-dom';
 
 const PostListPage = () => {
   const { data } = useSWR<{ total: number; list: Post[] }>('/post');
+  const theme = useMantineTheme();
 
   return (
-    <Box display="flex" style={{ flexDirection: 'column', gap: 8 }}>
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>Id</Table.Th>
-            <Table.Th>Title</Table.Th>
-            <Table.Th>Author</Table.Th>
-            <Table.Th>Views</Table.Th>
-            <Table.Th>CreatedAt</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {data?.list.map((post) => (
-            <Table.Tr key={post.id}>
-              <Table.Td>{post.id}</Table.Td>
-              <Table.Td>
-                <Link to={`/posts/${post.id}`}>{post.contents.title}</Link>
-              </Table.Td>
-              <Table.Td>{post.author.name}</Table.Td>
-              <Table.Td>{post.views}</Table.Td>
-              <Table.Td>{post.createdAt}</Table.Td>
+    <Box style={{ padding: 32 }}>
+      <Box display="flex" style={{ flexDirection: 'column', gap: 8 }}>
+        <Table borderColor={theme.colors.cyan[4]}>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Id</Table.Th>
+              <Table.Th>Title</Table.Th>
+              <Table.Th>Author</Table.Th>
+              <Table.Th>Views</Table.Th>
+              <Table.Th>CreatedAt</Table.Th>
             </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-      <Box>
-        <Link to="/posts/create">
-          <Button>Create Post</Button>
-        </Link>
+          </Table.Thead>
+          <Table.Tbody>
+            {data?.list.map((post) => (
+              <Table.Tr key={post.id}>
+                <Table.Td>{post.id}</Table.Td>
+                <Table.Td>
+                  <Link to={`/posts/${post.id}`}>{post.contents.title}</Link>
+                </Table.Td>
+                <Table.Td>{post.author.name}</Table.Td>
+                <Table.Td>{post.views}</Table.Td>
+                <Table.Td>{post.createdAt}</Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.Tbody>
+        </Table>
+        <Box>
+          <Link to="/posts/create">
+            <Button>Create Post</Button>
+          </Link>
+        </Box>
       </Box>
     </Box>
   );