[251124] fix: App.js 로그 정리 및 최적화

🕐 커밋 시간: 2025. 11. 24. 09:08:54

📊 변경 통계:
  • 총 파일: 10개
  • 추가: +93줄
  • 삭제: -97줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/App/App.js
  ~ com.twin.app.shoptime/src/components/MediaItem/MediaItem.module.less
  ~ com.twin.app.shoptime/src/components/MobileSend/PhoneInputSection.module.less
  ~ com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less
  ~ com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.js
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less
  ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx
  ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx
  ~ com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.module copy.less
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/App/App.js (javascript):
    🔄 Modified: resolveSpotlightIdFromEvent()
    ❌ Deleted: handleFocusLog(), handleBlurLog()
  📄 com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx (javascript):
    🔄 Modified: normalizeModalStyle()

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • UI 컴포넌트 아키텍처 개선
  • API 서비스 레이어 개선

Performance: 코드 최적화로 성능 개선 기대

com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.js

@@ -7,6 +7,7 @@ import {
   stopBannerVideo,
   stopAndHideVideo,
   hidePlayerVideo,
+  PLAYBACK_STATUS,
 } from '../../actions/playActions';
 import fp from '../../utils/fp.js';
 import { videoState } from './videoState.js';
@@ -46,6 +47,7 @@ export const useVideoPlay = (options = {}) => {
   const currentOwnerId = useSelector((state) => state.home.playerControl?.ownerId);
   const bannerDataList = useSelector((state) => state.home.bannerData?.bannerInfos);
   const bannerVisibility = useSelector((state) => state.home.bannerVisibility);
+  const reduxVideoPlayState = useSelector((state) => state.play.videoPlayState);
 
   // 🔽 [단순화] 현재 재생 중인 배너 가져오기
   const getCurrentPlayingBanner = useCallback(() => {
@@ -64,6 +66,18 @@ export const useVideoPlay = (options = {}) => {
   const playDelayTimerRef = useRef(null);
   const retryTimerRef = useRef(null);
 
+  // 🔽 Redux 기반 실제 재생 상태
+  const isVideoPlaying =
+    reduxVideoPlayState?.isPlaying === true &&
+    reduxVideoPlayState?.playback === PLAYBACK_STATUS.PLAYING;
+
+  // 🔽 전역 videoState가 실제 재생 상태와 불일치할 때 정리
+  useEffect(() => {
+    if (!isVideoPlaying && videoState.getCurrentPlaying()) {
+      videoState.setCurrentPlaying(null);
+    }
+  }, [isVideoPlaying]);
+
   // 🔽 [유틸리티] 배너 가용성 검사 (0부터 시작 통일)
   const isBannerAvailable = useCallback(
     (bannerId) => {
@@ -375,8 +389,10 @@ export const useVideoPlay = (options = {}) => {
     getCurrentPlayingBanner,
     getLastPlayedBanner,
     isPlaying,
+    isVideoPlaying,
     currentBanner,
     bannerVisibility,
+    videoPlayState: reduxVideoPlayState,
     bannerAvailability, // ✅ [최적화] 메모이제이션된 배너 가용성
 
     // 🔍 유틸리티