[251217] merge: gitlab develop_si 변경사항 병합

🤖 Generated with Claude Code

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

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 =
+  const reviewImage = reviewImages[currentImageIndex];
-    currentReview.reviewImageList && currentReview.reviewImageList[0];
-  const hasMultipleReviews = totalReviews > 1;
 
   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}