feat: create post

src/App.tsx

@@ -13,6 +13,8 @@ import api from './api';
 import LookBookPage from './pages/LookBookPage';
 import { MantineProvider } from '@mantine/core';
 import PostListPage from './pages/PostListPage';
+import PostCreatePage from './pages/PostCreatePage';
+import PostDetailPage from './pages/PostDetailPage';
 
 const Router = () => {
   const { user, loading } = useUser();
@@ -24,6 +26,8 @@ const Router = () => {
           <>
             <Route path="/main" element={<MainPage />} />
             <Route path="/posts" element={<PostListPage />} />
+            <Route path="/posts/create" element={<PostCreatePage />} />
+            <Route path="/posts/:id" element={<PostDetailPage />} />
             <Route path="/look-books" element={<LookBookPage />} />
             <Route path="*" element={<Navigate to="/main" />} />
           </>

src/pages/LookBookSelectModalButton.tsx

@@ -0,0 +1,62 @@
+import { Box, Button, Modal, Text, Image } from '@mantine/core';
+import { useState } from 'react';
+import useSWR from 'swr';
+import { LookBook } from '../api/ai';
+
+interface LookBookSelectModalButtonProps {
+  onAddLookBook: (lookBook: LookBook) => void;
+}
+
+const LookBookSelectModalButton = ({
+  onAddLookBook,
+}: LookBookSelectModalButtonProps) => {
+  const { data } = useSWR<{ total: number; list: LookBook[] }>('/ai');
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      <Button type="button" onClick={() => setShow(true)}>
+        Select LookBooks
+      </Button>
+      <Modal
+        opened={show}
+        onClose={() => setShow(false)}
+        title={<Text size="lg">Select LookBook</Text>}
+      >
+        <Box
+          w="100%"
+          display="flex"
+          style={{ flexDirection: 'column', gap: 4 }}
+        >
+          {data?.list.map((lookBook) => (
+            <Box
+              key={lookBook.id}
+              h={400}
+              bd="1px solid black"
+              style={{ position: 'relative' }}
+            >
+              <Image
+                src={lookBook.imageUrl}
+                alt={lookBook.prompt}
+                h={200}
+                fit="contain"
+              />
+              <Text>{lookBook.prompt}</Text>
+              <Button
+                onClick={() => {
+                  onAddLookBook(lookBook);
+                  setShow(false);
+                }}
+                style={{ position: 'absolute', right: 0, bottom: 0 }}
+              >
+                Add
+              </Button>
+            </Box>
+          ))}
+        </Box>
+      </Modal>
+    </>
+  );
+};
+
+export default LookBookSelectModalButton;

src/pages/PostCreatePage.tsx

@@ -0,0 +1,66 @@
+import { Box, Button, Image, Input, Text, Textarea } from '@mantine/core';
+import { useState } from 'react';
+import { LookBook } from '../api/ai';
+import LookBookSelectModalButton from './LookBookSelectModalButton';
+import { createPost } from '../api/post';
+import { useNavigate } from 'react-router-dom';
+
+const PostCreatePage = () => {
+  const [imageUrls, setImageUrls] = useState<string[]>([]);
+  const navigate = useNavigate();
+
+  const upload = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const res = await createPost({
+      title: e.currentTarget.titleText.value,
+      body: e.currentTarget.content.value,
+      imageUrls,
+    });
+    navigate(`/posts/${res.id}`);
+  };
+
+  return (
+    <Box
+      display="flex"
+      style={{ flexDirection: 'column', gap: 4 }}
+      p={4}
+      component="form"
+      onSubmit={upload}
+    >
+      <Box display="flex" style={{ alignItems: 'center', gap: 4 }} ta="right">
+        <Text style={{ width: 80 }}>Title</Text>
+        <Input name="titleText" required />
+      </Box>
+      <Box display="flex" style={{ gap: 4 }}>
+        <Text style={{ width: 80 }} ta="right">
+          Content
+        </Text>
+        <Textarea name="content" required />
+      </Box>
+      <Box display="flex" style={{ gap: 4 }}>
+        <Text style={{ width: 80 }} ta="right">
+          Selected LookBooks
+        </Text>
+        <Box
+          miw={200}
+          mih={200}
+          bd="1px solid black"
+          display="flex"
+          style={{ gap: 4 }}
+        >
+          {imageUrls.map((url) => (
+            <Image key={url} src={url} alt="LookBook" h={300} fit="contain" />
+          ))}
+        </Box>
+      </Box>
+      <LookBookSelectModalButton
+        onAddLookBook={(lookBook: LookBook) =>
+          setImageUrls([...imageUrls, lookBook.imageUrl])
+        }
+      />
+      <Button type="submit">Create Post</Button>
+    </Box>
+  );
+};
+
+export default PostCreatePage;

src/pages/PostDetailPage.tsx

@@ -0,0 +1,5 @@
+const PostDetailPage = () => {
+  return null;
+};
+
+export default PostDetailPage;

src/pages/PostListPage.tsx

@@ -2,6 +2,7 @@ import { Box, Table, Button } from '@mantine/core';
 
 import useSWR from 'swr';
 import { Post } from '../api/post';
+import { Link } from 'react-router-dom';
 
 const PostListPage = () => {
   const { data } = useSWR<{ total: number; list: Post[] }>('/post');
@@ -31,7 +32,9 @@ const PostListPage = () => {
         </Table.Tbody>
       </Table>
       <Box>
-        <Button>Create Post</Button>
+        <Link to="/posts/create">
+          <Button>Create Post</Button>
+        </Link>
       </Box>
     </Box>
   );