[PlayerPanel] shopNow last-focused && video focus refactoring

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

@@ -909,6 +909,7 @@ const PlayerPanel = ({
     }
   }, [showDetailInfo]);
 
+  // itemClick focused
   useEffect(() => {
     if (!isInitialFocusOccurred) {
       let targetId;
@@ -929,27 +930,49 @@ const PlayerPanel = ({
     }
   }, [isInitialFocusOccurred, panelInfo]);
 
+  // videoClick focused
   useEffect(() => {
+    if (!playListInfo) {
+      return;
+    }
+    // 아이템클릭 진입시 포커스
+    if (panelInfo?.targetId) {
+      return;
+    }
     if (panelInfo.isUpdatedByClick) {
       return;
     }
-
-    if (sideContentsVisible && shopNowInfo && shopNowInfo.length > 0) {
+    // 세로형모드 포커스
+    if (videoVerticalVisible) {
+      Spotlight.focus("tab-0");
+      return;
+    }
+    // 비디오 진입시 포커스
+    if (panelInfo.isUpdatedByClick === undefined && shopNowInfo?.length > 0) {
       Spotlight.focus("playVideoShopNowBox");
       return;
     }
-    if (!panelInfo.modal && !videoVerticalVisible && playListInfo) {
+    // 미디어 포커스
+    if (panelInfo.shptmBanrTpNm === "MEDIA" && !panelInfo.modal) {
+      Spotlight.focus("videoPlayer");
+      return;
+    }
+    // 화살표버튼 포커스
+    if (!panelInfo.modal && !videoVerticalVisible) {
       Spotlight.focus("player-tab-arrow");
     }
   }, [
+    panelInfo?.targetId,
     panelInfo.modal,
     panelInfo.isUpdatedByClick,
+    panelInfo.shptmBanrTpNm,
     shopNowInfo,
     sideContentsVisible,
     playListInfo,
     videoVerticalVisible,
   ]);
 
+  // liveChannel initial selectedIndex
   useEffect(() => {
     if (panelInfo?.shptmBanrTpNm === "LIVE" && playListInfo?.length > 0) {
       const index = playListInfo.findIndex(
@@ -963,6 +986,7 @@ const PlayerPanel = ({
     }
   }, [panelInfo?.shptmBanrTpNm, playListInfo]);
 
+  // live subtitle Luna API
   useEffect(() => {
     if (currentSubtitleBlob || panelInfo?.shptmBanrTpNm === "MEDIA") {
       return;
@@ -989,6 +1013,7 @@ const PlayerPanel = ({
     panelInfo.shptmBanrTpNm,
   ]);
 
+  // get PlayListInfo
   useEffect(() => {
     if (!panelInfo) return;
     switch (panelInfo.shptmBanrTpNm) {
@@ -1310,12 +1335,6 @@ const PlayerPanel = ({
     }
   }, [currentSubtitleBlob, isSubtitleActive]);
 
-  useEffect(() => {
-    if (!panelInfo.modal) {
-      Spotlight.focus("videoPlayer");
-    }
-  }, [panelInfo.modal]);
-
   const currentSideButtonStatus = useMemo(() => {
     if (
       panelInfo?.shptmBanrTpNm !== "MEDIA" &&
@@ -1469,12 +1488,6 @@ const PlayerPanel = ({
     }
   }, [videoVerticalVisible, sideContentsVisible]);
 
-  useEffect(() => {
-    if (playListInfo && videoVerticalVisible) {
-      Spotlight.focus("tab-0");
-    }
-  }, [playListInfo, videoVerticalVisible]);
-
   useEffect(() => {
     return () => {
       dispatch(clearShopNowInfo());

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

@@ -17,7 +17,7 @@ import ShopNowContents from "./TabContents/ShopNowContents";
 import YouMayLikeContents from "./TabContents/YouMayLikeContents";
 
 const Container = SpotlightContainerDecorator(
-  { enterTo: "default-element" },
+  { enterTo: "last-focused" },
   "div"
 );
 

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

@@ -17,7 +17,7 @@ import ListEmptyContents from "../TabContents/ListEmptyContents/ListEmptyContent
 import css from "./ShopNowContents.module.less";
 
 const Container = SpotlightContainerDecorator(
-  { enterTo: "default-element" },
+  { enterTo: "last-focused" },
   "div"
 );
 export default function ShopNowContents({
@@ -98,7 +98,7 @@ export default function ShopNowContents({
 
   return (
     <>
-      <Container className={css.container} spotlightId="playVideoShopNowBox">
+      <Container className={css.container}>
         {shopNowInfo && shopNowInfo.length > 0 ? (
           <TVirtualGridList
             style={gridStyle}
@@ -112,6 +112,7 @@ export default function ShopNowContents({
               videoVerticalVisible ? css.verticalItemList : css.itemList
             }
             noScrollByWheel={false}
+            spotlightId="playVideoShopNowBox"
           />
         ) : (
           <ListEmptyContents tabIndex={tabIndex} />