[FE] feat: 꿀조합 댓글이 없는 경우 예외처리 (#772)

* feat: 댓글이 없는 경우 ui 처리 * feat: 댓글이 없는 경우 id를 읽어올 수 없는 문제 해결
woowacourse-teams · Oct 16, 2023 · be83c6b · be83c6b
1 parent ff62d0e
commit be83c6b
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/frontend/src/components/Recipe/CommentList/CommentList.tsx b/frontend/src/components/Recipe/CommentList/CommentList.tsx
@@ -1,4 +1,4 @@
-import { Heading, Spacing } from '@fun-eat/design-system';
+import { Heading, Spacing, Text, theme } from '@fun-eat/design-system';
 import { useRef } from 'react';
 
 import CommentItem from '../CommentItem/CommentItem';
@@ -24,6 +24,7 @@ const CommentList = ({ recipeId }: CommentListProps) => {
         댓글 ({comments.length}개)
       </Heading>
       <Spacing size={12} />
+      {comments.length === 0 && <Text color={theme.textColors.info}>꿀조합의 첫번째 댓글을 달아보세요!</Text>}
       {comments.map((comment) => (
         <CommentItem key={comment.id} recipeComment={comment} />
       ))}

diff --git a/frontend/src/hooks/queries/recipe/useInfiniteRecipeCommentQuery.ts b/frontend/src/hooks/queries/recipe/useInfiniteRecipeCommentQuery.ts
@@ -27,7 +27,7 @@ const useInfiniteRecipeCommentQuery = (recipeId: number) => {
     ({ pageParam = { lastId: 0, totalElements: null } }) => fetchRecipeComments(pageParam, recipeId),
     {
       getNextPageParam: (prevResponse: CommentResponse) => {
-        const lastId = prevResponse.comments[prevResponse.comments.length - 1].id;
+        const lastId = prevResponse.comments.length ? prevResponse.comments[prevResponse.comments.length - 1].id : 0;
         const totalElements = prevResponse.totalElements;
         const lastCursor = { lastId: lastId, totalElements: totalElements };
         return prevResponse.hasNext ? lastCursor : undefined;