[리뷰패널 수정]
- 리뷰 shopperhouse poc종료로 인하여 키워드, 단어부분에 대한 api를 내려주지않는다고 하여 우선 주석처리.
This commit is contained in:
junghoon86.park
@@ -1,18 +1,29 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { popPanel, updatePanel } from '../../actions/panelActions';
|
||||
import { getUserReviewList, clearReviewFilter } from '../../actions/productActions';
|
||||
import {
|
||||
popPanel,
|
||||
updatePanel,
|
||||
} from '../../actions/panelActions';
|
||||
import {
|
||||
clearReviewFilter,
|
||||
getUserReviewList,
|
||||
} from '../../actions/productActions';
|
||||
import TBody from '../../components/TBody/TBody';
|
||||
import TPanel from '../../components/TPanel/TPanel';
|
||||
import useReviews, { REVIEW_VERSION } from '../../hooks/useReviews/useReviews';
|
||||
import fp from '../../utils/fp';
|
||||
import { panel_names } from '../../utils/Config';
|
||||
import { createDebugHelpers } from '../../utils/debug';
|
||||
import fp from '../../utils/fp';
|
||||
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 UserReviewsList from './components/UserReviewsList';
|
||||
import UserReviewHeader from './UserReviewHeader';
|
||||
@@ -178,63 +189,63 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
|
||||
}, [filters]);
|
||||
|
||||
// API 기반 KEYWORDS 필터 데이터 추출 (IF-LGSP-100)
|
||||
const keywordsFilterData = React.useMemo(() => {
|
||||
if (!filters || !Array.isArray(filters)) {
|
||||
return [];
|
||||
}
|
||||
// const keywordsFilterData = React.useMemo(() => {
|
||||
// if (!filters || !Array.isArray(filters)) {
|
||||
// return [];
|
||||
// }
|
||||
|
||||
const keywordsFilter = filters.find((f) => f.filterTpCd === 'KEYWORDS');
|
||||
if (!keywordsFilter) {
|
||||
dlog('[UserReviewPanel] ⚠️ KEYWORDS 필터 데이터 없음');
|
||||
return [];
|
||||
}
|
||||
// const keywordsFilter = filters.find((f) => f.filterTpCd === 'KEYWORDS');
|
||||
// if (!keywordsFilter) {
|
||||
// dlog('[UserReviewPanel] ⚠️ KEYWORDS 필터 데이터 없음');
|
||||
// return [];
|
||||
// }
|
||||
|
||||
dlog('[UserReviewPanel] 🎯 KEYWORDS 필터 데이터 추출:', {
|
||||
keywordsFilter,
|
||||
filterItems: keywordsFilter.filter,
|
||||
});
|
||||
// dlog('[UserReviewPanel] 🎯 KEYWORDS 필터 데이터 추출:', {
|
||||
// keywordsFilter,
|
||||
// filterItems: keywordsFilter.filter,
|
||||
// });
|
||||
|
||||
// filter 배열을 그대로 반환 (filterNm, filterNmCnt, filterTpVal 포함)
|
||||
return Array.isArray(keywordsFilter.filter) ? keywordsFilter.filter : [];
|
||||
}, [filters]);
|
||||
// // filter 배열을 그대로 반환 (filterNm, filterNmCnt, filterTpVal 포함)
|
||||
// return Array.isArray(keywordsFilter.filter) ? keywordsFilter.filter : [];
|
||||
// }, [filters]);
|
||||
|
||||
// API 기반 SENTIMENT 필터 데이터 추출 (IF-LGSP-100)
|
||||
const sentimentFilterData = React.useMemo(() => {
|
||||
if (!filters || !Array.isArray(filters)) {
|
||||
return {};
|
||||
}
|
||||
// const sentimentFilterData = React.useMemo(() => {
|
||||
// if (!filters || !Array.isArray(filters)) {
|
||||
// return {};
|
||||
// }
|
||||
|
||||
const sentimentFilter = filters.find((f) => f.filterTpCd === 'SENTIMENT');
|
||||
if (!sentimentFilter) {
|
||||
dlog('[UserReviewPanel] ⚠️ SENTIMENT 필터 데이터 없음');
|
||||
return {};
|
||||
}
|
||||
// const sentimentFilter = filters.find((f) => f.filterTpCd === 'SENTIMENT');
|
||||
// if (!sentimentFilter) {
|
||||
// dlog('[UserReviewPanel] ⚠️ SENTIMENT 필터 데이터 없음');
|
||||
// return {};
|
||||
// }
|
||||
|
||||
dlog('[UserReviewPanel] 🎯 SENTIMENT 필터 데이터 추출:', {
|
||||
sentimentFilter,
|
||||
filterItems: sentimentFilter.filter,
|
||||
});
|
||||
// dlog('[UserReviewPanel] 🎯 SENTIMENT 필터 데이터 추출:', {
|
||||
// sentimentFilter,
|
||||
// filterItems: sentimentFilter.filter,
|
||||
// });
|
||||
|
||||
// filter 배열을 { filterTpVal: filterNmCnt } 형태로 변환
|
||||
const sentimentMap = {};
|
||||
if (Array.isArray(sentimentFilter.filter)) {
|
||||
sentimentFilter.filter.forEach((item) => {
|
||||
sentimentMap[item.filterTpVal] = item.filterNmCnt;
|
||||
});
|
||||
}
|
||||
// // filter 배열을 { filterTpVal: filterNmCnt } 형태로 변환
|
||||
// const sentimentMap = {};
|
||||
// if (Array.isArray(sentimentFilter.filter)) {
|
||||
// sentimentFilter.filter.forEach((item) => {
|
||||
// sentimentMap[item.filterTpVal] = item.filterNmCnt;
|
||||
// });
|
||||
// }
|
||||
|
||||
return sentimentMap;
|
||||
}, [filters]);
|
||||
// return sentimentMap;
|
||||
// }, [filters]);
|
||||
|
||||
const getApiKeywordClickHandler = useCallback(
|
||||
(keywordValue) => () => handleApiKeywordsFilter(keywordValue),
|
||||
[handleApiKeywordsFilter]
|
||||
);
|
||||
// const getApiKeywordClickHandler = useCallback(
|
||||
// (keywordValue) => () => handleApiKeywordsFilter(keywordValue),
|
||||
// [handleApiKeywordsFilter]
|
||||
// );
|
||||
|
||||
const getApiSentimentClickHandler = useCallback(
|
||||
(sentimentValue) => () => handleApiSentimentFilter(sentimentValue),
|
||||
[handleApiSentimentFilter]
|
||||
);
|
||||
// const getApiSentimentClickHandler = useCallback(
|
||||
// (sentimentValue) => () => handleApiSentimentFilter(sentimentValue),
|
||||
// [handleApiSentimentFilter]
|
||||
// );
|
||||
const handleApiRatingFilter = useCallback(
|
||||
(rating) => {
|
||||
if (!prdtId || !patnrId) {
|
||||
@@ -285,94 +296,94 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
|
||||
const handle1StarsFilter = useCallback(() => handleApiRatingFilter(1), [handleApiRatingFilter]);
|
||||
|
||||
// API 기반 KEYWORDS 필터 핸들러
|
||||
const handleApiKeywordsFilter = useCallback(
|
||||
(keyword) => {
|
||||
if (!prdtId || !patnrId) {
|
||||
dwarn('[UserReviewPanel] ⚠️ API 호출 실패: prdtId 또는 patnrId 없음');
|
||||
return;
|
||||
}
|
||||
// const handleApiKeywordsFilter = useCallback(
|
||||
// (keyword) => {
|
||||
// if (!prdtId || !patnrId) {
|
||||
// dwarn('[UserReviewPanel] ⚠️ API 호출 실패: prdtId 또는 patnrId 없음');
|
||||
// return;
|
||||
// }
|
||||
|
||||
dlog('[UserReviewPanel] 🔄 키워드 필터 API 호출:', { keyword, prdtId, patnrId });
|
||||
setForceScrollToTop(true);
|
||||
// dlog('[UserReviewPanel] 🔄 키워드 필터 API 호출:', { keyword, prdtId, patnrId });
|
||||
// setForceScrollToTop(true);
|
||||
|
||||
dispatch(
|
||||
getUserReviewList({
|
||||
prdtId,
|
||||
patnrId,
|
||||
filterTpCd: 'KEYWORDS',
|
||||
filterTpVal: keyword,
|
||||
pageSize: 100,
|
||||
pageNo: 1,
|
||||
})
|
||||
);
|
||||
},
|
||||
[prdtId, patnrId, dispatch]
|
||||
);
|
||||
// dispatch(
|
||||
// getUserReviewList({
|
||||
// prdtId,
|
||||
// patnrId,
|
||||
// filterTpCd: 'KEYWORDS',
|
||||
// filterTpVal: keyword,
|
||||
// pageSize: 100,
|
||||
// pageNo: 1,
|
||||
// })
|
||||
// );
|
||||
// },
|
||||
// [prdtId, patnrId, dispatch]
|
||||
// );
|
||||
|
||||
// API 기반 SENTIMENT 필터 핸들러
|
||||
const handleApiSentimentFilter = useCallback(
|
||||
(sentiment) => {
|
||||
if (!prdtId || !patnrId) {
|
||||
dwarn('[UserReviewPanel] ⚠️ API 호출 실패: prdtId 또는 patnrId 없음');
|
||||
return;
|
||||
}
|
||||
// const handleApiSentimentFilter = useCallback(
|
||||
// (sentiment) => {
|
||||
// if (!prdtId || !patnrId) {
|
||||
// dwarn('[UserReviewPanel] ⚠️ API 호출 실패: prdtId 또는 patnrId 없음');
|
||||
// return;
|
||||
// }
|
||||
|
||||
dlog('[UserReviewPanel] 🔄 감정 필터 API 호출:', { sentiment, prdtId, patnrId });
|
||||
setForceScrollToTop(true);
|
||||
// dlog('[UserReviewPanel] 🔄 감정 필터 API 호출:', { sentiment, prdtId, patnrId });
|
||||
// setForceScrollToTop(true);
|
||||
|
||||
if (sentiment === 'all') {
|
||||
// ALL 필터로 리뷰 재로드
|
||||
dispatch(
|
||||
getUserReviewList({
|
||||
prdtId,
|
||||
patnrId,
|
||||
filterTpCd: 'ALL',
|
||||
pageSize: 100,
|
||||
pageNo: 1,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
// SENTIMENT 필터로 리뷰 조회
|
||||
dispatch(
|
||||
getUserReviewList({
|
||||
prdtId,
|
||||
patnrId,
|
||||
filterTpCd: 'SENTIMENT',
|
||||
filterTpVal: sentiment,
|
||||
pageSize: 100,
|
||||
pageNo: 1,
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
[prdtId, patnrId, dispatch]
|
||||
);
|
||||
// if (sentiment === 'all') {
|
||||
// // ALL 필터로 리뷰 재로드
|
||||
// dispatch(
|
||||
// getUserReviewList({
|
||||
// prdtId,
|
||||
// patnrId,
|
||||
// filterTpCd: 'ALL',
|
||||
// pageSize: 100,
|
||||
// pageNo: 1,
|
||||
// })
|
||||
// );
|
||||
// } else {
|
||||
// // SENTIMENT 필터로 리뷰 조회
|
||||
// dispatch(
|
||||
// getUserReviewList({
|
||||
// prdtId,
|
||||
// patnrId,
|
||||
// filterTpCd: 'SENTIMENT',
|
||||
// filterTpVal: sentiment,
|
||||
// pageSize: 100,
|
||||
// pageNo: 1,
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// [prdtId, patnrId, dispatch]
|
||||
// );
|
||||
|
||||
const handleAromaClick = useCallback(
|
||||
() => handleApiKeywordsFilter('Aroma'),
|
||||
[handleApiKeywordsFilter]
|
||||
);
|
||||
const handleVanillaClick = useCallback(
|
||||
() => handleApiKeywordsFilter('Vanilla'),
|
||||
[handleApiKeywordsFilter]
|
||||
);
|
||||
const handleCinnamonClick = useCallback(
|
||||
() => handleApiKeywordsFilter('Cinnamon'),
|
||||
[handleApiKeywordsFilter]
|
||||
);
|
||||
const handleQualityClick = useCallback(
|
||||
() => handleApiKeywordsFilter('Quality'),
|
||||
[handleApiKeywordsFilter]
|
||||
);
|
||||
// const handleAromaClick = useCallback(
|
||||
// () => handleApiKeywordsFilter('Aroma'),
|
||||
// [handleApiKeywordsFilter]
|
||||
// );
|
||||
// const handleVanillaClick = useCallback(
|
||||
// () => handleApiKeywordsFilter('Vanilla'),
|
||||
// [handleApiKeywordsFilter]
|
||||
// );
|
||||
// const handleCinnamonClick = useCallback(
|
||||
// () => handleApiKeywordsFilter('Cinnamon'),
|
||||
// [handleApiKeywordsFilter]
|
||||
// );
|
||||
// const handleQualityClick = useCallback(
|
||||
// () => handleApiKeywordsFilter('Quality'),
|
||||
// [handleApiKeywordsFilter]
|
||||
// );
|
||||
|
||||
const handlePositiveClick = useCallback(
|
||||
() => handleApiSentimentFilter('positive'),
|
||||
[handleApiSentimentFilter]
|
||||
);
|
||||
const handleNegativeClick = useCallback(
|
||||
() => handleApiSentimentFilter('negative'),
|
||||
[handleApiSentimentFilter]
|
||||
);
|
||||
// const handlePositiveClick = useCallback(
|
||||
// () => handleApiSentimentFilter('positive'),
|
||||
// [handleApiSentimentFilter]
|
||||
// );
|
||||
// const handleNegativeClick = useCallback(
|
||||
// () => handleApiSentimentFilter('negative'),
|
||||
// [handleApiSentimentFilter]
|
||||
// );
|
||||
|
||||
// forceScrollToTop 리셋 - 스크롤 리셋 완료 후 false로 변경
|
||||
useEffect(() => {
|
||||
@@ -617,7 +628,7 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
|
||||
</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__text}>Keywords</div>
|
||||
</div>
|
||||
@@ -756,7 +767,7 @@ const UserReviewPanel = ({ className, panelInfo, spotlightId }) => {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user