Merge pull request #212 from ODOICHON/feat/#199

Feat/#199 마이페이지 '내가 좋아요 한 게시글' 구현

src/Routes.tsx

@@ -1,13 +1,16 @@
 import { lazy } from 'react';
 import { RouteObject } from 'react-router-dom';
 import GlobalLayout from '@/pages/_layout';
+
+import MyLikesPage from './pages/Mypage/community/likes';
 import MyPage from './pages/Mypage';
 import MyWritePage from './pages/Mypage/community/write';
 import MyHomePage from './pages/Mypage/home';
 import MySelfPage from './pages/Mypage/trade/myself';
 import MySavesPage from './pages/Mypage/trade/saves';
 import MyScrapPage from './pages/Mypage/trade/scrap';
 
+
 const MainPage = lazy(() => import('@/pages/Main'));
 const LoginPage = lazy(() => import('@/pages/Login'));
 const SignUpPage = lazy(() => import('@/pages/SignUp'));
@@ -63,8 +66,8 @@ export const routes: RouteObject[] = [
             element: <div>comment</div>,
           },
           {
-            path: 'community/like',
-            element: <div>like</div>,
+            path: 'community/likes',
+            element: <MyLikesPage />,
           },
           {
             path: 'setting',

src/components/MyPage/MyPageNavbar/index.tsx

@@ -65,7 +65,7 @@ const navList: NavListType[] = [
       },
       {
         title: '내가 좋아한 게시글',
-        path: '/mypage/community/like',
+        path: '/mypage/community/likes',
       },
     ],
   },

src/pages/Mypage/community/likes/index.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import Loading from '@/components/Common/Loading';
+import NoPosts from '@/components/Common/NoPosts';
+import Pagination from '@/components/Common/Pagination';
+import CommunityBoard from '@/components/Community/Board';
+import { QueryKeys, restFetcher } from '@/queryClient';
+import { CommunityBoardPageType } from '@/types/Board/communityType';
+import { ApiResponseWithDataType } from '@/types/apiResponseType';
+import styles from './styles.module.scss';
+
+export default function MyLikesPage() {
+  const [currentPage, setCurrentPage] = useState(1);
+  const fetchBoardList = (page: number) => {
+    const params = {
+      page: page - 1,
+    };
+    return restFetcher({ method: 'GET', path: 'boards/my/love', params });
+  };
+
+  const { data: boardListData, isLoading } = useQuery<
+    ApiResponseWithDataType<CommunityBoardPageType>
+  >([QueryKeys.COMMUNITY_BOARD, QueryKeys.MY_LIKES, currentPage], () =>
+    fetchBoardList(currentPage),
+  );
+
+  return (
+    <section className={styles.container}>
+      <article className={styles.titleWrapper}>
+        <h1>내가 좋아요한 게시글</h1>
+        <p>내가 좋아요한 글을 확인할 수 있어요.</p>
+      </article>
+      <article className={styles.countWrapper}>
+        <div className={styles.count}>
+          총 {boardListData?.data.totalElements}
+        </div>
+        <div className={styles.divider} />
+      </article>
+      <ul>
+        {isLoading && <Loading />}
+        {boardListData && boardListData.data.content.length > 0 ? (
+          boardListData?.data.content.map((content) => (
+            <CommunityBoard
+              key={content.boardId}
+              boardId={content.boardId}
+              category={content.category}
+              prefixCategory={content.prefixCategory}
+              title={content.title}
+              oneLineContent={content.oneLineContent}
+              imageUrl={content.imageUrl}
+              commentCount={content.commentCount}
+              nickName={content.nickName}
+              createdAt={content.createdAt}
+              fixed={content.fixed}
+            />
+          ))
+        ) : (
+          <NoPosts
+            text="아직은 글이 없어요."
+            subText="글을 작성해서 자유롭게 오도이촌 이야기를 해보아요!"
+          />
+        )}
+      </ul>
+      <div className={styles.paginationWrapper}>
+        {boardListData && boardListData.data.content.length > 0 && (
+          <Pagination
+            totalPage={boardListData.data.totalPages}
+            currentPage={currentPage}
+            setCurrentPage={setCurrentPage}
+          />
+        )}
+      </div>
+    </section>
+  );
+}

src/pages/Mypage/community/likes/styles.module.scss

@@ -0,0 +1,36 @@
+@import '@/styles/media.scss';
+
+.container {
+  width: 100%;
+  font-family: 'Pretendard';
+}
+
+.titleWrapper {
+  & > h1 {
+    font-family: 'NanumSquareAcB';
+    font-size: 2.25rem;
+    margin-bottom: 1rem;
+  }
+  & > p {
+    font-family: 'NanumSquareAc';
+    font-size: 1.5rem;
+  }
+}
+
+.countWrapper {
+  margin-top: 3.375rem;
+}
+
+.count {
+  font-family: 'Pretendard';
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.divider {
+  border: 1px solid #9a9a9a;
+}
+
+.paginationWrapper {
+  margin-top: 6rem;
+}

src/queryClient.ts

@@ -65,4 +65,5 @@ export const QueryKeys = {
   LIKE: 'LIKE',
   MY_HOUSES: 'MY_HOUSES',
   MY_SAVES: 'MY_SAVES',
+  MY_LIKES: 'MY_LIKES',
 };