[251104] fix: UserReviewPanel 필터 캐싱 버그 해결

필터링된 리뷰 데이터가 상품 변경 후에도 유지되는 문제를 해결했습니다.

**문제:**
1. 상품 A에서 필터(5 star) 적용 후 Back
2. 상품 B로 이동 시 상품 A의 필터링된 리뷰 데이터가 계속 표시됨
3. 리뷰가 없는 상품은 [Show User Reviews] 버튼이 안 보임
4. 리뷰가 있는 상품도 필터 미적용 전까지 이전 리뷰가 노출됨

**근본 원인:**
- Redux의 filteredReviewListData와 currentReviewFilter가 상품 변경 후에도 유지됨
- useReviews 훅이 새로운 상품 로드는 하지만 필터는 초기화하지 않음

**해결책:**
1. useReviews 훅: prdtId 변경 시 자동으로 clearReviewFilter() dispatch
2. ProductAllSection: productData.prdtId 변경 시 필터 초기화
3. UserReviewPanel: Back 버튼 클릭 시 Redux 필터 명시적 초기화

**수정 파일:**
- src/hooks/useReviews/useReviews.js (필터 초기화 로직 추가)
- src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx (상품 변경 감지)
- src/views/UserReview/UserReviewPanel.jsx (Back 버튼에서 필터 초기화)

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-04 16:04:21 +09:00
parent f087ec6063
commit dac4e8f81c
3 changed files with 42 additions and 2 deletions

View File

@@ -1,6 +1,6 @@
import { useState, useMemo, useEffect, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { getUserReviews, getUserReviewList, getReviewFilters } from '../../actions/productActions';
import { getUserReviews, getUserReviewList, getReviewFilters, clearReviewFilter } from '../../actions/productActions';
import fp from '../../utils/fp';
const DISPLAY_SIZE = 3; // 화면에 표시할 리뷰 개수
@@ -236,6 +236,26 @@ const useReviews = (prdtId, patnrId, _deprecatedReviewVersion) => {
}
}, [prdtId, patnrId, loadedPrdtId, loadedFiltersPrdtId, loadReviews]);
// ✅ CRITICAL FIX: prdtId가 변경되면 Redux의 필터 상태를 초기화
// 이전 상품의 필터가 새로운 상품에 잘못 적용되는 문제를 해결
useEffect(() => {
if (prdtId && currentReviewFilter) {
const hasPrdtIdChanged = prdtId !== loadedPrdtId;
if (hasPrdtIdChanged) {
console.log('[useReviews] 🔄 prdtId 변경 감지 - 필터 초기화:', {
previousPrdtId: loadedPrdtId,
newPrdtId: prdtId,
clearedFilter: currentReviewFilter,
reason: '새로운 상품으로 전환되었으므로 이전 필터 제거'
});
// Redux의 필터 상태 초기화
dispatch(clearReviewFilter());
}
}
}, [prdtId, loadedPrdtId, currentReviewFilter, dispatch]);
// 리뷰 데이터가 로드되면 로딩 상태 업데이트
useEffect(() => {
if (allReviews.length > 0 && isLoading) {

View File

@@ -29,7 +29,7 @@ import indicatorDefaultImage
// import { pushPanel } from '../../../actions/panelActions';
import { minimizeModalMedia } from '../../../actions/mediaActions';
import { pauseFullscreenVideo } from '../../../actions/playActions';
import { resetShowAllReviews } from '../../../actions/productActions';
import { resetShowAllReviews, clearReviewFilter } from '../../../actions/productActions';
import {
clearAllToasts,
removeToast,
@@ -362,6 +362,21 @@ export default function ProductAllSection({
dispatch(resetShowAllReviews());
}, []); // 빈 dependency array = 마운트 시에만 실행
// ✅ CRITICAL FIX: 상품이 변경되면 리뷰 필터를 초기화
// 이전 상품의 필터가 새로운 상품에 적용되는 버그 방지
useEffect(() => {
if (productData && productData.prdtId) {
console.log('[ProductAllSection] 🔄 상품 변경 감지 - 리뷰 필터 초기화:', {
prdtId: productData.prdtId,
productName: productData.productNm || productData.prdtNm,
reason: '새로운 상품으로 전환되었으므로 이전 필터 제거'
});
// Redux의 필터 상태 초기화
dispatch(clearReviewFilter());
}
}, [productData?.prdtId, dispatch]); // prdtId가 변경될 때마다 실행
// BUY NOW 버튼 클릭 핸들러 - Toast로 BuyOption 표시
const handleBuyNowClick = useCallback((e) => {
// console.log('[BuyNow] Buy Now button clicked');

View File

@@ -358,6 +358,11 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
}, [clearAllFilters]);
const handleBackButton = useCallback(() => {
// ✅ CRITICAL FIX: Back 버튼 클릭 시 Redux 필터 상태 초기화
// 필터가 유지되어 ProductAllSection으로 돌아갔을 때 잘못된 리뷰 표시 방지
console.log('[UserReviewPanel] 🔙 Back 버튼 클릭 - Redux 필터 초기화');
dispatch(clearReviewFilter());
if (bgVideoInfo && bgVideoInfo.hasVideo) {
dispatch(
updatePanel({