[251120] fix: PlayerPanel tabIndex=2 focus done

🕐 커밋 시간: 2025. 11. 20. 16:17:48

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

📝 수정된 파일:
  ~ 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

@@ -193,25 +193,25 @@ function PlayerOverlayContents({
     [tabIndexV2]
   );
 
-  // Back Button arrow down 전용 핸들러 - tabIndex에 따라 다르게 포커스 설정
+  // Back Button arrow down 전용 핸들러 - tabIndex에 따라 다른 포커스
   const handleBackButtonDown = useCallback(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
 
       if (tabContainerVersion === 2 && belowContentsVisible) {
-        console.log(`[handleBackButtonDown] tabIndexV2: ${tabIndexV2}`);
-
         if (tabIndexV2 === 0) {
+          // tabIndexV2가 0일 때 ShopNow 닫기 버튼으로 포커스
           const result = Spotlight.focus('shownow_close_button');
-          console.log(`[handleBackButtonDown] tabIndexV2=0, focus result:`, result);
         } else if (tabIndexV2 === 1) {
-          const result = Spotlight.focus('below-tab-live-channel-button');
+          // tabIndexV2가 1일 때 below-tab-live-channel-button으로 포커스
-          console.log(`[handleBackButtonDown] tabIndexV2=1, focus result:`, result);
+          Spotlight.focus('below-tab-live-channel-button');
         } else if (tabIndexV2 === 2) {
-          const result = Spotlight.focus('live-channel-next-button');
+          // tabIndexV2가 2일 때 LiveChannelNext로 포커스
-          // const result = Spotlight.focus('below-tab-shop-now-button');
+          Spotlight.focus('live-channel-next-button');
-          console.log(`[handleBackButtonDown] tabIndexV2=2, focus result:`, result);
+        } else {
+          // 그 외에는 기존 로직 사용
+          onSpotlightMoveMediaButton(e);
         }
       } else {
         onSpotlightMoveMediaButton(e);
@@ -350,10 +350,40 @@ function PlayerOverlayContents({
               )}
               onClick={handleSubtitleOnClick}
               spotlightId="player-subtitlebutton"
-              onSpotlightUp={onSpotlightMoveBackButton}
+              onSpotlightUp={(e) => {
-              onSpotlightLeft={onSpotlightMoveBackButton}
+                e.stopPropagation();
-              onSpotlightRight={onSpotlightMoveMediaButton}
+                e.preventDefault();
-              onSpotlightDown={onSpotlightMoveMediaButton}
+                // tabIndexV2가 2일 때만 ShopNowButton으로 포커스
+                if (tabContainerVersion === 2 && tabIndexV2 === 2) {
+                  Spotlight.focus('below-tab-shop-now-button');
+                } else {
+                  onSpotlightMoveBackButton();
+                }
+              }}
+              onSpotlightLeft={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                // tabIndexV2가 2일 때만 LiveChannelNext로 포커스
+                if (tabContainerVersion === 2 && tabIndexV2 === 2) {
+                  Spotlight.focus('live-channel-next-button');
+                }
+              }}
+              onSpotlightRight={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                // tabIndexV2가 2일 때만 LiveChannelNext로 포커스
+                if (tabContainerVersion === 2 && tabIndexV2 === 2) {
+                  Spotlight.focus('live-channel-next-button');
+                }
+              }}
+              onSpotlightDown={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                // tabIndexV2가 2일 때만 ShopNowButton으로 포커스
+                if (tabContainerVersion === 2 && tabIndexV2 === 2) {
+                  Spotlight.focus('below-tab-shop-now-button');
+                }
+              }}
               aria-label="Caption"
             />
           </div>
@@ -364,7 +394,14 @@ function PlayerOverlayContents({
             className={css.backIcon}
             spotlightId="player-back-button"
             onSpotlightDown={handleBackButtonDown}
-            onSpotlightRight={onSpotlightMoveSubtitleButton}
+            onSpotlightRight={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                // tabIndexV2가 2일 때만 ShopNowButton으로 포커스
+                if (tabContainerVersion === 2 && tabIndexV2 === 2) {
+                  Spotlight.focus('below-tab-shop-now-button');
+                }
+              }}
             onSpotlightUp={onSpotlightMoveSubtitleButton}
             aria-label="Video Player Close"
             ref={backBtnRef}

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

@@ -23,9 +23,19 @@ export default function LiveChannelNext({
   const handleSpotlightUp = (e) => {
     e.stopPropagation();
     e.preventDefault();
-    if (!Spotlight.focus('player-subtitlebutton')) {
     Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
-    }
+  };
+
+  const handleSpotlightDown = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    Spotlight.focus('player-subtitlebutton');
+  };
+
+  const handleSpotlightRight = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    Spotlight.focus('player-subtitlebutton');
   };
 
   return (
@@ -35,6 +45,8 @@ export default function LiveChannelNext({
         onClick={onClick}
         spotlightId={spotlightId}
         onSpotlightUp={handleSpotlightUp}
+        onSpotlightDown={handleSpotlightDown}
+        onSpotlightRight={handleSpotlightRight}
       >
         <div className={css.logoWrapper}>
           <div className={css.logoBackground} style={{ background: backgroundColor }}>

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

@@ -12,9 +12,16 @@ export default function ShopNowButton({ onClick }) {
   const handleSpotlightUp = (e) => {
     e.stopPropagation();
     e.preventDefault();
-    if (!Spotlight.focus('player-subtitlebutton')) {
+    // tabIndexV2가 2일 때만 Back 버튼으로 포커스
+    // 이 속성은 부모 컴포넌트에서 props로 받아야 하지만, 일단 Back 버튼으로 직접 이동
     Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON);
-    }
+  };
+
+  const handleSpotlightDown = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    // tabIndexV2가 2일 때만 CC 버튼으로 내려가기
+    Spotlight.focus('player-subtitlebutton');
   };
   return (
     <div className={css.container}>
@@ -23,6 +30,7 @@ export default function ShopNowButton({ onClick }) {
         onClick={onClick}
         spotlightId="below-tab-shop-now-button"
         onSpotlightUp={handleSpotlightUp}
+        onSpotlightDown={handleSpotlightDown}
       >
         <span className={css.buttonText}>SHOP NOW</span>
       </SpottableDiv>