diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx index 025785f7..20312cff 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx @@ -30,6 +30,7 @@ import { resumeFullscreenVideo, clearAllVideoTimers, } from '../../../../actions/playActions'; +import { SpotlightIds } from '../../../../utils/SpotlightIds'; import css from './ProductVideo.module.less'; // ✅ DEBUG 모드 설정 @@ -394,6 +395,38 @@ export function ProductVideoV2({ const setIsSubtitleActive = useCallback(() => {}, []); const setCurrentTime = useCallback(() => {}, []); + const focusOverlayControls = useCallback((preferredId) => { + const targetId = preferredId || SpotlightIds.PLAYER_BACK_BUTTON; + + if (typeof window === 'undefined') { + Spotlight.focus?.(targetId); + return; + } + + window.requestAnimationFrame(() => { + Spotlight.focus?.(targetId); + }); + }, []); + + const lastOverlaySpotlightRef = useRef(null); + const prevOverlayVisibleRef = useRef(mediaOverlayState.controls?.visible); + + useEffect(() => { + const prevVisible = prevOverlayVisibleRef.current; + const nowVisible = mediaOverlayState.controls?.visible; + + if (!nowVisible && prevVisible) { + // overlay just hidden, store last spotlight target + lastOverlaySpotlightRef.current = Spotlight.getCurrent?.(); + } + + if (nowVisible && !prevVisible) { + focusOverlayControls(lastOverlaySpotlightRef.current); + } + + prevOverlayVisibleRef.current = nowVisible; + }, [mediaOverlayState.controls?.visible, focusOverlayControls]); + // 전체화면 토글 핸들러 const toggleFullscreen = useCallback(() => { setIsFullscreen((prev) => { @@ -564,6 +597,7 @@ export function ProductVideoV2({ debugLog('[Fullscreen Container] ESC key - toggling overlay'); e.preventDefault(); e.stopPropagation(); + toggleOverlayVisibility(); return; } @@ -580,7 +614,12 @@ export function ProductVideoV2({ debugLog('[Fullscreen Container] Enter key - overlay visible, allow default behavior'); } }, - [isPlaying, isFullscreen, toggleOverlayVisibility, mediaOverlayState.controls?.visible] + [ + isPlaying, + isFullscreen, + toggleOverlayVisibility, + mediaOverlayState.controls?.visible, + ] ); // 마우스 다운 (클릭) 이벤트 - capture phase에서 처리