Merge branch 'main' of https://github.com/Hot-Spicy-Buffalo-Wing/chec…

…k-out-fe

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

src/App.tsx

@@ -12,6 +12,7 @@ import { SWRConfig } from 'swr';
 import api from './api';
 import LookBookPage from './pages/LookBookPage';
 import { MantineProvider } from '@mantine/core';
+import PostListPage from './pages/PostListPage';
 
 const Router = () => {
   const { user, loading } = useUser();
@@ -22,6 +23,7 @@ const Router = () => {
         {user ? (
           <>
             <Route path="/main" element={<MainPage />} />
+            <Route path="/posts" element={<PostListPage />} />
             <Route path="/look-books" element={<LookBookPage />} />
             <Route path="*" element={<Navigate to="/main" />} />
           </>

src/api/post.ts

@@ -6,7 +6,7 @@ interface PostPayload {
   imageUrls: string[];
 }
 
-interface Post {
+export interface Post {
   id: number;
   views: number;
   createdAt: string;

src/pages/LookBookPage.tsx

@@ -1,15 +1,20 @@
-import { Box, Text } from '@mantine/core';
+import { Box, Text, Image } from '@mantine/core';
 import useSWR from 'swr';
 import { LookBook } from '../api/ai';
 
 const LookBookPage = () => {
   const { data } = useSWR<{ total: number; list: LookBook[] }>('/ai');
 
   return (
-    <Box>
+    <Box display="flex" style={{ gap: 4, flexWrap: 'wrap' }}>
       {data?.list.map((lookBook) => (
-        <Box key={lookBook.id}>
-          <img src={lookBook.imageUrl} alt={lookBook.prompt} />
+        <Box key={lookBook.id} w={300} h={400} bd="1px solid black">
+          <Image
+            src={lookBook.imageUrl}
+            alt={lookBook.prompt}
+            h={200}
+            fit="contain"
+          />
           <Text>{lookBook.prompt}</Text>
         </Box>
       ))}

src/pages/MainPage.tsx

@@ -1,13 +1,16 @@
+import { useState, useEffect } from 'react';
 import {
-  Button,
-  MantineProvider,
   Modal,
   Select,
+  Box,
+  Button,
+  MantineProvider,
   createTheme,
 } from '@mantine/core';
-import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
 import api from '../api';
+import useUser from '../hooks/useUser';
+import { updateUser } from '../api/auth';
+import { Link } from 'react-router-dom';
 
 const genderOptions = [
   { value: '여자', label: '여자' },
@@ -25,6 +28,7 @@ const ageRangeOptions = [
   { value: '50대 초반', label: '50대 초반' },
   { value: '50대 후반', label: '50대 후반' },
 ];
+
 const theme = createTheme({
   components: {
     Modal: {
@@ -39,19 +43,26 @@ const theme = createTheme({
 });
 
 function MainPage() {
-  const [userInfo, setUserInfo] = useState({ gender: '', ageRange: '' });
+  const [userInfo, setUserInfo] = useState(
+    { gender: '', ageRange: '' } || null
+  );
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-  const [gender, setGender] = useState<string>('');
-  const [ageRange, setAgeRange] = useState<string>('');
+  const [gender, setGender] = useState<string | null>('');
+  const [ageRange, setAgeRange] = useState<string | null>('');
   const [error, setError] = useState('');
 
+  const { user, loading } = useUser();
+
   useEffect(() => {
     const fetchUserInfo = async () => {
       try {
-        const response = await api.get('/user');
-        setUserInfo(response.data);
+        if (!user) {
+          return null;
+        }
 
-        if (!response.data.gender || !response.data.ageRange) {
+        setUserInfo(user);
+
+        if (!user.gender || !user.ageRange) {
           setIsModalOpen(true);
         }
       } catch (err) {
@@ -60,17 +71,21 @@ function MainPage() {
     };
 
     fetchUserInfo();
-  }, []);
+  }, [user]);
 
   const handleSave = async () => {
+    if (!gender || !ageRange) {
+      return null;
+    }
+
     try {
-      await api.patch('/user', { gender, ageRange });
+      await updateUser({ gender, ageRange });
       setUserInfo({ gender, ageRange });
       setIsModalOpen(false);
     } catch (err: any) {
       setError(
         'Failed to update user info: ' +
-          (err.response?.data?.message || err.message),
+          (err.response?.data?.message || err.message)
       );
     }
   };
@@ -81,7 +96,10 @@ function MainPage() {
       <p>Gender: {userInfo.gender}</p>
       <p>Age Range: {userInfo.ageRange}</p>
 
-      <Link to="/look-books">LookBook list</Link>
+      <Box display="flex" style={{ flexDirection: 'column' }}>
+        <Link to="/look-books">LookBook list</Link>
+        <Link to="/posts">Post list</Link>
+      </Box>
 
       <Modal
         opened={isModalOpen}
@@ -94,13 +112,15 @@ function MainPage() {
           placeholder="Select your gender"
           data={genderOptions}
           value={gender}
+          onChange={setGender}
           required
         />
         <Select
           label="Age Range"
           placeholder="Select your age range"
           data={ageRangeOptions}
           value={ageRange}
+          onChange={setAgeRange}
           required
         />
         <Button onClick={handleSave}>이렇게 알려주기</Button>

src/pages/PostListPage.tsx

@@ -0,0 +1,40 @@
+import { Box, Table, Button } from '@mantine/core';
+
+import useSWR from 'swr';
+import { Post } from '../api/post';
+
+const PostListPage = () => {
+  const { data } = useSWR<{ total: number; list: Post[] }>('/post');
+
+  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>{post.contents.title}</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>
+        <Button>Create Post</Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default PostListPage;