From 998e589034b3ba251b387a32559d5b396732982c Mon Sep 17 00:00:00 2001 From: 2paperstar Date: Thu, 6 Jun 2024 02:39:58 +0900 Subject: [PATCH 01/10] feat: lookbook list page --- src/pages/LookBookPage.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/LookBookPage.tsx b/src/pages/LookBookPage.tsx index fb4710d..bb38aa4 100644 --- a/src/pages/LookBookPage.tsx +++ b/src/pages/LookBookPage.tsx @@ -1,4 +1,4 @@ -import { Box, Text } from '@mantine/core'; +import { Box, Text, Image } from '@mantine/core'; import useSWR from 'swr'; import { LookBook } from '../api/ai'; @@ -8,8 +8,13 @@ const LookBookPage = () => { return ( {data?.list.map((lookBook) => ( - - {lookBook.prompt} + + {lookBook.prompt} {lookBook.prompt} ))} From 0efb83a9bdadd5d600f681816ea3b372f77f1478 Mon Sep 17 00:00:00 2001 From: 2paperstar Date: Thu, 6 Jun 2024 02:42:41 +0900 Subject: [PATCH 02/10] fix: lookbook list style --- src/pages/LookBookPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/LookBookPage.tsx b/src/pages/LookBookPage.tsx index bb38aa4..ee48aa7 100644 --- a/src/pages/LookBookPage.tsx +++ b/src/pages/LookBookPage.tsx @@ -6,7 +6,7 @@ const LookBookPage = () => { const { data } = useSWR<{ total: number; list: LookBook[] }>('/ai'); return ( - + {data?.list.map((lookBook) => ( Date: Thu, 6 Jun 2024 02:42:47 +0900 Subject: [PATCH 03/10] feat: create post list page --- src/App.tsx | 2 ++ src/pages/PostListPage.tsx | 5 +++++ 2 files changed, 7 insertions(+) create mode 100644 src/pages/PostListPage.tsx diff --git a/src/App.tsx b/src/App.tsx index 0fed1be..b9985e2 100644 --- a/src/App.tsx +++ b/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 ? ( <> } /> + } /> } /> } /> diff --git a/src/pages/PostListPage.tsx b/src/pages/PostListPage.tsx new file mode 100644 index 0000000..4218105 --- /dev/null +++ b/src/pages/PostListPage.tsx @@ -0,0 +1,5 @@ +const PostListPage = () => { + return <>; +}; + +export default PostListPage; From 448b1ff32f4ee5e1a4aa47755f69fe2afb41c965 Mon Sep 17 00:00:00 2001 From: 2paperstar Date: Thu, 6 Jun 2024 02:44:38 +0900 Subject: [PATCH 04/10] chore: add prettierrc --- .prettierrc | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..544138b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} From 3dd4deade460e2f36f2ceb65bd9ab928ec6c5210 Mon Sep 17 00:00:00 2001 From: 2paperstar Date: Thu, 6 Jun 2024 02:45:29 +0900 Subject: [PATCH 05/10] feat: add content in post list page --- src/api/post.ts | 2 +- src/pages/PostListPage.tsx | 32 +++++++++++++++++++++++++++++++- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/src/api/post.ts b/src/api/post.ts index 9fd32a9..ff5e57c 100644 --- a/src/api/post.ts +++ b/src/api/post.ts @@ -6,7 +6,7 @@ interface PostPayload { imageUrls: string[]; } -interface Post { +export interface Post { id: number; views: number; createdAt: string; diff --git a/src/pages/PostListPage.tsx b/src/pages/PostListPage.tsx index 4218105..7e3dabd 100644 --- a/src/pages/PostListPage.tsx +++ b/src/pages/PostListPage.tsx @@ -1,5 +1,35 @@ +import { Table } from '@mantine/core'; + +import useSWR from 'swr'; +import { Post } from '../api/post'; + const PostListPage = () => { - return <>; + const { data } = useSWR<{ total: number; list: Post[] }>('/post'); + + return ( + + + + Id + Title + Author + Views + CreatedAt + + + + {data?.list.map((post) => ( + + {post.id} + {post.contents.title} + {post.author.name} + {post.views} + {post.createdAt} + + ))} + +
+ ); }; export default PostListPage; From 4036c7d14612fc43fca1feb548b655ad0743d9a6 Mon Sep 17 00:00:00 2001 From: 2paperstar Date: Thu, 6 Jun 2024 02:46:46 +0900 Subject: [PATCH 06/10] feat: add create post button --- src/pages/PostListPage.tsx | 49 +++++++++++++++++++++----------------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/src/pages/PostListPage.tsx b/src/pages/PostListPage.tsx index 7e3dabd..f03bdfe 100644 --- a/src/pages/PostListPage.tsx +++ b/src/pages/PostListPage.tsx @@ -1,4 +1,4 @@ -import { Table } from '@mantine/core'; +import { Box, Table, Button } from '@mantine/core'; import useSWR from 'swr'; import { Post } from '../api/post'; @@ -7,28 +7,33 @@ const PostListPage = () => { const { data } = useSWR<{ total: number; list: Post[] }>('/post'); return ( - - - - Id - Title - Author - Views - CreatedAt - - - - {data?.list.map((post) => ( - - {post.id} - {post.contents.title} - {post.author.name} - {post.views} - {post.createdAt} + +
+ + + Id + Title + Author + Views + CreatedAt - ))} - -
+ + + {data?.list.map((post) => ( + + {post.id} + {post.contents.title} + {post.author.name} + {post.views} + {post.createdAt} + + ))} + + + + + + ); }; From e1fe5064fcbc9eee3fec3c8c17cf7750509963b2 Mon Sep 17 00:00:00 2001 From: 2paperstar Date: Thu, 6 Jun 2024 02:47:21 +0900 Subject: [PATCH 07/10] feat: add post list link in main page --- src/pages/MainPage.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 083dd0c..3d73ea5 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -70,7 +70,7 @@ function MainPage() { } catch (err: any) { setError( 'Failed to update user info: ' + - (err.response?.data?.message || err.message), + (err.response?.data?.message || err.message) ); } }; @@ -82,6 +82,7 @@ function MainPage() {

Age Range: {userInfo.ageRange}

LookBook list + Post list Date: Thu, 6 Jun 2024 02:47:48 +0900 Subject: [PATCH 08/10] feat: wrap links with column flex --- src/pages/MainPage.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 3d73ea5..ce72d04 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -1,4 +1,5 @@ import { + Box, Button, MantineProvider, Modal, @@ -81,8 +82,10 @@ function MainPage() {

Gender: {userInfo.gender}

Age Range: {userInfo.ageRange}

- LookBook list - Post list + + LookBook list + Post list + Date: Thu, 6 Jun 2024 02:53:41 +0900 Subject: [PATCH 09/10] feat: updateUserInfo --- src/pages/MainPage.tsx | 39 +++++++++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index ce72d04..2a5dddb 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -1,14 +1,15 @@ +import { useState, useEffect } from 'react'; import { + Modal, + Select, Box, Button, MantineProvider, - Modal, - Select, 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'; const genderOptions = [ { value: '여자', label: '여자' }, @@ -26,6 +27,7 @@ const ageRangeOptions = [ { value: '50대 초반', label: '50대 초반' }, { value: '50대 후반', label: '50대 후반' }, ]; + const theme = createTheme({ components: { Modal: { @@ -40,19 +42,26 @@ const theme = createTheme({ }); function MainPage() { - const [userInfo, setUserInfo] = useState({ gender: '', ageRange: '' }); + const [userInfo, setUserInfo] = useState( + { gender: '', ageRange: '' } || null + ); const [isModalOpen, setIsModalOpen] = useState(false); - const [gender, setGender] = useState(''); - const [ageRange, setAgeRange] = useState(''); + const [gender, setGender] = useState(''); + const [ageRange, setAgeRange] = useState(''); 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; + } + + setUserInfo(user); - if (!response.data.gender || !response.data.ageRange) { + if (!user.gender || !user.ageRange) { setIsModalOpen(true); } } catch (err) { @@ -61,11 +70,15 @@ 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) { @@ -98,6 +111,7 @@ function MainPage() { placeholder="Select your gender" data={genderOptions} value={gender} + onChange={setGender} required />