[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:
@@ -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) {
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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({
|
||||
|
||||
Reference in New Issue
Block a user