[251103] fix: VideoPlayer,MediaPlayer warning resolved

🕐 커밋 시간: 2025. 11. 03. 21:02:13

📊 변경 통계:
  • 총 파일: 5개
  • 추가: +54줄
  • 삭제: -5줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/playActions.js
  ~ com.twin.app.shoptime/src/components/MediaPlayer/MediaKnob.js
  ~ com.twin.app.shoptime/src/components/MediaPlayer/MediaSlider.js
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBanner.jsx

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선

com.twin.app.shoptime/src/actions/playActions.js

@@ -24,6 +24,20 @@ let startVideoTimer = null;
 //start modal mode
 //start Full -> modal mode
 let startVideoFocusTimer = null;
+
+// 🔽 전역 타이머 정리 함수 - 메모리 누수 방지
+export const clearAllVideoTimers = () => {
+  if (startVideoFocusTimer) {
+    clearTimeout(startVideoFocusTimer);
+    startVideoFocusTimer = null;
+    console.log('[playActions] startVideoFocusTimer cleared');
+  }
+  if (startVideoTimer) {
+    clearTimeout(startVideoTimer);
+    startVideoTimer = null;
+    console.log('[playActions] startVideoTimer cleared');
+  }
+};
 export const startVideoPlayer =
   ({ modal, modalContainerId, modalClassName, spotlightDisable, useNewPlayer, ...rest }) =>
   (dispatch, getState) => {

com.twin.app.shoptime/src/components/MediaPlayer/MediaKnob.js

@@ -43,7 +43,8 @@ const MediaKnob = kind({
       value = previewProportion;
     }
 
-    return <Knob {...rest} proportion={value} value={value} spotlightDisable />;
+    // spotlightDisable prop을 제거하고 rest만 전달
+    return <Knob {...rest} proportion={value} value={value} />;
   },
 });
 

com.twin.app.shoptime/src/components/MediaPlayer/MediaSlider.js

@@ -109,8 +109,8 @@ const MediaSliderBase = kind({
       >
         <Slider
           {...rest}
-          onChange={type !== "LIVE" && onChange}
-          onFocus={type !== "LIVE" && onFocus}
+          onChange={type !== "LIVE" ? onChange : undefined}
+          onFocus={type !== "LIVE" ? onFocus : undefined}
           aria-hidden="true"
           className={sliderClassName}
           css={css}

com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx

@@ -17,7 +17,7 @@ import {
   stopAutoClose,
   resetAutoClose,
 } from '../../../../actions/videoOverlayActions';
-import { pauseFullscreenVideo, resumeFullscreenVideo } from '../../../../actions/playActions';
+import { pauseFullscreenVideo, resumeFullscreenVideo, clearAllVideoTimers } from '../../../../actions/playActions';
 import css from './ProductVideo.module.less';
 
 const SpottableComponent = Spottable('div');
@@ -295,12 +295,24 @@ export default function ProductVideoV2({
       }, 500);
     }
 
-    // cleanup: unmount 시 timer 해제
+    // cleanup: unmount 시 timer 및 리소스 정리
     return () => {
       if (autoPlayTimerRef.current) {
         clearTimeout(autoPlayTimerRef.current);
         autoPlayTimerRef.current = null;
       }
+
+      // 전역 비디오 타이머 정리 (메모리 누수 방지)
+      clearAllVideoTimers();
+
+      // 비디오 플레이어 정지
+      if (videoPlayerRef.current) {
+        try {
+          videoPlayerRef.current.pause();
+        } catch (error) {
+          console.warn('[ProductVideoV2] 비디오 정지 실패:', error);
+        }
+      }
     };
   }, [autoPlay, canPlayVideo, isPlaying, dispatch]);
 

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

@@ -43,6 +43,7 @@ import {
   requestPlayControl,
   startVideoPlayer,
   startVideoPlayerNew,
+  clearAllVideoTimers,
 } from '../../../actions/playActions';
 import CustomImage from '../../../components/CustomImage/CustomImage';
 // import TButtonScroller from "../../../components/TButtonScroller/TButtonScroller";
@@ -106,6 +107,27 @@ export default function HomeBanner({
     logPrefix: "[HomeBanner-VideoMove]",
   });
 
+  // 🔽 컴포넌트 언마운트 시 비디오 리소스 정리
+  useEffect(() => {
+    return () => {
+      console.log('[HomeBanner] 컴포넌트 언마운트 - 비디오 리소스 정리');
+      cleanup();
+
+      // 전역 비디오 타이머 정리 (메모리 누수 방지)
+      clearAllVideoTimers();
+
+      // 백그라운드 비디오 정지
+      if (window.mediaPlayer && window.mediaPlayer._controller) {
+        try {
+          window.mediaPlayer._controller.pause();
+          console.log('[HomeBanner] 백그라운드 비디오 정지 완료');
+        } catch (error) {
+          console.warn('[HomeBanner] 백그라운드 비디오 정지 실패:', error);
+        }
+      }
+    };
+  }, [cleanup]);
+
   const selectTemplate = useMemo(() => {
     return homeTopDisplayInfo.shptmTmplCd;
   }, [homeTopDisplayInfo.shptmTmplCd]);