diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx index 4a9d7a39..eac53ba0 100644 --- a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx +++ b/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(() => { diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx index f62f6892..63ca9a53 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx +++ b/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); //하단부분까지 갔을때 체크용 diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.jsx index 128a074e..4644d06b 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.jsx +++ b/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( diff --git a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx index 573356ea..a6cf7421 100644 --- a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx +++ b/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 )} > - } - + )}