feat: 리뷰 삭제 구현 #347

oduck-team · Dec 28, 2023 · 57af555 · 57af555
1 parent c7a4908
commit 57af555
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/src/features/reviews/components/ReviewCard/ReviewDeleteModal.tsx b/src/features/reviews/components/ReviewCard/ReviewDeleteModal.tsx
@@ -1,5 +1,8 @@
 import Button from "@/components/Button";
 import Modal from "@/components/Modal";
+import useToast from "@/components/Toast/useToast";
+import useReview from "@/features/reviews/hook/useReview";
+import useDebounce from "@/hooks/useDebounce";
 
 import { Text } from "./ReviewDeleteModal.style";
 
@@ -9,11 +12,24 @@ interface Props {
   onClose: () => void;
 }
 
+const DEBOUNCE_DELAY = 200;
+
 export default function ReviewDeleteModal({
   reviewId,
   animeId,
   onClose,
 }: Props) {
+  const { deleteReview } = useReview(animeId, onClose);
+  const { success } = useToast();
+
+  const handleClickDelete = useDebounce(() => {
+    deleteReview.mutate(reviewId, {
+      onSuccess: () => {
+        success({ message: "리뷰가 삭제되었어요." });
+      },
+    });
+  }, DEBOUNCE_DELAY);
+
   return (
     <Modal size="sm" onClose={onClose}>
       <Modal.Content>
@@ -23,7 +39,7 @@ export default function ReviewDeleteModal({
         <Button color="neutral" name="취소" isBlock onClick={onClose}>
           취소
         </Button>
-        <Button color="warn" name="삭제" isBlock>
+        <Button color="warn" name="삭제" isBlock onClick={handleClickDelete}>
           삭제
         </Button>
       </Modal.Actions>

diff --git a/src/features/reviews/components/ReviewCard/ReviewMoreButton.tsx b/src/features/reviews/components/ReviewCard/ReviewMoreButton.tsx
@@ -14,6 +14,7 @@ import useDebounce from "@/hooks/useDebounce";
 import useEvaluation from "../../hook/useEvaluation";
 import ShortReviewModal from "../ReviewRating/ShortReviewModal";
 
+import ReviewDeleteModal from "./ReviewDeleteModal";
 import {
   MoreButton,
   MyRating,
@@ -43,6 +44,7 @@ export default function ReviewMoreButton({
   const { isDropDownModalOpen, handleDropDownModalToggle } = useDropDownModal();
   const snackBar = useSnackBar();
   const [isReviewModalVisible, setIsReviewModalVisible] = useState(false);
+  const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
 
   const evaluationMutation = useEvaluation({ animeId });
 
@@ -67,7 +69,10 @@ export default function ReviewMoreButton({
     );
   }, DEBOUNCE_DELAY);
 
-  const handleReviewDeleteClick = () => console.log("리뷰삭제");
+  const handleReviewDeleteClick = () => {
+    handleDropDownModalToggle();
+    setIsDeleteModalVisible(true);
+  };
 
   const handleReviewSpoilerReport = () => {
     handleDropDownModalToggle();
@@ -151,6 +156,14 @@ export default function ReviewMoreButton({
             </RatingContainer>
           </ShortReviewModal>
         )}
+
+        {isDeleteModalVisible && (
+          <ReviewDeleteModal
+            reviewId={reviewId}
+            animeId={animeId}
+            onClose={() => setIsDeleteModalVisible(false)}
+          />
+        )}
       </AnimatePresence>
     </>
   );