[FE][댓글모듈] 댓글 전체 개수 API 적용 (#408)

frontend/reply-module/src/__test__/intergration/adminUserComment.test.tsx

@@ -70,6 +70,7 @@ describe("관리자 유저일 때의 동작 테스트", () => {
 
     const commentList = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={project}
         comments={guestComments}
@@ -100,6 +101,7 @@ describe("관리자 유저일 때의 동작 테스트", () => {
 
     const commentList = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={project}
         comments={socialLoginedComments}
@@ -131,6 +133,7 @@ describe("관리자 유저일 때의 동작 테스트", () => {
 
     const commentList = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={project}
         comments={guestComments}
@@ -160,6 +163,7 @@ describe("관리자 유저일 때의 동작 테스트", () => {
 
     const commentList = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={project}
         comments={socialLoginedCommentsWrittenByOther}
@@ -188,6 +192,7 @@ describe("관리자 유저일 때의 동작 테스트", () => {
 
     const commentList = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={project}
         comments={socialLoginedCommentsWrittenByMe}
@@ -212,6 +217,7 @@ describe("관리자 유저일 때의 동작 테스트", () => {
 
     const commentList = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={project}
         comments={comments}

frontend/reply-module/src/__test__/intergration/guestUserComment.test.tsx

@@ -74,6 +74,7 @@ describe("비로그인 유저 댓글 CRUD 테스트 코드를 작성한다.", ()
       const comments: Comment[] = JSON.parse(JSON.stringify(_comments));
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           comments={comments}
           project={undefined}
           notice={""}
@@ -95,6 +96,7 @@ describe("비로그인 유저 댓글 CRUD 테스트 코드를 작성한다.", ()
       const comments: Comment[] = JSON.parse(JSON.stringify(_comments));
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           comments={comments}
           project={undefined}
           notice={""}
@@ -155,6 +157,7 @@ describe("비로그인 유저 댓글 CRUD 테스트 코드를 작성한다.", ()
       const guestUserComments = comments.filter(comment => comment.user.type === "GuestUser");
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={undefined}
           comments={guestUserComments}
           project={undefined}
@@ -187,6 +190,8 @@ describe("비로그인 유저 댓글 CRUD 테스트 코드를 작성한다.", ()
       const guestUserComments = comments.filter(comment => comment.user.type === "GuestUser");
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
+          user={undefined}
           comments={guestUserComments}
           project={undefined}
           notice={""}
@@ -226,6 +231,7 @@ describe("비로그인 유저 댓글 CRUD 테스트 코드를 작성한다.", ()
 
       const { rerender } = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={undefined}
           project={undefined}
           comments={comments}
@@ -242,6 +248,7 @@ describe("비로그인 유저 댓글 CRUD 테스트 코드를 작성한다.", ()
 
       rerender(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={undefined}
           project={undefined}
           comments={comments}

frontend/reply-module/src/__test__/intergration/socialLoginUserComment.test.tsx

@@ -74,6 +74,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
       const comments = JSON.parse(JSON.stringify(_comments));
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           comments={comments}
           project={undefined}
@@ -115,6 +116,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
       const myComments = JSON.parse(JSON.stringify(_comments.filter(comment => comment.user.id === user.id)));
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           project={undefined}
           notice={""}
@@ -152,6 +154,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
       );
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           project={undefined}
           notice={""}
@@ -173,6 +176,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
       );
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           project={undefined}
           notice={""}
@@ -202,6 +206,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
 
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           project={undefined}
           notice={""}
@@ -232,6 +237,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
 
       const { rerender } = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           project={undefined}
           comments={comments}
@@ -248,6 +254,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
 
       rerender(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           project={undefined}
           comments={comments}
@@ -282,6 +289,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
 
     const { rerender } = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={undefined}
         comments={comments}
@@ -298,6 +306,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
 
     rerender(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={undefined}
         comments={comments}

frontend/reply-module/src/components/organisms/CommentList/index.tsx

@@ -18,6 +18,7 @@ export interface Props {
   className?: string;
   user?: User;
   project?: Project;
+  totalCommentsCount: number;
   comments: CommentType[];
   sortOption: keyof typeof ORDER_BUTTON;
   notice: string;
@@ -29,12 +30,15 @@ const CommentList = ({
   className,
   user,
   project,
+  totalCommentsCount,
   comments,
   sortOption,
   notice,
   onSelectSortOption,
   onShowMoreComment
 }: Props) => {
+  const hasMoreComments = comments.length < totalCommentsCount;
+
   return (
     <Container className={className}>
       <OrderButtonContainer>
@@ -55,40 +59,38 @@ const CommentList = ({
       </OrderButtonContainer>
       <CommentContainer>
         {notice && <Notice>{notice}</Notice>}
-        {!notice && comments.length === 0 ? (
-          <Notice>아직 작성된 댓글이 없습니다.</Notice>
-        ) : (
-          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 (
-              <Comment
-                user={user}
-                comment={comment}
-                key={comment.id}
-                shouldShowOption={shouldShowOption}
-                iAmAdmin={iAmAdmin}
-                thisCommentIsMine={thisCommentIsMine}
-                align={align}
-              />
-            );
-          })
-        )}
+          return (
+            <Comment
+              user={user}
+              comment={comment}
+              key={comment.id}
+              shouldShowOption={shouldShowOption}
+              iAmAdmin={iAmAdmin}
+              thisCommentIsMine={thisCommentIsMine}
+              align={align}
+            />
+          );
+        })}
       </CommentContainer>
-      <ShowMoreButton onClick={onShowMoreComment}>
-        <span>더 보기</span>
-        <DownArrow />
-      </ShowMoreButton>
+      {hasMoreComments && (
+        <ShowMoreButton onClick={onShowMoreComment}>
+          <span>더 보기</span>
+          <DownArrow />
+        </ShowMoreButton>
+      )}
     </Container>
   );
 };

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,15 @@ export const CommentContainer = styled.div`
 `;
 
 export const Notice = styled.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: 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;
 `;
 

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`

frontend/reply-module/src/components/pages/CommentArea/index.tsx

@@ -4,6 +4,7 @@ import { INITIAL_PAGE_PARAM } from "../../../constants/comment";
 import { ORDER_BUTTON } from "../../../constants/orderButton";
 import { useCommentsByPage, useGetProject, useUser } from "../../../hooks";
 import { useShowMoreComments } from "../../../hooks/useShowMoreComments";
+import useTotalCommentsCount from "../../../hooks/useTotalCommentsCount";
 import { AlertError } from "../../../utils/Error";
 import { postScrollHeightToParentWindow } from "../../../utils/postMessage";
 import Avatar from "../../atoms/Avatar";
@@ -32,6 +33,11 @@ const CommentArea = () => {
   const [notice, setNotice] = useState("로딩 중...");
 
   const { user, login, logout } = useUser();
+  const {
+    totalCommentsCount,
+    isLoading: totalCommentsCountLoading,
+    error: totalCommentsCountError
+  } = useTotalCommentsCount({ url, projectSecretKey });
   const {
     comments,
     refetch: refetchCommentsByPage,
@@ -50,21 +56,34 @@ const CommentArea = () => {
   }, [sortOption]);
 
   useEffect(() => {
-    if (pageParam === 1) return;
+    if (pageParam === INITIAL_PAGE_PARAM) return;
     showMoreComment({ url, projectSecretKey, sortOption, pageParam });
   }, [pageParam]);
 
   useEffect(() => {
-    if (projectLoading || commentsByPageLoading) {
+    if (projectLoading || totalCommentsCountLoading || commentsByPageLoading) {
       setNotice("로딩 중...");
 
       return;
     }
 
+    setNotice("");
+  }, [projectLoading, commentsByPageLoading, totalCommentsCountLoading]);
+
+  useEffect(() => {
     if (projectError) setNotice(projectError.message);
+    if (totalCommentsCountError) setNotice(totalCommentsCountError.message);
     if (commentsByPageError) setNotice(commentsByPageError.message);
-    if (!(projectError || commentsByPageError || projectLoading || commentsByPageLoading)) setNotice("");
-  }, [projectLoading, commentsByPageLoading, projectError, commentsByPageError]);
+
+    if (!(projectError || totalCommentsCountError || commentsByPageError)) {
+      if (totalCommentsCount === 0) {
+        setNotice("작성된 댓글이 없습니다.");
+        return;
+      }
+
+      setNotice("");
+    }
+  }, [projectError, totalCommentsCountError, commentsByPageError, totalCommentsCount]);
 
   const onShowMoreComment = () => {
     setPageParam(currentPageParam => currentPageParam + 1);
@@ -89,7 +108,7 @@ const CommentArea = () => {
     <Container>
       <Header>
         <CommentCountWrapper>
-          댓글 <CommentCount>{comments?.length || 0}</CommentCount>
+          댓글 <CommentCount>{totalCommentsCount || 0}</CommentCount>
         </CommentCountWrapper>
         <UserAvatarOption user={user}>
           {user ? (
@@ -109,6 +128,7 @@ const CommentArea = () => {
       <CommentInput url={url} projectSecretKey={projectSecretKey} user={user} />
       <CommentList
         user={user}
+        totalCommentsCount={totalCommentsCount || 0}
         comments={comments || []}
         project={project}
         sortOption={sortOption}

frontend/reply-module/src/constants/api.ts

@@ -1,3 +1,4 @@
+import { ScriptInfo } from "./../types/comment";
 import { GetCommentsRequestParams, GuestUserConfirmInfo } from "../types/comment";
 import { NUM_OF_COMMENTS_PER_PAGE } from "./comment";
 
@@ -10,8 +11,10 @@ export const BASE_URL = process.env.BUILD_MODE === "development" ? DEVELOPMENT_B
 export const QUERY = Object.freeze({
   LOGIN: "/api/v1/login/oauth?oauthProviderName=kakao&oauthAccessToken=",
   COMMENT: "/api/v1/comments",
-  GET_ALL_COMMENTS: ({ url, projectSecretKey, sortOption, pageParam }: GetCommentsRequestParams) =>
+  GET_COMMENTS_BY_PAGE: ({ url, projectSecretKey, sortOption, pageParam }: GetCommentsRequestParams) =>
     `/api/v1/comments/paging?url=${url}&projectKey=${projectSecretKey}&sortOption=${sortOption}&page=${pageParam}&size=${NUM_OF_COMMENTS_PER_PAGE}`,
+  GET_TOTAL_COMMENTS_COUNT: ({ url, projectSecretKey }: ScriptInfo) =>
+    `/api/v1/comments/count?url=${url}&projectKey=${projectSecretKey}`,
   GET_PROJECT: (projectKey: string) => `/api/v1/projects/user-id?secretKey=${projectKey}`,
   CHECK_GUEST_PASSWORD: ({ guestUserId, guestUserPassword }: GuestUserConfirmInfo) =>
     `/api/v1/users/check-password?guestUserId=${guestUserId}&guestUserPassword=${guestUserPassword}`,

frontend/reply-module/src/constants/reactQueryKey.ts

@@ -1,6 +1,7 @@
 export const REACT_QUERY_KEY = Object.freeze({
   USER: "user",
   COMMENT: "comment",
+  COMMENT_COUNT: "comment-count",
   PROJECT: "project",
   GUEST_PASSWORD_CONFIRM: "guest-password-confirm"
 });