Merge branch 'feat/#125' into develop

IT-Cotato · Feb 20, 2025 · 246ef55 · 246ef55
2 parents 66f0f17 + 4975763
commit 246ef55
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 112 deletions.
diff --git a/src/apis/mypage/getMyArticle.api.js b/src/apis/mypage/getMyArticle.api.js
@@ -0,0 +1,16 @@
+import { authApi } from '../axios-instance';
+import { API_DOMAINS } from '@/constants/api';
+
+export const getMyArticlesList = async ({ page }) => {
+  const response = await authApi.get(API_DOMAINS.GET_MY_POSTS, {
+    params: { page },
+  });
+  return response.data.data;
+};
+
+export const getMyCommentsList = async ({ page }) => {
+  const response = await authApi.get(API_DOMAINS.GET_MY_COMMENTED_POST, {
+    params: { page },
+  });
+  return response.data.data;
+};
diff --git a/src/apis/mypage/getMyScraps.api.js b/src/apis/mypage/getMyScraps.api.js
@@ -0,0 +1,9 @@
+import { authApi } from '../axios-instance';
+import { API_DOMAINS } from '@/constants/api';
+
+export const getMyScrapedPosts = async ({ page }) => {
+  const response = await authApi.get(API_DOMAINS.GET_MY_SCRAPED_POST, {
+    params: { page },
+  });
+  return response.data.data;
+};
diff --git a/src/components/board/PostList.jsx b/src/components/board/PostList.jsx
@@ -8,54 +8,63 @@ import { Translating } from '../common/Translating';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { translatePost } from '@/apis/translate/translatePost.api';
 import { QUERY_KEYS } from '@/constants/api';
-export const PostList = ({ data, isActive }) => {
+export const PostList = ({ data, isActive, ...props }) => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const [translateState, setTranslateState] = useState(false);
   const [translatedPost, setTranslatedPost] = useState(null);
   const { mutate: postTranslate, isPending: translatePending } = useMutation({
     mutationFn: async (postId) => {
-      return await translatePost({ postId: postId })
+      return await translatePost({ postId: postId });
     },
     onSuccess: (response, postId) => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.GET_TRANSLATE_POST_LIST, postId] });
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.GET_TRANSLATE_POST_LIST, postId],
+      });
       setTranslatedPost(response);
       setTranslateState(true);
-    }
-  })
+    },
+  });
   const handleTranslate = () => {
     if (translatedPost) {
       setTranslateState(true);
-    }
-    else {
+    } else {
       postTranslate(data.id);
     }
-  }
+  };
+
+  const handleOnClick = (data) => {
+    if (props.onClick) {
+      props.onClick(data);
+    } else {
+      navigate(`${data.id}`);
+    }
+  };
   return (
     <div
-      className="flex flex-col gap-3 pb-3 pt-4"
-      onClick={() => navigate(`${data.id}`)}
+      className="flex flex-col gap-3 pt-4 pb-3 cursor-pointer"
+      onClick={() => handleOnClick(data)}
     >
       {isActive /** 인기 게시판 레이아웃 */ && (
         <div className="w-fit rounded-md bg-primary-10 px-[0.625rem] py-[0.3125rem] text-small text-neutral-base">
-          {data.board_type}
+          {data.board_type || data.boardName}
         </div>
       )}
       <div className="flex justify-between gap-3">
         <div className="relative flex flex-col line-clamp-3">
           <h1 className="truncate text-subTitle text-neutral-title">
-            <span className={translatePending ? "opacity-0" : "opacity-100"}>
+            <span className={translatePending ? 'opacity-0' : 'opacity-100'}>
               {translateState ? translatedPost.title : data?.title}
             </span>
           </h1>
-          <h2 className="line-clamp-2  text-neutral-base">
-            <span className={translatePending ? "opacity-0" : "opacity-100"}>
+          <h2 className="line-clamp-2 text-neutral-base">
+            <span className={translatePending ? 'opacity-0' : 'opacity-100'}>
               {translateState ? translatedPost.content : data?.content}
             </span>
           </h2>
           {translatePending && (
-            <div className="absolute left-0 top-1/2 -translate-y-1/2">
-              <Translating width={"3rem"} height={"3rem"} />
+            <div className="absolute left-0 -translate-y-1/2 top-1/2">
+              <Translating width={'3rem'} height={'3rem'} />
             </div>
           )}
         </div>
@@ -64,7 +73,7 @@ export const PostList = ({ data, isActive }) => {
             <img
               src={data.thumbnailUrl}
               alt="post image"
-              className="h-20 w-20 object-cover"
+              className="object-cover w-20 h-20"
             />
           )}
         </div>
