[SHOPTIME-3399] Theme Detail / 사방향키로 첫번째 item 클릭시 Shop By Mobile 버컨으로 포커싱, 두번째 item 클릭시 back button으로 포커싱 됨

원인 : Detail 화면에서 상품선택할 때 상품정보가 변경되면, 초기 진입으로
판단해 포커스 처리하고 있음
대책 : 동일 로직에서 현재 포커스가 적절한 위치(상품, 모바일버튼)에
존재할 경우 포커스 변경을 하지 않돌고 수정

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]);

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);