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);
+ }}
+ />
+ )}
{/* 옵저버 감지 요소 */}