From 0bc56a24e786a4afd5b0c9695151dac8033af95e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=96=B4=EC=8A=B9=EC=A4=80?= Date: Tue, 9 Jan 2024 23:45:15 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Fix:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=ED=8C=9D?= =?UTF-8?q?=EC=97=85=20=EC=9C=84=EC=B9=98=20=EC=A1=B0=EC=A0=95=20=EB=B0=8F?= =?UTF-8?q?=20invalidateQueries=20=EC=84=A4=EC=A0=95(=EB=A6=AC=EB=B7=B0?= =?UTF-8?q?=EC=82=AD=EC=A0=9C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DetailSectionBottom/DetailReviews.tsx | 2 +- .../DetailSectionTop/DetailToursButtons.tsx | 13 ++++++++----- src/components/common/button/Button.tsx | 2 +- src/components/common/modal/Modal.tsx | 2 +- .../common/modal/children/DeleteAlert.tsx | 19 +++++++++++++++---- .../common/toastpopup/ToastPopUp.tsx | 6 +++--- 6 files changed, 29 insertions(+), 15 deletions(-) diff --git a/src/components/DetailSectionBottom/DetailReviews.tsx b/src/components/DetailSectionBottom/DetailReviews.tsx index f51a215b..f4ee83f7 100644 --- a/src/components/DetailSectionBottom/DetailReviews.tsx +++ b/src/components/DetailSectionBottom/DetailReviews.tsx @@ -112,7 +112,7 @@ export default function DetailReviews({ reviewData }: reviewProps) { noun: '', verb: '', })); - }, 2000); + }, 4000); return () => clearTimeout(timer); } }, [alert]); diff --git a/src/components/DetailSectionTop/DetailToursButtons.tsx b/src/components/DetailSectionTop/DetailToursButtons.tsx index bc13a706..406384ff 100644 --- a/src/components/DetailSectionTop/DetailToursButtons.tsx +++ b/src/components/DetailSectionTop/DetailToursButtons.tsx @@ -1,7 +1,8 @@ -import { PenIcon, CalendarIcon } from '@components/common/icons/Icons'; -import { useNavigate, useParams } from 'react-router-dom'; +import { CalendarIcon, PenIcon } from '@components/common/icons/Icons'; import { useEffect } from 'react'; - +import { useNavigate, useParams } from 'react-router-dom'; +import { useSetRecoilState } from 'recoil'; +import { isModifyingReviewState } from '@recoil/review'; interface reviewProps { reviewData: any; } @@ -11,17 +12,19 @@ export default function DetailTourButtons({ reviewData }: reviewProps) { const params = useParams(); const tourItemId = Number(params.id); const navigate = useNavigate(); + const setIsModifyingReview = useSetRecoilState(isModifyingReviewState); const handlePostingReivew = () => { + setIsModifyingReview(false); navigate(`/reviewPosting/${tourItemId}`, { state: { title, contentTypeId }, }); }; - + useEffect(() => { console.log('contentTypeId', contentTypeId); }, [contentTypeId]); - + return (
diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx index e16a1d74..a98d3d6d 100644 --- a/src/components/common/modal/Modal.tsx +++ b/src/components/common/modal/Modal.tsx @@ -40,7 +40,7 @@ export const getModalStyles = (modalChildren: string) => { bottom: '0', marginRight: '-50%', transform: 'translate(-50%, 0)', - width: '375px', + width: '415px', // 375px + padding 40 (20 20) height: '186px', borderTopLeftRadius: '2rem', borderTopRightRadius: '2rem', diff --git a/src/components/common/modal/children/DeleteAlert.tsx b/src/components/common/modal/children/DeleteAlert.tsx index 6b8484f7..44370645 100644 --- a/src/components/common/modal/children/DeleteAlert.tsx +++ b/src/components/common/modal/children/DeleteAlert.tsx @@ -8,18 +8,29 @@ import { } from '@recoil/review'; import { useNavigate } from 'react-router-dom'; import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; + const DeleteAlert = ({}) => { const navigate = useNavigate(); const tourItemId = useRecoilValue(tourItemIdState); const targetReviewId = useRecoilValue(targetReviewIdState); const setIsModalOpen = useSetRecoilState(isModalOpenState); const setToastPopUp = useSetRecoilState(toastPopUpState); + const queryClient = useQueryClient(); + + const { mutate: deleteReviewMutate } = useMutation({ + mutationFn: (targetReviewId: number) => deleteReview(targetReviewId), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['toursReviews'] }); + }, + onError: () => console.log('error'), + }); const handleDeleteButton = async () => { - await deleteReview(targetReviewId); + await deleteReviewMutate(targetReviewId); setIsModalOpen(false); navigate(`/detail/${tourItemId}`); - window.location.reload(); + // window.location.reload(); setToastPopUp(() => ({ isPopUp: true, noun: '리뷰', @@ -38,10 +49,10 @@ const DeleteAlert = ({}) => { onClick={() => { setIsModalOpen(false); }} - className="text-xs"> + className="text-sm"> 취소 - + 삭제
diff --git a/src/components/common/toastpopup/ToastPopUp.tsx b/src/components/common/toastpopup/ToastPopUp.tsx index f3cba772..6ecc5f01 100644 --- a/src/components/common/toastpopup/ToastPopUp.tsx +++ b/src/components/common/toastpopup/ToastPopUp.tsx @@ -13,7 +13,7 @@ const ToastPopUp: React.FC = ({ noun, verb }) => { useEffect(() => { const timeout = setTimeout(() => { setVisible(false); - }, 2000); + }, 3000); return () => clearTimeout(timeout); }, []); @@ -27,11 +27,11 @@ const ToastPopUp: React.FC = ({ noun, verb }) => { className={`fixed flex items-center px-4 `} style={{ top: '0', - left: '35%', + left: '50%', right: 'auto', bottom: 'auto', marginRight: '-50%', - transform: visible ? 'translateY(0)' : 'translateY(-100%)', + transform: visible ? 'translate(-50%, 0)' : 'translate(-50%, -50%)', width: '375px', height: '64px', borderRadius: '1rem', From 5e52a667ec073836d5a8b075650b0b0e34c3ee8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=96=B4=EC=8A=B9=EC=A4=80?= Date: Wed, 10 Jan 2024 00:06:20 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Fix:=20invalidateQueries=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95(=EB=8C=93=EA=B8=80=EC=83=9D=EC=84=B1/=EC=88=98?= =?UTF-8?q?=EC=A0=95/=EC=82=AD=EC=A0=9C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/modal/children/DeleteAlert.tsx | 1 - .../common/modal/children/EditDelete.tsx | 13 ++++++-- src/components/common/nav/InputComment.tsx | 33 ++++++++++++++++--- 3 files changed, 40 insertions(+), 7 deletions(-) diff --git a/src/components/common/modal/children/DeleteAlert.tsx b/src/components/common/modal/children/DeleteAlert.tsx index 44370645..9ae76521 100644 --- a/src/components/common/modal/children/DeleteAlert.tsx +++ b/src/components/common/modal/children/DeleteAlert.tsx @@ -30,7 +30,6 @@ const DeleteAlert = ({}) => { await deleteReviewMutate(targetReviewId); setIsModalOpen(false); navigate(`/detail/${tourItemId}`); - // window.location.reload(); setToastPopUp(() => ({ isPopUp: true, noun: '리뷰', diff --git a/src/components/common/modal/children/EditDelete.tsx b/src/components/common/modal/children/EditDelete.tsx index f93a6907..08c259b7 100644 --- a/src/components/common/modal/children/EditDelete.tsx +++ b/src/components/common/modal/children/EditDelete.tsx @@ -19,6 +19,7 @@ import { import React from 'react'; import { useNavigate } from 'react-router-dom'; import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; const EditDelete: React.FC = () => { const rating = useRecoilValue(ratingState); @@ -34,6 +35,7 @@ const EditDelete: React.FC = () => { const navigate = useNavigate(); const setIsModalOpen = useSetRecoilState(isModalOpenState); const setModalChildren = useSetRecoilState(modalChildrenState); + const queryClient = useQueryClient(); const handleEdit = () => { if (title == '내 리뷰') { @@ -55,13 +57,20 @@ const EditDelete: React.FC = () => { } }; + const { mutate: deleteCommentMutate } = useMutation({ + mutationFn: (targetCommentId: number) => deleteComments(targetCommentId), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['reviewComments'] }); + }, + onError: () => console.log('error'), + }); + const handleDelete = async () => { if (title === '내 리뷰') { setModalChildren('DeleteAlert'); } else if (title === '내 댓글') { - await deleteComments(targetCommentId); + await deleteCommentMutate(targetCommentId); setIsModalOpen(false); - window.location.reload(); } }; diff --git a/src/components/common/nav/InputComment.tsx b/src/components/common/nav/InputComment.tsx index cb0e2eaf..a6fdd8d3 100644 --- a/src/components/common/nav/InputComment.tsx +++ b/src/components/common/nav/InputComment.tsx @@ -5,11 +5,19 @@ import { commentState } from '@recoil/review'; import { useRecoilState, useRecoilValue } from 'recoil'; import { putComments } from '@api/comments'; import { isModifyingCommentState, targetCommentIdState } from '@recoil/review'; +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(); @@ -18,6 +26,24 @@ export const InputComment: React.FC = () => { isModifyingCommentState, ); const targetCommentId = useRecoilValue(targetCommentIdState); + const queryClient = useQueryClient(); + + const { mutate: postCommentMutate } = useMutation({ + mutationFn: ({ comment, reviewId }: PostCommentMutationParams) => + postComments(comment, reviewId), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['reviewComments'] }); + }, + onError: () => console.log('error'), + }); + const { mutate: editCommentMutate } = useMutation({ + mutationFn: ({ comment, targetCommentId }: EditCommentMutationParams) => + putComments(comment, targetCommentId), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['reviewComments'] }); + }, + onError: () => console.log('error'), + }); const handleTextChange = (event: ChangeEvent) => { const inputText = event.target.value; @@ -26,13 +52,12 @@ export const InputComment: React.FC = () => { const handleSubmit = async () => { if (isModifyingComment) { - await putComments(comment, targetCommentId); + await editCommentMutate({ comment, targetCommentId }); setIsModifyingComment(false); } else { - await postComments(comment, reviewId); + await postCommentMutate({ comment, reviewId }); } setComment(''); - window.location.reload(); }; const handleKeyPress = (event: KeyboardEvent) => { if (event.key === 'Enter') { From 90c7fdc115bd195eb2e79a66f9d12e3fed6f9e0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=96=B4=EC=8A=B9=EC=A4=80?= Date: Wed, 10 Jan 2024 02:11:04 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Fix:=20=EB=8C=93=EA=B8=80=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EC=8B=9C=20comment=20=EC=B4=88=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DetailSectionBottom/DetailReviews.tsx | 2 +- src/components/common/modal/children/EditDelete.tsx | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/DetailSectionBottom/DetailReviews.tsx b/src/components/DetailSectionBottom/DetailReviews.tsx index f4ee83f7..ec4d9bd9 100644 --- a/src/components/DetailSectionBottom/DetailReviews.tsx +++ b/src/components/DetailSectionBottom/DetailReviews.tsx @@ -112,7 +112,7 @@ export default function DetailReviews({ reviewData }: reviewProps) { noun: '', verb: '', })); - }, 4000); + }, 3500); return () => clearTimeout(timer); } }, [alert]); diff --git a/src/components/common/modal/children/EditDelete.tsx b/src/components/common/modal/children/EditDelete.tsx index 08c259b7..1b859662 100644 --- a/src/components/common/modal/children/EditDelete.tsx +++ b/src/components/common/modal/children/EditDelete.tsx @@ -20,6 +20,7 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; import { useRecoilValue, useSetRecoilState } from 'recoil'; import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { commentState } from '@recoil/review'; const EditDelete: React.FC = () => { const rating = useRecoilValue(ratingState); @@ -35,6 +36,8 @@ const EditDelete: React.FC = () => { const navigate = useNavigate(); const setIsModalOpen = useSetRecoilState(isModalOpenState); const setModalChildren = useSetRecoilState(modalChildrenState); + const setComment = useSetRecoilState(commentState); + const queryClient = useQueryClient(); const handleEdit = () => { @@ -71,6 +74,7 @@ const EditDelete: React.FC = () => { } else if (title === '내 댓글') { await deleteCommentMutate(targetCommentId); setIsModalOpen(false); + setComment(''); } };