[251019] fix: ProductVideoV2 MediaPlayer 직접 제어로 오버레이 기능 활성화

Redux 상태 변경만으로는 실제 UI가 작동하지 않는 문제 해결
videoPlayerRef를 통해 MediaPlayer의 실제 메서드를 직접 호출하여
오버레이 표시/숨김 및 autoClose 타이머를 즉시 제어

Changes:
- handleThumbnailClick: showControls() + startAutoCloseTimeout() 호출
- handleVideoEnded: stopAutoCloseTimeout() + hideControls() 호출
- handleBackButton: stopAutoCloseTimeout() + hideControls() 호출
- handleUserActivity: 사용자 활동 감지 시 타이머 리셋 (mousemove, touchmove, wheel)

이제 비디오 재생 시 3초 후 자동으로 controls가 숨겨지고,
사용자 활동 감지 시 타이머가 리셋되는 기능이 정상 작동함

com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx

@@ -15,6 +15,7 @@ import {
   hideControls,
   startAutoClose,
   stopAutoClose,
+  resetAutoClose,
 } from '../../../../actions/videoOverlayActions';
 import css from './ProductVideo.module.less';
 
@@ -139,23 +140,31 @@ export default function ProductVideoV2({
     }
   }, [canPlayVideo, isPlaying]);
 
-  // 썸네일 클릭 핸들러 - 비디오 재생 시작 + Redux dispatch
+  // 썸네일 클릭 핸들러 - 비디오 재생 시작 + Redux dispatch + MediaPlayer 메서드 호출
   const handleThumbnailClick = useCallback(() => {
     if (canPlayVideo && !isPlaying) {
       setIsPlaying(true);
-      // Redux: 오버레이 상태 초기화 및 autoClose 시작
+      // Redux: 오버레이 상태 초기화
       dispatch(showControls());
       dispatch(startAutoClose(3000));
+      // MediaPlayer 직접 제어: controls 표시 및 autoClose 시작
+      setTimeout(() => {
+        videoPlayerRef.current?.showControls?.();
+        videoPlayerRef.current?.startAutoCloseTimeout?.();
+      }, 100);
     }
   }, [canPlayVideo, isPlaying, dispatch]);
 
-  // 비디오 종료 핸들러 - 썸네일로 복귀 + Redux cleanup
+  // 비디오 종료 핸들러 - 썸네일로 복귀 + Redux cleanup + MediaPlayer 메서드 호출
   const handleVideoEnded = useCallback(() => {
     setIsPlaying(false);
     setIsFullscreen(false); // 전체화면도 해제
     // Redux: 오버레이 상태 정리
     dispatch(stopAutoClose());
     dispatch(hideControls());
+    // MediaPlayer 직접 제어: autoClose 타이머 중지 및 controls 숨김
+    videoPlayerRef.current?.stopAutoCloseTimeout?.();
+    videoPlayerRef.current?.hideControls?.();
   }, [dispatch]);
 
   // Spotlight Down 키 핸들러 - 비디오 다음 이미지로 스크롤
@@ -172,20 +181,33 @@ export default function ProductVideoV2({
     [canPlayVideo, onScrollToImages]
   );
 
-  // Back 버튼 핸들러 - 전체화면 해제 또는 비디오 종료 + Redux cleanup
+  // Back 버튼 핸들러 - 전체화면 해제 또는 비디오 종료 + Redux cleanup + MediaPlayer 메서드 호출
   const handleBackButton = useCallback(() => {
     if (isFullscreen) {
       // 전체화면이면 일반 모드로
       setIsFullscreen(false);
       dispatch(switchToModal());
+      videoPlayerRef.current?.stopAutoCloseTimeout?.();
     } else if (isPlaying) {
       // 일반 모드에서 재생 중이면 썸네일로
       setIsPlaying(false);
       dispatch(stopAutoClose());
       dispatch(hideControls());
+      // MediaPlayer 직접 제어: autoClose 타이머 중지 및 controls 숨김
+      videoPlayerRef.current?.stopAutoCloseTimeout?.();
+      videoPlayerRef.current?.hideControls?.();
     }
   }, [isFullscreen, isPlaying, dispatch]);
 
+  // 사용자 활동 감지 시 autoClose 타이머 리셋
+  const handleUserActivity = useCallback(() => {
+    if (isPlaying && !isFullscreen) {
+      console.log('[ProductVideoV2] User activity detected - resetting autoClose timer');
+      dispatch(resetAutoClose());
+      videoPlayerRef.current?.startAutoCloseTimeout?.();
+    }
+  }, [isPlaying, isFullscreen, dispatch]);
+
   // 더미 함수들 (VideoPlayer가 요구하는 props)
   const setIsVODPaused = useCallback(() => {}, []);
   const setSideContentsVisible = useCallback(() => {}, []);
@@ -337,6 +359,9 @@ export default function ProductVideoV2({
     <div
       ref={videoPlayerWrapperRef}
       className={`${css.videoPlayerWrapper} ${isFullscreen ? css.fullscreenPlayer : ''}`}
+      onMouseMove={handleUserActivity}
+      onTouchMove={handleUserActivity}
+      onWheel={handleUserActivity}
     >
       <VideoPlayer
         setApiProvider={getPlayer}