Home에서 PopularShow 진입 후 BestSeller를 나갔다오면 video 포커스 후 다시 ItemCard로 진입하는 현상 수정

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

@@ -63,22 +63,6 @@ const PopularShow = ({
 
   const handleCardClick = useCallback(
     (patnrId, showId, catCd, showUrl) => () => {
-      const lastFocusedTargetId = getContainerId(Spotlight.getCurrent());
-      const currentSpot = Spotlight.getCurrent();
-
-      if (lastFocusedTargetId) {
-        dispatch(
-          updateHomeInfo({
-            name: panel_names.HOME_PANEL,
-            panelInfo: {
-              lastFocusedTargetId,
-              focusedContainerId: TEMPLATE_CODE_CONF.POPULAR_SHOW,
-              currentSpot: currentSpot?.getAttribute("data-spotlight-id"),
-            },
-          })
-        );
-      }
-
       dispatch(
         startVideoPlayer({
           showId,

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

@@ -4,70 +4,63 @@ import React, {
   useLayoutEffect,
   useMemo,
   useRef,
-} from 'react';
+} from "react";
 
-import classNames from 'classnames';
+import classNames from "classnames";
-import { useDispatch } from 'react-redux';
+import { useDispatch } from "react-redux";
 
-import { Job } from '@enact/core/util';
+import { Job } from "@enact/core/util";
-import Spotlight from '@enact/spotlight';
+import Spotlight from "@enact/spotlight";
-import SpotlightContainerDecorator
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-  from '@enact/spotlight/SpotlightContainerDecorator';
+import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
-import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
 
-import dummyVtt from '../../../assets/mock/video.vtt';
+import dummyVtt from "../../../assets/mock/video.vtt";
 import {
   changeAppStatus,
   changeLocalSettings,
   requestLiveSubtitle,
   sendBroadCast,
   setHidePopup,
-} from '../../actions/commonActions';
+} from "../../actions/commonActions";
 import {
   sendLogGNB,
   sendLogLive,
   sendLogTotalRecommend,
   sendLogVOD,
-} from '../../actions/logActions';
+} from "../../actions/logActions";
 import {
   clearShopNowInfo,
   getHomeFullVideoInfo,
   getMainCategoryShowDetail,
   getMainLiveShow,
   getMainLiveShowNowProduct,
-} from '../../actions/mainActions';
+} from "../../actions/mainActions";
-import * as PanelActions from '../../actions/panelActions';
+import * as PanelActions from "../../actions/panelActions";
-import { updatePanel } from '../../actions/panelActions';
+import { updatePanel } from "../../actions/panelActions";
 import {
   CLEAR_PLAYER_INFO,
   getChatLog,
   getSubTitle,
   startVideoPlayer,
-} from '../../actions/playActions';
+} from "../../actions/playActions";
-import { convertUtcToLocal } from '../../components/MediaPlayer/util';
+import { convertUtcToLocal } from "../../components/MediaPlayer/util";
-import TPanel from '../../components/TPanel/TPanel';
+import TPanel from "../../components/TPanel/TPanel";
-import TPopUp from '../../components/TPopUp/TPopUp';
+import TPopUp from "../../components/TPopUp/TPopUp";
-import Media from '../../components/VideoPlayer/Media';
+import Media from "../../components/VideoPlayer/Media";
-import TReactPlayer from '../../components/VideoPlayer/TReactPlayer';
+import TReactPlayer from "../../components/VideoPlayer/TReactPlayer";
-import { VideoPlayer } from '../../components/VideoPlayer/VideoPlayer';
+import { VideoPlayer } from "../../components/VideoPlayer/VideoPlayer";
-import usePrevious from '../../hooks/usePrevious';
+import usePrevious from "../../hooks/usePrevious";
-import useWhyDidYouUpdate from '../../hooks/useWhyDidYouUpdate';
+import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate";
-import * as Config from '../../utils/Config';
+import * as Config from "../../utils/Config";
-import {
+import { ACTIVE_POPUP, panel_names } from "../../utils/Config";
-  ACTIVE_POPUP,
+import { $L, formatGMTString } from "../../utils/helperMethods";
-  panel_names,
+import { SpotlightIds } from "../../utils/SpotlightIds";
-} from '../../utils/Config';
+import { removeDotAndColon } from "./PlayerItemCard/PlayerItemCard";
-import {
+import PlayerOverlayChat from "./PlayerOverlay/PlayerOverlayChat";
-  $L,
+import PlayerOverlayQRCode from "./PlayerOverlay/PlayerOverlayQRCode";
-  formatGMTString,
+import css from "./PlayerPanel.module.less";
-} from '../../utils/helperMethods';
+import PlayerTabButton from "./PlayerTabContents/TabButton/PlayerTabButton";
-import { SpotlightIds } from '../../utils/SpotlightIds';
+import TabContainer from "./PlayerTabContents/TabContainer";
-import { removeDotAndColon } from './PlayerItemCard/PlayerItemCard';
-import PlayerOverlayChat from './PlayerOverlay/PlayerOverlayChat';
-import PlayerOverlayQRCode from './PlayerOverlay/PlayerOverlayQRCode';
-import css from './PlayerPanel.module.less';
-import PlayerTabButton from './PlayerTabContents/TabButton/PlayerTabButton';
-import TabContainer from './PlayerTabContents/TabContainer';
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "default-element", preserveld: true },
@@ -234,7 +227,6 @@ const PlayerPanel = ({
   const panels = USE_SELECTOR("panels", (state) => state.panels.panels);
   const chatData = USE_SELECTOR("chatData", (state) => state.play.chatData);
 
-
   const popupVisible = USE_SELECTOR(
     "popupVisible",
     (state) => state.common.popup.popupVisible
@@ -891,7 +883,9 @@ const PlayerPanel = ({
 
         //딮링크로 플레이어 진입 후 이전버튼 클릭시
         if (panels.length === 1) {
-          Spotlight.focus(SpotlightIds.HOME_TBODY);
+          setTimeout(() => {
+            Spotlight.focus(SpotlightIds.HOME_TBODY);
+          });
         }
         ev?.stopPropagation();
         // ev?.preventDefault();
@@ -1013,7 +1007,6 @@ const PlayerPanel = ({
     panelInfo.isUpdatedByClick,
     panelInfo.isIndicatorByClick,
 
-    
     panelInfo.shptmBanrTpNm,
   ]);
 
@@ -1984,56 +1977,56 @@ const PlayerPanel = ({
 
   const isPlayer = useMemo(() => {
     if (!panelInfo.modal) {
-      return 'full player';
+      return "full player";
     }
 
     switch (panels[0].name) {
-      case 'categorypanel':
+      case "categorypanel":
-        return 'category';
+        return "category";
-      case 'mypagepanel':
+      case "mypagepanel":
-        return 'my page';
+        return "my page";
-      case 'searchpanel':
+      case "searchpanel":
-        return 'search';
+        return "search";
-      case 'hotpickpanel':
+      case "hotpickpanel":
-        return 'hot picks';
+        return "hot picks";
-      case 'featuredbrandspanel':
+      case "featuredbrandspanel":
-        return 'featured brands';
+        return "featured brands";
-      case 'trendingnowpanel':
+      case "trendingnowpanel":
-        return 'trending now';
+        return "trending now";
-      case 'playerpanel':
+      case "playerpanel":
-        return 'home';
+        return "home";
     }
-      
   }, [panelInfo.modal, panels]);
 
   useEffect(() => {
     if (!panelInfo?.shptmBanrTpNm) return;
 
-    const brandArray = showDetailInfo?.[0]?.productInfos?.map(item => item.brndNm) || [];
+    const brandArray =
-    const categoryArray = showDetailInfo?.[0]?.productInfos?.map(item => item.catNm) || [];
+      showDetailInfo?.[0]?.productInfos?.map((item) => item.brndNm) || [];
+    const categoryArray =
+      showDetailInfo?.[0]?.productInfos?.map((item) => item.catNm) || [];
     const params = {
-      visible: 'true',
+      visible: "true",
       showType: panelInfo.shptmBanrTpNm,
       player: isPlayer,
-      contentId: showDetailInfo?.[0]?.showId || '',
+      contentId: showDetailInfo?.[0]?.showId || "",
-      contentTitle: showDetailInfo?.[0]?.showNm || '',
+      contentTitle: showDetailInfo?.[0]?.showNm || "",
-      partner: showDetailInfo?.[0]?.patncNm || '',
+      partner: showDetailInfo?.[0]?.patncNm || "",
-      brand: brandArray.join('|') || null,
+      brand: brandArray.join("|") || null,
-      category: categoryArray.join('|') || null,
+      category: categoryArray.join("|") || null,
       contextName: Config.LOG_CONTEXT_NAME.SHOW,
-      messageId: Config.LOG_MESSAGE_ID.SHOWVIEW
+      messageId: Config.LOG_MESSAGE_ID.SHOWVIEW,
     };
-    
+
     dispatch(sendLogTotalRecommend(params));
 
     return () => {
       const unmountParams = {
         ...params,
-        visible: 'false'
+        visible: "false",
       };
       dispatch(sendLogTotalRecommend(unmountParams));
     };
-
   }, [panelInfo?.shptmBanrTpNm, isPlayer]);
 
   return (