Merge pull request #104 from FinalDoubleTen/FE-73--feat/reviewComment…

…QA/3rd Fe 73 feat/review comment qa/3rd
WePlanPlans · Jan 9, 2024 · 6277aa8 · 6277aa8
2 parents b1061f1 + 90c7fdc
commit 6277aa8
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 21 deletions.
diff --git 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);
+      }, 3500);
       return () => clearTimeout(timer);
     }
   }, [alert]);

diff --git 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 (
     <div className="mt-2 flex w-full items-center justify-between gap-3 py-2.5">
       <button className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2">

diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
@@ -29,7 +29,7 @@ export const ButtonPrimary: React.FC<ButtonProps> = ({
   return (
     <button
       onClick={onClick}
-      className={`btn-base bg-primary text-xs font-bold text-white disabled:cursor-not-allowed disabled:bg-gray3 ${className}`}
+      className={`btn-base bg-primary text-lg font-bold text-white disabled:cursor-not-allowed disabled:bg-gray3 ${className}`}
       disabled={disabled}>
       {children}
     </button>

diff --git 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
@@ -8,18 +8,28 @@ 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();
     setToastPopUp(() => ({
       isPopUp: true,
       noun: '리뷰',
@@ -38,10 +48,10 @@ const DeleteAlert = ({}) => {
           onClick={() => {
             setIsModalOpen(false);
           }}
-          className="text-xs">
+          className="text-sm">
           취소
         </ButtonWhite>
-        <ButtonPrimary onClick={handleDeleteButton} className="text-xs">
+        <ButtonPrimary onClick={handleDeleteButton} className="text-sm">
           삭제
         </ButtonPrimary>
       </div>

diff --git a/src/components/common/modal/children/EditDelete.tsx b/src/components/common/modal/children/EditDelete.tsx
@@ -19,6 +19,8 @@ import {
 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);
@@ -34,6 +36,9 @@ const EditDelete: React.FC = () => {
   const navigate = useNavigate();
   const setIsModalOpen = useSetRecoilState(isModalOpenState);
   const setModalChildren = useSetRecoilState(modalChildrenState);
+  const setComment = useSetRecoilState(commentState);
+
+  const queryClient = useQueryClient();
 
   const handleEdit = () => {
     if (title == '내 리뷰') {
@@ -55,13 +60,21 @@ 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();
+      setComment('');
     }
   };
 

diff --git 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<InputCommentProps> = () => {
   const [comment, setComment] = useRecoilState(commentState);
   const params = useParams();
@@ -18,6 +26,24 @@ export const InputComment: React.FC<InputCommentProps> = () => {
     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<HTMLInputElement>) => {
     const inputText = event.target.value;
@@ -26,13 +52,12 @@ export const InputComment: React.FC<InputCommentProps> = () => {
 
   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<HTMLInputElement>) => {
     if (event.key === 'Enter') {

diff --git a/src/components/common/toastpopup/ToastPopUp.tsx b/src/components/common/toastpopup/ToastPopUp.tsx
@@ -13,7 +13,7 @@ const ToastPopUp: React.FC<ToastPopUpProps> = ({ noun, verb }) => {
   useEffect(() => {
     const timeout = setTimeout(() => {
       setVisible(false);
-    }, 2000);
+    }, 3000);
 
     return () => clearTimeout(timeout);
   }, []);
@@ -27,11 +27,11 @@ const ToastPopUp: React.FC<ToastPopUpProps> = ({ 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',