diff --git a/frontend/src/components/Recipe/CommentList/CommentList.tsx b/frontend/src/components/Recipe/CommentList/CommentList.tsx
index 5a34feb95..093d5d93e 100644
--- 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}개)
+ {comments.length === 0 && 꿀조합의 첫번째 댓글을 달아보세요!}
{comments.map((comment) => (
))}
diff --git a/frontend/src/hooks/queries/recipe/useInfiniteRecipeCommentQuery.ts b/frontend/src/hooks/queries/recipe/useInfiniteRecipeCommentQuery.ts
index ec251f9b5..dd870941b 100644
--- 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;