[251026] Focus Recovery Success

위로 스크롤 시 비디오 자동 복구 기능 완성
- HomePanel의 _onScroll에서 expandVideoFrom1px() 액션 사용
- 1초 딜레이 후 축소된 비디오 자동 복구
- skipModalStyleRecalculation 플래그로 올바른 복구 로직 실행

📊 변경 통계:
  • 7개 파일 변경
  • +3027줄 추가, -2240줄 삭제

🎯 주요 변경:
  • HomePanel.jsx: 스크롤 복구 타이밍 및 액션 개선
  • playActions.js: 비디오 확장 액션 정의
  • PlayerPanel.jsx: 복구 로직 개선
  • 불필요한 파일 삭제 (PlayerPanel.new.jsx, .module.less)

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

@@ -1424,12 +1424,46 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
   ]);
 
   useEffect(() => {
+    // 복구 직후: skipModalStyleRecalculation이 true면 저장된 modalStyle 적용
+    if (panelInfo.skipModalStyleRecalculation && !panelInfo.shouldShrinkTo1px) {
+      console.log('[PlayerPanel] Condition 2.5: Using saved modalStyle from expand');
+      const shrinkInfo = panelInfo.playerState?.shrinkInfo;
+
+      // 저장된 modalStyle 사용 (top, left 포함)
+      if (shrinkInfo?.modalStyle) {
+        setModalStyle(shrinkInfo.modalStyle);
+        setModalScale(panelInfo.modalScale || shrinkInfo.modalScale);
+      } else {
+        setModalStyle(panelInfo.modalStyle);
+        setModalScale(panelInfo.modalScale);
+      }
+
+      // DOM 렌더링 후 플래그 제거
+      if (typeof window !== 'undefined') {
+        window.requestAnimationFrame(() => {
+          window.requestAnimationFrame(() => {
+            console.log('[PlayerPanel] Condition 2.5: Removing skipFlag after DOM render');
+            dispatch(
+              updatePanel({
+                name: panel_names.PLAYER_PANEL,
+                panelInfo: {
+                  ...panelInfo,
+                  skipModalStyleRecalculation: false,
+                },
+              })
+            );
+          });
+        });
+      }
+    }
+
     if (
       panelInfo.modal &&
       !panelInfo.shouldShrinkTo1px &&
       panelInfo.modalContainerId &&
       (lastPanelAction === 'previewPush' || lastPanelAction === 'previewUpdate')
     ) {
+      console.log('[PlayerPanel] Condition 1: Calculating modalStyle from DOM', { lastPanelAction });
       const node = document.querySelector(`[data-spotlight-id="${panelInfo.modalContainerId}"]`);
       if (node) {
         const { width, height, top, left } = node.getBoundingClientRect();
@@ -1454,15 +1488,17 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
           })
         );
       } else {
+        console.log('[PlayerPanel] Condition 1: Node not found, using saved modalStyle');
         setModalStyle(panelInfo.modalStyle);
         setModalScale(panelInfo.modalScale);
-        console.error('PlayerPanel modalContainerId node not found', panelInfo.modalContainerId);
       }
     } else if (panelInfo.shouldShrinkTo1px) {
+      console.log('[PlayerPanel] Condition 2: Shrinking - clearing modalStyle');
       // 축소 상태: 인라인 스타일 제거 (CSS만 적용)
       setModalStyle({});
       setModalScale(1);
     } else if (isOnTop && !panelInfo.modal && videoPlayer.current) {
+      console.log('[PlayerPanel] Condition 3: Playing fullscreen video');
       if (videoPlayer.current?.getMediaState()?.paused) {
         videoPlayer.current.play();
       }
@@ -1471,7 +1507,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         videoPlayer.current.showControls();
       }
     }
-  }, [panelInfo, isOnTop]);
+  }, [panelInfo, isOnTop, dispatch]);
 
   const smallestOffsetHourIndex = useMemo(() => {
     if (shopNowInfo) {
@@ -2164,20 +2200,22 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
     };
   }, [createLogParams, dispatch, showDetailInfo]);
 
+  const containerClassName = classNames(
+    css.videoContainer,
+    panelInfo.modal && css.modal,
+    panelInfo.shouldShrinkTo1px && css.shrinkTo1px,
+    // PlayerPanel이 최상단 아니고, 최상단이 DetailPanel(from Player)이면 비디오 보이도록
+    !isOnTop && isTopPanelDetailFromPlayer && css['background-visible'],
+    // PlayerPanel이 최상단 아니고, 위 조건 아니면 1px로 숨김
+    !isOnTop && !isTopPanelDetailFromPlayer && css.background,
+    !captionEnable && css.hideSubtitle
+  );
+
   return (
     <TPanel
       isTabActivated={false}
       {...props}
-      className={classNames(
-        css.videoContainer,
-        panelInfo.modal && css.modal,
-        panelInfo.shouldShrinkTo1px && css.shrinkTo1px,
-        // PlayerPanel이 최상단 아니고, 최상단이 DetailPanel(from Player)이면 비디오 보이도록
-        !isOnTop && isTopPanelDetailFromPlayer && css['background-visible'],
-        // PlayerPanel이 최상단 아니고, 위 조건 아니면 1px로 숨김
-        !isOnTop && !isTopPanelDetailFromPlayer && css.background,
-        !captionEnable && css.hideSubtitle
-      )}
+      className={containerClassName}
       handleCancel={onClickBack}
       spotlightId={spotlightId}
     >