[251122] fix: Comment정리-2

🕐 커밋 시간: 2025. 11. 22. 18:35:56 📊 변경 통계: • 총 파일: 6개 • 추가: +129줄 • 삭제: -100줄 📝 수정된 파일: ~ com.twin.app.shoptime/src/App/App.js ~ com.twin.app.shoptime/src/actions/productActions.js ~ com.twin.app.shoptime/src/api/TAxios.js ~ com.twin.app.shoptime/src/utils/panelUtils.js ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx ~ com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoPlayer/PopularVideoPlayer.jsx 🔧 함수 변경 내용: 📄 com.twin.app.shoptime/src/App/App.js (javascript): 🔄 Modified: sendVoiceLogToPanel() ❌ Deleted: resolveSpotlightIdFromNode() 📄 com.twin.app.shoptime/src/actions/productActions.js (javascript): ✅ Added: onSuccess() 🔄 Modified: pickParams(), createGetThunk() ❌ Deleted: onSuccess() 📄 com.twin.app.shoptime/src/api/TAxios.js (javascript): 🔄 Modified: runDelayedAction() 📄 com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx (javascript): 🔄 Modified: SpotlightContainerDecorator() 🔧 주요 변경 내용: • 핵심 비즈니스 로직 개선 • API 서비스 레이어 개선 • 공통 유틸리티 함수 최적화
2025-11-22 18:35:56 +09:00
parent 251e1ee3d4
commit 209d983954
6 changed files with 434 additions and 401 deletions
--- a/com.twin.app.shoptime/src/App/App.js
+++ b/com.twin.app.shoptime/src/App/App.js
@@ -72,6 +72,9 @@ import { types } from '../actions/actionTypes';
 // } from "../utils/focus-monitor";
 // import { PanelHoc } from "../components/TPanel/TPanel";

+// DEBUG_MODE - true인 경우에만 로그 출력
+const DEBUG_MODE = false;
+
 let foreGroundChangeTimer = null;

 // 기존 콘솔 메서드를 백업
