diff --git a/src/pages/customer/review/history/components/DeleteReviewModal.tsx b/src/pages/customer/review/history/components/DeleteReviewModal.tsx new file mode 100644 index 00000000..0c49b8f6 --- /dev/null +++ b/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 = ({ + isOpen, + onConfirm, + onCancel, +}) => { + if (!isOpen) return null; + + return ( + + + + 정말 삭제하시겠습니까? + 삭제한 뒤에는 복구할 수 없어요 + + + + 아니오 + + + + ); +}; + +export default DeleteReviewModal; diff --git a/src/pages/customer/review/history/components/ReviewedService.tsx b/src/pages/customer/review/history/components/ReviewedService.tsx index de35c3ed..db57c6f9 100644 --- a/src/pages/customer/review/history/components/ReviewedService.tsx +++ b/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(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)} /> ))} + ); }