[FeaturedBrandsPanel] RecommendedShows, Focus 업데이트

Detail Notes :

1.  시나리오에 따른 Focuse 이동 작업
2. cateory 변경에 따른 last-focused, scroll 초기화

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

@@ -153,6 +153,7 @@ export default function FeaturedBrandsPanel() {
               brandRecommendedShowInfo={brandRecommendedShowInfo}
               selectedCatCd={selectedCatCd}
               setSelectedCatCd={setSelectedCatCd}
+              selectedPatnrId={selectedPatnrId}
             />
           )}
       </TBody>

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

@@ -1,6 +1,4 @@
-import React, { memo } from "react";
-
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import React from "react";
 
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import { $L } from "../../../utils/helperMethods";
@@ -8,32 +6,51 @@ import css from "./RecommendedShows.module.less";
 import RecommendedShowsContents from "./RecommendedShowsContents/RecommendedShowsContents";
 import RecommendedShowsNav from "./RecommendedShowsNav/RecommendedShowsNav";
 
-const Container = SpotlightContainerDecorator(
-  { leaveFor: { right: "" }, enterTo: "last-focused" },
-  "div"
-);
-
 const STRING_CONF = {
   RECOMMENDED_SHOWS: $L("RECOMMENDED SHOWS"),
 };
 
-export default memo(function RecommendedShows({
+export default function RecommendedShows({
   brandRecommendedShowCategoryInfo,
   brandRecommendedShowInfo,
   selectedCatCd,
+  selectedPatnrId,
   setSelectedCatCd,
 }) {
   return (
-    <Container className={css.container}>
+    <div className={css.container}>
       <SectionTitle title={STRING_CONF.RECOMMENDED_SHOWS} />
       <RecommendedShowsNav
         brandRecommendedShowCategoryInfo={brandRecommendedShowCategoryInfo}
         selectedCatCd={selectedCatCd}
+        selectedPatnrId={selectedPatnrId}
         setSelectedCatCd={setSelectedCatCd}
       />
-      <RecommendedShowsContents
-        brandRecommendedShowInfo={brandRecommendedShowInfo}
-      />
-    </Container>
+      {brandRecommendedShowInfo &&
+        brandRecommendedShowInfo.map(
+          (
+            {
+              brandRecommendedShowProductInfo,
+              patnrId,
+              showId,
+              showNm,
+              thumbnailUrl,
+            },
+            index
+          ) => (
+            <RecommendedShowsContents
+              brandRecommendedShowProductInfo={brandRecommendedShowProductInfo}
+              index={index}
+              key={"brandRecommendedShowInfo-" + index}
+              patnrId={patnrId}
+              selectedCatCd={selectedCatCd}
+              selectedPatnrId={selectedPatnrId}
+              showId={showId}
+              showNm={showNm}
+              thumbnailUrl={thumbnailUrl}
+            />
+          )
+        )}
+    </div>
   );
-});
+}

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

@@ -1,45 +1,59 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import {
+  getContainerId,
+  getContainerNode,
+  setContainerLastFocusedElement,
+} from "@enact/spotlight/src/container";
 
 import TItemCard, { TYPES } from "../../../../components/TItemCard/TItemCard";
 import css from "./RecommendedShowsContents.module.less";
 import RecommendedShowsProductList from "./RecommendedShowsProductList/RecommendedShowsProductList";
 
-const ContentsWrap = SpotlightContainerDecorator(
+const Container = SpotlightContainerDecorator(
   { leaveFor: { right: "" }, enterTo: "last-focused" },
   "div"
 );
 
-export default function RecommendedShowsContents({ brandRecommendedShowInfo }) {
+export default function RecommendedShowsContents({
+  brandRecommendedShowProductInfo,
+  index,
+  patnrId,
+  selectedCatCd,
+  selectedPatnrId,
+  showId,
+  showNm,
+  thumbnailUrl,
+}) {
+  useEffect(() => {
+    const containerId = "containerId-" + index;
+    const container = document.getElementById(containerId);
+
+    if (container) {
+      const tItemCardId = getContainerId(container?.children[0]);
+      const tItemCard = getContainerNode(tItemCardId);
+      tItemCard && setContainerLastFocusedElement(tItemCard, [containerId]);
+    }
+  }, [selectedCatCd]);
+
   return (
-    <div className={css.container}>
-      {brandRecommendedShowInfo &&
-        brandRecommendedShowInfo.map(
-          (
-            { brandRecommendedShowProductInfo, patnrId, showNm, thumbnailUrl },
-            index
-          ) => (
-            <ContentsWrap
-              className={css.contentsWrap}
-              key={"brandRecommendedShowInfo-" + index}
-            >
-              <TItemCard
-                imageAlt={showNm}
-                imageSource={thumbnailUrl}
-                nonPosition
-                productName={showNm}
-                type={TYPES.videoShow}
-              />
-              <RecommendedShowsProductList
-                brandRecommendedShowProductInfo={
-                  brandRecommendedShowProductInfo
-                }
-                patnrId={patnrId}
-              />
-            </ContentsWrap>
-          )
-        )}
-    </div>
+    <Container className={css.container} id={"containerId-" + index}>
+      <TItemCard
+        imageAlt={showNm}
+        imageSource={thumbnailUrl}
+        nonPosition
+        productName={showNm}
+        spotlightId={"spotlightId-" + 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/RecommendedShowsContents.module.less

@@ -2,13 +2,8 @@
 @import "../../../../style/utils.module.less";
 
 .container {
-  .flex(@direction: column, @justifyCenter: flex-start);
-  width: 100%;
+  display: flex;
+  .size(@w: 100%, @h:438px);
+  margin-bottom: 36px;
   padding-left: 60px;
-
-  .contentsWrap {
-    display: flex;
-    .size(@w: 100%, @h:438px);
-    margin-bottom: 36px;
-  }
 }

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

@@ -1,19 +1,44 @@
-import React, { useCallback } from "react";
+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";
+import useScrollTo from "../../../../../hooks/useScrollTo";
 import { panel_names } from "../../../../../utils/Config";
 import css from "./RecommendedShowsProductList.module.less";
 
 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]);
+
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       const { imgUrl, prdtId, prdtNm, priceInfo, soldoutFlag } =
@@ -45,9 +70,10 @@ export default function RecommendedShowsProductList({
   );
 
   return (
-    <div className={css.container}>
+    <div className={css.container} id={"containerId-" + showId}>
       {brandRecommendedShowProductInfo && (
         <TVirtualGridList
+          cbScrollTo={getScrollTo}
           className={css.tVirtualGridList}
           dataSize={brandRecommendedShowProductInfo.length}
           direction="horizontal"

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

@@ -2,7 +2,6 @@
 
 .container {
   .flex();
-  overflow: hidden;
   width: calc(100% - 546px);
   padding-left: 18px;
 }

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 
 import Scroller from "@enact/sandstone/Scroller";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
@@ -16,6 +16,7 @@ const Container = SpotlightContainerDecorator(
 export default function RecommendedShowsNav({
   brandRecommendedShowCategoryInfo,
   selectedCatCd,
+  selectedPatnrId,
   setSelectedCatCd,
 }) {
   const { getScrollTo, scrollLeft } = useScrollTo();
@@ -44,6 +45,10 @@ export default function RecommendedShowsNav({
     handleScrollReset();
   }, []);
 
+  useEffect(() => {
+    scrollLeft();
+  }, [selectedPatnrId]);
+
   return (
     <Container className={css.nav}>
       <Scroller