Feature/myprofile modal

src/components/Modal/ReviewModal/EditReviewModal.tsx

@@ -300,9 +300,6 @@ const EditReviewModal = ({
 
   return (
     <div>
-      <Button variant='purpleDark' size='xs' width='sm' onClick={() => setShowEditModal(true)}>
-        리뷰 수정하기
-      </Button>
       {isDesktop ? (
         <BasicModal
           type='review'

src/components/Modal/WineModal/EditWineModal.tsx

@@ -103,8 +103,13 @@ const EditWineModal = ({ wine, showEditModal, setShowEditModal }: EditWineModalP
   const onSubmit = async (form: WineForm) => {
     try {
       const file = form.wineImage?.[0];
-      const imageUrl = file ? await uploadImage(file) : wine.image;
+      let imageUrl = file ? await uploadImage(file) : wine.image;
 
+      if (file) {
+        const uploaded = await uploadImage(file);
+        imageUrl = uploaded + `?t=${Date.now()}`; // 캐시 방지
+        setPreviewImage(imageUrl); // 이미지 갱신
+      }
       updateWineMutation.mutate({
         wineId: wine.wineId,
         name: form.wineName,

src/components/my-profile/ReviewList.tsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { useInfiniteQuery } from '@tanstack/react-query';
 
 import { getMyReviews } from '@/api/myReviews';
 import DotIcon from '@/assets/icons/dot.svg';
 import { MyCard } from '@/components/common/card/MyCard';
 import MenuDropdown from '@/components/common/dropdown/MenuDropdown';
+import DeleteModal from '@/components/Modal/DeleteModal/DeleteModal';
+import EditReviewModal from '@/components/Modal/ReviewModal/EditReviewModal';
 import { Badge } from '@/components/ui/badge';
 import { useInfiniteScroll } from '@/hooks/useInfiniteScroll';
 import { MyReview } from '@/types/MyReviewsTypes';
@@ -23,12 +25,14 @@ interface ReviewListProps {
  *
  */
 export function ReviewList({ setTotalCount }: ReviewListProps) {
+  const [editReview, setEditReview] = useState<MyReview | null>(null);
+  const [deleteReviewId, setDeleteReviewId] = useState<number | null>(null);
   const observerRef = useRef<HTMLDivElement | null>(null);
 
   // useInfiniteQuery 훅으로 리뷰 데이터를 무한 스크롤 형태로 조회
   const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
-      queryKey: ['myReviews'],
+      queryKey: ['reviews'],
       queryFn: ({ pageParam = 0 }) => getMyReviews({ cursor: pageParam, limit: PAGE_LIMIT }),
       initialPageParam: 0,
       getNextPageParam: (lastPage) => lastPage.nextCursor ?? null,
@@ -82,11 +86,39 @@ export function ReviewList({ setTotalCount }: ReviewListProps) {
                 { label: '수정하기', value: 'edit' },
                 { label: '삭제하기', value: 'delete' },
               ]}
-              onSelect={(value) => console.log(`${value} clicked: review id=${review.id}`)}
+              onSelect={(value) => {
+                if (value === 'edit') {
+                  setEditReview(review);
+                } else if (value === 'delete') {
+                  setDeleteReviewId(review.id);
+                }
+              }}
             />
           }
         />
       ))}
+      {editReview && (
+        <EditReviewModal
+          wineName={editReview.wine.name}
+          reviewData={editReview}
+          showEditModal={!!editReview}
+          setShowEditModal={(open) => {
+            if (!open) setEditReview(null);
+          }}
+        />
+      )}
+
+      {deleteReviewId !== null && (
+        <DeleteModal
+          type='review'
+          id={deleteReviewId}
+          showDeleteModal={true}
+          setShowDeleteModal={(open) => {
+            if (!open) setDeleteReviewId(null);
+          }}
+        />
+      )}
+
       {/* 옵저버 감지 요소 */}
       <div ref={observerRef} className='w-1 h-1' />
     </div>

src/components/my-profile/WineList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { useInfiniteQuery } from '@tanstack/react-query';
 
@@ -9,6 +9,9 @@ import MenuDropdown from '@/components/common/dropdown/MenuDropdown';
 import { Badge } from '@/components/ui/badge';
 import { useInfiniteScroll } from '@/hooks/useInfiniteScroll';
 
+import DeleteModal from '../Modal/DeleteModal/DeleteModal';
+import EditWineModal from '../Modal/WineModal/EditWineModal';
+
 import type { MyWine, MyWinesResponse } from '@/types/MyWinesTypes';
 
 const PAGE_LIMIT = 10;
@@ -24,11 +27,13 @@ interface WineListProps {
  */
 export function WineList({ setTotalCount }: WineListProps) {
   const observerRef = useRef<HTMLDivElement | null>(null);
+  const [editWine, setEditWine] = useState<MyWine | null>(null);
+  const [deleteWineId, setDeleteWineId] = useState<number | null>(null);
 
   //useInfiniteQuery 훅으로 와인 데이터를 무한 스크롤 형태로 조회
   const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
-      queryKey: ['myWines'],
+      queryKey: ['wines'],
       queryFn: ({ pageParam = 0 }) => getMyWines({ cursor: pageParam, limit: PAGE_LIMIT }),
       initialPageParam: 0,
       getNextPageParam: (lastPage: MyWinesResponse | undefined) => lastPage?.nextCursor ?? null,
@@ -74,7 +79,13 @@ export function WineList({ setTotalCount }: WineListProps) {
                 { label: '수정하기', value: 'edit' },
                 { label: '삭제하기', value: 'delete' },
               ]}
-              onSelect={(value) => console.log(`${value} clicked for wine id: ${wine.id}`)}
+              onSelect={(value) => {
+                if (value === 'edit') {
+                  setEditWine(wine);
+                } else if (value === 'delete') {
+                  setDeleteWineId(wine.id);
+                }
+              }}
             />
           }
         >
@@ -93,6 +104,34 @@ export function WineList({ setTotalCount }: WineListProps) {
           </div>
         </ImageCard>
       ))}
+      {editWine && (
+        <EditWineModal
+          wine={{
+            wineId: editWine.id, // MyWine → EditWineModal 타입 변환
+            name: editWine.name,
+            price: editWine.price,
+            region: editWine.region,
+            image: editWine.image,
+            type: editWine.type as 'RED' | 'WHITE' | 'SPARKLING',
+            avgRating: editWine.avgRating,
+          }}
+          showEditModal={true}
+          setShowEditModal={(isOpen) => {
+            if (!isOpen) setEditWine(null);
+          }}
+        />
+      )}
+
+      {deleteWineId !== null && (
+        <DeleteModal
+          type='wine'
+          id={deleteWineId}
+          showDeleteModal={true}
+          setShowDeleteModal={(isOpen) => {
+            if (!isOpen) setDeleteWineId(null);
+          }}
+        />
+      )}
       {/* 옵저버 감지 요소 */}
       <div ref={observerRef} className='w-1 h-1' />
     </div>