diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.jsx index 4eb8c4a6..904239cc 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.jsx @@ -1,6 +1,7 @@ import React, { useCallback, useEffect, + useState, } from 'react'; import classNames from 'classnames'; @@ -26,17 +27,35 @@ export default function UserReviewDetail({ onNext, className, }) { + const [currentImageIndex, setCurrentImageIndex] = useState(0); + + // 새로운 리뷰가 로드될 때 이미지 인덱스 초기화 + useEffect(() => { + setCurrentImageIndex(0); + }, [currentReview]); + + const reviewImages = currentReview?.reviewImageList || []; + const hasMultipleImages = reviewImages.length > 1; + const handlePrevious = useCallback(() => { - if (onPrevious && currentIndex > 0) { + // 이미지가 여러 개이고 현재 이미지가 첫 번째가 아니면 이미지만 변경 + if (hasMultipleImages && currentImageIndex > 0) { + setCurrentImageIndex(prev => prev - 1); + } else if (onPrevious && currentIndex > 0) { + // 이미지가 첫 번째이면 이전 리뷰로 이동 onPrevious(); } - }, [onPrevious, currentIndex]); + }, [onPrevious, currentIndex, hasMultipleImages, currentImageIndex]); const handleNext = useCallback(() => { - if (onNext && currentIndex < totalReviews - 1) { + // 이미지가 여러 개이고 현재 이미지가 마지막이 아니면 이미지만 변경 + if (hasMultipleImages && currentImageIndex < reviewImages.length - 1) { + setCurrentImageIndex(prev => prev + 1); + } else if (onNext && currentIndex < totalReviews - 1) { + // 이미지가 마지막이면 다음 리뷰로 이동 onNext(); } - }, [onNext, currentIndex, totalReviews]); + }, [onNext, currentIndex, totalReviews, hasMultipleImages, currentImageIndex, reviewImages.length]); // 리뷰 데이터가 없을 때 처리 if (!currentReview) { @@ -47,9 +66,7 @@ export default function UserReviewDetail({ ); } - const reviewImage = - currentReview.reviewImageList && currentReview.reviewImageList[0]; - const hasMultipleReviews = totalReviews > 1; + const reviewImage = reviewImages[currentImageIndex]; const formatDate = (dateStr) => { const [year, month, day] = dateStr.split("-"); @@ -59,7 +76,7 @@ export default function UserReviewDetail({ return ( <> {/* Left Arrow - 이전 리뷰가 있을 때만 표시 */} - {hasMultipleReviews && currentIndex > 0 && ( + {(hasMultipleImages || currentIndex > 0) && ( {/* Right Arrow - 다음 리뷰가 있을 때만 표시 */} - {hasMultipleReviews && currentIndex < totalReviews - 1 && ( + {(hasMultipleImages || currentIndex < totalReviews - 1) && ( ); -} +} \ No newline at end of file