From 58e7f7ee4b1cf2f24adf15c86d5417b7d473760d Mon Sep 17 00:00:00 2001 From: jonghun Date: Sat, 2 Dec 2023 06:47:38 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EB=82=B4=EA=B0=80=20=EC=93=B4=20?= =?UTF-8?q?=EB=8C=93=EA=B8=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Routes.tsx | 3 +- src/components/MyPage/MyCommentCard/index.tsx | 28 ++++++++ .../MyPage/MyCommentCard/styles.module.scss | 42 +++++++++++ src/pages/Mypage/community/comments/index.tsx | 72 +++++++++++++++++++ .../community/comments/styles.module.scss | 36 ++++++++++ src/queryClient.ts | 1 + src/types/Board/communityType.ts | 12 ++++ 7 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 src/components/MyPage/MyCommentCard/index.tsx create mode 100644 src/components/MyPage/MyCommentCard/styles.module.scss create mode 100644 src/pages/Mypage/community/comments/index.tsx create mode 100644 src/pages/Mypage/community/comments/styles.module.scss diff --git a/src/Routes.tsx b/src/Routes.tsx index be9fbfd..751308c 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'; const MainPage = lazy(() => import('@/pages/Main')); const LoginPage = lazy(() => import('@/pages/Login')); @@ -60,7 +61,7 @@ export const routes: RouteObject[] = [ }, { path: 'community/comment', - element:
comment
, + element: , }, { path: 'community/like', diff --git a/src/components/MyPage/MyCommentCard/index.tsx b/src/components/MyPage/MyCommentCard/index.tsx new file mode 100644 index 0000000..ffbcc79 --- /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}

