[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,19 +2559,21 @@ const VideoPlayerBase = class extends React.Component {
             </ControlsContainer>
           </div>
         ) : null}
-        <SpottableDiv
-          className={css.controlsHandleAbove}
-          holdConfig={controlsHandleAboveHoldConfig}
-          onDown={this.handleControlsHandleAboveDown}
-          onKeyUp={this.handleControlsHandleAboveKeyUp}
-          onSpotlightDown={this.onSpotlightFocus}
-          onSpotlightUp={this.onSpotlightFocus}
-          onSpotlightRight={this.onSpotlightFocus}
-          onSpotlightLeft={this.onSpotlightFocus}
-          onClick={this.onSpotlightFocus}
-          selectionKeys={controlsHandleAboveSelectionKeys}
-          spotlightDisabled={this.state.mediaControlsVisible || spotlightDisabled}
-        />
+        {!panelInfo.modal && (
+          <SpottableDiv
+            className={css.controlsHandleAbove}
+            holdConfig={controlsHandleAboveHoldConfig}
+            onDown={this.handleControlsHandleAboveDown}
+            onKeyUp={this.handleControlsHandleAboveKeyUp}
+            onSpotlightDown={this.onSpotlightFocus}
+            onSpotlightUp={this.onSpotlightFocus}
+            onSpotlightRight={this.onSpotlightFocus}
+            onSpotlightLeft={this.onSpotlightFocus}
+            onClick={this.onSpotlightFocus}
+            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;