[251113] feat 오버레이 포커스 관리 개선

오버레이가 숨겨질 때 마지막 포커스 상태를 저장하고, 다시 보일 때 그 위치로 포커스를 이동하도록 개선했습니다.

🕐 커밋 시간: 2025. 11. 13. 12:09:51

📊 변경 통계:
  • 총 파일: 1개
  • 추가: +40줄
  • 삭제: -1줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx

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

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에서 처리