Merge pull request #37 from inje-megabrain/MyPost

My post
inje-megabrain · Aug 22, 2023 · a0c807e · a0c807e
2 parents 0d2d42e + 8beb653
commit a0c807e
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 28 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,16 +2,17 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<!--     <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
-    <title>PickReadMe</title>
-    <script defer src="/build/bundle.js"></script>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!--     <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
+  <title>PickReadMe</title>
+  <script src="/build/bundle.js"></script>
+  <link rel="shortcut icon" href="#">
 </head>
 
 <body>
   <div id="root"></div>
 </body>
 
-</html>
+</html>
diff --git a/src/Api/fetchMyPost.ts b/src/Api/fetchMyPost.ts
@@ -1,10 +1,16 @@
+import { getCookie } from './Cookies';
 import client from './client';
-import { IPost } from 'src/Types/posts';
+import { IPost } from '../Types/posts';
 
 const fetchMyPost = () => {
-  return new Promise<IPost[]>((resolve) => {
+  return new Promise((resolve) => {
     client
-      .get(`api/get/searchMyPosts`)
+      .get(`api/get/searchMyPosts`, {
+        headers: {
+          accessToken: localStorage.getItem('accessToken'),
+          refreshToken: getCookie('refreshToken'),
+        },
+      })
       .then((v) => {
         resolve(v.data);
         console.log(v.data);

diff --git a/src/Api/fetchPostById.ts 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
@@ -0,0 +1,19 @@
+export interface MyPostBoxProps {
+  title: string;
+  create_time: Date;
+  repo: string;
+}
+
+const MyPostBox = (props: MyPostBoxProps) => {
+  return (
+    <>
+      <button className="flex justify-between p-[10px] border border-gray-50 shadow-sm gap-2 text-center">
+        <p className="w-1/3">{props.title}</p>
+        <p className="w-1/3"> {props.repo}</p>
+        <p className="w-1/3">{props.create_time.toString().slice(0, 10)}</p>
+      </button>
+    </>
+  );
+};
+
+export default MyPostBox;
diff --git a/src/Pages/MyPage.tsx b/src/Pages/MyPage.tsx
@@ -11,13 +11,10 @@ const MyPage = () => {
   return (
     <>
       <Header />
-      <div className="flex mx-auto my-0 w-9/12">
-        <div className="w-60">
-          <div className="flex justify-start w-60 h-screen mt-44">
-            <SideNav />
-          </div>
+      <div className="flex flex-row">
+        <div className="flex mx-auto my-0 justify-start w-60 h-screen mt-44 ml-[100px]">
+          <SideNav />
         </div>
-
         <div className="flex justify-center w-full">
           <Outlet />
         </div>

diff --git a/src/Pages/MyPost.tsx b/src/Pages/MyPost.tsx
@@ -1,7 +1,41 @@
+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<IPost[]>();
+
+  useEffect(() => {
+    fetchMyPost().then((v) => setMyPost(v as IPost[]));
+  }, []);
+
   return (
     <>
-      <div>MyPost Page</div>
+      <div className="flex flex-col mt-[120px] mx-[40px] border border-gray-100 p-[20px] rounded-[20px] shadow-md w-full h-fit">
+        <div className="flex flex-row justify-between mb-[20px]">
+          <p></p>
+          <p>총 {myPost?.length}개</p>
+        </div>
+        <div className="flex justify-between grid-cols-3 text-center mb-[15px] text-xl">
+          <p className="w-1/3">Title</p>
+          <p className="w-1/3">Repository</p>
+          <p className="w-1/3">Date</p>
+        </div>
+        <div className="flex flex-col justify-between gap-y-[15px]">
+          {myPost?.map((item) => {
+            return (
+              <MyPostBox
+                key={item.id}
+                title={item.title}
+                create_time={item.create_time}
+                repo={item.repo}
+              ></MyPostBox>
+            );
+          })}
+        </div>
+      </div>
     </>
   );
 };

diff --git 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<IPost[]>(['myPost'], () => fetchMyPost(), {
+  return useQuery(['myPost'], () => fetchMyPost(), {
     onSuccess: () => {
       console.log('useFetchMyPost 성공');
     },

diff --git 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,
-    },
-});
+  mode: 'development',
+  devtool: 'eval',
+  devServer: {
+    historyApiFallback: true,
+    port: 3000,
+    hot: true,
+  },
+});