[SHOPTIME-3666] Detail Page / 불필요한 API 추가 호출

원인 : 즐겨 찾기 관련 불필요 api  호출
대책 : 즐겨찾기 여부는 내부 변수로 관리하도록 수정
This commit is contained in:
yonghyon
2024-10-07 15:00:56 +09:00
parent 43c81998e5
commit a539b1dcdc
3 changed files with 21 additions and 29 deletions

View File

@@ -77,10 +77,6 @@ export default function SingleOption({
(state) => state.common.appStatus.loginUserData (state) => state.common.appStatus.loginUserData
); );
const favoriteFlagData = useSelector(
(state) => state.myPage.favoriteFlagData
);
const [hasProductOptionArray, setHasProductOptionArray] = useState(true); const [hasProductOptionArray, setHasProductOptionArray] = useState(true);
const [promotions, setPromotions] = useState([]); const [promotions, setPromotions] = useState([]);
const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0); const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0);
@@ -96,6 +92,7 @@ export default function SingleOption({
const [selectedOptionInfo, setSelectedOptionInfo] = useState(); const [selectedOptionInfo, setSelectedOptionInfo] = useState();
const [downloadCouponArr, setDownloadCouponArr] = useState([]); const [downloadCouponArr, setDownloadCouponArr] = useState([]);
const [focused, setFocused] = useState(false); const [focused, setFocused] = useState(false);
const [favoriteFlag, setFavoriteFlag] = useState(productInfo?.favorYn);
const webOSVersion = useSelector( const webOSVersion = useSelector(
(state) => state.common.appStatus.webOSVersion (state) => state.common.appStatus.webOSVersion
@@ -524,12 +521,13 @@ export default function SingleOption({
Spotlight.focus("spotlight-IndicatorContainer"); Spotlight.focus("spotlight-IndicatorContainer");
}; };
const favoriteFlag = useMemo(() => { useEffect(() => {
if (favoriteFlagData && Object.keys(favoriteFlagData).length > 0) { setFavoriteFlag(productInfo?.favorYn ? productInfo?.favorYn : "N");
return favoriteFlagData?.favorFlag; }, [productInfo]);
}
return productInfo?.favorYn; const onFavoriteFlagChanged = useCallback((ev) => {
}, [favoriteFlagData, productInfo]); setFavoriteFlag(ev);
}, []);
const renderItem = useCallback( const renderItem = useCallback(
({ index, ...rest }) => { ({ index, ...rest }) => {
@@ -777,6 +775,7 @@ export default function SingleOption({
selectedPatnrId={selectedPatnrId} selectedPatnrId={selectedPatnrId}
selectedPrdtId={selectedPrdtId} selectedPrdtId={selectedPrdtId}
favoriteFlag={favoriteFlag} favoriteFlag={favoriteFlag}
onFavoriteFlagChanged={onFavoriteFlagChanged}
/> />
</Container> </Container>
<div className={css.disclaimerContainer}> <div className={css.disclaimerContainer}>

View File

@@ -24,7 +24,7 @@ export default function UnableOption({
soldoutFlag, soldoutFlag,
}) { }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { USE_SELECTOR } = useWhyDidYouUpdate("UnableOption", { const { USE_STATE, USE_SELECTOR } = useWhyDidYouUpdate("UnableOption", {
handleMobileSendPopupOpen, handleMobileSendPopupOpen,
patnrName, patnrName,
productInfo, productInfo,
@@ -37,11 +37,7 @@ export default function UnableOption({
"isLoading", "isLoading",
(state) => state.common.appStatus?.showLoadingPanel?.show (state) => state.common.appStatus?.showLoadingPanel?.show
); );
const favoriteFlagData = USE_SELECTOR( const [favoriteFlag, setFavoriteFlag] = USE_STATE("favoriteFlag", productInfo?.favorYn);
"favoriteFlagData",
(state) => state.myPage.favoriteFlagData
);
const tooltipDes = $L("Scan for more information about the product."); const tooltipDes = $L("Scan for more information about the product.");
const { const {
@@ -130,12 +126,13 @@ export default function UnableOption({
} }
}, [dispatch, handleMobileSendPopupOpen]); }, [dispatch, handleMobileSendPopupOpen]);
const favoriteFlag = useMemo(() => { useEffect(() => {
if (favoriteFlagData && Object.keys(favoriteFlagData).length > 0) { setFavoriteFlag(productInfo?.favorYn ? productInfo?.favorYn : "N");
return favoriteFlagData?.favorFlag; }, [productInfo]);
}
return productInfo?.favorYn; const onFavoriteFlagChanged = useCallback((ev) => {
}, [favoriteFlagData, productInfo]); setFavoriteFlag(ev);
}, []);
const renderPriceItem = useCallback(() => { const renderPriceItem = useCallback(() => {
if (productInfo && !promotionCode) { if (productInfo && !promotionCode) {
@@ -333,6 +330,7 @@ export default function UnableOption({
selectedPatnrId={selectedPatnrId} selectedPatnrId={selectedPatnrId}
selectedPrdtId={selectedPrdtId} selectedPrdtId={selectedPrdtId}
favoriteFlag={favoriteFlag} favoriteFlag={favoriteFlag}
onFavoriteFlagChanged={onFavoriteFlagChanged}
/> />
</div> </div>
<div className={css.disclaimerContainer}>{productInfo?.disclaimer}</div> <div className={css.disclaimerContainer}>{productInfo?.disclaimer}</div>

View File

@@ -52,15 +52,10 @@ export default function FavoriteBtn({
}, [dispatch, favoriteFlag, selectedPatnrId, selectedPrdtId]); }, [dispatch, favoriteFlag, selectedPatnrId, selectedPrdtId]);
const PopUpOnClick = useCallback(() => { const PopUpOnClick = useCallback(() => {
dispatch(
getMyFavoriteFlag({
patnrId: selectedPatnrId,
prdtId: selectedPrdtId,
})
);
setTimeout(() => Spotlight.focus("favoriteBtn")); setTimeout(() => Spotlight.focus("favoriteBtn"));
dispatch(setHidePopup()); dispatch(setHidePopup());
}, [dispatch, favoriteFlag]); onFavoriteFlagChanged(favoriteFlag === "Y" ? "N" : "Y");
}, [dispatch, favoriteFlag, onFavoriteFlagChanged]);
return ( return (
<div className={css.favorBtnContainer}> <div className={css.favorBtnContainer}>