feat: 리뷰 삭제 추가

src/pages/customer/review/history/components/DeleteReviewModal.tsx

@@ -0,0 +1,39 @@
+import { Text } from "../../../../../components";
+import {
+  ModalOverlay,
+  ModalContent,
+  ModalMessage,
+  ModalButtons,
+  ModalButton,
+} from "../../../pet/info/components/Modal.styles";
+
+interface ModalProps {
+  isOpen: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+const DeleteReviewModal: React.FC<ModalProps> = ({
+  isOpen,
+  onConfirm,
+  onCancel,
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <ModalOverlay>
+      <ModalContent>
+        <ModalMessage>
+          <Text typo="subtitle200">정말 삭제하시겠습니까?</Text>
+          <Text typo="body400">삭제한 뒤에는 복구할 수 없어요</Text>
+        </ModalMessage>
+        <ModalButtons>
+          <ModalButton onClick={onConfirm}>예</ModalButton>
+          <ModalButton onClick={onCancel}>아니오</ModalButton>
+        </ModalButtons>
+      </ModalContent>
+    </ModalOverlay>
+  );
+};
+
+export default DeleteReviewModal;

src/pages/customer/review/history/components/ReviewedService.tsx

@@ -1,13 +1,17 @@
 import { useState, useEffect } from "react";
 import ReviewCard from "./ReviewCard";
 import { GetUserReviewsResponse } from "../../../../../types/customer/review";
-import { getUserReviews } from "../../../../../apis/customer/resources/review";
+import {
+  deleteReview,
+  getUserReviews,
+} from "../../../../../apis/customer/resources/review";
 import { useUserDetails } from "../../../../../hooks/useUserDetails";
 import NoReview from "./NoReview";
 import { useNavigate } from "react-router-dom";
 import { ROUTE } from "../../../../../constants/routes";
 import { useSetRecoilState } from "recoil";
 import { ReviewAtom, ReviewData } from "../../../../../atoms/reviewAtom";
+import DeleteReviewModal from "./DeleteReviewModal";
 
 interface review {
   reviewId?: number;
@@ -36,6 +40,43 @@ export default function ReviewedService() {
   const navigate = useNavigate();
   const setReviewData = useSetRecoilState(ReviewAtom);
 
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [selectedReviewId, setSelectedReviewId] = useState<number | null>(null);
+
+  const handleDeleteButton = (review: review) => {
+    setSelectedReviewId(review.reviewId || null);
+    setIsDeleteModalOpen(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!userId || !selectedReviewId) return;
+
+    try {
+      await deleteReview(userId, selectedReviewId);
+      // Update local state to remove the deleted review
+      if (reviews) {
+        setReviews({
+          ...reviews,
+          reviews: reviews.reviews?.filter(
+            (review) => review.reviewId !== selectedReviewId,
+          ),
+        });
+      }
+      alert("리뷰가 삭제되었습니다.");
+    } catch (error) {
+      console.error("Failed to delete review:", error);
+      alert("삭제 중 문제가 발생했습니다. 다시 시도해주세요.");
+    } finally {
+      setIsDeleteModalOpen(false);
+      setSelectedReviewId(null);
+    }
+  };
+
+  const handleDeleteCancel = () => {
+    setIsDeleteModalOpen(false);
+    setSelectedReviewId(null);
+  };
+
   const handleEditButton = (review: review) => {
     const reviewData: ReviewData = {
       userId: userId || 0,
@@ -103,9 +144,14 @@ export default function ReviewedService() {
           reviewText={review.contentDetail ?? ""}
           reviewImages={review.reviewImages ?? []}
           onEdit={() => handleEditButton(review)}
-          onDelete={() => alert(`리뷰 ${review.reviewId} 삭제 클릭!`)}
+          onDelete={() => handleDeleteButton(review)}
         />
       ))}
+      <DeleteReviewModal
+        isOpen={isDeleteModalOpen}
+        onConfirm={handleDeleteConfirm}
+        onCancel={handleDeleteCancel}
+      />
     </div>
   );
 }