[SHOPTIME-5486] Home / 하단에 On Sale 랜딩 카드 / 카드에 노출되는 카테고리이동되도록 수정

com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.jsx

@@ -1,13 +1,10 @@
-import React, {
-  memo,
-  useCallback,
-} from 'react';
+import React, { memo, useCallback } from "react";
 
-import classNames from 'classnames';
+import classNames from "classnames";
 
-import Spottable from '@enact/spotlight/Spottable';
+import Spottable from "@enact/spotlight/Spottable";
 
-import css from './CategoryNavItem.module.less';
+import css from "./CategoryNavItem.module.less";
 
 const SpottableComponent = Spottable("div");
 

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNav.jsx

@@ -76,9 +76,9 @@ export default function OnSaleNav({
         const containerId = "on-sale-nav";
         setContainerLastFocusedElement(node, [containerId]);
       }
-      setTimeout(() => {
-        Spotlight.focus(node);
-      }, 100);
+      // setTimeout(() => {
+      //   Spotlight.focus(node);
+      // }, 100);
     }
   }, [panelInfoLgCatCd]);
 

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNavItem/OnSaleNavItem.jsx

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect } from "react";
 
 import classNames from "classnames";
-import { useDispatch } from "react-redux";
+import { connect, useDispatch } from "react-redux";
 
 import Spottable from "@enact/spotlight/Spottable";
 import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
@@ -32,8 +32,8 @@ export default memo(function OnSaleNavItem({
   const selected = selectedLgCatCd
     ? selectedLgCatCd === lgCatCd && css.selected
     : panelInfoLgCatCd
-    ? panelInfoLgCatCd === lgCatCd && css.selected
-    : itemIndex === 0;
+      ? panelInfoLgCatCd === lgCatCd && css.selected
+      : itemIndex === 0;
 
   const selectedText = selected === true ? "Selected, " : "";
 
@@ -77,8 +77,8 @@ export default memo(function OnSaleNavItem({
         selectedLgCatCd
           ? selectedLgCatCd === lgCatCd && css.selected
           : panelInfoLgCatCd
-          ? panelInfoLgCatCd === lgCatCd && css.selected
-          : itemIndex === 0 && css.selected
+            ? panelInfoLgCatCd === lgCatCd && css.selected
+            : itemIndex === 0 && css.selected
       )}
       onClick={handleClick}
       id={"spotlightId-" + lgCatCd}

com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx

@@ -57,8 +57,8 @@ export default function OnSalePanel({ panelInfo, spotlightId }) {
 
   const enteredThroughEventPopup = Object.keys(panelInfo).length === 1;
   const enteredThroughGNB = Object.keys(panelInfo).length === 0;
-  const previousPanelIsHome = Object.keys(panelInfo).length === 3;
-  const previousPanelIsDetail = Object.keys(panelInfo).length > 4;
+  const previousPanelIsHome = panelInfo?.nowShelf !== undefined;
+  const previousPanelIsDetail = panelInfo?.noResetFlag === true;
 
   const cbChangePageRef = useRef(null);
   const focusedContainerIdRef = useRef(0);
@@ -132,7 +132,7 @@ export default function OnSalePanel({ panelInfo, spotlightId }) {
   useEffect(() => {
     if (categories && saleInfos && Object.keys(saleInfos).length > 0) {
       const prdtId = saleInfos[0]?.saleProductInfos[0]?.prdtId;
-
+      console.log("###prdtId", saleInfos);
       if (prdtId) {
         setFirstFocusableTarget("spotlightId-" + removeDotAndColon(prdtId));
         setIsReadyForInitialFocusTarget(true);
@@ -149,9 +149,8 @@ export default function OnSalePanel({ panelInfo, spotlightId }) {
       }
 
       if (previousPanelIsHome) {
-        targetId = panelInfo?.linkTpCd
-          ? "spotlightId-" + panelInfo?.lgCatCd
-          : "spotlightId-" + panelInfo?.prdtId;
+        // 홈에서 온세일 아이템을 선택한 경우 해당 카테고리의 nav 아이템에 포커스
+        targetId = "spotlightId-" + panelInfo?.lgCatCd;
       }
 
       if (enteredThroughEventPopup) {
@@ -180,8 +179,6 @@ export default function OnSalePanel({ panelInfo, spotlightId }) {
     isInitialFocusOccurred,
     isReadyForInitialFocusTarget,
     panelInfo?.lgCatCd,
-    panelInfo?.linkTpCd,
-    panelInfo?.prdtId,
     panelInfo?.targetId,
     previousPanelIsDetail,
     previousPanelIsHome,
@@ -300,7 +297,6 @@ export default function OnSalePanel({ panelInfo, spotlightId }) {
       cbChangePageRef.current(0);
     }
   }, []);
-
   const handleShelfFocus = useCallback(
     (shelfOrder) => {
       // 현재 포커스된 shelf와 다른 shelf에 포커스될 때만 true 반환