[251019] fix: PlayerPanel Optimization-2

🕐 커밋 시간: 2025. 10. 19. 22:13:44

📊 변경 통계:
  • 총 파일: 8개
  • 추가: +264줄
  • 삭제: -100줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/convertActions.js
  ~ com.twin.app.shoptime/src/components/TItemCard/TItemCard.new.jsx
  ~ com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayChat.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.new.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/actions/convertActions.js (javascript):
    ✅ Added: attemptConversion(), onSuccess(), onFail()
    ❌ Deleted: onSuccess(), onFail()
  📄 com.twin.app.shoptime/src/components/TItemCard/TItemCard.new.jsx (javascript):
    🔄 Modified: generateMockEnergyLabels()
  📄 com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less (unknown):
    ✅ Added: style()
    ❌ Deleted: style()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayChat.jsx (javascript):
    ✅ Added: PlayerOverlayChat(), propsAreEqual()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx (javascript):
    ✅ Added: PlayerOverlayContents(), propsAreEqual()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx (javascript):
    ✅ Added: PlayerOverlayQRCode(), propsAreEqual()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.new.jsx (javascript):
    ✅ Added: PlayerPanelNew()
    🔄 Modified: getLogTpNo()

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

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

@@ -830,7 +830,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         resetTimer(REGULAR_TIMEOUT);
       }
     },
-    [resetTimer, videoVerticalVisible]
+    [dispatch, resetTimer, videoVerticalVisible]
   );
 
   const onClickBack = useCallback(
@@ -892,7 +892,6 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     [
       dispatch,
       panelInfo,
-      nowMenu,
       videoPlayer,
       sideContentsVisible,
       videoVerticalVisible,
@@ -1400,7 +1399,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         }
       }
     },
-    [currentLiveTimeSeconds, liveTotalTime]
+    [dispatch]
   );
 
   useEffect(() => {
@@ -1881,43 +1880,49 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     timerId.current = null;
   }, []);
 
-  const resetTimer = useCallback((timeout) => {
-    if (timerId.current) {
-      clearTimer();
-    }
+  const resetTimer = useCallback(
+    (timeout) => {
+      if (timerId.current) {
+        clearTimer();
+      }
 
-    if (initialEnter) {
-      setInitialEnter(false);
-    }
+      if (initialEnter) {
+        setInitialEnter(false);
+      }
 
-    timerId.current = setTimeout(() => {
-      setSideContentsVisible(false);
-      // setBelowContentsVisible(false);
-    }, timeout);
-  }, []);
+      timerId.current = setTimeout(() => {
+        setSideContentsVisible(false);
+        // setBelowContentsVisible(false);
+      }, timeout);
+    },
+    [clearTimer, initialEnter, setInitialEnter, setSideContentsVisible]
+  );
 
   const clearTimerV2 = useCallback(() => {
     clearTimeout(timerIdV2.current);
     timerIdV2.current = null;
   }, []);
 
-  const resetTimerV2 = useCallback((timeout) => {
-    // console.log('[TabContainerV2] resetTimerV2 호출', timeout);
-    if (timerIdV2.current) {
-      // console.log('[TabContainerV2] 기존 타이머 클리어');
-      clearTimerV2();
-    }
+  const resetTimerV2 = useCallback(
+    (timeout) => {
+      // console.log('[TabContainerV2] resetTimerV2 호출', timeout);
+      if (timerIdV2.current) {
+        // console.log('[TabContainerV2] 기존 타이머 클리어');
+        clearTimerV2();
+      }
 
-    if (initialEnterV2) {
-      // console.log('[TabContainerV2] initialEnterV2 false로 변경');
-      setInitialEnterV2(false);
-    }
+      if (initialEnterV2) {
+        // console.log('[TabContainerV2] initialEnterV2 false로 변경');
+        setInitialEnterV2(false);
+      }
 
-    timerIdV2.current = setTimeout(() => {
-      // console.log('[TabContainerV2] 타이머 실행 - belowContentsVisible false로 변경');
-      setBelowContentsVisible(false);
-    }, timeout);
-  }, []);
+      timerIdV2.current = setTimeout(() => {
+        // console.log('[TabContainerV2] 타이머 실행 - belowContentsVisible false로 변경');
+        setBelowContentsVisible(false);
+      }, timeout);
+    },
+    [clearTimerV2, initialEnterV2, setInitialEnterV2, setBelowContentsVisible]
+  );
 
   // Redux로 오버레이 숨김
   useEffect(() => {
@@ -1982,7 +1987,14 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         clearTimer();
       }
     };
-  }, [showSideContents, videoVerticalVisible, tabContainerVersion]);
+  }, [
+    showSideContents,
+    videoVerticalVisible,
+    tabContainerVersion,
+    resetTimer,
+    initialEnter,
+    clearTimer,
+  ]);
 
   useEffect(() => {
     if (initialEnter || !sideContentsVisible || videoVerticalVisible) return;
@@ -2041,7 +2053,14 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         clearTimerV2();
       }
     };
-  }, [showBelowContents, videoVerticalVisible, tabContainerVersion]);
+  }, [
+    showBelowContents,
+    videoVerticalVisible,
+    tabContainerVersion,
+    resetTimerV2,
+    initialEnterV2,
+    clearTimerV2,
+  ]);
 
   useLayoutEffect(() => {
     const videoContainer = document.querySelector(`.${css.videoContainer}`);