LiveChannel , featuruedShows 오픈 시 첫번째 채널에 포커스

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContaienr.jsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
 
-import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import TButtonTab, {
@@ -25,8 +24,6 @@ export default function TabContainer({
   shopNowInfo,
   setSelectedIndex,
   liveChannelInfos,
-  sideOpen,
-  setSideOpen,
 }) {
   const [tab, setTab] = useState(0);
 
@@ -43,10 +40,6 @@ export default function TabContainer({
     [tab]
   );
 
-  // useEffect(() => {
-  //   Spotlight.focus("player-tab-arrow");
-  // }, [sideOpen]);
-
   return (
     <Container className={css.tabContainer}>
       <TButtonTab

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx

@@ -1,13 +1,19 @@
-import React, { useCallback, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+} from 'react';
 
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from 'react-redux';
 
-import { pushPanel, updatePanel } from "../../../../actions/panelActions";
-import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
-import { panel_names } from "../../../../utils/Config";
-import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
-import css from "./LiveChannelContents.module.less";
-import PlayerTabLoading from "./PlayerTabLoading";
+import Spotlight from '@enact/spotlight';
+
+import { updatePanel } from '../../../../actions/panelActions';
+import TVirtualGridList
+  from '../../../../components/TVirtualGridList/TVirtualGridList';
+import { panel_names } from '../../../../utils/Config';
+import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard';
+import css from './LiveChannelContents.module.less';
+import PlayerTabLoading from './PlayerTabLoading';
 
 export default function FeaturedShowContents({
   featuredShowsInfos,
@@ -49,11 +55,21 @@ export default function FeaturedShowContents({
           patnerName={patncNm}
           onClick={handleItemClick}
           type={TYPES.featuredHorizontal}
+          spotlightId={`featuredShows-video-${index}`}
         />
       );
     },
     [featuredShowsInfos]
   );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      Spotlight.focus("featuredShows-video-0");
+    });
+
+    return () => clearTimeout(timer);
+  }, [featuredShowsInfos]);
+
   return (
     <>
       <div className={css.container}>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx

@@ -1,8 +1,10 @@
 import React, { useCallback, useEffect, useState } from "react";
 
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 
-import { pushPanel, updatePanel } from "../../../../actions/panelActions";
+import Spotlight from "@enact/spotlight";
+
+import { updatePanel } from "../../../../actions/panelActions";
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import { panel_names } from "../../../../utils/Config";
 import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
@@ -26,10 +28,8 @@ export default function LiveChannelContents({ liveInfos, setSelectedIndex }) {
         endDt,
         timezone,
         thumbnailUrl,
-        showType,
       } = liveInfos[index];
 
-      console.log("#liveInfos", liveInfos);
       const handleItemClick = () => {
         setSelectedIndex(index);
 
@@ -55,11 +55,20 @@ export default function LiveChannelContents({ liveInfos, setSelectedIndex }) {
           timezone={timezone}
           onClick={handleItemClick}
           type={TYPES.liveHorizontal}
+          spotlightId={`liveChannel-Item-${index}`}
         />
       );
     },
     [liveInfos, dispatch]
   );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      Spotlight.focus("liveChannel-Item-0");
+    });
+
+    return () => clearTimeout(timer);
+  }, [liveInfos]);
   return (
     <>
       <div className={css.container}>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
-import { pushPanel, updatePanel } from "../../../../actions/panelActions";
+import { pushPanel } from "../../../../actions/panelActions";
 import TItemCard, { TYPES } from "../../../../components/TItemCard/TItemCard";
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import { panel_names } from "../../../../utils/Config";
@@ -64,6 +64,7 @@ export default function ShopNowContents({ shopNowInfo }) {
     },
     [shopNowInfo]
   );
+
   return (
     <>
       <Container className={css.container}>