From edec5ab528822f753b2b063bf5656981b328ba32 Mon Sep 17 00:00:00 2001 From: yungo1846 Date: Fri, 6 Aug 2021 16:37:49 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20CRUD=20=EC=8B=9C=20=EC=B4=9D=20?= =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EA=B0=9C=EC=88=98=20refetch=ED=95=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../intergration/adminUserComment.test.tsx | 6 ++ .../intergration/guestUserComment.test.tsx | 7 +++ .../socialLoginUserComment.test.tsx | 9 +++ .../organisms/CommentList/index.tsx | 60 ++++++++++--------- .../organisms/CommentList/styles.ts | 12 ++-- .../src/components/organisms/Footer/styles.ts | 2 +- .../components/pages/CommentArea/index.tsx | 34 +++++------ .../src/hooks/useCommentsByPage.ts | 3 +- .../src/hooks/useCreateComment.ts | 1 + .../src/hooks/useDeleteComment.ts | 1 + .../reply-module/src/hooks/useEditComment.ts | 1 + .../src/hooks/useTotalCommentsCount.ts | 2 +- 12 files changed, 82 insertions(+), 56 deletions(-) diff --git a/frontend/reply-module/src/__test__/intergration/adminUserComment.test.tsx b/frontend/reply-module/src/__test__/intergration/adminUserComment.test.tsx index b1f36512c..5310746d8 100644 --- a/frontend/reply-module/src/__test__/intergration/adminUserComment.test.tsx +++ b/frontend/reply-module/src/__test__/intergration/adminUserComment.test.tsx @@ -70,6 +70,7 @@ describe("관리자 유저일 때의 동작 테스트", () => { const commentList = render( { const commentList = render( { const commentList = render( { const commentList = render( { const commentList = render( { const commentList = render( comment.user.type === "GuestUser"); const commentList = render( comment.user.type === "GuestUser"); const commentList = render( comment.user.id === user.id))); const commentList = render( { + const hasMoreComments = comments.length < totalCommentsCount; + return ( @@ -55,40 +59,38 @@ const CommentList = ({ {notice && {notice}} - {!notice && comments.length === 0 ? ( - 아직 작성된 댓글이 없습니다. - ) : ( - comments.map(comment => { - const authorId = comment.user.id; + {comments.map(comment => { + const authorId = comment.user.id; - const iAmGuestUser = !user; - const iAmAdmin = user !== undefined && project?.userId === user.id; + const iAmGuestUser = !user; + const iAmAdmin = user !== undefined && project?.userId === user.id; - const thisCommentIsMine = authorId !== undefined && authorId === user?.id; - const thisCommentIsWrittenByAdmin = comment.user.id === project?.userId; - const thisCommentIsWrittenByGuest = comment.user.type === "GuestUser"; + const thisCommentIsMine = authorId !== undefined && authorId === user?.id; + const thisCommentIsWrittenByAdmin = comment.user.id === project?.userId; + const thisCommentIsWrittenByGuest = comment.user.type === "GuestUser"; - const align = thisCommentIsWrittenByAdmin ? "right" : "left"; - const shouldShowOption = iAmAdmin || thisCommentIsMine || (iAmGuestUser && thisCommentIsWrittenByGuest); + const align = thisCommentIsWrittenByAdmin ? "right" : "left"; + const shouldShowOption = iAmAdmin || thisCommentIsMine || (iAmGuestUser && thisCommentIsWrittenByGuest); - return ( - - ); - }) - )} + return ( + + ); + })} - - 더 보기 - - + {hasMoreComments && ( + + 더 보기 + + + )} ); }; diff --git a/frontend/reply-module/src/components/organisms/CommentList/styles.ts b/frontend/reply-module/src/components/organisms/CommentList/styles.ts index da145de6b..4a1aab3e8 100644 --- a/frontend/reply-module/src/components/organisms/CommentList/styles.ts +++ b/frontend/reply-module/src/components/organisms/CommentList/styles.ts @@ -12,7 +12,7 @@ export const OrderButtonContainer = styled.div` display: flex; justify-content: flex-end; align-items: flex-start; - border-bottom: 2px solid ${PALETTE.GRAY_400}; + border-bottom: 1px solid ${PALETTE.GRAY_400}; padding-bottom: 1.6rem; `; @@ -54,12 +54,14 @@ export const CommentContainer = styled.div` `; export const Notice = styled.span` + display: flex; + justify-content: center; + align-items: center; padding: 1.5rem 0; min-height: 7rem; - font-size: 1.6rem; - line-height: 2.4rem; - line-height: 2.4rem; - text-align: center; + font-size: 1.4rem; + line-height: 2.1rem; + color: ${PALETTE.GRAY_600}; white-space: pre-wrap; `; diff --git a/frontend/reply-module/src/components/organisms/Footer/styles.ts b/frontend/reply-module/src/components/organisms/Footer/styles.ts index d459ea047..c788b736d 100644 --- a/frontend/reply-module/src/components/organisms/Footer/styles.ts +++ b/frontend/reply-module/src/components/organisms/Footer/styles.ts @@ -6,7 +6,7 @@ export const Container = styled.footer` align-items: center; margin-top: 2rem; padding: 1rem 0; - border-top: 2px solid ${PALETTE.GRAY_400}; + border-top: 1px solid ${PALETTE.GRAY_400}; `; export const CopyRight = styled.span` diff --git a/frontend/reply-module/src/components/pages/CommentArea/index.tsx b/frontend/reply-module/src/components/pages/CommentArea/index.tsx index 20ab5b9a7..2be41e6bb 100644 --- a/frontend/reply-module/src/components/pages/CommentArea/index.tsx +++ b/frontend/reply-module/src/components/pages/CommentArea/index.tsx @@ -56,7 +56,7 @@ const CommentArea = () => { }, [sortOption]); useEffect(() => { - if (pageParam === 1) return; + if (pageParam === INITIAL_PAGE_PARAM) return; showMoreComment({ url, projectSecretKey, sortOption, pageParam }); }, [pageParam]); @@ -67,28 +67,23 @@ const CommentArea = () => { return; } + setNotice(""); + }, [projectLoading, commentsByPageLoading, totalCommentsCountLoading]); + + useEffect(() => { if (projectError) setNotice(projectError.message); if (totalCommentsCountError) setNotice(totalCommentsCountError.message); if (commentsByPageError) setNotice(commentsByPageError.message); - if ( - !( - projectError || - totalCommentsCountError || - commentsByPageError || - projectLoading || - totalCommentsCountLoading || - commentsByPageLoading - ) - ) + + if (!(projectError || totalCommentsCountError || commentsByPageError)) { + if (totalCommentsCount === 0) { + setNotice("작성된 댓글이 없습니다."); + return; + } + setNotice(""); - }, [ - projectLoading, - commentsByPageLoading, - totalCommentsCountLoading, - projectError, - totalCommentsCountError, - commentsByPageError - ]); + } + }, [projectError, totalCommentsCountError, commentsByPageError, totalCommentsCount]); const onShowMoreComment = () => { setPageParam(currentPageParam => currentPageParam + 1); @@ -133,6 +128,7 @@ const CommentArea = () => { { const { data: comments, diff --git a/frontend/reply-module/src/hooks/useCreateComment.ts b/frontend/reply-module/src/hooks/useCreateComment.ts index 0788150f3..7f6f91b51 100644 --- a/frontend/reply-module/src/hooks/useCreateComment.ts +++ b/frontend/reply-module/src/hooks/useCreateComment.ts @@ -25,6 +25,7 @@ export const useCreateComment = () => { const createMutation = useMutation(_data => _createComment(_data), { onSuccess: () => { queryClient.invalidateQueries(REACT_QUERY_KEY.COMMENT); + queryClient.invalidateQueries(REACT_QUERY_KEY.COMMENT_COUNT); } }); diff --git a/frontend/reply-module/src/hooks/useDeleteComment.ts b/frontend/reply-module/src/hooks/useDeleteComment.ts index 365107a83..803835d63 100644 --- a/frontend/reply-module/src/hooks/useDeleteComment.ts +++ b/frontend/reply-module/src/hooks/useDeleteComment.ts @@ -27,6 +27,7 @@ export const useDeleteComment = () => { const deleteMutation = useMutation(data => _deleteComment(data), { onSuccess: () => { queryClient.invalidateQueries(REACT_QUERY_KEY.COMMENT); + queryClient.invalidateQueries(REACT_QUERY_KEY.COMMENT_COUNT); } }); diff --git a/frontend/reply-module/src/hooks/useEditComment.ts b/frontend/reply-module/src/hooks/useEditComment.ts index d130d68eb..d0db9590b 100644 --- a/frontend/reply-module/src/hooks/useEditComment.ts +++ b/frontend/reply-module/src/hooks/useEditComment.ts @@ -28,6 +28,7 @@ export const useEditComment = () => { const editMutation = useMutation(comment => _editComment(comment), { onSuccess: () => { queryClient.invalidateQueries(REACT_QUERY_KEY.COMMENT); + queryClient.invalidateQueries(REACT_QUERY_KEY.COMMENT_COUNT); } }); diff --git a/frontend/reply-module/src/hooks/useTotalCommentsCount.ts b/frontend/reply-module/src/hooks/useTotalCommentsCount.ts index 17aa3424c..3df82f80a 100644 --- a/frontend/reply-module/src/hooks/useTotalCommentsCount.ts +++ b/frontend/reply-module/src/hooks/useTotalCommentsCount.ts @@ -21,7 +21,7 @@ export const useTotalCommentsCount = ({ url, projectSecretKey }: ScriptInfo) => isLoading, error, refetch - } = useQuery(REACT_QUERY_KEY.COMMENT_COUNT, () => getTotalCommentsCount({ url, projectSecretKey })); + } = useQuery(REACT_QUERY_KEY.COMMENT_COUNT, () => getTotalCommentsCount({ url, projectSecretKey })); return { totalCommentsCount, isLoading, error, refetch }; };