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

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}>