From bbcc4eddd111a7bfb066ee5e4a810c04319efae0 Mon Sep 17 00:00:00 2001 From: optrader Date: Thu, 20 Nov 2025 16:17:49 +0900 Subject: [PATCH] [251120] fix: PlayerPanel tabIndex=2 focus done MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🕐 커밋 시간: 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 🔧 주요 변경 내용: • 소규모 기능 개선 --- .../PlayerOverlay/PlayerOverlayContents.jsx | 65 +++++++++++++++---- .../PlayerTabContents/v2/LiveChannelNext.jsx | 18 ++++- .../PlayerTabContents/v2/ShopNowButton.jsx | 14 +++- 3 files changed, 77 insertions(+), 20 deletions(-) diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx index 2773faf4..6621ccbe 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.jsx +++ b/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'); - console.log(`[handleBackButtonDown] tabIndexV2=1, focus result:`, result); + // tabIndexV2가 1일 때 below-tab-live-channel-button으로 포커스 + Spotlight.focus('below-tab-live-channel-button'); } else if (tabIndexV2 === 2) { - const result = Spotlight.focus('live-channel-next-button'); - // const result = Spotlight.focus('below-tab-shop-now-button'); - console.log(`[handleBackButtonDown] tabIndexV2=2, focus result:`, result); + // tabIndexV2가 2일 때 LiveChannelNext로 포커스 + Spotlight.focus('live-channel-next-button'); + } else { + // 그 외에는 기존 로직 사용 + onSpotlightMoveMediaButton(e); } } else { onSpotlightMoveMediaButton(e); @@ -350,10 +350,40 @@ function PlayerOverlayContents({ )} onClick={handleSubtitleOnClick} spotlightId="player-subtitlebutton" - onSpotlightUp={onSpotlightMoveBackButton} - onSpotlightLeft={onSpotlightMoveBackButton} - onSpotlightRight={onSpotlightMoveMediaButton} - onSpotlightDown={onSpotlightMoveMediaButton} + onSpotlightUp={(e) => { + e.stopPropagation(); + e.preventDefault(); + // 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" /> @@ -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} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx index bbf4bd01..c64bac36 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/LiveChannelNext.jsx +++ b/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); - } + 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} >
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.jsx index 765539d0..eeebd09b 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/ShopNowButton.jsx +++ b/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')) { - Spotlight.focus(SpotlightIds.PLAYER_BACK_BUTTON); - } + // 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 (
@@ -23,6 +30,7 @@ export default function ShopNowButton({ onClick }) { onClick={onClick} spotlightId="below-tab-shop-now-button" onSpotlightUp={handleSpotlightUp} + onSpotlightDown={handleSpotlightDown} > SHOP NOW