[251115] fix: ProductVideo.v3.jsx Marquee disabled in modal true

🕐 커밋 시간: 2025. 11. 15. 15:01:32

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

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

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx (javascript):
    🔄 Modified: Spottable()

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

com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.js

@@ -2559,6 +2559,7 @@ const VideoPlayerBase = class extends React.Component {
             </ControlsContainer>
           </div>
         ) : null}
+        {!panelInfo.modal && (
           <SpottableDiv
             className={css.controlsHandleAbove}
             holdConfig={controlsHandleAboveHoldConfig}
@@ -2572,6 +2573,7 @@ const VideoPlayerBase = class extends React.Component {
             selectionKeys={controlsHandleAboveSelectionKeys}
             spotlightDisabled={this.state.mediaControlsVisible || spotlightDisabled}
           />
+        )}
         <Announce ref={this.setAnnounceRef} />
       </RootContainer>
     );

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

@@ -35,6 +35,7 @@ export default function ProductVideo({
   const [modalState, setModalState] = useState(true); // 모달 상태 관리 추가
   const [hasAutoPlayed, setHasAutoPlayed] = useState(false); // 자동 재생 완료 여부
   const [isVideoPlaying, setIsVideoPlaying] = useState(false); // 비디오 재생 여부 flag
+  const [isVideoLoading, setIsVideoLoading] = useState(false); // 비디오 로딩 중 flag
   const prevModalStateRef = useRef(null); // 이전 modal 상태 추적
 
   const topPanel = panels[panels.length - 1];
@@ -97,6 +98,7 @@ export default function ProductVideo({
       //   prdtMediaUrl: productInfo?.prdtMediaUrl?.substring(0, 50),
       // });
       setHasAutoPlayed(true);
+      setIsVideoLoading(true); // 로딩 시작
 
       // 짧은 딜레이 후 재생 시작 (컴포넌트 마운트 완료 후)
       setTimeout(() => {
@@ -129,6 +131,7 @@ export default function ProductVideo({
             continuousPlay, // 반복 재생 옵션 전달
           })
         );
+        setIsVideoLoading(false); // 로딩 완료
       }, 100);
     }
   }, [
@@ -199,9 +202,16 @@ export default function ProductVideo({
   const handleVideoClick = useCallback(() => {
     // console.log('[ProductVideo] ========== handleVideoClick 호출 ==========');
     // console.log('[ProductVideo] canPlayVideo:', canPlayVideo);
+    // console.log('[ProductVideo] isVideoLoading:', isVideoLoading);
     // console.log('[ProductVideo] panels.length:', panels.length);
     // console.log('[ProductVideo] All panels:', JSON.stringify(panels, null, 2));
 
+    // 비디오 로딩 중이면 클릭 무시
+    if (isVideoLoading) {
+      console.log('[ProductVideo] ⚠️ 비디오 로딩 중 - 클릭 무시');
+      return;
+    }
+
     if (canPlayVideo) {
       const currentTopPanel = panels[panels.length - 1];
 
@@ -280,6 +290,7 @@ export default function ProductVideo({
     modalClassNameChange,
     panels,
     modalState,
+    isVideoLoading,
   ]);
 
   if (!canPlayVideo) return null;