[251125] fix: Memory Monitoring - 3

🕐 커밋 시간: 2025. 11. 25. 23:08:27

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

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

🔧 주요 변경 내용:
  • 공통 유틸리티 함수 최적화
  • 소규모 기능 개선

com.twin.app.shoptime/src/utils/memoryMonitor.js

@@ -33,6 +33,24 @@ export const createMemoryMonitor = (enableInitLog = true) => {
     return null;
   };
 
+  const getDetailedMemoryInfo = () => {
+    const info = getMemoryInfo();
+    if (!info) return null;
+
+    // 추가 메모리 정보
+    const detailed = {
+      ...info,
+      // usedJSHeapSize의 percentage (상세)
+      heapUsagePercent: ((parseFloat(info.usedJSHeapSize) / parseFloat(info.jsHeapSizeLimit)) * 100).toFixed(1),
+      // DOM 노드 수
+      domNodeCount: document.querySelectorAll('*').length,
+      // 리스너 수 (대략값)
+      eventListenerEstimate: Object.keys(window).filter(key => key.startsWith('on')).length,
+    };
+
+    return detailed;
+  };
+
   const formatMemoryLog = (usedMB, totalMB, limitMB) => {
     const percentage = ((usedMB / limitMB) * 100).toFixed(1);
     return `[Memory] Used: ${usedMB}MB / Total: ${totalMB}MB / Limit: ${limitMB}MB (${percentage}%)`;
@@ -122,11 +140,31 @@ export const createMemoryMonitor = (enableInitLog = true) => {
       }
     },
 
+    /**
+     * 상세 메모리 정보 로깅
+     * @param {string} context - 컨텍스트
+     * @param {object} additionalInfo - 추가 정보
+     */
+    logDetailedMemory: (context = '', additionalInfo = {}) => {
+      const detailed = getDetailedMemoryInfo();
+      if (detailed) {
+        const logMsg = formatMemoryLog(detailed.usedJSHeapSize, detailed.totalJSHeapSize, detailed.jsHeapSizeLimit);
+        const info = Object.keys(additionalInfo).length > 0 ? JSON.stringify(additionalInfo) : '';
+        const detailStr = JSON.stringify({
+          heapUsagePercent: detailed.heapUsagePercent + '%',
+          domNodeCount: detailed.domNodeCount,
+          eventListenerEstimate: detailed.eventListenerEstimate,
+        });
+        console.log(`${logMsg} | ${context} | Details: ${detailStr} ${info}`);
+      }
+    },
+
     /**
      * 메모리 정보만 반환 (로깅 없음)
      * @returns {object} 메모리 정보 객체
      */
     getMemory: () => getMemoryInfo(),
+    getDetailedMemory: () => getDetailedMemoryInfo(),
   };
 
   // 싱글톤 인스턴스 저장
@@ -182,7 +220,21 @@ export const createMemoryMonitor = (enableInitLog = true) => {
         console.log(`${logMsg} | HLS: ${context} | State: ${hlsStr}`);
       }
     },
+    logDetailedMemory: (context = '', additionalInfo = {}) => {
+      const detailed = getDetailedMemoryInfo();
+      if (detailed) {
+        const logMsg = formatMemoryLog(detailed.usedJSHeapSize, detailed.totalJSHeapSize, detailed.jsHeapSizeLimit);
+        const info = Object.keys(additionalInfo).length > 0 ? JSON.stringify(additionalInfo) : '';
+        const detailStr = JSON.stringify({
+          heapUsagePercent: detailed.heapUsagePercent + '%',
+          domNodeCount: detailed.domNodeCount,
+          eventListenerEstimate: detailed.eventListenerEstimate,
+        });
+        console.log(`${logMsg} | ${context} | Details: ${detailStr} ${info}`);
+      }
+    },
     getMemory: () => getMemoryInfo(),
+    getDetailedMemory: () => getDetailedMemoryInfo(),
   };
 
   return memoryMonitorInstance;

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

@@ -380,14 +380,14 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     }
   }, []);
 
-  // 재생 중 15초마다 메모리 모니터링
+  // 재생 중 15초마다 메모리 모니터링 (상세 정보 포함)
   useEffect(() => {
     const memoryLogInterval = setInterval(() => {
       const mediaState = videoPlayer.current?.getMediaState();
 
       // 재생 중인지 확인 (duration > 0이고 paused가 아님)
       if (mediaState?.duration > 0 && !mediaState?.paused && mediaState?.currentTime > 0) {
-        memoryMonitor.current.logMemory('[Video Playing]', {
+        memoryMonitor.current.logDetailedMemory('[Video Playing]', {
           currentTime: (mediaState?.currentTime ?? 0).toFixed(2),
           duration: (mediaState?.duration ?? 0).toFixed(2),
           buffered: (mediaState?.proportionLoaded ?? 0).toFixed(2),