[251126] fix: Log Migration - PlayerPanel.jsx

🕐 커밋 시간: 2025. 11. 26. 10:08:34

📊 변경 통계:
  • 총 파일: 2개

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선

com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js

@@ -776,6 +776,7 @@ const VideoPlayerBase = class extends React.Component {
     this.sliderKnobProportion = 0;
     this.mediaControlsSpotlightId = props.spotlightId + '_mediaControls';
     this.jumpButtonPressed = null;
+    this.focusTimer = null;
 
     // Re-render-necessary State
     this.state = {
@@ -1038,6 +1039,7 @@ const VideoPlayerBase = class extends React.Component {
     this.stopDelayedTitleHide();
     this.stopDelayedFeedbackHide();
     this.stopDelayedMiniFeedbackHide();
+    if (this.focusTimer) clearTimeout(this.focusTimer);
     this.announceJob.stop();
     this.renderBottomControl.stop();
     this.slider5WayPressJob.stop();
@@ -2603,11 +2605,11 @@ const VideoPlayerBase = class extends React.Component {
       this.showControls();
 
       if (this.state.lastFocusedTarget) {
-        setTimeout(() => {
+        this.focusTimer = setTimeout(() => {
           Spotlight.focus(this.state.lastFocusedTarget);
         });
       } else {
-        setTimeout(() => {
+        this.focusTimer = setTimeout(() => {
           Spotlight.focus(SpotlightIds.PLAYER_TAB_BUTTON);
         });
       }

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

@@ -282,6 +282,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
   const watchIntervalLive = useRef(null);
   const watchIntervalVod = useRef(null);
   const watchIntervalMedia = useRef(null);
+  const timeoutRef = useRef(null);
   // useEffect(() => {
   //   console.log("###videoLoaded", videoLoaded);
   //   if (nowMenu) {
@@ -291,8 +292,15 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     if (liveShowInfos && liveShowInfos.length > 0) {
       const panelInfoChanId = panelInfo?.chanId;
       const isLive = panelInfo?.shptmBanrTpNm === 'LIVE';
+      const isModal = panelInfo?.modal;
 
       if (isLive) {
+        // live full 화면에서 modal 전환시 로그 전송 추가
+        if (isModal) {
+          dispatch(sendLogGNB(Config.LOG_MENU.FULL));
+          prevNowMenuRef.current = nowMenuRef.current;
+          return () => dispatch(sendLogGNB(prevNowMenuRef.current));
+        }
         const liveShowInfo = liveShowInfos //
           .find(({ chanId }) => panelInfoChanId === chanId);
 
@@ -303,7 +311,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     }
 
     return {};
-  }, [liveShowInfos, panelInfo?.chanId, panelInfo?.shptmBanrTpNm]);
+  }, [liveShowInfos, panelInfo?.chanId, panelInfo?.shptmBanrTpNm, panelInfo?.modal]);
 
   const currentVODShowInfo = useMemo(() => {
     if (showDetailInfo && showDetailInfo.length > 0) {
@@ -327,7 +335,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
       prevNowMenuRef.current = nowMenuRef.current;
 
       return () => dispatch(sendLogGNB(prevNowMenuRef.current));
-    } else if (panelInfo?.modal) {
+    } else if (panelInfo?.modal && panelInfo?.shptmBanrTpNm !== 'LIVE') {
       dispatch(sendLogGNB(entryMenu));
     }
   }, [panelInfo?.modal, panelInfo?.shptmBanrTpNm]);
@@ -619,7 +627,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
       if (lastFocusedTargetId) {
         // ShopNowContents가 렌더링될 때까지 대기 후 포커스 복원
-        setTimeout(() => {
+        timeoutRef.current = setTimeout(() => {
           dlog('[PlayerPanel] 🔍 800ms 후 포커스 복원 시도:', lastFocusedTargetId);
           Spotlight.focus(lastFocusedTargetId);
         }, 800);
@@ -1147,7 +1155,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
         //딮링크로 플레이어 진입 후 이전버튼 클릭시
         if (panels.length === 1) {
-          setTimeout(() => {
+          timeoutRef.current = setTimeout(() => {
             Spotlight.focus(SpotlightIds.HOME_TBODY);
           });
         }
@@ -1685,7 +1693,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
   useEffect(() => {
     if (currentLiveTimeSeconds > liveTotalTime) {
-      setTimeout(() => {
+      timeoutRef.current = setTimeout(() => {
         dispatch(getMainLiveShow());
         setShopNowInfo('');
         dispatch(
@@ -1694,8 +1702,21 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
           })
         );
       }, 3000);
+
+      return () => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      };
     }
-  }, [currentLiveTimeSeconds, liveTotalTime]);
+  }, [currentLiveTimeSeconds, liveTotalTime, dispatch, playListInfo, selectedIndex]);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (watchIntervalLive.current) clearInterval(watchIntervalLive.current);
+      if (watchIntervalVod.current) clearInterval(watchIntervalVod.current);
+      if (watchIntervalMedia.current) clearInterval(watchIntervalMedia.current);
+    };
+  }, []);
 
   const mediainfoHandler = useCallback(
     (ev) => {
@@ -1994,7 +2015,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
   const handlePopupClose = useCallback(() => {
     dispatch(setHidePopup());
-    setTimeout(() => Spotlight.focus(SpotlightIds.PLAYER_SUBTITLE_BUTTON));
+    timeoutRef.current = setTimeout(() => Spotlight.focus(SpotlightIds.PLAYER_SUBTITLE_BUTTON));
   }, [dispatch]);
   const reactPlayerSubtitleConfig = useMemo(() => {
     if (isSubtitleActive && currentSubtitleBlob) {
@@ -2324,7 +2345,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
           })
         );
         Spotlight.pause();
-        setTimeout(() => {
+        timeoutRef.current = setTimeout(() => {
           Spotlight.resume();
           dispatch(PanelActions.popPanel());
         }, VIDEO_END_ACTION_DELAY);
@@ -2332,7 +2353,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
       }
       if (panelInfoRef.current.shptmBanrTpNm === 'VOD') {
         Spotlight.pause();
-        setTimeout(() => {
+        timeoutRef.current = setTimeout(() => {
           stopExternalPlayer();
           if (panelInfoRef.current.modal) {
             // 모달 모드에서는 종료 후 화면을 유지하고 Back 아이콘으로 포커스 이동
@@ -2582,7 +2603,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
         if (lastFocusedTargetId) {
           // ShopNowContents가 렌더링될 때까지 잠시 대기 후 포커스 복원
-          setTimeout(() => {
+          timeoutRef.current = setTimeout(() => {
             dlog('[PlayerPanel] 🔍 500ms 후 포커스 복원 시도:', lastFocusedTargetId);
             Spotlight.focus(lastFocusedTargetId);
           }, 500);
@@ -2591,6 +2612,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         // 한 번 처리한 복귀 플래그는 즉시 해제해 중복 영향을 막는다.
         prevIsTopPanelDetailFromPlayerRef.current = false;
       }
+
+      return () => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      };
     }
   }, [
     isOnTop,