From 74151700f9c337485374226f03f27a1ac11d77cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=96=B4=EC=8A=B9=EC=A4=80?= Date: Thu, 11 Jan 2024 23:54:28 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Refactor:=20=EB=8C=93=EA=B8=80=20invalidate?= =?UTF-8?q?Queries=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DetailSectionTop/DetailTopButton.tsx | 19 +++++++++----- src/components/Review/ReviewComments.tsx | 2 +- src/components/common/nav/InputComment.tsx | 25 ++++++++++++++----- .../reviewComment/reviewComment.page.tsx | 1 + 4 files changed, 34 insertions(+), 13 deletions(-) diff --git a/src/components/DetailSectionTop/DetailTopButton.tsx b/src/components/DetailSectionTop/DetailTopButton.tsx index c1ffe145..107501b9 100644 --- a/src/components/DetailSectionTop/DetailTopButton.tsx +++ b/src/components/DetailSectionTop/DetailTopButton.tsx @@ -4,7 +4,8 @@ import { TopIcon } from '@components/common/icons/Icons'; export default function DetailTopButton() { const [showButton, setShowButton] = useState(true); - const scrollToTop = () => { + const scrollToTop = (e: React.MouseEvent) => { + e.stopPropagation(); window.scroll({ top: 0, behavior: 'smooth', @@ -27,14 +28,20 @@ export default function DetailTopButton() { }; }, []); + const shadowStyle = { + boxShadow: + '2px 2px 5px rgba(0, 0, 0, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.1)', + }; + return ( showButton && (
-
- -
+ onClick={(e) => { + scrollToTop(e); + }} + className="sticky bottom-3 z-20 ml-auto flex h-12 w-12 items-center justify-center rounded-full bg-white " + style={shadowStyle}> +
) ); diff --git a/src/components/Review/ReviewComments.tsx b/src/components/Review/ReviewComments.tsx index a17dfdfd..65c5bef1 100644 --- a/src/components/Review/ReviewComments.tsx +++ b/src/components/Review/ReviewComments.tsx @@ -64,7 +64,7 @@ export default function ReviewComments() { {commentDataLength} {commentDataLength == 0 && ( -
+
댓글이 없습니다.
첫 댓글을 작성해보세요!
diff --git a/src/components/common/nav/InputComment.tsx b/src/components/common/nav/InputComment.tsx index a6fdd8d3..abf1bfe8 100644 --- a/src/components/common/nav/InputComment.tsx +++ b/src/components/common/nav/InputComment.tsx @@ -10,14 +10,17 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; interface InputCommentProps { classNameName?: string; } + interface PostCommentMutationParams { comment: string; reviewId: number; } + interface EditCommentMutationParams { comment: string; targetCommentId: number; } + export const InputComment: React.FC = () => { const [comment, setComment] = useRecoilState(commentState); const params = useParams(); @@ -28,19 +31,29 @@ export const InputComment: React.FC = () => { const targetCommentId = useRecoilValue(targetCommentIdState); const queryClient = useQueryClient(); - const { mutate: postCommentMutate } = useMutation({ + const { mutate: postReviewMutate } = useMutation({ mutationFn: ({ comment, reviewId }: PostCommentMutationParams) => postComments(comment, reviewId), onSuccess: () => { - queryClient.invalidateQueries({ queryKey: ['reviewComments'] }); + queryClient.invalidateQueries({ + queryKey: ['reviewComments'], + }); + queryClient.invalidateQueries({ + queryKey: ['myReviews'], + }); }, onError: () => console.log('error'), }); - const { mutate: editCommentMutate } = useMutation({ + const { mutate: editReviewMutate } = useMutation({ mutationFn: ({ comment, targetCommentId }: EditCommentMutationParams) => putComments(comment, targetCommentId), onSuccess: () => { - queryClient.invalidateQueries({ queryKey: ['reviewComments'] }); + queryClient.invalidateQueries({ + queryKey: ['reviewComments'], + }); + queryClient.invalidateQueries({ + queryKey: ['myReviews'], + }); }, onError: () => console.log('error'), }); @@ -52,10 +65,10 @@ export const InputComment: React.FC = () => { const handleSubmit = async () => { if (isModifyingComment) { - await editCommentMutate({ comment, targetCommentId }); + await editReviewMutate({ comment, targetCommentId }); setIsModifyingComment(false); } else { - await postCommentMutate({ comment, reviewId }); + await postReviewMutate({ comment, reviewId }); } setComment(''); }; diff --git a/src/pages/reviewComment/reviewComment.page.tsx b/src/pages/reviewComment/reviewComment.page.tsx index 8e92ff28..3c17f3e9 100644 --- a/src/pages/reviewComment/reviewComment.page.tsx +++ b/src/pages/reviewComment/reviewComment.page.tsx @@ -1,5 +1,6 @@ import { DetailHeader } from '@components/common/header'; import { DetailReview, ReviewComments } from '@components/Review'; + const ReviewComment = () => { return ( <> From 48f36036484faffb5449aa46412ae44d837d9340 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=96=B4=EC=8A=B9=EC=A4=80?= Date: Fri, 12 Jan 2024 01:00:48 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20input=20=EC=9C=84=EC=B9=98=20?= =?UTF-8?q?=EC=9E=AC=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DetailSectionTop/DetailTopButton.tsx | 19 ++--- src/components/Review/ReviewComments.tsx | 74 ++++++++++--------- src/components/common/nav/InputComment.tsx | 42 +++++------ src/pages/detail/detail.page.tsx | 4 +- 4 files changed, 66 insertions(+), 73 deletions(-) diff --git a/src/components/DetailSectionTop/DetailTopButton.tsx b/src/components/DetailSectionTop/DetailTopButton.tsx index 107501b9..c1ffe145 100644 --- a/src/components/DetailSectionTop/DetailTopButton.tsx +++ b/src/components/DetailSectionTop/DetailTopButton.tsx @@ -4,8 +4,7 @@ import { TopIcon } from '@components/common/icons/Icons'; export default function DetailTopButton() { const [showButton, setShowButton] = useState(true); - const scrollToTop = (e: React.MouseEvent) => { - e.stopPropagation(); + const scrollToTop = () => { window.scroll({ top: 0, behavior: 'smooth', @@ -28,20 +27,14 @@ export default function DetailTopButton() { }; }, []); - const shadowStyle = { - boxShadow: - '2px 2px 5px rgba(0, 0, 0, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.1)', - }; - return ( showButton && (
{ - scrollToTop(e); - }} - className="sticky bottom-3 z-20 ml-auto flex h-12 w-12 items-center justify-center rounded-full bg-white " - style={shadowStyle}> - + onClick={scrollToTop} + className="scroll__container sticky bottom-3 z-20 flex cursor-pointer items-center justify-end"> +
+ +
) ); diff --git a/src/components/Review/ReviewComments.tsx b/src/components/Review/ReviewComments.tsx index 65c5bef1..fbdc53ae 100644 --- a/src/components/Review/ReviewComments.tsx +++ b/src/components/Review/ReviewComments.tsx @@ -63,43 +63,45 @@ export default function ReviewComments() { 댓글 {commentDataLength}
- {commentDataLength == 0 && ( -
-
댓글이 없습니다.
-
첫 댓글을 작성해보세요!
-
- )} - fetchNextPage()} - hasMore={hasNextPage} - loader={ -
- Loading ... +
+ {commentDataLength == 0 && ( +
+
댓글이 없습니다.
+
첫 댓글을 작성해보세요!
- }> -
- {reviewComments?.pages.map((group, index) => { - { - return ( - - {group?.data.data.comments.content.map((item: any) => ( - - ))} - - ); - } - })} -
- + )} + fetchNextPage()} + hasMore={hasNextPage} + loader={ +
+ Loading ... +
+ }> +
+ {reviewComments?.pages.map((group, index) => { + { + return ( + + {group?.data.data.comments.content.map((item: any) => ( + + ))} + + ); + } + })} +
+ +
{modalChildren === 'EditDelete' && } {modalChildren === 'MyAlert' && ( diff --git a/src/components/common/nav/InputComment.tsx b/src/components/common/nav/InputComment.tsx index abf1bfe8..76fbba1f 100644 --- a/src/components/common/nav/InputComment.tsx +++ b/src/components/common/nav/InputComment.tsx @@ -78,29 +78,27 @@ export const InputComment: React.FC = () => { } }; return ( - <> -
-
-
ㅣ
-
- -
-
- -
+
+
+
ㅣ
+
+ +
+
+
- +
); }; diff --git a/src/pages/detail/detail.page.tsx b/src/pages/detail/detail.page.tsx index cee1949a..99333eb4 100644 --- a/src/pages/detail/detail.page.tsx +++ b/src/pages/detail/detail.page.tsx @@ -1,7 +1,7 @@ import { DetailHeader } from '@components/common/header'; import DetailSectionTop from '@components/DetailSectionTop/DetailSectionTop'; import DetailSectionBottom from '@components/DetailSectionBottom/DetailSectionBottom'; -import { DetailTopButton } from '@components/DetailSectionTop'; +// import { DetailTopButton } from '@components/DetailSectionTop'; const DetailTours = () => { return ( @@ -9,7 +9,7 @@ const DetailTours = () => { - + {/* */} ); };