From d67eab1c065bc67f60a82b62d84aa8441de53157 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Mon, 16 Oct 2023 23:23:04 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EB=8C=93=EA=B8=80=20=EA=B0=AF?= =?UTF-8?q?=EC=88=98=EB=A5=BC=20totalElements=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Recipe/CommentList/CommentList.tsx | 6 +++--- frontend/src/mocks/data/comments.json | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Recipe/CommentList/CommentList.tsx b/frontend/src/components/Recipe/CommentList/CommentList.tsx index 093d5d93e..c519c6f0f 100644 --- a/frontend/src/components/Recipe/CommentList/CommentList.tsx +++ b/frontend/src/components/Recipe/CommentList/CommentList.tsx @@ -16,15 +16,15 @@ const CommentList = ({ recipeId }: CommentListProps) => { const { fetchNextPage, hasNextPage, data } = useInfiniteRecipeCommentQuery(Number(recipeId)); useIntersectionObserver(fetchNextPage, scrollRef, hasNextPage); - const comments = data.pages.flatMap((page) => page.comments); + const [{ totalElements, comments }] = data.pages.flatMap((page) => page); return (
- 댓글 ({comments.length}개) + 댓글 ({totalElements}개) - {comments.length === 0 && 꿀조합의 첫번째 댓글을 달아보세요!} + {totalElements === 0 && 꿀조합의 첫번째 댓글을 달아보세요!} {comments.map((comment) => ( ))} diff --git a/frontend/src/mocks/data/comments.json b/frontend/src/mocks/data/comments.json index acf2f9b08..d2f029c98 100644 --- a/frontend/src/mocks/data/comments.json +++ b/frontend/src/mocks/data/comments.json @@ -1,5 +1,6 @@ { "hasNext": false, + "totalElements": 3, "comments": [ { "author": { From 3ca0f4130caa8b5323efbed2f13436130d03d00d Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Mon, 16 Oct 2023 23:50:47 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=ED=9B=84=20=EA=B0=80=EC=9E=A5=20=EC=9C=84=EB=A1=9C?= =?UTF-8?q?=20=EC=98=AC=EB=9D=BC=EA=B0=80=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Recipe/CommentForm/CommentForm.tsx | 9 +++++++-- .../src/components/Recipe/CommentList/CommentList.tsx | 4 ++-- frontend/src/pages/RecipeDetailPage.tsx | 11 +++++++---- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/Recipe/CommentForm/CommentForm.tsx b/frontend/src/components/Recipe/CommentForm/CommentForm.tsx index 33c03d1e2..104657552 100644 --- a/frontend/src/components/Recipe/CommentForm/CommentForm.tsx +++ b/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; } 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 = (e) => { setCommentValue(e.target.value); }; @@ -32,6 +36,7 @@ const CommentForm = ({ recipeId }: CommentFormProps) => { { onSuccess: () => { setCommentValue(''); + scrollToPosition(scrollTargetRef); toast.success('댓글이 등록되었습니다.'); }, onError: (error) => { diff --git a/frontend/src/components/Recipe/CommentList/CommentList.tsx b/frontend/src/components/Recipe/CommentList/CommentList.tsx index c519c6f0f..0330c7059 100644 --- a/frontend/src/components/Recipe/CommentList/CommentList.tsx +++ b/frontend/src/components/Recipe/CommentList/CommentList.tsx @@ -19,7 +19,7 @@ const CommentList = ({ recipeId }: CommentListProps) => { const [{ totalElements, comments }] = data.pages.flatMap((page) => page); return ( -
+ <> 댓글 ({totalElements}개) @@ -29,7 +29,7 @@ const CommentList = ({ recipeId }: CommentListProps) => { ))}
-
+ ); }; diff --git a/frontend/src/pages/RecipeDetailPage.tsx b/frontend/src/pages/RecipeDetailPage.tsx index ed68acb7b..73f430c51 100644 --- a/frontend/src/pages/RecipeDetailPage.tsx +++ b/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(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 = () => { }> - +
+ +
- + );