[FE] feat: 꿀조합 댓글 버그 수정 및 개선

frontend/src/components/Recipe/CommentForm/CommentForm.tsx

@@ -1,25 +1,29 @@
 import { Button, Spacing, Text, Textarea, useTheme } from '@fun-eat/design-system';
-import type { ChangeEventHandler, FormEventHandler } from 'react';
+import type { ChangeEventHandler, FormEventHandler, RefObject } from 'react';
 import { useState } from 'react';
 import styled from 'styled-components';
 
 import { SvgIcon } from '@/components/Common';
+import { useScroll } from '@/hooks/common';
 import { useToastActionContext } from '@/hooks/context';
 import { useRecipeCommentMutation } from '@/hooks/queries/recipe';
 
 interface CommentFormProps {
   recipeId: number;
+  scrollTargetRef: RefObject<HTMLElement>;
 }
 
 const MAX_COMMENT_LENGTH = 200;
 
-const CommentForm = ({ recipeId }: CommentFormProps) => {
+const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => {
   const [commentValue, setCommentValue] = useState('');
   const { mutate } = useRecipeCommentMutation(recipeId);
 
   const theme = useTheme();
   const { toast } = useToastActionContext();
 
+  const { scrollToPosition } = useScroll();
+
   const handleCommentInput: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
     setCommentValue(e.target.value);
   };
@@ -32,6 +36,7 @@ const CommentForm = ({ recipeId }: CommentFormProps) => {
       {
         onSuccess: () => {
           setCommentValue('');
+          scrollToPosition(scrollTargetRef);
           toast.success('댓글이 등록되었습니다.');
         },
         onError: (error) => {

frontend/src/components/Recipe/CommentList/CommentList.tsx

@@ -16,20 +16,20 @@ const CommentList = ({ recipeId }: CommentListProps) => {
   const { fetchNextPage, hasNextPage, data } = useInfiniteRecipeCommentQuery(Number(recipeId));
   useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
 
-  const comments = data.pages.flatMap((page) => page.comments);
+  const [{ totalElements, comments }] = data.pages.flatMap((page) => page);
 
   return (
-    <section>
+    <>
       <Heading as="h3" size="lg">
-        댓글 ({comments.length}개)
+        댓글 ({totalElements}개)
       </Heading>
       <Spacing size={12} />
-      {comments.length === 0 && <Text color={theme.textColors.info}>꿀조합의 첫번째 댓글을 달아보세요!</Text>}
+      {totalElements === 0 && <Text color={theme.textColors.info}>꿀조합의 첫번째 댓글을 달아보세요!</Text>}
       {comments.map((comment) => (
         <CommentItem key={comment.id} recipeComment={comment} />
       ))}
       <div ref={scrollRef} style={{ height: '1px' }} aria-hidden />
-    </section>
+    </>
   );
 };
 

frontend/src/mocks/data/comments.json

@@ -1,5 +1,6 @@
 {
   "hasNext": false,
+  "totalElements": 3,
   "comments": [
     {
       "author": {

frontend/src/pages/RecipeDetailPage.tsx

@@ -1,6 +1,6 @@
 import { Divider, Heading, Spacing, Text, theme } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
-import { Suspense } from 'react';
+import { Suspense, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -13,8 +13,9 @@ import { getFormattedDate } from '@/utils/date';
 export const RecipeDetailPage = () => {
   const { recipeId } = useParams();
 
-  const { data: recipeDetail } = useRecipeDetailQuery(Number(recipeId));
+  const scrollTargetRef = useRef<HTMLElement>(null);
 
+  const { data: recipeDetail } = useRecipeDetailQuery(Number(recipeId));
   const { reset } = useQueryErrorResetBoundary();
 
   const { id, images, title, content, author, products, totalPrice, favoriteCount, favorite, createdAt } = recipeDetail;
@@ -75,11 +76,13 @@ export const RecipeDetailPage = () => {
       <Spacing size={24} />
       <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
         <Suspense fallback={<Loading />}>
-          <CommentList recipeId={Number(recipeId)} />
+          <section ref={scrollTargetRef}>
+            <CommentList recipeId={Number(recipeId)} />
+          </section>
         </Suspense>
       </ErrorBoundary>
       <Spacing size={108} />
-      <CommentForm recipeId={Number(recipeId)} />
+      <CommentForm recipeId={Number(recipeId)} scrollTargetRef={scrollTargetRef} />
       <Spacing size={12} />
     </>
   );