From eee8e73b97cd930100bd804141f5f59c82085076 Mon Sep 17 00:00:00 2001
From: "junghoon86.park" <junghoon86.park@lgepartner.com>
Date: Wed, 17 Dec 2025 16:12:29 +0900
Subject: [PATCH] =?UTF-8?q?[=EB=A6=AC=EB=B7=B0=20=ED=8C=9D=EC=97=85]=20?=
 =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EA=B0=80=20?=
 =?UTF-8?q?=EC=97=AC=EB=9F=AC=EA=B0=9C=EC=9D=BC=EC=8B=9C=EC=97=90=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - 리뷰 이미지가 여러개일때 handlePrevious,handleNext 눌렀을때 이미지부터 변경되도록 수정.
---
 .../UserReviewDetail/UserReviewDetail.jsx     | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

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) && (
         <SpottableButton
           className={css.leftArrow}
           onClick={handlePrevious}
@@ -128,7 +145,7 @@ export default function UserReviewDetail({
         </div>
       </div>
       {/* Right Arrow - 다음 리뷰가 있을 때만 표시 */}
-      {hasMultipleReviews && currentIndex < totalReviews - 1 && (
+      {(hasMultipleImages || currentIndex < totalReviews - 1) && (
         <SpottableButton
           className={css.rightArrow}
           onClick={handleNext}
@@ -138,4 +155,4 @@ export default function UserReviewDetail({
       )}
     </>
   );
-}
+}
\ No newline at end of file