From 72b062ad1b0f39436f74af71141762642b9bfda8 Mon Sep 17 00:00:00 2001 From: optrader Date: Wed, 5 Nov 2025 05:30:33 +0900 Subject: [PATCH] =?UTF-8?q?[251105]=20fix:=20UserReviewPanel=20Review?= =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🕐 커밋 시간: 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 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • 소규모 기능 개선 --- .../src/hooks/useReviews/useReviews.js | 8 +++++++- .../UserReviewsPopup/UserReviewsPopup.jsx | 17 ++++++++++++---- .../src/views/UserReview/ShowUserReviews.jsx | 4 ++-- .../src/views/UserReview/UserReviewPanel.jsx | 20 +++++++++++++++---- 4 files changed, 38 insertions(+), 11 deletions(-) diff --git a/com.twin.app.shoptime/src/hooks/useReviews/useReviews.js b/com.twin.app.shoptime/src/hooks/useReviews/useReviews.js index 61dd7ade..a93c2a99 100644 --- a/com.twin.app.shoptime/src/hooks/useReviews/useReviews.js +++ b/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) => { diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx index 1173d912..80c9f89b 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx +++ b/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, - // images, - // reviewsWithImages, - // allReviews, + selectedImageIndex, // ✅ 추가: 선택된 이미지 인덱스 변경 감지 + images, // ✅ 추가: 이미지 데이터 변경 감지 + reviewsWithImages, // ✅ 추가: 이미지 있는 리뷰 변경 감지 + allReviews, // ✅ 추가: allReviews 변경 감지 ]); // 리뷰 네비게이션 핸들러 (All-Images 및 User-Reviews 모드) diff --git a/com.twin.app.shoptime/src/views/UserReview/ShowUserReviews.jsx b/com.twin.app.shoptime/src/views/UserReview/ShowUserReviews.jsx index b957f054..148656dc 100644 --- a/com.twin.app.shoptime/src/views/UserReview/ShowUserReviews.jsx +++ b/com.twin.app.shoptime/src/views/UserReview/ShowUserReviews.jsx @@ -124,10 +124,10 @@ const ShowUserReviews = ({ hasVideo, launchedFromPlayer, onFocus, onBlur }) => { return (
- {console.log('[ShowUserReviews_v2] ✅ 버튼 렌더링 시작:', { + {/* {console.log('[ShowUserReviews_v2] ✅ 버튼 렌더링 시작:', { reviewListLength: reviewListData?.length, version: REVIEW_VERSION - })} + })} */} { 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, }); - // 전체 리뷰에서 클릭한 리뷰의 실제 인덱스 찾기 - const realIndex = allReviews.findIndex((r) => r.rvwId === review.rvwId); + // ✅ filteredReviews에서 클릭한 리뷰의 인덱스 찾기 + // 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 }) => { {/* UserReviewsPopup 추가 - ProductAllSection과 동일한 방식 */} + {/* ✅ allReviews → filteredReviews 사용: 현재 필터의 리뷰 목록만 팝업에서 순회 */} { images={extractImagesFromReviews} selectedImageIndex={selectedImageIndex} reviewsWithImages={getReviewsWithImages} - allReviews={allReviews} + allReviews={filteredReviews} onModeChange={handleModeChange} />