optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[리뷰패널 수정]

Browse Source 
- 리뷰 shopperhouse poc종료로 인하여 키워드, 단어부분에 대한 api를 내려주지않는다고 하여 우선 주석처리.
This commit is contained in:
junghoon86.park
2025-11-28 09:34:06 +09:00
parent 2289001006
commit 8ebaf3f19a
1 changed files with 144 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
com.twin.app.shoptime/src/views/UserReview/UserReviewPanel.jsx
View File

@@ -1,18 +1,29 @@
import React, { useCallback, useEffect, useState } from 'react'; import React, {
useCallback,
useEffect,
useState,
} from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { popPanel, updatePanel } from '../../actions/panelActions'; import {
import { getUserReviewList, clearReviewFilter } from '../../actions/productActions'; popPanel,
updatePanel,
} from '../../actions/panelActions';
import {
clearReviewFilter,
getUserReviewList,
} from '../../actions/productActions';
import TBody from '../../components/TBody/TBody'; import TBody from '../../components/TBody/TBody';
import TPanel from '../../components/TPanel/TPanel'; import TPanel from '../../components/TPanel/TPanel';
import useReviews, { REVIEW_VERSION } from '../../hooks/useReviews/useReviews'; import useReviews, { REVIEW_VERSION } from '../../hooks/useReviews/useReviews';
import fp from '../../utils/fp';
import { panel_names } from '../../utils/Config'; import { panel_names } from '../../utils/Config';
import { createDebugHelpers } from '../../utils/debug'; import { createDebugHelpers } from '../../utils/debug';
import fp from '../../utils/fp';
import StarRating from '../DetailPanel/components/StarRating'; import StarRating from '../DetailPanel/components/StarRating';
import UserReviewsPopup from '../DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup'; import UserReviewsPopup
from '../DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup';
import FilterItemButton from './components/FilterItemButton'; import FilterItemButton from './components/FilterItemButton';
import UserReviewsList from './components/UserReviewsList'; import UserReviewsList from './components/UserReviewsList';
import UserReviewHeader from './UserReviewHeader'; import UserReviewHeader from './UserReviewHeader';
@@ -178,63 +189,63 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
}, [filters]); }, [filters]);
// API 기반 KEYWORDS 필터 데이터 추출 (IF-LGSP-100) // API 기반 KEYWORDS 필터 데이터 추출 (IF-LGSP-100)
const keywordsFilterData = React.useMemo(() => { // const keywordsFilterData = React.useMemo(() => {
if (!filters || !Array.isArray(filters)) { // if (!filters || !Array.isArray(filters)) {
return []; // return [];
} // }
const keywordsFilter = filters.find((f) => f.filterTpCd === 'KEYWORDS'); // const keywordsFilter = filters.find((f) => f.filterTpCd === 'KEYWORDS');
if (!keywordsFilter) { // if (!keywordsFilter) {
dlog('[UserReviewPanel] ⚠️ KEYWORDS 필터 데이터 없음'); // dlog('[UserReviewPanel] ⚠️ KEYWORDS 필터 데이터 없음');
return []; // return [];
} // }
dlog('[UserReviewPanel] 🎯 KEYWORDS 필터 데이터 추출:', { // dlog('[UserReviewPanel] 🎯 KEYWORDS 필터 데이터 추출:', {
keywordsFilter, // keywordsFilter,
filterItems: keywordsFilter.filter, // filterItems: keywordsFilter.filter,
}); // });
// filter 배열을 그대로 반환 (filterNm, filterNmCnt, filterTpVal 포함) // // filter 배열을 그대로 반환 (filterNm, filterNmCnt, filterTpVal 포함)
return Array.isArray(keywordsFilter.filter) ? keywordsFilter.filter : []; // return Array.isArray(keywordsFilter.filter) ? keywordsFilter.filter : [];
}, [filters]); // }, [filters]);
// API 기반 SENTIMENT 필터 데이터 추출 (IF-LGSP-100) // API 기반 SENTIMENT 필터 데이터 추출 (IF-LGSP-100)
const sentimentFilterData = React.useMemo(() => { // const sentimentFilterData = React.useMemo(() => {
if (!filters || !Array.isArray(filters)) { // if (!filters || !Array.isArray(filters)) {
return {}; // return {};
} // }
const sentimentFilter = filters.find((f) => f.filterTpCd === 'SENTIMENT'); // const sentimentFilter = filters.find((f) => f.filterTpCd === 'SENTIMENT');
if (!sentimentFilter) { // if (!sentimentFilter) {
dlog('[UserReviewPanel] ⚠️ SENTIMENT 필터 데이터 없음'); // dlog('[UserReviewPanel] ⚠️ SENTIMENT 필터 데이터 없음');
return {}; // return {};
} // }
dlog('[UserReviewPanel] 🎯 SENTIMENT 필터 데이터 추출:', { // dlog('[UserReviewPanel] 🎯 SENTIMENT 필터 데이터 추출:', {
sentimentFilter, // sentimentFilter,
filterItems: sentimentFilter.filter, // filterItems: sentimentFilter.filter,
}); // });
// filter 배열을 { filterTpVal: filterNmCnt } 형태로 변환 // // filter 배열을 { filterTpVal: filterNmCnt } 형태로 변환
const sentimentMap = {}; // const sentimentMap = {};
if (Array.isArray(sentimentFilter.filter)) { // if (Array.isArray(sentimentFilter.filter)) {
sentimentFilter.filter.forEach((item) => { // sentimentFilter.filter.forEach((item) => {
sentimentMap[item.filterTpVal] = item.filterNmCnt; // sentimentMap[item.filterTpVal] = item.filterNmCnt;
}); // });
} // }
return sentimentMap; // return sentimentMap;
}, [filters]); // }, [filters]);
const getApiKeywordClickHandler = useCallback( // const getApiKeywordClickHandler = useCallback(
(keywordValue) => () => handleApiKeywordsFilter(keywordValue), // (keywordValue) => () => handleApiKeywordsFilter(keywordValue),
[handleApiKeywordsFilter] // [handleApiKeywordsFilter]
); // );
const getApiSentimentClickHandler = useCallback( // const getApiSentimentClickHandler = useCallback(
(sentimentValue) => () => handleApiSentimentFilter(sentimentValue), // (sentimentValue) => () => handleApiSentimentFilter(sentimentValue),
[handleApiSentimentFilter] // [handleApiSentimentFilter]
); // );
const handleApiRatingFilter = useCallback( const handleApiRatingFilter = useCallback(
(rating) => { (rating) => {
if (!prdtId || !patnrId) { if (!prdtId || !patnrId) {
@@ -285,94 +296,94 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
const handle1StarsFilter = useCallback(() => handleApiRatingFilter(1), [handleApiRatingFilter]); const handle1StarsFilter = useCallback(() => handleApiRatingFilter(1), [handleApiRatingFilter]);
// API 기반 KEYWORDS 필터 핸들러 // API 기반 KEYWORDS 필터 핸들러
const handleApiKeywordsFilter = useCallback( // const handleApiKeywordsFilter = useCallback(
(keyword) => { // (keyword) => {
if (!prdtId || !patnrId) { // if (!prdtId || !patnrId) {
dwarn('[UserReviewPanel] ⚠️ API 호출 실패: prdtId 또는 patnrId 없음'); // dwarn('[UserReviewPanel] ⚠️ API 호출 실패: prdtId 또는 patnrId 없음');
return; // return;
} // }
dlog('[UserReviewPanel] 🔄 키워드 필터 API 호출:', { keyword, prdtId, patnrId }); // dlog('[UserReviewPanel] 🔄 키워드 필터 API 호출:', { keyword, prdtId, patnrId });
setForceScrollToTop(true); // setForceScrollToTop(true);
dispatch( // dispatch(
getUserReviewList({ // getUserReviewList({
prdtId, // prdtId,
patnrId, // patnrId,
filterTpCd: 'KEYWORDS', // filterTpCd: 'KEYWORDS',
filterTpVal: keyword, // filterTpVal: keyword,
pageSize: 100, // pageSize: 100,
pageNo: 1, // pageNo: 1,
}) // })
); // );
}, // },
[prdtId, patnrId, dispatch] // [prdtId, patnrId, dispatch]
); // );
// API 기반 SENTIMENT 필터 핸들러 // API 기반 SENTIMENT 필터 핸들러
const handleApiSentimentFilter = useCallback( // const handleApiSentimentFilter = useCallback(
(sentiment) => { // (sentiment) => {
if (!prdtId || !patnrId) { // if (!prdtId || !patnrId) {
dwarn('[UserReviewPanel] ⚠️ API 호출 실패: prdtId 또는 patnrId 없음'); // dwarn('[UserReviewPanel] ⚠️ API 호출 실패: prdtId 또는 patnrId 없음');
return; // return;
} // }
dlog('[UserReviewPanel] 🔄 감정 필터 API 호출:', { sentiment, prdtId, patnrId }); // dlog('[UserReviewPanel] 🔄 감정 필터 API 호출:', { sentiment, prdtId, patnrId });
setForceScrollToTop(true); // setForceScrollToTop(true);
if (sentiment === 'all') { // if (sentiment === 'all') {
// ALL 필터로 리뷰 재로드 // // ALL 필터로 리뷰 재로드
dispatch( // dispatch(
getUserReviewList({ // getUserReviewList({
prdtId, // prdtId,
patnrId, // patnrId,
filterTpCd: 'ALL', // filterTpCd: 'ALL',
pageSize: 100, // pageSize: 100,
pageNo: 1, // pageNo: 1,
}) // })
); // );
} else { // } else {
// SENTIMENT 필터로 리뷰 조회 // // SENTIMENT 필터로 리뷰 조회
dispatch( // dispatch(
getUserReviewList({ // getUserReviewList({
prdtId, // prdtId,
patnrId, // patnrId,
filterTpCd: 'SENTIMENT', // filterTpCd: 'SENTIMENT',
filterTpVal: sentiment, // filterTpVal: sentiment,
pageSize: 100, // pageSize: 100,
pageNo: 1, // pageNo: 1,
}) // })
); // );
} // }
}, // },
[prdtId, patnrId, dispatch] // [prdtId, patnrId, dispatch]
); // );
const handleAromaClick = useCallback( // const handleAromaClick = useCallback(
() => handleApiKeywordsFilter('Aroma'), // () => handleApiKeywordsFilter('Aroma'),
[handleApiKeywordsFilter] // [handleApiKeywordsFilter]
); // );
const handleVanillaClick = useCallback( // const handleVanillaClick = useCallback(
() => handleApiKeywordsFilter('Vanilla'), // () => handleApiKeywordsFilter('Vanilla'),
[handleApiKeywordsFilter] // [handleApiKeywordsFilter]
); // );
const handleCinnamonClick = useCallback( // const handleCinnamonClick = useCallback(
() => handleApiKeywordsFilter('Cinnamon'), // () => handleApiKeywordsFilter('Cinnamon'),
[handleApiKeywordsFilter] // [handleApiKeywordsFilter]
); // );
const handleQualityClick = useCallback( // const handleQualityClick = useCallback(
() => handleApiKeywordsFilter('Quality'), // () => handleApiKeywordsFilter('Quality'),
[handleApiKeywordsFilter] // [handleApiKeywordsFilter]
); // );
const handlePositiveClick = useCallback( // const handlePositiveClick = useCallback(
() => handleApiSentimentFilter('positive'), // () => handleApiSentimentFilter('positive'),
[handleApiSentimentFilter] // [handleApiSentimentFilter]
); // );
const handleNegativeClick = useCallback( // const handleNegativeClick = useCallback(
() => handleApiSentimentFilter('negative'), // () => handleApiSentimentFilter('negative'),
[handleApiSentimentFilter] // [handleApiSentimentFilter]
); // );
// forceScrollToTop 리셋 - 스크롤 리셋 완료 후 false로 변경 // forceScrollToTop 리셋 - 스크롤 리셋 완료 후 false로 변경
useEffect(() => { useEffect(() => {
@@ -617,7 +628,7 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
</div> </div>
</div> </div>
<div className={css.reviewsSection__filters__section}> {/* <div className={css.reviewsSection__filters__section}>
<div className={css.reviewsSection__filters__sectionTitle}> <div className={css.reviewsSection__filters__sectionTitle}>
<div className={css.reviewsSection__filters__sectionTitle__text}>Keywords</div> <div className={css.reviewsSection__filters__sectionTitle__text}>Keywords</div>
</div> </div>
@@ -756,7 +767,7 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
</> </>
)} )}
</div> </div>
</div> </div> */}
</div> </div>
</div> </div>