[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: 코드 최적화로 성능 개선 기대
2025-11-24 09:08:54 +09:00
parent 3b95810946
commit 6d0cf78534
10 changed files with 83 additions and 87 deletions
--- a/com.twin.app.shoptime/src/App/App.js
+++ b/com.twin.app.shoptime/src/App/App.js
@@ -465,56 +465,55 @@ function AppBase(props) {
  // const termsFlag = useSelector((state) => state.common.termsFlag);
  const termsData = useSelector((state) => state.home.termsData);

-  // 🔽 Spotlight focus/blur 로그 (옵션)
-  useEffect(() => {
-    if (!Config.FOCUS_DEBUG) {
-      return undefined;
-    }
+  // // 🔽 Spotlight focus/blur 로그 (옵션)
+  // useEffect(() => {
+  //   if (!Config.FOCUS_DEBUG) {
+  //     return undefined;
+  //   }

-    const handleFocusLog = (event) => {
-      const spotlightId = resolveSpotlightIdFromEvent(event);
-      if (!spotlightId || spotlightId === lastLoggedSpotlightId) {
-        return;
-      }
-      console.log(`[SpotlightFocus] focus - ${spotlightId}`);
-      lastLoggedSpotlightId = spotlightId;
-    };
+  //   const handleFocusLog = (event) => {
+  //     const spotlightId = resolveSpotlightIdFromEvent(event);
+  //     if (!spotlightId || spotlightId === lastLoggedSpotlightId) {
+  //       return;
+  //     }
+  //     console.log(`[SpotlightFocus] focus - ${spotlightId}`);
+  //     lastLoggedSpotlightId = spotlightId;
+  //   };

-    const handleBlurLog = (event) => {
-      const spotlightId = resolveSpotlightIdFromEvent(event);
-      if (!spotlightId || spotlightId === lastLoggedBlurSpotlightId) {
-        return;
-      }
-      console.log(`[SpotlightFocus] blur - ${spotlightId}`);
-      lastLoggedBlurSpotlightId = spotlightId;
-    };
+  //   const handleBlurLog = (event) => {
+  //     const spotlightId = resolveSpotlightIdFromEvent(event);
+  //     if (!spotlightId || spotlightId === lastLoggedBlurSpotlightId) {
+  //       return;
+  //     }
+  //     console.log(`[SpotlightFocus] blur - ${spotlightId}`);
+  //     lastLoggedBlurSpotlightId = spotlightId;
+  //   };

-    const hasSpotlightListener = typeof Spotlight.addEventListener === 'function';
-    if (hasSpotlightListener) {
-      Spotlight.addEventListener('focus', handleFocusLog);
-      Spotlight.addEventListener('blur', handleBlurLog);
+  //   const hasSpotlightListener = typeof Spotlight.addEventListener === 'function';
+  //   if (hasSpotlightListener) {
+  //     Spotlight.addEventListener('focus', handleFocusLog);
+  //     Spotlight.addEventListener('blur', handleBlurLog);

-      return () => {
-        Spotlight.removeEventListener('focus', handleFocusLog);
-        Spotlight.removeEventListener('blur', handleBlurLog);
-      };
-    }
+  //     return () => {
+  //       Spotlight.removeEventListener('focus', handleFocusLog);
+  //       Spotlight.removeEventListener('blur', handleBlurLog);
+  //     };
+  //   }

-    if (typeof document !== 'undefined') {
-      document.addEventListener('spotlightfocus', handleFocusLog);
-      document.addEventListener('spotlightblur', handleBlurLog);
+  //   if (typeof document !== 'undefined') {
+  //     document.addEventListener('spotlightfocus', handleFocusLog);
+  //     document.addEventListener('spotlightblur', handleBlurLog);

-      return () => {
-        document.removeEventListener('spotlightfocus', handleFocusLog);
-        document.removeEventListener('spotlightblur', handleBlurLog);
-      };
-    }
+  //     return () => {
+  //       document.removeEventListener('spotlightfocus', handleFocusLog);
+  //       document.removeEventListener('spotlightblur', handleBlurLog);
+  //     };
+  //   }

-    return undefined;
-  }, [Config.FOCUS_DEBUG]);
+  //   return undefined;
+  // }, [Config.FOCUS_DEBUG]);

  useEffect(() => {
-    // Chromium68 호환성을 위해 Optional Chaining 제거
    if (termsData && termsData.data && termsData.data.terms) {
      dispatch(getTermsAgreeYn());
    }
@@ -525,7 +524,6 @@ function AppBase(props) {
  const oldDb8Deleted = useSelector((state) => state.localSettings.oldDb8Deleted);
  // const macAddress = useSelector((state) => state.common.macAddress);

-  // Chromium68 호환성을 위해 Optional Chaining 제거
  const deviceCountryCode = (httpHeader && httpHeader['X-Device-Country']) || '';

  useEffect(() => {
@@ -581,11 +579,11 @@ function AppBase(props) {
      //   appinfo
      // );

-      console.log('[App.js] initService,httpHeaderRef.current', httpHeaderRef.current);
-      console.log('[App.js] haveyInit', haveyInit);
+      // console.log('[App.js] initService,httpHeaderRef.current', httpHeaderRef.current);
+      // console.log('[App.js] haveyInit', haveyInit);

      // 앱 초기화 시 HomePanel 자동 기록
-      console.log('[App.js] Recording initial HomePanel on app start');
+      // console.log('[App.js] Recording initial HomePanel on app start');
      dispatch(
        enqueuePanelHistory(
          'homepanel',
@@ -618,11 +616,11 @@ function AppBase(props) {

        const launchParams = getLaunchParams();

-        console.log(
-          'initService...{haveyInit, launchParams}',
-          haveyInit,
-          JSON.stringify(launchParams)
-        );
+        // console.log(
+        //   'initService...{haveyInit, launchParams}',
+        //   haveyInit,
+        //   JSON.stringify(launchParams)
+        // );

        // pyh TODO: edit or delete later (line 196 ~  198)
        // Chromium68 호환성을 위해 Optional Chaining 제거
@@ -656,7 +654,7 @@ function AppBase(props) {
  );

  const handleRelaunchEvent = useCallback(() => {
-    console.log('[App] handleRelaunchEvent triggered');
+    // console.log('[App] handleRelaunchEvent triggered');

    const launchParams = getLaunchParams();
    clearLaunchParams();
@@ -709,8 +707,8 @@ function AppBase(props) {
  }, [initService, introTermsAgreeRef, dispatch]);

  const visibilityChanged = useCallback(() => {
-    console.log('document is hidden', document.hidden);
-    console.log('document.visibilityState= ', document.visibilityState);
+    // console.log('document is hidden', document.hidden);
+    // console.log('document.visibilityState= ', document.visibilityState);
    if (document.hidden && typeof window === 'object') {
      clearTimeout(foreGroundChangeTimer);
    } else {
@@ -718,13 +716,13 @@ function AppBase(props) {
      // set foreground flag using delay time.
      clearTimeout(foreGroundChangeTimer);
      foreGroundChangeTimer = setTimeout(() => {
-        console.log(
-          'visibility changed !!! ==> set to foreground cursorVisible',
-          // Chromium68 호환성을 위해 Optional Chaining 제거
-          JSON.stringify(
-            window.PalmSystem && window.PalmSystem.cursor && window.PalmSystem.cursor.visibility
-          )
-        ); // eslint-disable-line no-console
+        // console.log(
+        //   'visibility changed !!! ==> set to foreground cursorVisible',
+        //   // Chromium68 호환성을 위해 Optional Chaining 제거
+        //   JSON.stringify(
+        //     window.PalmSystem && window.PalmSystem.cursor && window.PalmSystem.cursor.visibility
+        //   )
+        // ); // eslint-disable-line no-console
        if (platform.platformName !== 'webos') {
          //for debug
          dispatch(
--- a/com.twin.app.shoptime/src/components/MediaItem/MediaItem.module.less
+++ b/com.twin.app.shoptime/src/components/MediaItem/MediaItem.module.less
@@ -553,8 +553,7 @@
  }
 }
 .forceFocus {
-  // :global(.spottable):focus{
-  z-index: 20;
+    z-index: 20;
  :not(.favFocus) .thumbContainer {
    /*transform: scale(1.2);*/
    background-image: url("../../../assets/images/player/focus-frame.png");
--- a/com.twin.app.shoptime/src/components/MobileSend/PhoneInputSection.module.less
+++ b/com.twin.app.shoptime/src/components/MobileSend/PhoneInputSection.module.less
@@ -72,7 +72,7 @@
 /* Modifier: highlighted */
 .phoneInput__digit_highlighted {
  background: #E6E6E6; // var(--Color-Icon&Text*-primary)
-  box-shadow: 0px 10.285714149475098px 6.1714301109313965px rgba(0, 0, 0, 0.30);
+  box-shadow: 0px 10.29px 6.17px rgba(0, 0, 0, 0.30);
  color: #4C5059; // var(--Color-Icon&Text*-focused)
 }

--- a/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less
+++ b/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less
@@ -1103,16 +1103,3 @@
  }
 }

-// optionalConfirm일 때만 기존 위치 스타일 무력화
-
-// :global([id="floatLayer"]) :global(> div:not([id])) :global(> div) :global(> div:nth-child(2)) {
-//   .tNewPopUp.optionalConfirm & {
-//     bottom: unset !important;
-//     transform: none !important;
-//     top: unset !important;
-//     position: fixed !important;
-//     bottom: 0 !important;
-//     left: 50% !important;
-//     transform: translateX(-50%) !important;
-//   }
-// }
--- a/com.twin.app.shoptime/src/hooks/useVideoPlay/useVideoPlay.js
+++ b/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, // ✅ [최적화] 메모이제이션된 배너 가용성

    // 🔍 유틸리티
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less
@@ -70,7 +70,7 @@
    margin: 10px 0;
    span {
      .font(@fontFamily: @baseFont, @fontSize: 20px);
-      line-height: 40ppx;
+      line-height: 40px;
      font-weight: 700;
      color: rgba(234, 234, 234, 1);
    }
--- a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx
+++ b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx
@@ -418,7 +418,7 @@ const MediaPanel = React.forwardRef(
      const videoContainer = document.querySelector(`.${css.videoContainer}`);
      if (videoContainer && panelInfo.thumbnailUrl && !videoLoaded) {
        try {
-          videoContainer.style.background = `url(${panelInfo.thumbnailUrl}) center center / contain no-repeat`;
+          videoContainer.style.background = `url(${panelInfo.thumbnailUrl}) center/contain no-repeat`;
          videoContainer.style.backgroundColor = 'black';
        } catch (err) {
          if (DEBUG_MODE) console.warn('[MediaPanel] 썸네일 스타일 설정 실패:', err);
--- a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx
+++ b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx
@@ -2164,12 +2164,12 @@ const MediaPanel = React.forwardRef(
      const videoContainer = document.querySelector(`.${css.videoContainer}`);

      if (panelInfo.thumbnail && !videoVerticalVisible) {
-        videoContainer.style.background = `url(${panelInfo.thumbnail}) center center / contain no-repeat`;
+        videoContainer.style.background = `url(${panelInfo.thumbnail}) center/contain no-repeat`;
        videoContainer.style.backgroundColor = 'black';
      }

      if (broadcast.type === 'videoError' && videoThumbnailUrl) {
-        videoContainer.style.background = `url(${videoThumbnailUrl}) center center / contain no-repeat`;
+        videoContainer.style.background = `url(${videoThumbnailUrl}) center/contain no-repeat`;
        videoContainer.style.backgroundColor = 'black';
      }
    }, [panelInfo.thumbnail, broadcast]);
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.module
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.module
@@ -757,11 +757,7 @@
    background-color: #202020; /* 배경색 (테마에 맞게 조정) */
    padding: 0; /* TPanel 기본 padding 제거 */

-    // :global(.sand- তুরস্ক-TPanel_TPanel_header) {
-    //     /* 모달 모드일 때 TPanel 헤더 숨기거나 다르게 스타일링 가능 */
-    //     /* display: none; */
-    // }
-
+  
    .body {
        /* TPanel 내부의 TBody가 전체 높이를 차지하도록 */
        height: 100%;
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -2443,12 +2443,12 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
    const videoContainer = document.querySelector(`.${css.videoContainer}`);

    if (panelInfo.thumbnail && !videoVerticalVisible) {
-      videoContainer.style.background = `url(${panelInfo.thumbnail}) center center / contain no-repeat`;
+      videoContainer.style.background = `url(${panelInfo.thumbnail}) center/contain no-repeat`;
      videoContainer.style.backgroundColor = 'black';
    }

    if (broadcast.type === 'videoError' && videoThumbnailUrl) {
-      videoContainer.style.background = `url(${videoThumbnailUrl}) center center / contain no-repeat`;
+      videoContainer.style.background = `url(${videoThumbnailUrl}) center/contain no-repeat`;
      videoContainer.style.backgroundColor = 'black';
    }
  }, [panelInfo.thumbnail, broadcast]);