[251125] fix: Memory Monitoring - 1

🕐 커밋 시간: 2025. 11. 25. 22:58:25

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +20줄
  • 삭제: -26줄

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

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 코드 정리 및 최적화

Performance: 코드 최적화로 성능 개선 기대

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

@@ -1132,11 +1132,6 @@ const VideoPlayerBase = class extends React.Component {
     }
     // 레퍼런스도 해제해 GC 대상이 되도록 함
     this.video = null;
-    // 메모리 모니터링 인터벌 정리
-    if (this.memoryMonitoringInterval) {
-      clearInterval(this.memoryMonitoringInterval);
-      this.memoryMonitoringInterval = null;
-    }
     memoryMonitor.logMemory('[VideoPlayer] componentWillUnmount - cleanup done');
     // console.log('[VideoPlayer] componentWillUnmount - cleanup done', { src: this.props?.src });
     if (this.floatingLayerController) {
@@ -1816,7 +1811,6 @@ const VideoPlayerBase = class extends React.Component {
    * @public
    */
   play = () => {
-    console.log('[TEST] play() method called');
     memoryMonitor.logMemory('[VideoPlayer] play() called', {
       currentTime: this.state.currentTime,
       duration: this.state.duration,
@@ -1842,21 +1836,6 @@ const VideoPlayerBase = class extends React.Component {
     this.send('play');
     this.announce($L('Play'));
     this.startDelayedMiniFeedbackHide(5000);
-    // 재생 시작 시 정기적 메모리 모니터링 시작
-    if (!this.memoryMonitoringInterval) {
-      this.memoryMonitoringInterval = setInterval(() => {
-        try {
-          const mediaState = this.getMediaState();
-          memoryMonitor.logMemory('[VideoPlayer] Playing', {
-            currentTime: (mediaState?.currentTime ?? 0).toFixed(2),
-            duration: (mediaState?.duration ?? 0).toFixed(2),
-            buffered: (this.state?.proportionLoaded ?? 0).toFixed(2),
-          });
-        } catch (err) {
-          // 타이머 실행 중 오류 발생 시 무시
-        }
-      }, 30000); // 30초마다 메모리 확인
-    }
 
     // Redux 상태 업데이트 - 재생 상태로 변경
     if (this.props.dispatch) {
@@ -1905,11 +1884,6 @@ const VideoPlayerBase = class extends React.Component {
     this.send('pause');
     this.announce($L('Pause'));
     this.stopDelayedMiniFeedbackHide();
-    // 재생 일시정지 시 정기적 메모리 모니터링 중지
-    if (this.memoryMonitoringInterval) {
-      clearInterval(this.memoryMonitoringInterval);
-      this.memoryMonitoringInterval = null;
-    }
 
     // Redux 상태 업데이트 - 일시정지 상태로 변경
     if (this.props.dispatch) {

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

@@ -380,6 +380,26 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     }
   }, []);
 
+  // 재생 중 15초마다 메모리 모니터링
+  const lastMemoryLogTimeRef = useRef(0);
+  useEffect(() => {
+    const mediaState = videoPlayer.current?.getMediaState();
+
+    // 재생 중인지 확인 (duration > 0이고 paused가 아님)
+    if (mediaState?.duration > 0 && !mediaState?.paused && currentTime > 0) {
+      const now = Date.now();
+      // 마지막 로그 이후 15초 이상 경과했으면 로깅
+      if (now - lastMemoryLogTimeRef.current >= 15000) {
+        memoryMonitor.current.logMemory('[Video Playing]', {
+          currentTime: (mediaState?.currentTime ?? 0).toFixed(2),
+          duration: (mediaState?.duration ?? 0).toFixed(2),
+          buffered: (mediaState?.proportionLoaded ?? 0).toFixed(2),
+        });
+        lastMemoryLogTimeRef.current = now;
+      }
+    }
+  }, [currentTime]);
+
   // PlayerPanel.jsx의 라인 313-327 useEffect 수정 - detailPanelClosed flag 감지 추가
   useEffect(() => {
     dlog('[PlayerPanel] 🔍 isOnTop useEffect 호출:', {