diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx index 1ab0b4c5..e45b97ad 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx @@ -203,6 +203,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { const handleSMSonClose = useCallback(() => { dispatch(setHidePopup()); setTimeout(() => { + Spotlight.focus("spotlightId_backBtn"); Spotlight.focus("shopbymobile_Btn"); }, 0); }, [dispatch]); diff --git a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx index 8831c8b9..bbe38374 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.jsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useMemo } from "react"; import classNames from "classnames"; -import { useDispatch, useSelector } from "react-redux"; +import { useDispatch } from "react-redux"; import Spotlight from "@enact/spotlight"; @@ -13,6 +13,7 @@ import * as Config from "../../../utils/Config"; import { $L } from "../../../utils/helperMethods"; import FavoriteBtn from "../components/FavoriteBtn"; import css from "./UnableOption.module.less"; +import useWhyDidYouUpdate from "../../../hooks/useWhyDidYouUpdate"; export default function UnableOption({ handleMobileSendPopupOpen, @@ -23,25 +24,21 @@ export default function UnableOption({ soldoutFlag, }) { const dispatch = useDispatch(); - const isLoading = useSelector( - (state) => state.common.appStatus?.showLoadingPanel?.show - ); - const favoriteFlagData = useSelector( - (state) => state.myPage.favoriteFlagData - ); + const { USE_SELECTOR } = useWhyDidYouUpdate("UnableOption", { + handleMobileSendPopupOpen, + patnrName, + productInfo, + selectedPatnrId, + selectedPrdtId, + soldoutFlag, + }); + + const isLoading = USE_SELECTOR("isLoading", (state) => state.common.appStatus?.showLoadingPanel?.show); + const favoriteFlagData = USE_SELECTOR("favoriteFlagData", (state) => state.myPage.favoriteFlagData); const tooltipDes = $L("Scan for more information about the product."); - const { - price2, - price3, - price5, - priceInfo, - rewd, - offerInfo, - patncNm, - installmentMonths, - } = productInfo; + const { price2, price3, price5, priceInfo, rewd, offerInfo, patncNm, installmentMonths } = productInfo; const { discountRate, @@ -52,7 +49,7 @@ export default function UnableOption({ promotionCode, } = usePriceInfo(priceInfo) || {}; - const { popupVisible } = useSelector((state) => state.common.popup); + const popupVisible = USE_SELECTOR("popupVisible", (state) => state.common.popup?.popupVisible); const TYPE_CASE = { // (기획서참고) 상품 상세 가격 노출 유형 case1: price2 && !price3 && !price5, @@ -67,15 +64,27 @@ export default function UnableOption({ }; useEffect(() => { + const current = Spotlight.getCurrent(); + let hasProperSpot = false; + if (current) { + const spotId = current.getAttribute("data-spotlight-id"); + if (spotId) { + if (spotId.indexOf("indicator-image") >= 0 || spotId.indexOf("indicator-shopbymobile_Btn") >= 0) { + hasProperSpot = true; + } + } + } let spotFocus = null; - if (soldoutFlag) { - spotFocus = setTimeout(() => { - Spotlight.focus("spotlightId_backBtn"); - }, 0); - } else if (!popupVisible) { - spotFocus = setTimeout(() => { - Spotlight.focus("shopbymobile_Btn"); - }, 0); + if (!hasProperSpot) { + if (soldoutFlag) { + spotFocus = setTimeout(() => { + Spotlight.focus("spotlightId_backBtn"); + }, 0); + } else if (!popupVisible) { + spotFocus = setTimeout(() => { + Spotlight.focus("shopbymobile_Btn"); + }, 0); + } } return () => { clearTimeout(spotFocus);