@@ -185,86 +188,92 @@ const sendVoiceLogToPanel = (args) => {
 };

 console.log = function (...args) {
-  // Voice 로그를 VoicePanel로 전송
-  sendVoiceLogToPanel(args);
-  // 원래 console.log 실행
-  originalConsoleLog.apply(console, processArgs(args));
+  if (DEBUG_MODE) {
+    // Voice 로그를 VoicePanel로 전송
+    sendVoiceLogToPanel(args);
+    // 원래 console.log 실행
+    originalConsoleLog.apply(console, processArgs(args));
+  }
 };

 console.error = function (...args) {
-  // Voice 로그를 VoicePanel로 전송 (에러는 강제로 ERROR 타입)
-  try {
-    const firstArg = args[0];
-    if (
-      typeof firstArg === 'string' &&
-      (firstArg.includes('[Voice]') || firstArg.includes('[VoiceConductor]'))
-    ) {
-      const logData = {};
-      if (args.length > 1) {
-        args.slice(1).forEach((arg, index) => {
-          if (typeof arg === 'object') {
-            Object.assign(logData, arg);
-          } else {
-            logData[`arg${index + 1}`] = arg;
-          }
+  if (DEBUG_MODE) {
+    // Voice 로그를 VoicePanel로 전송 (에러는 강제로 ERROR 타입)
+    try {
+      const firstArg = args[0];
+      if (
+        typeof firstArg === 'string' &&
+        (firstArg.includes('[Voice]') || firstArg.includes('[VoiceConductor]'))
+      ) {
+        const logData = {};
+        if (args.length > 1) {
+          args.slice(1).forEach((arg, index) => {
+            if (typeof arg === 'object') {
+              Object.assign(logData, arg);
+            } else {
+              logData[`arg${index + 1}`] = arg;
+            }
+          });
+        }
+
+        store.dispatch({
+          type: types.VOICE_ADD_LOG,
+          payload: {
+            timestamp: new Date().toISOString(),
+            type: 'ERROR',
+            title: firstArg.replace(/^\[Voice\]\s*/, '').replace(/^\[VoiceConductor\]\s*/, ''),
+            data: Object.keys(logData).length > 0 ? logData : { message: firstArg },
+            success: false,
+          },
        });
      }
-
-      store.dispatch({
-        type: types.VOICE_ADD_LOG,
-        payload: {
-          timestamp: new Date().toISOString(),
-          type: 'ERROR',
-          title: firstArg.replace(/^\[Voice\]\s*/, '').replace(/^\[VoiceConductor\]\s*/, ''),
-          data: Object.keys(logData).length > 0 ? logData : { message: firstArg },
-          success: false,
-        },
-      });
+    } catch (error) {
+      originalConsoleError.call(console, '[VoiceLog] Error sending error to panel:', error);
    }
-  } catch (error) {
-    originalConsoleError.call(console, '[VoiceLog] Error sending error to panel:', error);
-  }

-  originalConsoleError.apply(console, processArgs(args));
+    originalConsoleError.apply(console, processArgs(args));
+  }
 };

 console.warn = function (...args) {
-  // Voice 로그를 VoicePanel로 전송 (경고는 ERROR 타입으로)
-  try {
-    const firstArg = args[0];
-    if (
-      typeof firstArg === 'string' &&
-      (firstArg.includes('[Voice]') || firstArg.includes('[VoiceConductor]'))
-    ) {
-      const logData = {};
-      if (args.length > 1) {
-        args.slice(1).forEach((arg, index) => {
-          if (typeof arg === 'object') {
-            Object.assign(logData, arg);
-          } else {
-            logData[`arg${index + 1}`] = arg;
-          }
+  if (DEBUG_MODE) {
+    // Voice 로그를 VoicePanel로 전송 (경고는 ERROR 타입으로)
+    try {
+      const firstArg = args[0];
+      if (
+        typeof firstArg === 'string' &&
+        (firstArg.includes('[Voice]') || firstArg.includes('[VoiceConductor]'))
+      ) {
+        const logData = {};
+        if (args.length > 1) {
+          args.slice(1).forEach((arg, index) => {
+            if (typeof arg === 'object') {
+              Object.assign(logData, arg);
+            } else {
+              logData[`arg${index + 1}`] = arg;
+            }
+          });
+        }
+
+        store.dispatch({
+          type: types.VOICE_ADD_LOG,
+          payload: {
+            timestamp: new Date().toISOString(),
+            type: 'ERROR',
+            title:
+              'WARNING: ' +
+              firstArg.replace(/^\[Voice\]\s*/, '').replace(/^\[VoiceConductor\]\s*/, ''),
+            data: Object.keys(logData).length > 0 ? logData : { message: firstArg },
+            success: false,
+          },
        });
      }
-
-      store.dispatch({
-        type: types.VOICE_ADD_LOG,
-        payload: {
-          timestamp: new Date().toISOString(),
-          type: 'ERROR',
-          title:
-            'WARNING: ' +
-            firstArg.replace(/^\[Voice\]\s*/, '').replace(/^\[VoiceConductor\]\s*/, ''),
-          data: Object.keys(logData).length > 0 ? logData : { message: firstArg },
-          success: false,
-        },
-      });
+    } catch (error) {
+      originalConsoleWarn.call(console, '[VoiceLog] Error sending warning to panel:', error);
    }
-  } catch (error) {
-    originalConsoleWarn.call(console, '[VoiceLog] Error sending warning to panel:', error);
-  }

-  originalConsoleWarn.apply(console, processArgs(args));
+    originalConsoleWarn.apply(console, processArgs(args));
+  }
 };

 const originFocus = Spotlight.focus;
@@ -304,12 +313,12 @@ const logFocusTransition = (previousNode, currentNode) => {
  const currentId = resolveSpotlightIdFromNode(currentNode);

  if (previousId && previousId !== currentId) {
-    console.log(`[SpotlightFocus] blur - ${previousId}`);
+    if (DEBUG_MODE) console.log(`[SpotlightFocus] blur - ${previousId}`);
    lastLoggedBlurSpotlightId = previousId;
  }

  if (currentId && currentId !== lastLoggedSpotlightId) {
-    console.log(`[SpotlightFocus] focus - ${currentId}`);
+    if (DEBUG_MODE) console.log(`[SpotlightFocus] focus - ${currentId}`);
    lastLoggedSpotlightId = currentId;
  }
 };
--- a/com.twin.app.shoptime/src/actions/productActions.js
+++ b/com.twin.app.shoptime/src/actions/productActions.js
@@ -7,6 +7,9 @@ import { reduce, set, get } from '../utils/fp';
 // CustomerImages용 리뷰 이미지 import
 import reviewSampleImage from '../../assets/images/image-review-sample-1.png';

+// DEBUG_MODE - true인 경우에만 로그 출력
+const DEBUG_MODE = false;
+
 // Best Seller 상품 목록 조회 IF-LGSP-303
 // FP helpers
 const pickParams = (keys) => (src) =>
@@ -36,57 +39,60 @@ const createRequestThunk =
    const body = data(props);

    // 📡 REQUEST 로그: API 호출 전 (tag별로 다르게 표시)
-    console.log(
-      `%c[${tag}] 📤 REQUEST - ${method.toUpperCase()} ${url}`,
-      'background: #4CAF50; color: white; font-weight: bold; padding: 3px;',
-      {
-        method: method.toUpperCase(),
-        url: url,
-        params: query,
-        body: body,
-        timestamp: new Date().toISOString(),
-      }
-    );
-
-    const onSuccess = (response) => {
-      // ✅ RESPONSE 로그: API 호출 성공 (tag별로 다르게 표시)
+    if (DEBUG_MODE)
      console.log(
-        `%c[${tag}] ✅ RESPONSE SUCCESS - ${method.toUpperCase()} ${url}`,
-        'background: #2196F3; color: white; font-weight: bold; padding: 3px;',
+        `%c[${tag}] 📤 REQUEST - ${method.toUpperCase()} ${url}`,
+        'background: #4CAF50; color: white; font-weight: bold; padding: 3px;',
        {
          method: method.toUpperCase(),
          url: url,
-          httpStatus: response?.status,
-          httpStatusText: response?.statusText,
-          retCode: response?.data?.retCode,
-          retMsg: response?.data?.retMsg,
-          responseData: response?.data,
+          params: query,
+          body: body,
          timestamp: new Date().toISOString(),
        }
      );

+    const onSuccess = (response) => {
+      // ✅ RESPONSE 로그: API 호출 성공 (tag별로 다르게 표시)
+      if (DEBUG_MODE)
+        console.log(
+          `%c[${tag}] ✅ RESPONSE SUCCESS - ${method.toUpperCase()} ${url}`,
+          'background: #2196F3; color: white; font-weight: bold; padding: 3px;',
+          {
+            method: method.toUpperCase(),
+            url: url,
+            httpStatus: response?.status,
+            httpStatusText: response?.statusText,
+            retCode: response?.data?.retCode,
+            retMsg: response?.data?.retMsg,
+            responseData: response?.data,
+            timestamp: new Date().toISOString(),
+          }
+        );
+
      dispatch({ type, payload: selectPayload(response) });
      onSuccessExtra(props, dispatch, getState, response);
    };

    const onFail = (error) => {
      // ❌ ERROR 로그: API 호출 실패 (tag별로 다르게 표시)
-      console.error(
-        `%c[${tag}] ❌ RESPONSE ERROR - ${method.toUpperCase()} ${url}`,
-        'background: #F44336; color: white; font-weight: bold; padding: 3px;',
-        {
-          method: method.toUpperCase(),
-          url: url,
-          errorMessage: error?.message,
-          errorType: error?.type,
-          httpStatus: error?.response?.status,
-          httpStatusText: error?.response?.statusText,
-          responseRetCode: error?.response?.data?.retCode,
-          responseRetMsg: error?.response?.data?.retMsg,
-          responseData: error?.response?.data,
-          timestamp: new Date().toISOString(),
-        }
-      );
+      if (DEBUG_MODE)
+        console.error(
+          `%c[${tag}] ❌ RESPONSE ERROR - ${method.toUpperCase()} ${url}`,
+          'background: #F44336; color: white; font-weight: bold; padding: 3px;',
+          {
+            method: method.toUpperCase(),
+            url: url,
+            errorMessage: error?.message,
+            errorType: error?.type,
+            httpStatus: error?.response?.status,
+            httpStatusText: error?.response?.statusText,
+            responseRetCode: error?.response?.data?.retCode,
+            responseRetMsg: error?.response?.data?.retMsg,
+            responseData: error?.response?.data,
+            timestamp: new Date().toISOString(),
+          }
+        );

      onFailExtra(props, dispatch, getState, error);
    };
@@ -100,14 +106,14 @@ const createGetThunk = ({ url, type, params = () => ({}), tag }) =>

 export const getBestSeller = (callback) => (dispatch, getState) => {
  const onSuccess = (response) => {
-    console.log('getBestSeller onSuccess', response.data);
+    if (DEBUG_MODE) console.log('getBestSeller onSuccess', response.data);
    dispatch({ type: types.GET_BEST_SELLER, payload: get('data.data', response) });
    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
    callback && callback();
  };

  const onFail = (error) => {
-    console.error('getBestSeller onFail', error);
+    if (DEBUG_MODE) console.error('getBestSeller onFail', error);
    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
    callback && callback();
  };
--- a/com.twin.app.shoptime/src/api/TAxios.js
+++ b/com.twin.app.shoptime/src/api/TAxios.js
@@ -120,7 +120,7 @@ export const TAxios = (
      if (axiosInstance) {
        axiosInstance
          .then((res) => {
-            console.log('TAxios response', url, res);
+            // console.log('TAxios response', url, res);

            const apiSysStatus = res.headers['api-sys-status'];
            const apiSysMessage = res.headers['api-sys-message'];
--- a/com.twin.app.shoptime/src/utils/panelUtils.js
+++ b/com.twin.app.shoptime/src/utils/panelUtils.js
@@ -9,7 +9,7 @@
 import { panel_names } from './Config';

 // DEBUG_MODE - true인 경우에만 로그 출력
-const DEBUG_MODE = true;
+const DEBUG_MODE = false;

 /**
 * 🎯 [isOnTop 계산] MainView의 Panel Stack 기반으로 특정 패널의 isOnTop 상태 계산
@@ -48,7 +48,7 @@ export const calculateIsPanelOnTop = (panels, targetPanelName) => {
    renderingPanels = panels.slice(-3);
    if (DEBUG_MODE) {
      console.log('[PanelUtils] 3-layer structure detected', {
-        renderingPanels: renderingPanels.map(p => p.name),
+        renderingPanels: renderingPanels.map((p) => p.name),
      });
    }
  } else if (
@@ -98,7 +98,7 @@ export const calculateIsPanelOnTop = (panels, targetPanelName) => {
        console.log('[PanelUtils] calculateIsPanelOnTop: Panel is on top', {
          targetPanelName,
          panelsLength: panels.length,
-          renderingPanels: renderingPanels.map(p => p.name),
+          renderingPanels: renderingPanels.map((p) => p.name),
          foundAt: i,
        });
      }
@@ -110,7 +110,7 @@ export const calculateIsPanelOnTop = (panels, targetPanelName) => {
    console.log('[PanelUtils] calculateIsPanelOnTop: Panel is NOT on top', {
      targetPanelName,
      panelsLength: panels.length,
-      renderingPanels: renderingPanels.map(p => p.name),
+      renderingPanels: renderingPanels.map((p) => p.name),
    });
  }
  return false;
@@ -212,7 +212,7 @@ export const getPanelStackDebugInfo = (panels, targetPanelName = null) => {
    topPanelName,

    // 렌더링 정보
-    renderingPanels: renderingInfo.renderingPanels.map(p => p.name),
+    renderingPanels: renderingInfo.renderingPanels.map((p) => p.name),
    isThreeLayerStructure: renderingInfo.isThreeLayerStructure,
    isTwoLayerModalStructure: renderingInfo.isTwoLayerModalStructure,

@@ -221,10 +221,11 @@ export const getPanelStackDebugInfo = (panels, targetPanelName = null) => {
    isTargetOnTop,

    // 전체 패널 목록
-    allPanels: panels?.map(p => ({
-      name: p.name,
-      hasModal: !!p.panelInfo?.modal,
-    })) || [],
+    allPanels:
+      panels?.map((p) => ({
+        name: p.name,
+        hasModal: !!p.panelInfo?.modal,
+      })) || [],

    timestamp: new Date().toISOString(),
  };
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
@@ -1,5 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

+// 디버그 모드 설정 - true일 때만 console.log 출력
+const DEBUG_MODE = false;
+
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';

@@ -266,24 +269,28 @@ export default function RandomUnit({
  // 포커스 인
  const handleFocus = useCallback(() => {
    // 🔽 [251116] 현재 비디오 상태 로그 출력
-    console.log('[RandomUnit] onFocus - 현재 비디오 상태', {
-      playback: videoPlayState.playback,
-      display: videoPlayState.display,
-      videoId: videoPlayState.videoId,
-      loadingProgress: videoPlayState.loadingProgress,
-      loadingError: videoPlayState.loadingError,
-      isPlaying: videoPlayState.isPlaying,
-      isPaused: videoPlayState.isPaused,
-      lastUpdate: videoPlayState.lastUpdate,
-    });
+    if (DEBUG_MODE) {
+      console.log('[RandomUnit] onFocus - 현재 비디오 상태', {
+        playback: videoPlayState.playback,
+        display: videoPlayState.display,
+        videoId: videoPlayState.videoId,
+        loadingProgress: videoPlayState.loadingProgress,
+        loadingError: videoPlayState.loadingError,
+        isPlaying: videoPlayState.isPlaying,
+        isPaused: videoPlayState.isPaused,
+        lastUpdate: videoPlayState.lastUpdate,
+      });
+    }

-    console.log('[RandomUnit] onFocus - 비디오 재생 의도 저장', {
-      bannerId: spotlightId,
-      videoPlayerable,
-      currentIntent: videoPlayIntentRef.current?.bannerId,
-      currentVideoBannerId,
-      randomData: randomData?.showId || 'no-show-id',
-    });
+    if (DEBUG_MODE) {
+      console.log('[RandomUnit] onFocus - 비디오 재생 의도 저장', {
+        bannerId: spotlightId,
+        videoPlayerable,
+        currentIntent: videoPlayIntentRef.current?.bannerId,
+        currentVideoBannerId,
+        randomData: randomData?.showId || 'no-show-id',
+      });
+    }

    setIsFocused(true);

@@ -305,10 +312,12 @@ export default function RandomUnit({
        timestamp: Date.now(),
      };

-      console.log('[RandomUnit] 비디오 재생 의도 저장됨', {
-        intentBannerId: spotlightId,
-        videoUrl: randomData.showUrl,
-      });
+      if (DEBUG_MODE) {
+        console.log('[RandomUnit] 비디오 재생 의도 저장됨', {
+          intentBannerId: spotlightId,
+          videoUrl: randomData.showUrl,
+        });
+      }

      setVideoIntentVersion((version) => version + 1);

@@ -320,10 +329,12 @@ export default function RandomUnit({

    // video가 플레이 불가능한 경우: 재생 중인 비디오를 1px로 축소
    if (!videoPlayerable && currentVideoBannerId && isCurrentBannerVideoPlaying) {
-      console.log('[RandomUnit] videoPlayerable=false, shrinking video to 1px', {
-        videoPlayerable,
-        currentVideoBannerId,
-      });
+      if (DEBUG_MODE) {
+        console.log('[RandomUnit] videoPlayerable=false, shrinking video to 1px', {
+          videoPlayerable,
+          currentVideoBannerId,
+        });
+      }
      dispatch(hideModalVideo());
    }

@@ -582,10 +593,12 @@ export default function RandomUnit({
    // ✅ modal=true → modal=false로 전환 (또는 초기 로드 시 modal=false)
    // playActions의 shouldSkipVideoPlayback이 modal 상태를 확인하므로
    // 모드 전환은 중복 방지 로직을 스킵하여 정상 작동
-    console.log(
-      '[RandomUnit] videoClick: current playerPanel modal state:',
-      playerPanelInfo?.modal
-    );
+    if (DEBUG_MODE) {
+      console.log(
+        '[RandomUnit] videoClick: current playerPanel modal state:',
+        playerPanelInfo?.modal
+      );
+    }

    handleStartVideo({
      bannerId: spotlightId,
@@ -739,17 +752,19 @@ export default function RandomUnit({
    const currentVideoId = videoPlayState.videoId;
    const activeBannerId = currentVideoBannerId;

-    console.log('[RandomUnit] videoPlayIntent useEffect', {
-      intentBannerId: intent.bannerId,
-      currentVideoId,
-      activeBannerId,
-      currentPlayback: videoPlayState.playback,
-      currentDisplay: videoPlayState.display,
-      loadingProgress: videoPlayState.loadingProgress,
-      shouldStart: intent.bannerId !== activeBannerId,
-      isVideoTransitionLocked,
-      timestamp: Date.now(),
-    });
+    if (DEBUG_MODE) {
+      console.log('[RandomUnit] videoPlayIntent useEffect', {
+        intentBannerId: intent.bannerId,
+        currentVideoId,
+        activeBannerId,
+        currentPlayback: videoPlayState.playback,
+        currentDisplay: videoPlayState.display,
+        loadingProgress: videoPlayState.loadingProgress,
+        shouldStart: intent.bannerId !== activeBannerId,
+        isVideoTransitionLocked,
+        timestamp: Date.now(),
+      });
+    }

    if (intent.bannerId === activeBannerId) {
      return undefined;
@@ -764,10 +779,12 @@ export default function RandomUnit({
        return;
      }

-      console.log('[RandomUnit] 비디오 변경 실행', {
-        from: currentVideoId,
-        to: intent.bannerId,
-      });
+      if (DEBUG_MODE) {
+        console.log('[RandomUnit] 비디오 변경 실행', {
+          from: currentVideoId,
+          to: intent.bannerId,
+        });
+      }

      if (activeBannerId) {
        dispatch(finishVideoPreview());
--- a/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoPlayer/PopularVideoPlayer.jsx
+++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/PopularShow/PopularVideoPlayer/PopularVideoPlayer.jsx
@@ -1,9 +1,9 @@
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback } from 'react';

-import ReactPlayer from "react-player";
+import ReactPlayer from 'react-player';

-import VideoPlayer from "../../../../components/VideoPlayer/VideoPlayer";
-import { scaleH, scaleW } from "../../../../utils/helperMethods";
+import VideoPlayer from '../../../../components/VideoPlayer/VideoPlayer';
+import { scaleH, scaleW } from '../../../../utils/helperMethods';

 export default memo(function PopularVideoPlayer({
  className,
@@ -20,16 +20,16 @@ export default memo(function PopularVideoPlayer({
  const mediainfoHandler = useCallback((e) => {
    const type = e.type;

-    if (type !== "timeupdate") {
-      console.log("@@ [mediaInfoHandler].....", type);
+    if (type !== 'timeupdate') {
+      console.log('[mediaInfoHandler].....', type);
    }
    switch (type) {
-      case "loadeddata":
-        console.log("@@ [mediaInfoHandler] loaded data");
+      case 'loadeddata':
+        console.log('[mediaInfoHandler] loaded data');
        break;

-      case "durationchange":
-        console.log("@@ [mediaInfoHandler] duration", e.currentTarget.duration);
+      case 'durationchange':
+        console.log('[mediaInfoHandler] duration', e.currentTarget.duration);
        break;
    }
  }, []);
@@ -52,7 +52,7 @@ export default memo(function PopularVideoPlayer({
          className={className}
          onReady={handleReady}
          playing={shouldPlay}
-          url={shouldPlay ? src : ""}
+          url={shouldPlay ? src : ''}
          width={scaleW(width)}
          height={scaleH(height)}
        />