From 8beb653f48ba6919ce9d326235a2ca0f59fc02bf Mon Sep 17 00:00:00 2001 From: narinn-star Date: Tue, 22 Aug 2023 02:07:57 +0900 Subject: [PATCH] Feat : [#11] MyPage_Mypost MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - fetchMyPost - myPost UI 구성 --- public/index.html | 15 +++++++------ src/Api/fetchMyPost.ts | 2 +- src/Api/fetchPostById.ts | 24 ++++++++++++++++++++ src/Components/MyPage/MyPostBox.tsx | 19 ++++++++++++++++ src/Pages/MyPage.tsx | 9 +++----- src/Pages/MyPost.tsx | 35 ++++++++++++++++++++++++----- src/Query/post.tsx | 2 +- webpack.dev.js | 20 ++++++++--------- 8 files changed, 96 insertions(+), 30 deletions(-) create mode 100644 src/Api/fetchPostById.ts create mode 100644 src/Components/MyPage/MyPostBox.tsx diff --git a/public/index.html b/public/index.html index 2345ba5..3f04035 100644 --- a/public/index.html +++ b/public/index.html @@ -2,16 +2,17 @@ - - - - - PickReadMe - + + + + + PickReadMe + +
- + \ No newline at end of file diff --git a/src/Api/fetchMyPost.ts b/src/Api/fetchMyPost.ts index a50fca7..f179df3 100644 --- a/src/Api/fetchMyPost.ts +++ b/src/Api/fetchMyPost.ts @@ -3,7 +3,7 @@ import client from './client'; import { IPost } from '../Types/posts'; const fetchMyPost = () => { - return new Promise((resolve) => { + return new Promise((resolve) => { client .get(`api/get/searchMyPosts`, { headers: { diff --git a/src/Api/fetchPostById.ts b/src/Api/fetchPostById.ts new file mode 100644 index 0000000..563e2fb --- /dev/null +++ b/src/Api/fetchPostById.ts @@ -0,0 +1,24 @@ +import client from './client'; +import { getCookie } from './Cookies'; +import { IPost } from '../Types/posts'; + +const fetchPostById = (id: number) => { + return new Promise((resolve) => { + client + .get(`api/get/detail/post?post_id=${id}`, { + headers: { + accessToken: localStorage.getItem('accessToken'), + refreshToken: getCookie('refreshToken'), + }, + }) + .then((v) => { + resolve(v.data); + console.log(v.data); + }) + .catch((err) => { + console.log('fetchPostById 에러 ' + err); + }); + }); +}; + +export default fetchPostById; diff --git a/src/Components/MyPage/MyPostBox.tsx b/src/Components/MyPage/MyPostBox.tsx new file mode 100644 index 0000000..4e25c06 --- /dev/null +++ b/src/Components/MyPage/MyPostBox.tsx @@ -0,0 +1,19 @@ +export interface MyPostBoxProps { + title: string; + create_time: Date; + repo: string; +} + +const MyPostBox = (props: MyPostBoxProps) => { + return ( + <> + + + ); +}; + +export default MyPostBox; diff --git a/src/Pages/MyPage.tsx b/src/Pages/MyPage.tsx index 6217b19..794b1af 100644 --- a/src/Pages/MyPage.tsx +++ b/src/Pages/MyPage.tsx @@ -11,13 +11,10 @@ const MyPage = () => { return ( <>
-
-
-
- -
+
+
+
-
diff --git a/src/Pages/MyPost.tsx b/src/Pages/MyPost.tsx index ce118c1..6d10382 100644 --- a/src/Pages/MyPost.tsx +++ b/src/Pages/MyPost.tsx @@ -1,16 +1,41 @@ -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { useFetchMyPost } from '../Query/post'; import fetchMyPost from '../Api/fetchMyPost'; +import { IPost } from '../Types/posts'; +import MyPostBox from '../Components/MyPage/MyPostBox'; const MyPost = () => { + const [myPost, setMyPost] = useState(); + useEffect(() => { - fetchMyPost().then((v) => console.log(v)); - }); + fetchMyPost().then((v) => setMyPost(v as IPost[])); + }, []); return ( <> -
MyPost Page
-
+
+
+

+

총 {myPost?.length}개

+
+
+

Title

+

Repository

+

Date

+
+
+ {myPost?.map((item) => { + return ( + + ); + })} +
+
); }; diff --git a/src/Query/post.tsx b/src/Query/post.tsx index 0ccae2f..b26bb2f 100644 --- a/src/Query/post.tsx +++ b/src/Query/post.tsx @@ -50,7 +50,7 @@ export const useFetchReadme = (name: string, enabled: boolean) => { }; export const useFetchMyPost = () => { - return useQuery(['myPost'], () => fetchMyPost(), { + return useQuery(['myPost'], () => fetchMyPost(), { onSuccess: () => { console.log('useFetchMyPost 성공'); }, diff --git a/webpack.dev.js b/webpack.dev.js index 213f52a..a0719c3 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -1,12 +1,12 @@ -const {merge} = require("webpack-merge"); -const common = require("./webpack.config.js"); +const { merge } = require('webpack-merge'); +const common = require('./webpack.config.js'); module.exports = merge(common, { - mode: "development", - devtool: "eval", - devServer: { - historyApiFallback: true, - port: 3000, - hot: true, - }, -}); \ No newline at end of file + mode: 'development', + devtool: 'eval', + devServer: { + historyApiFallback: true, + port: 3000, + hot: true, + }, +});