fix: PostListPage style

Hot-Spicy-Buffalo-Wing · Jun 7, 2024 · 6c8ae46 · 6c8ae46
1 parent d37f23b
commit 6c8ae46
Showing 1 changed file with 35 additions and 18 deletions.
diff --git a/src/pages/PostListPage.tsx b/src/pages/PostListPage.tsx
@@ -8,36 +8,53 @@ const PostListPage = () => {
   const { data } = useSWR<{ total: number; list: Post[] }>('/post');
 
   return (
-    <Box display="flex" style={{ flexDirection: 'column', gap: 8 }}>
-      <Table>
+    <Box
+      display="flex"
+      style={{
+        flexDirection: 'column',
+        gap: 8,
+        alignItems: 'center',
+        paddingTop: '30px',
+      }}
+    >
+      <Box>
+        <Link to="/posts/create">
+          <Button>Create Post</Button>
+        </Link>
+      </Box>
+      <Table style={{ width: '80vw', marginTop: '20px' }}>
         <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.Th style={{ textAlign: 'center' }}>Id</Table.Th>
+            <Table.Th style={{ textAlign: 'center' }}>Title</Table.Th>
+            <Table.Th style={{ textAlign: 'center' }}>Author</Table.Th>
+            <Table.Th style={{ textAlign: 'center' }}>Views</Table.Th>
+            <Table.Th style={{ textAlign: 'center' }}>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>
+            <Table.Tr
+              key={post.id}
+              style={{ borderBottomWidth: '10px', borderColor: '#ffffff' }}
+            >
+              <Table.Td style={{ padding: '20px 0px', textAlign: 'center' }}>
+                {post.id}
+              </Table.Td>
+              <Table.Td style={{ textAlign: 'center' }}>
                 <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.Td style={{ textAlign: 'center' }}>
+                {post.author.name}
+              </Table.Td>
+              <Table.Td style={{ textAlign: 'center' }}>{post.views}</Table.Td>
+              <Table.Td style={{ textAlign: 'center' }}>
+                {post.createdAt.substring(0, 10)}
+              </Table.Td>
             </Table.Tr>
           ))}
         </Table.Tbody>
       </Table>
-      <Box>
-        <Link to="/posts/create">
-          <Button>Create Post</Button>
-        </Link>
-      </Box>
     </Box>
   );
 };