shoptime/com.twin.app.shoptime/DEBUG_MODE_IMPLEMENTATION.md

DEBUG_MODE 조건부 로깅 구현 완료

작업 일시: 2025-11-12 작업 범위: ProductVideo.v2.jsx, MediaPanel.jsx

---

📋 작업 개요

ProductVideo.v2.jsx와 MediaPanel.jsx의 모든 로그 출력을 DEBUG_MODE = true/false 플래그로 제어할 수 있도록 구현했습니다.

---

✅ 구현 내용

1. DEBUG_MODE 설정

각 파일의 최상단에 DEBUG_MODE 상수를 추가합니다:

// ✅ DEBUG 모드 설정
const DEBUG_MODE = true;  // false로 설정하면 모든 로그 비활성화

설정 변경 방법:

• 프로덕션: const DEBUG_MODE = false; 로 변경
• 개발/테스트: const DEBUG_MODE = true; 유지

2. debugLog 헬퍼 함수

DEBUG_MODE를 검사하는 래퍼 함수를 구현합니다:

// ✅ DEBUG_MODE 기반 console 래퍼
const debugLog = (...args) => {
  if (DEBUG_MODE) {
    console.log(...args);
  }
};

특징:

• console.log(...) 대신 debugLog(...) 사용
• DEBUG_MODE가 false이면 로그 출력 안 됨
• 성능 오버헤드 거의 없음 (조건 체크만 수행)

3. console 메서드별 처리

메서드	처리 방식	파일
console.log()	debugLog() 로 변경	ProductVideo.v2.jsx, MediaPanel.jsx
console.warn()	if (DEBUG_MODE) console.warn()	ProductVideo.v2.jsx, MediaPanel.jsx
console.error()	if (DEBUG_MODE) console.error()	ProductVideo.v2.jsx

---

📊 변경 통계

ProductVideo.v2.jsx

- console.log() → debugLog(): 약 40+ 개
- console.warn() → if (DEBUG_MODE) console.warn(): 2개
- console.error() → if (DEBUG_MODE) console.error(): 1개

MediaPanel.jsx

- console.log() → debugLog(): 약 10+ 개
- console.warn() → if (DEBUG_MODE) console.warn(): 1개

---

🎯 사용 방법

DEBUG 로그 활성화 (개발 모드)

const DEBUG_MODE = true;  // ✅ 모든 로그 출력됨

DEBUG 로그 비활성화 (프로덕션)

const DEBUG_MODE = false;  // ❌ 모든 로그 숨김

한 줄 변경으로 전체 로깅 제어

각 파일의 두 번째 줄만 변경하면 됩니다:

ProductVideo.v2.jsx Line 36

const DEBUG_MODE = true;  // 변경: true ↔ false

MediaPanel.jsx Line 25

const DEBUG_MODE = true;  // 변경: true ↔ false

---

💡 장점

1. 성능 최적화

   • 프로덕션에서 로그 오버헤드 제거
   • 조건 검사만 수행 (콘솔 I/O 없음)

2. 개발 편의성

   • 한 줄 변경으로 전체 로깅 제어
   • 파일 수정 없이 ENV 변수로 제어 가능 (향후)

3. 디버깅 용이

   • 필요할 때만 로그 활성화
   • 로그 양 제어로 콘솔 지저분함 방지

4. 유지보수 편함

   • 기존 console 호출 그대로 유지
   • 로그 코드 삭제 불필요

---

🔧 향후 개선 사항

1. 환경 변수 기반 설정

const DEBUG_MODE = process.env.REACT_APP_DEBUG === 'true';

2. 세부 로그 레벨 구분

const LOG_LEVEL = {
  ERROR: 0,
  WARN: 1,
  INFO: 2,
  DEBUG: 3,
};

const debugLog = (level, ...args) => {
  if (LOG_LEVEL[level] <= getCurrentLogLevel()) {
    console.log(...args);
  }
};

3. Redux DevTools 통합

const debugLog = (...args) => {
  if (DEBUG_MODE) {
    console.log(...args);
    // Redux DevTools 에 추가 정보 기록
  }
};

---

✅ 검증 항목

• ProductVideo.v2.jsx: 모든 console.log → debugLog 변경
• ProductVideo.v2.jsx: console.warn/error 조건부 처리
• MediaPanel.jsx: 모든 console.log → debugLog 변경
• MediaPanel.jsx: console.warn 조건부 처리
• debugLog 함수 올바르게 구현 (무한 루프 방지)
• DEBUG_MODE 설정 가능

---

🚀 다음 단계

1. 사용자 테스트

   • DEBUG_MODE = true일 때 모든 로그 정상 출력 확인
   • DEBUG_MODE = false일 때 모든 로그 숨겨지는지 확인

2. 성능 테스트

   • 프로덕션 모드에서 성능 개선 확인

3. ENV 변수 연동

   • .env.development, .env.production 설정
   • 빌드 시 자동으로 DEBUG_MODE 설정

---

📝 코드 예시

Before (수정 전)

console.log('🎬 [handleThumbnailClick] 썸네일 클릭됨', {...});
console.warn('[ProductVideoV2] 비디오 정지 실패:', error);
console.error('🖥️ [toggleControls] 디스패치 에러:', error);

After (수정 후)

debugLog('🎬 [handleThumbnailClick] 썸네일 클릭됨', {...});
if (DEBUG_MODE) console.warn('[ProductVideoV2] 비디오 정지 실패:', error);
if (DEBUG_MODE) console.error('🖥️ [toggleControls] 디스패치 에러:', error);

---

📌 주의사항

1. 주석 처리된 로그

   • 기존의 주석 처리된 console.log는 유지됨
   • 필요시 나중에 삭제 가능

2. debugLog 함수 위치

   • 컴포넌트 함수 외부에 선언됨
   • 매번 새로 생성되지 않음 (성능 최적화)

3. 프로덕션 배포

   • 배포 전에 DEBUG_MODE를 false로 반드시 변경할 것

---

✨ 결론

ProductVideo.v2.jsx와 MediaPanel.jsx의 모든 로그 출력을 DEBUG_MODE 플래그로 제어할 수 있도록 구현완료. 이를 통해 개발/테스트 중에는 디버깅 정보를 쉽게 확인할 수 있으며, 프로덕션 환경에서는 로그 오버헤드를 제거하여 성능을 향상시킬 수 있습니다.

작업 상태: ✅ 완료