@@ -6,25 +6,33 @@ import { css } from '@emotion/react';
 import Rating from '@/components/Rating';
 import Profile from '../Profile';
 import { formatDate } from '@/utils/format';
+import useModalStore from '@/stores/useModalStore';
+import useDeleteReview from '@/hooks/query/useDeleteReview';
+import ConfirmModal from '@/components/ConfirmModal';
 
 interface ReviewCardProps {
   review: Review;
-  onDelete?: () => void;
   showTitle: boolean;
   showUser: boolean;
   showDate: boolean;
   showDelete: boolean;
 }
 
-const ReviewCard = ({
-  review,
-  onDelete,
-  showTitle,
-  showUser,
-  showDate,
-  showDelete,
-}: ReviewCardProps) => {
-  // console.log(review.imgSrc.map((src, index) => src);
+const ReviewCard = ({ review, showTitle, showUser, showDate, showDelete }: ReviewCardProps) => {
+  const setModalName = useModalStore((state) => state.setModalName);
+  const { mutate } = useDeleteReview();
+
+  const handleDelete = () => {
+    mutate(
+      { reviewId: review.reviewId },
+      {
+        onSuccess: () => {
+          setModalName(null);
+        },
+      },
+    );
+  };
+
   return (
     <div css={reviewStyle}>
       <div className="titleStyle">
@@ -52,7 +60,21 @@ const ReviewCard = ({
             <Rating rating={Number(review.rating)} />
           </div>
         </div>
-        {showDelete && <DeleteIcon onDelete={onDelete || (() => {})} />}
+        {showDelete && (
+          <ConfirmModal
+            modalId={`my.review.delete.${review.reviewId}`}
+            onConfirm={handleDelete}
+            trigger={
+              <DeleteIcon onClick={() => setModalName(`my.review.delete.${review.reviewId}`)} />
+            }
+            message={
+              <div css={modalStyle}>
+                <p className="modalText">정말 리뷰를 삭제하시겠습니까?</p>
+                <p className="modalSubText">유저 평점은 삭제되지 않습니다</p>
+              </div>
+            }
+          />
+        )}
       </div>
       <div
         css={css`
@@ -134,15 +156,16 @@ const reviewStyle = css`
   .imgContainer {
     display: flex;
     justify-content: center;
-    width: 110px;
-    height: 120px;
+    width: 120px;
+    height: 100px;
     margin-bottom: 16px;
     border-radius: 5px;
     overflow: hidden;
   }
 
   img {
     width: 100%;
+    object-fit: cover;
   }
 
   .ratingContainer {
@@ -155,3 +178,17 @@ const reviewStyle = css`
     transform: translateY(-3px);
   }
 `;
+
+const modalStyle = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .modalText {
+    font-weight: 600;
+  }
+
+  .modalSubText {
+    font-size: 14px;
+    color: #999;
+  }
+`;

리뷰: _:hammer_and_wrench: Refactor suggestion_

**에러 처리 로직 추가 필요**

`handleDelete` 함수에서 mutation 실패 시의 에러 처리가 누락되어 있습니다.

다음과 같이 `onError` 핸들러를 추가하는 것을 제안합니다:

```diff
  const handleDelete = () => {
    mutate(
      { reviewId: review.reviewId },
      {
        onSuccess: () => {
          setModalName(null);
        },
+       onError: (error) => {
+         console.error('리뷰 삭제 실패:', error);
+         // 에러 메시지를 사용자에게 표시하는 로직 추가
+       },
      },
    );
  };
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
const ReviewCard = ({ review, showTitle, showUser, showDate, showDelete }: ReviewCardProps) => {
  const setModalName = useModalStore((state) => state.setModalName);
  const { mutate } = useDeleteReview();

  const handleDelete = () => {
    mutate(
      { reviewId: review.reviewId },
      {
        onSuccess: () => {
          setModalName(null);
        },
        onError: (error) => {
          console.error('리뷰 삭제 실패:', error);
          // 에러 메시지를 사용자에게 표시하는 로직 추가
        },
      },
    );
  };
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->