diff --git a/src/components/Modal/ReviewModal/EditReviewModal.tsx b/src/components/Modal/ReviewModal/EditReviewModal.tsx index 7fcb47f..7c44276 100644 --- a/src/components/Modal/ReviewModal/EditReviewModal.tsx +++ b/src/components/Modal/ReviewModal/EditReviewModal.tsx @@ -300,9 +300,6 @@ const EditReviewModal = ({ return (
- {isDesktop ? ( { 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, diff --git a/src/components/my-profile/ReviewList.tsx b/src/components/my-profile/ReviewList.tsx index 21b5525..18e7626 100644 --- a/src/components/my-profile/ReviewList.tsx +++ b/src/components/my-profile/ReviewList.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useInfiniteQuery } from '@tanstack/react-query'; @@ -6,6 +6,8 @@ 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(null); + const [deleteReviewId, setDeleteReviewId] = useState(null); const observerRef = useRef(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 && ( + { + if (!open) setEditReview(null); + }} + /> + )} + + {deleteReviewId !== null && ( + { + if (!open) setDeleteReviewId(null); + }} + /> + )} + {/* 옵저버 감지 요소 */}
diff --git a/src/components/my-profile/WineList.tsx b/src/components/my-profile/WineList.tsx index 2652a07..9a7c0d2 100644 --- a/src/components/my-profile/WineList.tsx +++ b/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(null); + const [editWine, setEditWine] = useState(null); + const [deleteWineId, setDeleteWineId] = useState(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) {
))} + {editWine && ( + { + if (!isOpen) setEditWine(null); + }} + /> + )} + + {deleteWineId !== null && ( + { + if (!isOpen) setDeleteWineId(null); + }} + /> + )} {/* 옵저버 감지 요소 */}