[251120] fix: PlayerPanel tabIndex=2 focus

🕐 커밋 시간: 2025. 11. 20. 15:49:39

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +20줄
  • 삭제: -4줄

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

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

@@ -104,16 +104,28 @@ function PlayerOverlayContents({
   const onSpotlightMoveMediaButton = useCallback(
     (e) => {
       e.stopPropagation();
+
+      // TabContainerV2의 tabIndex=2일 때 하단 버튼들로 포커스 이동
+      if (tabContainerVersion === 2 && tabIndexV2 === 2) {
+        if (Spotlight.focus('live-channel-next-button')) return;
+        if (Spotlight.focus('below-tab-shop-now-button')) return;
+      }
+
       if (type === 'LIVE') {
         return Spotlight.focus('videoIndicator-down-button');
       }
       return Spotlight.focus(SpotlightIds.PLAYER_PLAY_BUTTON);
     },
-    [type]
+    [type, tabContainerVersion, tabIndexV2]
   );
 
   const onSpotlightMoveSubtitleButton = useCallback(
     () => {
+      // 1. 먼저 자막 버튼으로 포커스 시도
+      if (Spotlight.focus('player-subtitlebutton')) {
+        return true;
+      }
+
       // TabContainerV2의 tabIndex=2일 때 TabContainerV2 버튼들로 포커스 이동
       if (tabContainerVersion === 2 && tabIndexV2 === 2) {
         let focusSuccessful = false;
@@ -228,7 +240,7 @@ function PlayerOverlayContents({
       if (ev.keyCode === 37 && currentId === SpotlightIds.PLAYER_SUBTITLE_BUTTON) {
         ev.preventDefault();
         ev.stopPropagation();
-        return onSpotlightMoveMediaButton(ev);
+        return onSpotlightMoveBackButton(ev);
       }
       if (ev.keyCode === 38 && currentId === SpotlightIds.PLAYER_PLAY_BUTTON) {
         ev.preventDefault();

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

@@ -23,7 +23,9 @@ export default function LiveChannelNext({
   const handleSpotlightUp = (e) => {
     e.stopPropagation();
     e.preventDefault();
+    if (!Spotlight.focus('player-subtitlebutton')) {
       Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
+    }
   };
 
   return (

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

@@ -12,7 +12,9 @@ export default function ShopNowButton({ onClick }) {
   const handleSpotlightUp = (e) => {
     e.stopPropagation();
     e.preventDefault();
+    if (!Spotlight.focus('player-subtitlebutton')) {
       Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
+    }
   };
   return (
     <div className={css.container}>