[홈패널] 로직변경/다운 포커스 수정

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsContents/RecommendedShowsContents.jsx

@@ -3,7 +3,6 @@ import React, { useEffect } from "react";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import {
   getContainerId,
-  getContainerNode,
   setContainerLastFocusedElement,
 } from "@enact/spotlight/src/container";
 
@@ -31,27 +30,35 @@ export default function RecommendedShowsContents({
     const container = document.getElementById(containerId);
 
     if (container) {
-      const tItemCardId = getContainerId(container?.children[0]);
-      const tItemCard = getContainerNode(tItemCardId);
-      tItemCard && setContainerLastFocusedElement(tItemCard, [containerId]);
+      // change last-focus to 1st item, when changing selestedCatCd
+      const itemCard = container.children[0];
+      itemCard && setContainerLastFocusedElement(itemCard, [containerId]);
+
+      // reset last-focus of tVirtualGridList, when changing selestedCatCd
+      const gridListId = getContainerId(container.children[1].children[0]);
+      const gridList = container.children[1].children[0];
+      gridList && setContainerLastFocusedElement(null, [gridListId]);
     }
   }, [selectedCatCd]);
 
   return (
-    <Container className={css.container} id={"containerId-" + index}>
+    <Container
+      className={css.container}
+      id={"containerId-" + index}
+      spotlightId={"containerId-" + index}
+    >
       <TItemCard
         imageAlt={showNm}
         imageSource={thumbnailUrl}
         nonPosition
         productName={showNm}
-        spotlightId={"spotlightId-" + showId}
+        productId={showId}
         type={TYPES.videoShow}
       />
       <RecommendedShowsProductList
         brandRecommendedShowProductInfo={brandRecommendedShowProductInfo}
         selectedCatCd={selectedCatCd}
         selectedPatnrId={selectedPatnrId}
-        showId={showId}
         patnrId={patnrId}
       />
     </Container>

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/RecommendedShows/RecommendedShowsContents/RecommendedShowsProductList/RecommendedShowsProductList.jsx

@@ -2,11 +2,6 @@ import React, { useCallback, useEffect } from "react";
 
 import { useDispatch } from "react-redux";
 
-import {
-  getContainerId,
-  setContainerLastFocusedElement,
-} from "@enact/spotlight/src/container";
-
 import { pushPanel } from "../../../../../actions/panelActions";
 import TItemCard from "../../../../../components/TItemCard/TItemCard";
 import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";
@@ -18,23 +13,12 @@ export default function RecommendedShowsProductList({
   brandRecommendedShowProductInfo,
   selectedCatCd,
   selectedPatnrId,
-  showId,
   patnrId,
 }) {
   const { getScrollTo, scrollLeft } = useScrollTo();
 
   const dispatch = useDispatch();
 
-  useEffect(() => {
-    const containerId = "containerId-" + showId;
-    const container = document.getElementById(containerId);
-
-    if (container) {
-      const childrenId = getContainerId(container?.children[0]);
-      childrenId && setContainerLastFocusedElement(null, [childrenId]);
-    }
-  }, [selectedCatCd]);
-
   useEffect(() => {
     scrollLeft();
   }, [selectedCatCd, selectedPatnrId]);
@@ -70,7 +54,7 @@ export default function RecommendedShowsProductList({
   );
 
   return (
-    <div className={css.container} id={"containerId-" + showId}>
+    <div className={css.container}>
       {brandRecommendedShowProductInfo && (
         <TVirtualGridList
           cbScrollTo={getScrollTo}