Merge pull request #214 from ODOICHON/feat/#213

Feat/#213 마이페이지 '내가 쓴 댓글' 구현

.gitmessage.txt

@@ -21,5 +21,5 @@
 # remove: 파일을 삭제하는 작업만 수행한 경우
 # !BREAKING CHANGE: 커다란 API 변경의 이유
 # !HOTFIX: 급하게 치명적인 버그를 고쳐야 하는 경우
- 
+
 ################

src/Routes.tsx

@@ -1,6 +1,7 @@
 import { lazy } from 'react';
 import { RouteObject } from 'react-router-dom';
 import GlobalLayout from '@/pages/_layout';
+import MyCommentsPage from './pages/Mypage/community/comments';
 
 import MyLikesPage from './pages/Mypage/community/likes';
 import MyPage from './pages/Mypage';
@@ -63,7 +64,7 @@ export const routes: RouteObject[] = [
           },
           {
             path: 'community/comment',
-            element: <div>comment</div>,
+            element: <MyCommentsPage />,
           },
           {
             path: 'community/likes',

src/components/MyPage/MyCommentCard/index.tsx

@@ -0,0 +1,28 @@
+import { useNavigate } from 'react-router-dom';
+import styles from './styles.module.scss';
+
+type MyCommentCardProps = {
+  boardId: number;
+  title: string;
+  commentContent: string;
+};
+
+function MyCommentCard({ boardId, title, commentContent }: MyCommentCardProps) {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/community/free_board/${boardId}`);
+  };
+
+  return (
+    <>
+      <div role="presentation" className={styles.wrapper} onClick={handleClick}>
+        <h1 className={styles.title}>게시글 제목: {title}</h1>
+        <p className={styles.comment}>{commentContent}</p>
+      </div>
+      <div className={styles.divider} />
+    </>
+  );
+}
+
+export default MyCommentCard;

src/components/MyPage/MyCommentCard/styles.module.scss

@@ -0,0 +1,41 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 9.575rem;
+  padding: 2.25rem 2.25rem 2rem;
+  font-family: 'Pretendard';
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.03);
+  }
+}
+.title {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: #878d91;
+  font-size: 1.25rem;
+}
+
+.comment {
+  margin-top: 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; // 라인수
+  -webkit-box-orient: vertical;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: #a9afb3;
+  border-radius: 8px;
+  &:last-child {
+    display: none;
+  }
+}

src/components/MyPage/MySaveCard/index.tsx

@@ -39,11 +39,20 @@ export default function MySaveCard({ saveData }: MySaveCardProps) {
       className={styles.wrapper}
       onClick={() => handleEditButtonClick(detailData?.data)}
     >
-      <h1 className={styles.title}>
-        {saveData.title}
-        <img src={clipImage} alt="클립이미지" />
-      </h1>
-      <p>{dayjs(saveData.createdAt).format('YYYY.MM.DD')}</p>
+      <div className={styles.descWrapper}>
+        <h1 className={styles.title}>
+          {saveData.title === '' ? '[임시저장]' : saveData.title}
+          {saveData.imageUrl !== '' && <img src={clipImage} alt="클립이미지" />}
+        </h1>
+        <p>{dayjs(saveData.createdAt).format('YYYY.MM.DD')}</p>
+      </div>
+      {saveData.imageUrl !== '' && (
+        <img
+          className={styles.thumbnail}
+          src={saveData.imageUrl}
+          alt="thumbnail"
+        />
+      )}
     </li>
   );
 }

src/components/MyPage/MySaveCard/styles.module.scss

@@ -1,16 +1,19 @@
 .wrapper {
   display: flex;
-  flex-direction: column;
   justify-content: space-between;
   width: 100%;
-  height: 9.375rem;
+  height: 18rem;
   padding: 2.25rem 2rem;
-  background-color: white;
   cursor: pointer;
   &:hover {
     background-color: rgba(0, 0, 0, 0.03);
   }
 }
+.descWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
 .title {
   display: flex;
   align-items: center;
@@ -21,3 +24,8 @@
     width: 1.25rem;
   }
 }
+.thumbnail {
+  height: 100%;
+  object-fit: contain;
+  aspect-ratio: 1/1;
+}

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

@@ -0,0 +1,68 @@
+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 MyCommentCard from '@/components/MyPage/MyCommentCard';
+import { QueryKeys, restFetcher } from '@/queryClient';
+import { MyCommentPageType } from '@/types/Board/communityType';
+import { ApiResponseWithDataType } from '@/types/apiResponseType';
+import styles from './styles.module.scss';
+
+export default function MyCommentsPage() {
+  const [currentPage, setCurrentPage] = useState(1);
+  const fetchBoardList = (page: number) => {
+    const params = {
+      page: page - 1,
+    };
+    return restFetcher({ method: 'GET', path: 'boards/my/comment', params });
+  };
+
+  const { data: commentsData, isLoading } = useQuery<
+    ApiResponseWithDataType<MyCommentPageType>
+  >([QueryKeys.COMMUNITY_BOARD, QueryKeys.MY_COMMENTS, 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}>
+          총 {commentsData?.data.totalElements}개
+        </div>
+        <div className={styles.divider} />
+      </article>
+      <ul>
+        {isLoading && <Loading />}
+        {commentsData && commentsData.data.content.length > 0 ? (
+          commentsData?.data.content.map((content) => (
+            <MyCommentCard
+              key={content.commentContent}
+              boardId={content.boardId}
+              title={content.title}
+              commentContent={content.commentContent}
+            />
+          ))
+        ) : (
+          <NoPosts
+            text="아직은 글이 없어요."
+            subText="글을 작성해서 자유롭게 오도이촌 이야기를 해보아요!"
+          />
+        )}
+      </ul>
+      <div className={styles.paginationWrapper}>
+        {commentsData && commentsData.data.content.length > 0 && (
+          <Pagination
+            totalPage={commentsData.data.totalPages}
+            currentPage={currentPage}
+            setCurrentPage={setCurrentPage}
+          />
+        )}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,37 @@
+@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;
+  font-weight: 500;
+}
+
+.divider {
+  border: 1px solid #9a9a9a;
+}
+
+.paginationWrapper {
+  margin-top: 6rem;
+}

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

@@ -32,7 +32,7 @@ export default function MyWritePage() {
       </article>
       <article className={styles.countWrapper}>
         <div className={styles.count}>
-          총 {boardListData?.data.totalElements}
+          총 {boardListData?.data.totalElements}개
         </div>
         <div className={styles.divider} />
       </article>

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

@@ -25,6 +25,7 @@
   font-family: 'Pretendard';
   font-size: 1.5rem;
   margin-bottom: 1rem;
+  font-weight: 500;
 }
 
 .divider {

src/pages/Mypage/trade/saves/styles.module.scss

@@ -21,7 +21,7 @@
   & > h3 {
     margin-bottom: 1rem;
     font-size: 1.5rem;
-    font-weight: 600;
+    font-weight: 500;
   }
 }
 

src/queryClient.ts

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

src/types/Board/communityType.ts

@@ -1,3 +1,4 @@
+import { BoardPageType } from './boardType';
 import {
   IntroBoardDetailType,
   IntroBoardPageType,
@@ -9,3 +10,14 @@ export type CommunityBoardType = IntroBoardType;
 export type CommunityBoardDetailType = IntroBoardDetailType;
 
 export type CommunityBoardPageType = IntroBoardPageType;
+
+export type MyCommentType = {
+  commentId: number;
+  boardId: number;
+  title: string;
+  commentContent: string;
+  // category: string;
+  // prefixCategory: string;
+};
+
+export type MyCommentPageType = BoardPageType<MyCommentType>;