[251113] feat: productVideoVersion 1 Test!!

🕐 커밋 시간: 2025. 11. 13. 16:53:48

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +26줄
  • 삭제: -13줄

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

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선

com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx

@@ -145,6 +145,9 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
 
   // ========== Refs ==========
   const videoRef = useRef(null);
+  const assignVideoNode = useCallback((node) => {
+    videoRef.current = node || null;
+  }, []);
   const playerRef = useRef(null);
   const controlsTimeoutRef = useRef(null);
 
@@ -470,7 +473,6 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
   // ========== Video Props ==========
   const videoProps = useMemo(() => {
     const baseProps = {
-      ref: videoRef,
       autoPlay: !paused,
       loop,
       muted,
@@ -484,6 +486,7 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
     if (ActualVideoComponent === Media) {
       return {
         ...baseProps,
+        ref: assignVideoNode,
         className: css.media,
         controls: false,
         mediaComponent: 'video',
@@ -493,18 +496,28 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
     // ReactPlayer (브라우저 또는 YouTube)
     if (ActualVideoComponent === TReactPlayer) {
       return {
-        ...baseProps,
+        autoPlay: !paused,
+        loop,
+        muted,
+        onLoadStart: handleLoadStart,
+        onProgress: handleUpdate,
+        onDuration: handleUpdate,
+        onEnded: handleEnded,
+        onError: handleErrorEvent,
         url: src,
         playing: !paused,
         width: '100%',
         height: '100%',
-        videoRef: videoRef,
+        videoRef: assignVideoNode,
         config: reactPlayerConfig,
       };
     }
 
-    return baseProps;
-  }, [ActualVideoComponent, src, paused, loop, muted, handleLoadStart, handleUpdate, handleEnded, handleErrorEvent, reactPlayerConfig]);
+    return {
+      ...baseProps,
+      ref: assignVideoNode,
+    };
+  }, [ActualVideoComponent, assignVideoNode, src, paused, loop, muted, handleLoadStart, handleUpdate, handleEnded, handleErrorEvent, reactPlayerConfig]);
 
   // ========== Spotlight Handler ==========
   const handleSpotlightFocus = useCallback(() => {

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx

@@ -174,7 +174,7 @@ export default function ProductAllSection({
   const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
 
   // ProductVideo 버전 관리 (1: 기존 modal 방식, 2: 내장 방식 , 3: 비디오 생략)
-  const [productVideoVersion, setProductVideoVersion] = useState(2);
+  const [productVideoVersion, setProductVideoVersion] = useState(1);
 
   // const [currentHeight, setCurrentHeight] = useState(0);
   //하단부분까지 갔을때 체크용

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

@@ -122,10 +122,10 @@ export default function ProductVideo({
     console.log('[ProductVideo] onBlur called - canPlayVideo:', canPlayVideo);
     if (canPlayVideo) {
       setFocused(false);
-      // minimize는 handleScrollToImages에서 명시적으로 처리
-      // 여기서는 focused 상태만 변경
+      // 포커스를 잃으면 모달 MediaPanel을 최소화하여 1px 상태로 유지
+      dispatch(minimizeModalMedia());
     }
-  }, [canPlayVideo]);
+  }, [canPlayVideo, dispatch]);
 
   // Spotlight Down 키 핸들러 - 비디오 다음 이미지로 스크롤
   const handleSpotlightDown = useCallback(

com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx

@@ -16,7 +16,7 @@ import * as PanelActions from '../../actions/panelActions';
 import TPanel from '../../components/TPanel/TPanel';
 import Media from '../../components/VideoPlayer/Media';
 import TReactPlayer from '../../components/VideoPlayer/TReactPlayer';
-import { VideoPlayer } from '../../components/VideoPlayer/MediaPlayer.v2';
+import MediaPlayerV2 from '../../components/VideoPlayer/MediaPlayer.v2';
 import usePrevious from '../../hooks/usePrevious';
 import { panel_names } from '../../utils/Config';
 import css from './MediaPanel.module.less';
@@ -492,11 +492,11 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
               shouldDisableIframeInteraction && css.youtubeSafe
             )}
           >
-            <VideoPlayer
+            <MediaPlayerV2
               setApiProvider={getPlayer}
               disabled={panelInfo.modal}
               onEnded={onEnded}
-              noAutoPlay={false}
+              autoPlay={!panelInfo?.isPaused}
               noAutoShowMediaControls={panelInfo.modal} // modal 모드에서는 자동으로 controls가 올라오지 않도록 설정
               autoCloseTimeout={3000}
               onBackButton={onClickBack}
@@ -542,7 +542,7 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
                 typeof window === 'object' &&
                 window.PalmSystem &&
                 currentSubtitleUrl && <track kind="subtitles" src={currentSubtitleUrl} default />}
-            </VideoPlayer>
+            </MediaPlayerV2>
           </div>
         )}
       </Container>