Feat: 댓글 리스트 불러오기 #65

Author: jiyeeeah

components/pages/main/Feed/index.tsx

@@ -25,7 +25,6 @@ export default function Feed() {
         showModal={showModal}
         setShowModal={setShowModal}
         board={selectedBoard}
-        comments={selectedBoard?.replyListDto}
       />
     </FlexBox>
   );

components/ui/BoardCard/BoardCardPackage/CommentWrapper.tsx

@@ -26,6 +26,7 @@ export function BoardCardCommentWrapper({
       parentId: 1,
       content: commentText,
     });
+    setCommentText('');
   };
 
   return (
@@ -50,6 +51,7 @@ export function BoardCardCommentWrapper({
           <FlexBox
             direction="column"
             justify="start"
+            align="start"
             className="gap-[5px] overflow-scroll h-full"
           >
             {children}
@@ -80,8 +82,12 @@ export function BoardCardCommentWrapper({
           value={commentText}
           onChange={(event) => setCommentText(event.target.value)}
         />
-        <Button onClickAction={postNewComment} disabled={isLoading}>
-          {isLoading ? <p>등록 중...</p> : <span>등록</span>}
+        <Button
+          onClickAction={postNewComment}
+          disabled={isLoading}
+          variant="ghost"
+        >
+          {isLoading ? <p>...</p> : <span>⇧</span>}
         </Button>
       </FlexBox>
     </FlexBox>

components/ui/BoardCard/BoardCardPackage/Comments.tsx

@@ -9,7 +9,7 @@ export default function BoardCardComments({
 }) {
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <div onClick={onClickModal}>
+    <div onClick={onClickModal} className="flex flex-row">
       <div className="inline-block mr-1 body2 text-grey-500">{userName}</div>
       <div className="inline body4 text-grey-500">{content}</div>
     </div>

components/ui/BoardCard/FeedBoardCard.tsx

@@ -9,7 +9,7 @@ interface FeedBoardCardProps {
   content: string;
   imgs: string[];
   setShowModal: Dispatch<SetStateAction<boolean>>;
-  comments: Comment[] | undefined;
+  comments: Comment[];
   commentsCount: number;
   likedCount: number;
   createdDate: string;
@@ -26,6 +26,7 @@ export default function FeedBoardCard({
   likedCount,
   createdDate,
 }: FeedBoardCardProps) {
+  // const { data: commentList } = useGetShortCommentList(boardId);
   return (
     <FlexBox
       direction="column"
@@ -46,8 +47,8 @@ export default function FeedBoardCard({
         >
           <FlexBox
             direction="column"
-            justify="start"
-            className="max-h-[82px] overflow-scroll"
+            align="start"
+            className="max-h-[82px] overflow-hidden"
           >
             {comments?.map((comment) => (
               <BoardCard.Comments

components/ui/BoardCard/ModalBoardCard.tsx

@@ -1,12 +1,11 @@
-import { Comment } from '@/types/types';
 import { BoardCardModal } from '@/components/ui/BoardCard/BoardCardPackage/BoardCardModalPackage';
+import useGetCommentList from '@/hooks/queries/useGetCommentList';
 
 interface ModalBoardCardProps {
   boardId: number;
   userName: string;
   imgs: string[];
   content: string;
-  comments: Comment[] | undefined;
   commentsCount: number;
   likedCount: number;
   createdDate: string;
@@ -16,11 +15,12 @@ export default function ModalBoardCard({
   userName,
   imgs,
   content,
-  comments,
   commentsCount,
   likedCount,
   createdDate,
 }: ModalBoardCardProps) {
+  const { data: commentList, Observer } = useGetCommentList(boardId);
+
   return (
     <BoardCardModal imgs={imgs}>
       <BoardCardModal.Header userName={userName} createdDate={createdDate} />
@@ -31,15 +31,18 @@ export default function ModalBoardCard({
           commentsCount={commentsCount}
           likedCount={likedCount}
         >
-          {comments?.map((comment) => (
-            <BoardCardModal.ModalComments
-              id={comment.id}
-              userName={comment.nickname}
-              content={comment.content}
-              // TODO: 유저 프로필 사진 연결!
-              userImg="/Feed/desktop/tempProfilePic.svg"
-            />
-          ))}
+          {commentList?.pages.map((page) =>
+            page.content.map((comment) => (
+              <BoardCardModal.ModalComments
+                id={comment.id}
+                userName={comment.nickname}
+                content={comment.content}
+                // TODO: 유저 프로필 사진 연결!
+                userImg="/Feed/desktop/tempProfilePic.svg"
+              />
+            )),
+          )}
+          <Observer>로딩중...</Observer>
         </BoardCardModal.BoardCardCommentWrapper>
       </BoardCardModal.Content>
     </BoardCardModal>

components/ui/BoardModal/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 import { Dispatch, SetStateAction } from 'react';
 import Image from 'next/image';
-import { Comment, Board } from '@/types/types';
+import { Board } from '@/types/types';
 import ModalBoardCard from '@/components/ui/BoardCard/ModalBoardCard';
 import FlexBox from '../FlexBox';
 import Modal from '../Modal';
@@ -10,12 +10,10 @@ export default function BoardModal({
   showModal,
   setShowModal,
   board,
-  comments,
 }: {
   showModal: boolean;
   setShowModal: Dispatch<SetStateAction<boolean>>;
   board: Board | null;
-  comments: Comment[] | undefined;
 }) {
   return (
     <Modal open={showModal} onClose={() => setShowModal(false)}>
@@ -36,7 +34,6 @@ export default function BoardModal({
             userName={board.writer}
             imgs={board.fileNames}
             content={board.title}
-            comments={comments}
             commentsCount={board.replyCount}
             likedCount={board.likedCount}
             createdDate={board.createdDate}

hooks/mutations/usePostComment.ts

@@ -10,7 +10,7 @@ export default function usePostComment() {
       postComment(postCommentData),
     onSuccess: () => {
       Toast.success('댓글이 성공적으로 업로드 되었습니다.');
-      return queryClient.invalidateQueries(['comment']);
+      return queryClient.invalidateQueries(['commentList']);
     },
     onError: () => {
       Toast.error('댓글을 업로드하지 못했습니다. 잠시후 다시 시도해주세요.🥲');

hooks/queries/useGetBoardList.tsx

@@ -7,7 +7,7 @@ import useInfiniteScroll from '../common/useInfiniteScroll';
 export default function useGetBoardList() {
   const { data, isLoading, Observer, hasNextPage } =
     useInfiniteScroll<BoardList>({
-      queryKey: 'boardsList',
+      queryKey: 'boardList',
       firstPageParam: 0,
       queryFn: getBoardList,
       getNextPageParamFn: (boardList) =>

hooks/queries/useGetCommentList.tsx

@@ -0,0 +1,35 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { CommentList } from '@/types/types';
+import { getCommentList } from '@/service/board';
+import { useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+export default function useGetCommentList(boardId: number) {
+  const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } =
+    useInfiniteQuery<CommentList>({
+      queryKey: ['commentList'],
+      queryFn: ({ pageParam = 0 }) => getCommentList(pageParam, boardId),
+      getNextPageParam: (commentList) =>
+        commentList.last ? undefined : commentList.number + 1,
+    });
+  // 무한 스크롤 화면 가장 아래 부분 탐지하는 observer
+  function Observer({ children }: { children: React.ReactNode }) {
+    const { ref, inView } = useInView({ threshold: 1 });
+    useEffect(() => {
+      if (inView && hasNextPage) {
+        fetchNextPage();
+      }
+    }, [inView]);
+    if (!hasNextPage || !data) return null;
+    return (
+      <div ref={ref}>{isLoading || isFetchingNextPage ? children : null}</div>
+    );
+  }
+
+  return {
+    data,
+    isLoading,
+    Observer,
+    hasNextPage,
+  };
+}

service/board.ts

@@ -1,5 +1,5 @@
 import { AuthError } from '@/lib/error';
-import { PostBoardType, PostCommentType } from '@/types/types';
+import { CommentList, PostBoardType, PostCommentType } from '@/types/types';
 
 export async function postBoard(postBoardData: PostBoardType) {
   const url = `endpoint/api/board/register`;
@@ -40,7 +40,6 @@ export async function getBoardList(pageParam: number) {
 
 export async function postComment(postCommentData: PostCommentType) {
   const url = `endpoint/api/reply/register`;
-
   const response = await fetch(url, {
     method: 'POST',
     credentials: 'include',
@@ -51,3 +50,29 @@ export async function postComment(postCommentData: PostCommentType) {
   });
   return response.json();
 }
+
+export async function getCommentList(
+  pageParam: number,
+  boardId: number,
+): Promise<CommentList> {
+  let url = `/endpoint/api/reply/list?boardId=${boardId}&pageSize=3`;
+  if (pageParam) {
+    url += `&pageNumber=${pageParam}`;
+  }
+  try {
+    const response = await fetch(url);
+    if (response.status === 401) {
+      throw new AuthError('로그인이 필요한 서비스입니다.');
+    }
+    if (!response.ok) {
+      throw new Error(`서버오류:${response.status}`);
+    }
+    return await response.json();
+  } catch (error) {
+    if (error instanceof AuthError) {
+      window.location.replace('/auth/login');
+      alert(error.message);
+    }
+    throw error;
+  }
+}

types/types.ts

@@ -61,6 +61,33 @@ export interface Comment {
   // children: string[];
 }
 
+export interface CommentList {
+  content: Comment[];
+  pageable: {
+    sort: {
+      empty: boolean;
+      unsorted: boolean;
+      sorted: boolean;
+    };
+    offset: 0;
+    pageSize: 3;
+    pageNumber: 0;
+    paged: boolean;
+    unpaged: boolean;
+  };
+  size: 3;
+  number: 0;
+  sort: {
+    empty: boolean;
+    unsorted: boolean;
+    sorted: boolean;
+  };
+  numberOfElements: number;
+  first: boolean;
+  last: boolean;
+  empty: boolean;
+}
+
 export interface PostBoardType {
   title: string;
   content: string;