[251009] feat: views - PlayerPanel.jsx - 기능 개선

🕐 커밋 시간: 2025. 10. 09. 21:27:10

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

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

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

@@ -206,6 +206,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
   });
   const [isVODPaused, setIsVODPaused] = USE_STATE('isVODPaused', false);
   const [tabIndexV2, setTabIndexV2] = USE_STATE('tabIndexV2', 1); // 0: ShopNow, 1: LiveChannel, 2: ShopNowButton
+  const [tabContainerVersion, setTabContainerVersion] = USE_STATE('tabContainerVersion', 2); // 1: TabContainer (우측), 2: TabContainerV2 (하단)
 
   const panels = USE_SELECTOR('panels', (state) => state.panels.panels);
   const chatData = USE_SELECTOR('chatData', (state) => state.play.chatData);
@@ -1844,6 +1845,9 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
   }, [panelInfo.modal]);
 
   useEffect(() => {
+    // tabContainerVersion === 1일 때만 실행
+    if (tabContainerVersion !== 1) return;
+
     const node = document.querySelector(`[data-spotlight-id=${TAB_CONTAINER_SPOTLIGHT_ID}]`);
 
     if (!showSideContents || !node || videoVerticalVisible) return;
@@ -1863,7 +1867,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         clearTimer();
       }
     };
-  }, [showSideContents, videoVerticalVisible]);
+  }, [showSideContents, videoVerticalVisible, tabContainerVersion]);
 
   useEffect(() => {
     if (initialEnter || !sideContentsVisible || videoVerticalVisible) return;
@@ -1882,6 +1886,9 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
 
   // TabContainerV2 자동 닫기
   useEffect(() => {
+    // tabContainerVersion === 2일 때만 실행
+    if (tabContainerVersion !== 2) return;
+
     // console.log('[TabContainerV2] useEffect 시작', {
     //   showBelowContents,
     //   videoVerticalVisible,
@@ -1919,7 +1926,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         clearTimerV2();
       }
     };
-  }, [showBelowContents, videoVerticalVisible]);
+  }, [showBelowContents, videoVerticalVisible, tabContainerVersion]);
 
   useLayoutEffect(() => {
     const videoContainer = document.querySelector(`.${css.videoContainer}`);
@@ -2117,15 +2124,18 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
           />
         )}
 
-        {currentSideButtonStatus && !videoVerticalVisible && playListInfo && (
-          <PlayerTabButton
-            setSideContentsVisible={setSideContentsVisible}
-            sideContentsVisible={sideContentsVisible}
-            videoType={isShowType}
-          />
-        )}
+        {tabContainerVersion === 1 &&
+          currentSideButtonStatus &&
+          !videoVerticalVisible &&
+          playListInfo && (
+            <PlayerTabButton
+              setSideContentsVisible={setSideContentsVisible}
+              sideContentsVisible={sideContentsVisible}
+              videoType={isShowType}
+            />
+          )}
 
-        {showSideContents && (
+        {tabContainerVersion === 1 && showSideContents && (
           <TabContainer
             spotlightId={TAB_CONTAINER_SPOTLIGHT_ID}
             panelInfo={panelInfo}
@@ -2178,7 +2188,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
           </>
         )} */}
 
-        {showBelowContents && (
+        {tabContainerVersion === 2 && showBelowContents && (
           <TabContainerV2
             panelInfo={panelInfo}
             playListInfo={playListInfo}