feat: post detail page

src/pages/PostDetailPage.tsx

@@ -1,5 +1,31 @@
+import { useParams } from 'react-router-dom';
+import useSWR from 'swr';
+import { Post } from '../api/post';
+import { Box, Image } from '@mantine/core';
+
 const PostDetailPage = () => {
-  return null;
+  const { id } = useParams<{ id: string }>();
+
+  const { data: post, error } = useSWR<Post>(`/post/${id}`);
+
+  if (!id) return null;
+  if (error) return <div>Error</div>;
+  if (!post) return null;
+
+  return (
+    <Box>
+      <h1>{post.contents.title}</h1>
+      <p>author: {post.author.name}</p>
+      <p>views: {post.views}</p>
+      <p>{post.contents.body}</p>
+      <h2>Images</h2>
+      <Box display="flex" style={{ gap: 4 }}>
+        {post.imageUrls.map((url) => (
+          <Image src={url} key={url} h={400} />
+        ))}
+      </Box>
+    </Box>
+  );
 };
 
 export default PostDetailPage;

src/pages/PostListPage.tsx

@@ -23,7 +23,9 @@ const PostListPage = () => {
           {data?.list.map((post) => (
             <Table.Tr key={post.id}>
               <Table.Td>{post.id}</Table.Td>
-              <Table.Td>{post.contents.title}</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>