[251120] fix: LiveShow BackButton ArrorDown handler

🕐 커밋 시간: 2025. 11. 20. 10:24:56

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx

🔧 주요 변경 내용:
  • 소규모 기능 개선

com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx

@@ -13,6 +13,7 @@ import icon_shop_now from '../../../../../assets/images/player/icon_tabcontainer
 import { LOG_MENU } from '../../../../utils/Config';
 import { $L } from '../../../../utils/helperMethods';
 import { SpotlightIds } from '../../../../utils/SpotlightIds';
+import usePrevious from '../../../../hooks/usePrevious';
 import LiveChannelContents from '../TabContents/LiveChannelContents';
 import ShopNowContents from '../TabContents/ShopNowContents';
 import ShopNowButton from './ShopNowButton';
@@ -146,16 +147,46 @@ export default function TabContainerV2({
     Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
   }, []);
 
-  // tabIndex가 2(ShopNowButton)로 변경되면 자동으로 포커스 이동
-  useEffect(() => {
-    if (tabIndex === 2) {
+  // 이전 tabIndex 값 추적
+  const prevTabIndexRef = usePrevious(tabIndex);
+  const prevTabIndex = prevTabIndexRef.current;
+
+  // 하나의 함수에서 모든 tabIndex 변화 처리
+  const handleTabIndexChange = useCallback((newTabIndex, oldTabIndex) => {
+    console.log(`[TabIndexChange] Tab changed from ${oldTabIndex} to ${newTabIndex}`);
+
+    if (newTabIndex === 0) {
+      // tabIndex = 0 (ShopNow)
+      const timeoutId = setTimeout(() => {
+        Spotlight.focus('shownow_close_button');
+      }, 100);
+      return () => clearTimeout(timeoutId);
+    }
+
+    if (newTabIndex === 1) {
+      // tabIndex = 1 (LiveChannel)
+      const timeoutId = setTimeout(() => {
+        Spotlight.focus('below-tab-live-channel-button');
+      }, 100);
+      return () => clearTimeout(timeoutId);
+    }
+
+    if (newTabIndex === 2) {
+      // tabIndex = 2 (ShopNowButton)
       const timeoutId = setTimeout(() => {
         Spotlight.focus('below-tab-shop-now-button');
       }, 100);
-
       return () => clearTimeout(timeoutId);
     }
-  }, [tabIndex]);
+  }, []);
+
+  // tabIndex 변화 감지 및 처리
+  useEffect(() => {
+    // 초기 렌더링이 아닐 때만 실행 (prevTabIndex가 정의되었을 때)
+    if (prevTabIndex !== undefined && prevTabIndex !== tabIndex) {
+      handleTabIndexChange(tabIndex, prevTabIndex);
+    }
+  }, [tabIndex, prevTabIndex, handleTabIndexChange]);
 
   return (
     <Container
@@ -241,6 +272,9 @@ export default function TabContainerV2({
               // 첫 번째 PlayerItem으로 포커스 이동
               Spotlight.focus('tabChannel-video-0');
             }}
+            onSpotlightFocus={() => {
+              console.log('[TabContainerV2] below-tab-live-channel-button focused');
+            }}
           >
             <span className={css.buttonText}>LIVE CHANNEL</span>
             <div className={css.arrowIcon}>