[251009] feat: components - VideoPlayer.js, PlayerPanel.jsx 파일 수정

🕐 커밋 시간: 2025. 10. 09. 20:23:19

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

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

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js (javascript):
    ✅ Added: getControlsHandleAboveHoldConfig(), shouldJump(), calcNumberValueOfPlaybackRate(), getDurFmt(), onSpotlightFocus(), getVideoPhoneNumberClassNames()
    ❌ Deleted: getControlsHandleAboveHoldConfig(), calcNumberValueOfPlaybackRate(), getDurFmt(), forwardWithState(), onSpotlightFocus(), getVideoPhoneNumberClassNames()
  📄 com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx (javascript):
    ✅ Added: handleEvent()

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

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

@@ -153,6 +153,7 @@ const YOUTUBECONFIG = {
 const INITIAL_TIMEOUT = 30000;
 const REGULAR_TIMEOUT = 30000;
 const TAB_CONTAINER_SPOTLIGHT_ID = 'tab-container-spotlight-id';
+const TAB_CONTAINER_V2_SPOTLIGHT_ID = 'tab-container-v2-spotlight-id';
 const TARGET_EVENTS = ['mousemove', 'keydown', 'click'];
 
 // last time error
@@ -1737,7 +1738,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
   };
 
   const [initialEnter, setInitialEnter] = USE_STATE('initialEnter', true);
+  const [initialEnterV2, setInitialEnterV2] = USE_STATE('initialEnterV2', true);
   const timerId = useRef(null);
+  const timerIdV2 = useRef(null);
+
   const showSideContents = useMemo(() => {
     return (
       sideContentsVisible &&
@@ -1750,7 +1754,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
   const showBelowContents = useMemo(() => {
     return (
-      sideContentsVisible &&
+      belowContentsVisible &&
       playListInfo &&
       panelInfo?.shptmBanrTpNm !== 'MEDIA' &&
       !panelInfo?.modal &&
@@ -1809,10 +1813,33 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     }, timeout);
   }, []);
 
+  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();
+    }
+
+    if (initialEnterV2) {
+      console.log('[TabContainerV2] initialEnterV2 false로 변경');
+      setInitialEnterV2(false);
+    }
+
+    timerIdV2.current = setTimeout(() => {
+      console.log('[TabContainerV2] 타이머 실행 - belowContentsVisible false로 변경');
+      setBelowContentsVisible(false);
+    }, timeout);
+  }, []);
+
   useEffect(() => {
     if (isOnTop && !panelInfo.modal && !videoVerticalVisible) {
       setSideContentsVisible(true);
-      // setBelowContentsVisible(true);
+      setBelowContentsVisible(true);
     }
   }, [panelInfo.modal]);
 
@@ -1853,6 +1880,47 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     };
   }, [sideContentsVisible]);
 
+  // TabContainerV2 자동 닫기
+  useEffect(() => {
+    console.log('[TabContainerV2] useEffect 시작', {
+      showBelowContents,
+      videoVerticalVisible,
+      initialEnterV2,
+    });
+
+    const node = document.querySelector(`[data-spotlight-id=${TAB_CONTAINER_V2_SPOTLIGHT_ID}]`);
+    console.log('[TabContainerV2] DOM node:', node);
+
+    if (!showBelowContents || !node || videoVerticalVisible) {
+      console.log('[TabContainerV2] early return');
+      return;
+    }
+
+    // NOTE 첫 진입 시에는 30초 후 탭이 닫히도록 설정
+    if (initialEnterV2) {
+      console.log('[TabContainerV2] 첫 진입 - 타이머 시작', INITIAL_TIMEOUT);
+      resetTimerV2(INITIAL_TIMEOUT);
+    }
+
+    const handleEvent = (e) => {
+      console.log('[TabContainerV2] 이벤트 발생:', e.type);
+      resetTimerV2(REGULAR_TIMEOUT);
+    };
+    TARGET_EVENTS.forEach((event) => {
+      console.log('[TabContainerV2] 이벤트 리스너 등록:', event);
+      node.addEventListener(event, handleEvent);
+    });
+
+    return () => {
+      console.log('[TabContainerV2] cleanup');
+      TARGET_EVENTS.forEach((event) => node.removeEventListener(event, handleEvent));
+
+      if (timerIdV2.current) {
+        clearTimerV2();
+      }
+    };
+  }, [showBelowContents, videoVerticalVisible]);
+
   useLayoutEffect(() => {
     const videoContainer = document.querySelector(`.${css.videoContainer}`);
 
@@ -2021,6 +2089,8 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
             setIsSubtitleActive={setIsSubtitleActive}
             setSideContentsVisible={setSideContentsVisible}
             sideContentsVisible={sideContentsVisible}
+            setBelowContentsVisible={setBelowContentsVisible}
+            belowContentsVisible={belowContentsVisible}
             videoVerticalVisible={videoVerticalVisible}
             setCurrentTime={setCurrentTime}
             setIsVODPaused={setIsVODPaused}
@@ -2108,8 +2178,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
           </>
         )} */}
 
-        {/* {showBelowContents && ( */}
-        {isOnTop && (
+        {showBelowContents && (
           <TabContainerV2
             panelInfo={panelInfo}
             playListInfo={playListInfo}
@@ -2121,14 +2190,13 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
             handleItemFocus={handleItemFocus}
             prevChannelIndex={prevChannelIndex}
             currentTime={currentTime}
-            spotlightId="tab-container-v2-spotlight-id"
+            spotlightId={TAB_CONTAINER_V2_SPOTLIGHT_ID}
             tabIndex={tabIndexV2}
             onShopNowButtonClick={() => setTabIndexV2(0)}
             onLiveChannelButtonClick={() => setTabIndexV2(2)}
             onTabClose={(newTabIndex) => setTabIndexV2(newTabIndex)}
           />
         )}
-        {/* )} */}
       </Container>
 
       {activePopup === ACTIVE_POPUP.alertPopup && (