[251105] fix: UserReviewPanel Review팝업 수정

🕐 커밋 시간: 2025. 11. 05. 05:30:32

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +38줄
  • 삭제: -11줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/hooks/useReviews/useReviews.js
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx
  ~ com.twin.app.shoptime/src/views/UserReview/ShowUserReviews.jsx
  ~ com.twin.app.shoptime/src/views/UserReview/UserReviewPanel.jsx

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • 소규모 기능 개선

com.twin.app.shoptime/src/hooks/useReviews/useReviews.js

@@ -592,9 +592,15 @@ const useReviews = (prdtId, patnrId, _deprecatedReviewVersion) => {
   ]);
 
   // 필터 변경 시 UserReviewPanel 페이지도 초기화
+  // ✅ 클라이언트 필터 + API 필터 모두 감시
   useEffect(() => {
+    console.log('[useReviews] 필터 변경 감지 - userReviewPanelPage 초기화:', {
+      filterType: currentFilter.type,
+      filterValue: currentFilter.value,
+      apiFilter: currentReviewFilter,
+    });
     setUserReviewPanelPage(0);
-  }, [currentFilter.type, currentFilter.value]);
+  }, [currentFilter.type, currentFilter.value, currentReviewFilter]);
 
   // Single Filter 적용 함수
   const applyFilter = useCallback((type, value) => {

com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx

@@ -105,25 +105,34 @@ export default function UserReviewsPopup({
   const [currentReviewIndex, setCurrentReviewIndex] = useState(0);
 
   // 모드별 리뷰 인덱스 초기화
+  // ✅ selectedImageIndex 변경 감지 추가: 클릭한 리뷰가 팝업에 표시되도록
   useEffect(() => {
+    console.log('[UserReviewsPopup] Mode or selectedImageIndex changed:', {
+      mode,
+      selectedImageIndex,
+      allReviewsLength: allReviews?.length || 0,
+    });
+
     if (mode === "all-images" && images && images[selectedImageIndex]) {
       const selectedImage = images[selectedImageIndex];
       const reviewIndex = reviewsWithImages.findIndex(
         (review) => review.rvwId === selectedImage.reviewId
       );
       if (reviewIndex !== -1) {
+        console.log('[UserReviewsPopup] all-images mode - found review index:', reviewIndex);
         setCurrentReviewIndex(reviewIndex);
       }
     } else if (mode === "user-reviews") {
       // User-Reviews 모드: selectedImageIndex를 그대로 사용
+      console.log('[UserReviewsPopup] user-reviews mode - setting index to:', selectedImageIndex);
       setCurrentReviewIndex(selectedImageIndex);
     }
   }, [
     mode,
-    // selectedImageIndex,
+    selectedImageIndex,  // ✅ 추가: 선택된 이미지 인덱스 변경 감지
-    // images,
+    images,             // ✅ 추가: 이미지 데이터 변경 감지
-    // reviewsWithImages,
+    reviewsWithImages,  // ✅ 추가: 이미지 있는 리뷰 변경 감지
-    // allReviews,
+    allReviews,         // ✅ 추가: allReviews 변경 감지
   ]);
 
   // 리뷰 네비게이션 핸들러 (All-Images 및 User-Reviews 모드)

com.twin.app.shoptime/src/views/UserReview/ShowUserReviews.jsx

@@ -124,10 +124,10 @@ const ShowUserReviews = ({ hasVideo, launchedFromPlayer, onFocus, onBlur }) => {
 
   return (
     <div className={css.showUserReviews__wrapper}>
-      {console.log('[ShowUserReviews_v2] ✅ 버튼 렌더링 시작:', {
+      {/* {console.log('[ShowUserReviews_v2] ✅ 버튼 렌더링 시작:', {
         reviewListLength: reviewListData?.length,
         version: REVIEW_VERSION
-      })}
+      })} */}
       <SpottableComponent
         className={css.showUserReviews__button}
         onClick={handleShowUserReviewsClick}

com.twin.app.shoptime/src/views/UserReview/UserReviewPanel.jsx

@@ -49,6 +49,7 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
     currentReviewFilter,
     // 전체 리뷰 데이터 (팝업용)
     allReviews,
+    filteredReviews,  // ✅ 필터링된 전체 리뷰 (팝업에서 사용)
     getReviewsWithImages,
     extractImagesFromReviews,
   } = useReviews(prdtId, patnrId);  // REVIEW_VERSION 상수에 따라 자동으로 API 선택
@@ -404,21 +405,31 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
   }, [dispatch, bgVideoInfo]);
 
   // 리뷰 클릭 핸들러 - ProductAllSection의 UserReviews.jsx 패턴
+  // ✅ filteredReviews 사용: 현재 필터에 적용된 리뷰 목록 내에서 찾기
   const handleReviewClick = useCallback(
     (review, index) => {
       console.log('[UserReviewPanel] Review clicked, opening popup:', {
         rvwId: review.rvwId,
         index,
+        currentFilter,
+        filteredReviewsLength: filteredReviews.length,
       });
 
-      // 전체 리뷰에서 클릭한 리뷰의 실제 인덱스 찾기
+      // ✅ filteredReviews에서 클릭한 리뷰의 인덱스 찾기
-      const realIndex = allReviews.findIndex((r) => r.rvwId === review.rvwId);
+      // filteredReviews는 현재 필터에 적용된 전체 리뷰 목록
+      const realIndex = filteredReviews.findIndex((r) => r.rvwId === review.rvwId);
+
+      console.log('[UserReviewPanel] Review index mapping:', {
+        localIndex: index,
+        realIndexInFiltered: realIndex,
+        selectedIndex: realIndex >= 0 ? realIndex : index,
+      });
 
       setSelectedImageIndex(realIndex >= 0 ? realIndex : index);
       setPopupMode('user-reviews');
       setIsPopupOpen(true);
     },
-    [allReviews]
+    [filteredReviews, currentFilter]
   );
 
   // 팝업 닫기 핸들러
@@ -696,6 +707,7 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
       </TBody>
 
       {/* UserReviewsPopup 추가 - ProductAllSection과 동일한 방식 */}
+      {/* ✅ allReviews → filteredReviews 사용: 현재 필터의 리뷰 목록만 팝업에서 순회 */}
       <UserReviewsPopup
         open={isPopupOpen}
         onClose={handleClosePopup}
@@ -703,7 +715,7 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
         images={extractImagesFromReviews}
         selectedImageIndex={selectedImageIndex}
         reviewsWithImages={getReviewsWithImages}
-        allReviews={allReviews}
+        allReviews={filteredReviews}
         onModeChange={handleModeChange}
       />
     </TPanel>