@@ -83,14 +92,15 @@ export const PostList = ({ data, isActive }) => {
             {formatTime(data.createdTime)}
           </p>
         </div>
-        <button onClick={(e) => {
-          e.stopPropagation()
-          translateState ? setTranslateState(false) : handleTranslate()
-        }
-        }  >
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            translateState ? setTranslateState(false) : handleTranslate();
+          }}
+        >
           <Translate className="text-neutral-title" />
         </button>
       </div>
-    </div >
+    </div>
   );
 };
diff --git a/src/constants/api.js b/src/constants/api.js
@@ -10,6 +10,10 @@ export const API_DOMAINS = {
   USER: '/users/details',
   MYPAGE: '/mypage',
 
+  GET_MY_POSTS: '/posts/my',
+  GET_MY_COMMENTED_POST: '/my/commented-post',
+  GET_MY_SCRAPED_POST: '/posts/my/scrap',
+
   DUPLICATE_CHECK: '/users/check-nickname',
 
   PRODUCTS: '/products',
@@ -75,5 +79,9 @@ export const QUERY_KEYS = {
   POST_NOTICE: 'postNotice',
   GET_NOTICE: 'getNotice',
   NOTICE_DETAIL: 'noticeId',
+
+  MY_POST_LIST: 'myPostList',
+  MY_COMMENTED_POST_LIST: 'myCommentedPostList',
+  MY_SCRAPED_POST_LIST: 'scrapedPostList',
 };
 
diff --git a/src/pages/my/community/CommunityScrap.jsx b/src/pages/my/community/CommunityScrap.jsx
@@ -1,39 +1,32 @@
+import { getMyScrapedPosts } from '@/apis/mypage/getMyScraps.api';
 import Logo from '@/assets/imgs/kampusLogo.svg?react';
 import { PostList } from '@/components/board/PostList';
-import { useState } from 'react';
+import { Loading } from '@/components/common/Loading';
+import { QUERY_KEYS } from '@/constants/api';
+import { path } from '@/routes/path';
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
 
 export const CommunityScrap = () => {
-  const [boardData, setBoardData] = useState({
-    post: [
-      {
-        title: 'Title',
-        content: 'content',
-        likes: 10,
-        comments: 10,
-        createdTime: '1 day ago',
-        image: null,
-        board_type: 'Tips for living in Korea',
-        scrap: false,
-      },
-      {
-        title: 'Title',
-        content: 'content',
-        likes: 8,
-        comments: 4,
-        createdTime: '1 day ago',
-        image: Logo,
-        board_type: 'Information',
-        scrap: false,
-      },
-    ],
+  const navigate = useNavigate();
+  const {
+    data: postList,
+    isLoading,
+    error: isPostError,
+  } = useQuery({
+    queryKey: [QUERY_KEYS.MY_SCRAPED_POST_LIST],
+    queryFn: () => getMyScrapedPosts({ page: 1 }),
   });
 
-  let count = 0;
+  const handleNavigate = (data) => {
+    navigate(`../../../${path.board.base}/${data.boardId}/${data.id}`);
+  };
 
   return (
     <div className="flex flex-col w-full h-full">
-      {count === 0 ? (
-        // data.inquiry.length === 0
+      {isLoading ? (
+        <Loading />
+      ) : !postList ? (
         <div className="flex flex-col items-center justify-center w-full h-full gap-2 -translate-y-10">
           <Logo className="w-32 text-neutral-disabled" />
           <span className="text-center text-neutral-border-40">
@@ -44,8 +37,13 @@ export const CommunityScrap = () => {
         </div>
       ) : (
         <div className="flex flex-col flex-1 w-full bg-white divide-y">
-          {boardData.post.map((item, index) => (
-            <PostList key={index} data={item} isActive={true} />
+          {postList.posts.map((item, index) => (
+            <PostList
+              key={index}
+              data={item}
+              isActive={true}
+              onClick={handleNavigate}
+            />
           ))}
         </div>
       )}

diff --git a/src/pages/my/community/MyArticles.jsx b/src/pages/my/community/MyArticles.jsx
@@ -1,47 +1,47 @@
+import { getMyArticlesList } from '@/apis/mypage/getMyArticle.api';
 import Logo from '@/assets/imgs/kampusLogo.svg?react';
-import { PostList } from "@/components/board/PostList";
-import { useState } from 'react';
+import { PostList } from '@/components/board/PostList';
+import { Loading } from '@/components/common/Loading';
+import { QUERY_KEYS } from '@/constants/api';
+import { path } from '@/routes/path';
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
 
 export const MyArticles = () => {
-  const [boardData, setBoardData] = useState({
-    post: [
-      {
-        title: 'My Article',
-        content: 'content',
-        likes: 80,
-        comments: 10,
-        createdTime: '1 day ago',
-        image: null,
-        board_type: 'Tips for living in Korea',
-        scrap: false,
-      },
-      {
-        title: 'This is an article with a long long title',
-        content: 'And an article that has a long long long long long long long long long long content',
-        likes: 8,
-        comments: 4,
-        createdTime: '1 day ago',
-        image: Logo,
-        board_type: 'Information',
-        scrap: false,
-      },
-    ],
+  const navigate = useNavigate();
+  const {
+    data: postList,
+    isLoading,
+    error: isPostError,
+  } = useQuery({
+    queryKey: [QUERY_KEYS.MY_POST_LIST],
+    queryFn: () => getMyArticlesList({ page: 1 }),
   });
 
-  let count = 1;
+  const handleNavigate = (data) => {
+    navigate(`../../../${path.board.base}/${data.boardId}/${data.id}`);
+  };
 
   return (
     <div className="flex flex-col w-full h-full">
-      {count === 0 ? (
-        // data.inquiry.length === 0
+      {isLoading ? (
+        <Loading />
+      ) : !postList ? (
         <div className="flex flex-col items-center justify-center w-full h-full gap-2 -translate-y-10">
           <Logo className="w-32 text-neutral-disabled" />
-          <span className='text-neutral-border-40'>You haven't written anything yet! Share your story:)</span>
+          <span className="text-neutral-border-40">
+            You haven't written anything yet! Share your story:)
+          </span>
         </div>
       ) : (
         <div className="flex flex-col flex-1 w-full bg-white divide-y">
-          {boardData.post.map((item, index) => (
-            <PostList key={index} data={item} isActive={true} />
+          {postList.posts.map((item, index) => (
+            <PostList
+              key={index}
+              data={item}
+              isActive={true}
+              onClick={handleNavigate}
+            />
           ))}
         </div>
       )}

diff --git a/src/pages/my/community/MyComments.jsx b/src/pages/my/community/MyComments.jsx
@@ -1,39 +1,32 @@
+import { getMyCommentsList } from '@/apis/mypage/getMyArticle.api';
 import Logo from '@/assets/imgs/kampusLogo.svg?react';
 import { PostList } from '@/components/board/PostList';
-import { useState } from 'react';
+import { Loading } from '@/components/common/Loading';
+import { QUERY_KEYS } from '@/constants/api';
+import { path } from '@/routes/path';
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
 
 export const MyComments = () => {
-  const [boardData, setBoardData] = useState({
-    post: [
-      {
-        title: 'This is an article with a long long title',
-        content:
-          'And an article that has a long long long long long long long long long long content',
-        likes: 8,
-        comments: 4,
-        createdTime: '1 day ago',
-        image: Logo,
-        board_type: 'Information',
-        scrap: false,
-      },
-      {
-        title: 'Wrote a comment on this article',
-        content: 'content',
-        likes: 10,
-        comments: 10,
-        createdTime: '1 day ago',
-        image: null,
-        board_type: 'Tips for living in Korea',
-        scrap: false,
-      },
-    ],
+  const navigate = useNavigate();
+  const {
+    data: postList,
+    isLoading,
+    error: isPostError,
+  } = useQuery({
+    queryKey: [QUERY_KEYS.MY_COMMENTED_POST_LIST],
+    queryFn: () => getMyCommentsList({ page: 1 }),
   });
 
-  let count = 1;
+  const handleNavigate = (data) => {
+    navigate(`../../../${path.board.base}/${data.boardId}/${data.id}`);
+  };
 
   return (
     <div className="flex flex-col w-full h-full">
-      {count === 0 ? (
+      {isLoading ? (
+        <Loading />
+      ) : !postList ? (
         // data.inquiry.length === 0
         <div className="flex flex-col items-center justify-center w-full h-full gap-2 -translate-y-10">
           <Logo className="w-32 text-neutral-disabled" />
@@ -45,8 +38,13 @@ export const MyComments = () => {
         </div>
       ) : (
         <div className="flex flex-col flex-1 w-full bg-white divide-y">
-          {boardData.post.map((item, index) => (
-            <PostList key={index} data={item} isActive={true} />
+          {postList.posts.map((item, index) => (
+            <PostList
+              key={index}
+              data={item}
+              isActive={true}
+              onClick={handleNavigate}
+            />
           ))}
         </div>
       )}