리뷰/댓글 3차 QA 반영

src/components/DetailSectionBottom/DetailReviews.tsx

@@ -112,7 +112,7 @@ export default function DetailReviews({ reviewData }: reviewProps) {
           noun: '',
           verb: '',
         }));
-      }, 2000);
+      }, 3500);
       return () => clearTimeout(timer);
     }
   }, [alert]);

src/components/DetailSectionBottom/ReviewItem.tsx

@@ -172,7 +172,13 @@ const Item: React.FC<ItemProps> = (props: ItemProps) => {
             {showMoreKeywords &&
               Array.from({ length: Math.ceil(keywords.length / 2) }).map(
                 (_, lineIdx) => (
-                  <div key={lineIdx} className="mb-3 flex gap-2">
+                  <div
+                    key={lineIdx}
+                    className={`flex gap-2 ${
+                      lineIdx === Math.ceil(keywords.length / 2) - 1
+                        ? ''
+                        : ' mb-3'
+                    }`}>
                     {keywords
                       .slice(lineIdx * 2, lineIdx * 2 + 2)
                       .map((keyword, idx) => (

src/components/DetailSectionTop/DetailToursButtons.tsx

@@ -1,3 +1,6 @@
+
+import { useSetRecoilState } from 'recoil';
+import { isModifyingReviewState } from '@recoil/review';
 import { PenIcon } from '@components/common/icons/Icons';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useEffect } from 'react';
@@ -12,8 +15,10 @@ 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 },
     });

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>

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',

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>

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('');
     }
   };
 

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') {

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',