diff --git a/.gitmessage.txt b/.gitmessage.txt
index 20d98b6..17379a7 100644
--- a/.gitmessage.txt
+++ b/.gitmessage.txt
@@ -21,5 +21,5 @@
# remove: 파일을 삭제하는 작업만 수행한 경우
# !BREAKING CHANGE: 커다란 API 변경의 이유
# !HOTFIX: 급하게 치명적인 버그를 고쳐야 하는 경우
-
+
################
diff --git a/src/Routes.tsx b/src/Routes.tsx
index 6f757c4..112ccac 100644
--- a/src/Routes.tsx
+++ b/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: comment
,
+ element: ,
},
{
path: 'community/likes',
diff --git a/src/components/MyPage/MyCommentCard/index.tsx b/src/components/MyPage/MyCommentCard/index.tsx
new file mode 100644
index 0000000..2751f99
--- /dev/null
+++ b/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 (
+ <>
+
+
게시글 제목: {title}
+
{commentContent}
+
- {saveData.title}
- 
-
- {dayjs(saveData.createdAt).format('YYYY.MM.DD')}
+
+
+ {saveData.title === '' ? '[임시저장]' : saveData.title}
+ {saveData.imageUrl !== '' && }
+
+
{dayjs(saveData.createdAt).format('YYYY.MM.DD')}
+
+ )}
);
}
diff --git a/src/components/MyPage/MySaveCard/styles.module.scss b/src/components/MyPage/MySaveCard/styles.module.scss
index 7932feb..4e1a781 100644
--- a/src/components/MyPage/MySaveCard/styles.module.scss
+++ b/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;
+}
diff --git a/src/pages/Mypage/community/comments/index.tsx b/src/pages/Mypage/community/comments/index.tsx
new file mode 100644
index 0000000..a0ba9a2
--- /dev/null
+++ b/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
+ >([QueryKeys.COMMUNITY_BOARD, QueryKeys.MY_COMMENTS, currentPage], () =>
+ fetchBoardList(currentPage),
+ );
+
+ return (
+
+
+ 내가 쓴 댓글
+ 내가 남긴 댓글을 확인할 수 있어요.
+
+
+
+ 총 {commentsData?.data.totalElements}개
+
+
+
+
+ {isLoading && }
+ {commentsData && commentsData.data.content.length > 0 ? (
+ commentsData?.data.content.map((content) => (
+
+ ))
+ ) : (
+
+ )}
+
+
+ {commentsData && commentsData.data.content.length > 0 && (
+
+ )}
+
- 총 {boardListData?.data.totalElements}
+ 총 {boardListData?.data.totalElements}개
diff --git a/src/pages/Mypage/community/write/styles.module.scss b/src/pages/Mypage/community/write/styles.module.scss
index 570a897..91cf8a0 100644
--- a/src/pages/Mypage/community/write/styles.module.scss
+++ b/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 {
diff --git a/src/pages/Mypage/trade/saves/styles.module.scss b/src/pages/Mypage/trade/saves/styles.module.scss
index 55f06e6..5c97563 100644
--- a/src/pages/Mypage/trade/saves/styles.module.scss
+++ b/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;
}
}
diff --git a/src/queryClient.ts b/src/queryClient.ts
index 73567fc..11b0ede 100644
--- a/src/queryClient.ts
+++ b/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',
};
diff --git a/src/types/Board/communityType.ts b/src/types/Board/communityType.ts
index 762815a..5739f9f 100644
--- a/src/types/Board/communityType.ts
+++ b/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;