+
+
+ + ); +} + +export default MyCommentCard; diff --git a/src/components/MyPage/MyCommentCard/styles.module.scss b/src/components/MyPage/MyCommentCard/styles.module.scss new file mode 100644 index 0000000..4143f2c --- /dev/null +++ b/src/components/MyPage/MyCommentCard/styles.module.scss @@ -0,0 +1,42 @@ +.wrapper { + display: flex; + flex-direction: column; + width: 100%; + height: 9.575rem; + padding: 2.25rem 35% 2.25rem 2rem; + background-color: white; + 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.125rem; +} + +.comment { + margin-top: 1rem; + font-size: 1.125rem; + 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; + } +} diff --git a/src/pages/Mypage/community/comments/index.tsx b/src/pages/Mypage/community/comments/index.tsx new file mode 100644 index 0000000..f3059b6 --- /dev/null +++ b/src/pages/Mypage/community/comments/index.tsx @@ -0,0 +1,72 @@ +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 MyCommentCard from '@/components/MyPage/MyCommentCard'; +import { QueryKeys, restFetcher } from '@/queryClient'; +import { + CommunityBoardPageType, + 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 && ( + + )} +
+
+ ); +} diff --git a/src/pages/Mypage/community/comments/styles.module.scss b/src/pages/Mypage/community/comments/styles.module.scss new file mode 100644 index 0000000..570a897 --- /dev/null +++ b/src/pages/Mypage/community/comments/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; +} diff --git a/src/queryClient.ts b/src/queryClient.ts index 8855dd0..6ff98bc 100644 --- a/src/queryClient.ts +++ b/src/queryClient.ts @@ -65,4 +65,5 @@ export const QueryKeys = { LIKE: 'LIKE', MY_HOUSES: 'MY_HOUSES', MY_SAVES: 'MY_SAVES', + MY_COMMENTS: 'MY_COMMENTS', }; 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; From 46c70b6c57476b5f1ed5d1dfb80d8bc5d178de2d Mon Sep 17 00:00:00 2001 From: jonghun Date: Sat, 2 Dec 2023 06:48:44 +0900 Subject: [PATCH 2/4] =?UTF-8?q?refact:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Mypage/community/comments/index.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/Mypage/community/comments/index.tsx b/src/pages/Mypage/community/comments/index.tsx index f3059b6..b78fe2a 100644 --- a/src/pages/Mypage/community/comments/index.tsx +++ b/src/pages/Mypage/community/comments/index.tsx @@ -3,13 +3,9 @@ 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 MyCommentCard from '@/components/MyPage/MyCommentCard'; import { QueryKeys, restFetcher } from '@/queryClient'; -import { - CommunityBoardPageType, - MyCommentPageType, -} from '@/types/Board/communityType'; +import { MyCommentPageType } from '@/types/Board/communityType'; import { ApiResponseWithDataType } from '@/types/apiResponseType'; import styles from './styles.module.scss'; From c554b556f28ee8e0b260e4642b24ff6ceb3b5a10 Mon Sep 17 00:00:00 2001 From: sangminlee98 Date: Sat, 2 Dec 2023 13:26:53 +0900 Subject: [PATCH 3/4] =?UTF-8?q?design:=20=EB=8C=93=EA=B8=80=20CSS=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitmessage.txt | 2 +- src/components/MyPage/MyCommentCard/index.tsx | 2 +- src/components/MyPage/MyCommentCard/styles.module.scss | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) 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/components/MyPage/MyCommentCard/index.tsx b/src/components/MyPage/MyCommentCard/index.tsx index ffbcc79..2751f99 100644 --- a/src/components/MyPage/MyCommentCard/index.tsx +++ b/src/components/MyPage/MyCommentCard/index.tsx @@ -17,7 +17,7 @@ function MyCommentCard({ boardId, title, commentContent }: MyCommentCardProps) { return ( <>
-

{title}

+

게시글 제목: {title}

{commentContent}

diff --git a/src/components/MyPage/MyCommentCard/styles.module.scss b/src/components/MyPage/MyCommentCard/styles.module.scss index 4143f2c..b14b59a 100644 --- a/src/components/MyPage/MyCommentCard/styles.module.scss +++ b/src/components/MyPage/MyCommentCard/styles.module.scss @@ -3,7 +3,7 @@ flex-direction: column; width: 100%; height: 9.575rem; - padding: 2.25rem 35% 2.25rem 2rem; + padding: 2.25rem 2.25rem 2rem; background-color: white; font-family: 'Pretendard'; cursor: pointer; @@ -16,12 +16,12 @@ align-items: center; gap: 0.25rem; color: #878d91; - font-size: 1.125rem; + font-size: 1.25rem; } .comment { margin-top: 1rem; - font-size: 1.125rem; + font-size: 1rem; font-weight: 400; line-height: 20px; overflow: hidden; From f41e5684cfd342ec74fe783e507594d8b2f1e2cf Mon Sep 17 00:00:00 2001 From: sangminlee98 Date: Sat, 2 Dec 2023 14:43:12 +0900 Subject: [PATCH 4/4] =?UTF-8?q?design:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20CSS?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyPage/MyCommentCard/styles.module.scss | 1 - src/components/MyPage/MySaveCard/index.tsx | 19 ++++++++++++++----- .../MyPage/MySaveCard/styles.module.scss | 14 +++++++++++--- src/pages/Mypage/community/comments/index.tsx | 4 ++-- .../community/comments/styles.module.scss | 1 + src/pages/Mypage/community/write/index.tsx | 2 +- .../Mypage/community/write/styles.module.scss | 1 + .../Mypage/trade/saves/styles.module.scss | 2 +- 8 files changed, 31 insertions(+), 13 deletions(-) diff --git a/src/components/MyPage/MyCommentCard/styles.module.scss b/src/components/MyPage/MyCommentCard/styles.module.scss index b14b59a..631bef0 100644 --- a/src/components/MyPage/MyCommentCard/styles.module.scss +++ b/src/components/MyPage/MyCommentCard/styles.module.scss @@ -4,7 +4,6 @@ width: 100%; height: 9.575rem; padding: 2.25rem 2.25rem 2rem; - background-color: white; font-family: 'Pretendard'; cursor: pointer; &:hover { diff --git a/src/components/MyPage/MySaveCard/index.tsx b/src/components/MyPage/MySaveCard/index.tsx index cfa589e..e419b60 100644 --- a/src/components/MyPage/MySaveCard/index.tsx +++ b/src/components/MyPage/MySaveCard/index.tsx @@ -39,11 +39,20 @@ export default function MySaveCard({ saveData }: MySaveCardProps) { className={styles.wrapper} onClick={() => handleEditButtonClick(detailData?.data)} > -

- {saveData.title} - 클립이미지 -

-

{dayjs(saveData.createdAt).format('YYYY.MM.DD')}

+
+

+ {saveData.title === '' ? '[임시저장]' : saveData.title} + {saveData.imageUrl !== '' && 클립이미지} +

+

{dayjs(saveData.createdAt).format('YYYY.MM.DD')}

+
+ {saveData.imageUrl !== '' && ( + thumbnail + )} ); } 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 index b78fe2a..a0ba9a2 100644 --- a/src/pages/Mypage/community/comments/index.tsx +++ b/src/pages/Mypage/community/comments/index.tsx @@ -27,12 +27,12 @@ export default function MyCommentsPage() { return (
-

내가 댓글 글

+

내가 쓴 댓글

내가 남긴 댓글을 확인할 수 있어요.

- 총 {commentsData?.data.totalElements} + 총 {commentsData?.data.totalElements}개
diff --git a/src/pages/Mypage/community/comments/styles.module.scss b/src/pages/Mypage/community/comments/styles.module.scss index 570a897..91cf8a0 100644 --- a/src/pages/Mypage/community/comments/styles.module.scss +++ b/src/pages/Mypage/community/comments/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/community/write/index.tsx b/src/pages/Mypage/community/write/index.tsx index f361f57..486bc7e 100644 --- a/src/pages/Mypage/community/write/index.tsx +++ b/src/pages/Mypage/community/write/index.tsx @@ -32,7 +32,7 @@ export default function MyWritePage() {
- 총 {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; } }