[TrendingNow] Home > BestSeller / PopularShow 더보기 버튼으로 진입시 포커스 이슈 처리

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx

@@ -63,6 +63,7 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => {
         name: panel_names.TRENDING_NOW_PANEL,
         panelInfo: {
           pageName: "BS",
+          focusedContainerId: "trandingnow_bestseller",
         },
       })
     );
@@ -89,12 +90,7 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => {
         return;
       }
     },
-    [
+    [cursorVisible, _handleItemFocus, handleScrollReset, scrollTopBody]
-      cursorVisible,
-      _handleItemFocus,
-      handleScrollReset,
-      scrollTopBody
-    ]
   );
 
   const handleScrollRight = (e) => {
@@ -113,7 +109,12 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => {
   }, [handleItemFocus]);
 
   return (
-    <Container className={css.bestSellerWrap} style={orderStyle} spotlightId={spotlightId} data-wheel-point={true}>
+    <Container
+      className={css.bestSellerWrap}
+      style={orderStyle}
+      spotlightId={spotlightId}
+      data-wheel-point={true}
+    >
       <SectionTitle
         title={$L("BEST SELLER")}
         data-title-index="homeBestSellerTitle"
@@ -149,7 +150,7 @@ const BestSeller = ({ order, scrollTopBody, spotlightId, handleItemFocus }) => {
                   : rankOrd + "th";
               return (
                 <TItemCard
-                  key={"subItem"+itemIndex}
+                  key={"subItem" + itemIndex}
                   imageAlt={prdtId}
                   imageSource={imgUrl}
                   priceInfo={priceInfo}

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx

@@ -74,6 +74,10 @@ const PopularShow = ({
       pushPanel(
         {
           name: panel_names.TRENDING_NOW_PANEL,
+          panelInfo: {
+            pageName: "PS",
+            focusedContainerId: "trandingnow_popularcontainer",
+          },
         },
         [dispatch]
       )
@@ -101,12 +105,7 @@ const PopularShow = ({
         return;
       }
     },
-    [
+    [cursorVisible, _handleItemFocus, handleScrollReset, scrollTopBody]
-      cursorVisible,
-      _handleItemFocus,
-      handleScrollReset,
-      scrollTopBody
-    ]
   );
 
   const handleScrollRight = (e) => {
@@ -125,7 +124,12 @@ const PopularShow = ({
   }, [handleItemFocus]);
 
   return (
-    <Container className={css.popularShow} style={orderStyle} spotlightId={spotlightId} data-wheel-point={true}>
+    <Container
+      className={css.popularShow}
+      style={orderStyle}
+      spotlightId={spotlightId}
+      data-wheel-point={true}
+    >
       <SectionTitle
         className={css.subTitle}
         title={$L("POPULAR SHOW")}

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

@@ -186,9 +186,11 @@ export default function TrendingNowPanel({ panelInfo, spotlightId }) {
   useEffect(() => {
     if (topInfos && bestSellerDatas) {
       if (panelInfo?.pageName === "BS") {
-        Spotlight.focus(
+        if (panelInfo?.linkTpCd) {
-          "bs-spotlightId-" + removeDotAndColon(bestSellerDatas[0]?.prdtId)
+          Spotlight.focus("trandingnow_bestseller");
-        );
+        } else {
+          Spotlight.focus(panelInfo?.focusedContainerId);
+        }
       } else {
         if (!firstChk && !panelInfo.currentSpot) {
           Spotlight.focus("popular_video");
@@ -196,7 +198,15 @@ export default function TrendingNowPanel({ panelInfo, spotlightId }) {
         }
       }
     }
-  }, [firstChk, panelInfo, topInfos, bestSellerDatas]);
+  }, [
+    firstChk,
+    topInfos,
+    bestSellerDatas,
+    panelInfo?.focusedContainerId,
+    panelInfo.currentSpot,
+    panelInfo?.pageName,
+    panelInfo?.linkTpCd,
+  ]);
 
   const onItemSpotlightDown = useCallback((e) => {
     e.stopPropagation();