@adstage/web-sdk 2.3.7 → 2.4.0

package/src/modules/ads/AdsModule.ts

@@ -6,15 +6,15 @@
 import { AdStageConfig, BaseModule } from '../../types/config';
 import { AdType, AdEventType } from '../../types/advertisement';
 import type { AdSlot, Advertisement } from '../../types/advertisement';
-import { CarouselSliderManager } from '../../managers/ads/carousel-slider-manager';
-import { TextTransitionManager } from '../../managers/ads/text-transition-manager';
-import { ViewableEventTracker } from '../../managers/ads/viewable-event-tracker';
+// 렌더링 관련 매니저/뷰 트래커는 AdRenderer로 이전됨
 import { AdvertisementEventTracker } from '../../managers/ads/advertisement-event-tracker';
 import { ViewabilityTracker, VIEWABILITY_STANDARDS } from '../../managers/ads/viewability-tracker';
 import { BasicFraudDetector } from '../../managers/ads/basic-fraud-detector';
 import type { ViewabilityMetrics } from '../../managers/ads/viewability-tracker';
 import { endpoints } from '../../constants/endpoints';
 import { ApiHeaders } from '../../utils/api-headers';
+// 새로 분리된 클래스들
+import { AdRenderer } from './AdRenderer';
 
 export interface AdOptions {
   width?: string | number;
@@ -38,6 +38,8 @@ export class AdsModule implements BaseModule {
   private slots = new Map<string, AdSlot>();
   // Advertisement 이벤트 추적 관련
   private advertisementEventTracker: AdvertisementEventTracker | null = null;
+  // 렌더링 관련
+  private adRenderer: AdRenderer | null = null;
 
   /**
    * Ads 모듈 초기화 (동기)
@@ -53,6 +55,9 @@ export class AdsModule implements BaseModule {
       this.slots
     );
 
+    // AdRenderer 초기화
+    this.adRenderer = new AdRenderer(config.debug || false, this.advertisementEventTracker);
+
     this._isReady = true;
 
     if (config.debug) {
@@ -235,8 +240,8 @@ export class AdsModule implements BaseModule {
     // 고유한 슬롯 ID 생성
     const slotId = `adstage-${type}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
-    // 즉시 placeholder 생성
-    this.createAdSlot(container, slotId, type, options);
+  // 즉시 placeholder 생성 (AdRenderer 위임)
+  this.adRenderer?.createPlaceholder(container, slotId, type, options, this._config);
 
     // 광고 슬롯 정보 저장
     const slot: AdSlot = {
@@ -253,7 +258,7 @@ export class AdsModule implements BaseModule {
       advertisement: undefined, // 나중에 로드
       config: { type, ...options },
       load: async () => this.fetchAdData(type, options).then(ads => ads[0] || null),
-      render: (ad: Advertisement) => this.renderAdElement(slot, ad),
+  render: (ad: Advertisement) => this.adRenderer?.renderAdElement(slot, ad),
       refresh: async () => this.refreshAdSlot(slot),
       destroy: () => this.destroy(slotId)
     };
@@ -272,342 +277,22 @@ export class AdsModule implements BaseModule {
     return slotId;
   }
 
-  /**
-   * 즉시 광고 슬롯 생성 (placeholder)
-   */
-  private createAdSlot(container: HTMLElement, slotId: string, type: AdType, options: any): void {
-    const adElement = document.createElement('div');
-    adElement.id = slotId;
-    adElement.className = `adstage-slot adstage-${type.toLowerCase()}`;
-    // 확실한 컨테이너 식별을 위한 데이터 속성 추가
-    adElement.setAttribute('data-adstage-container', 'true');
-    adElement.setAttribute('data-adstage-type', type);
-    adElement.setAttribute('data-adstage-slot', slotId);
-    
-    // 스마트한 크기 설정
-    const { width, height } = this.calculateAdSize(container, type, options);
-    adElement.style.width = width;
-    adElement.style.height = height;
-    adElement.style.border = '1px dashed #ccc';
-    adElement.style.display = 'flex';
-    adElement.style.alignItems = 'center';
-    adElement.style.justifyContent = 'center';
-    adElement.style.backgroundColor = '#f9f9f9';
-    adElement.style.color = '#666';
-    adElement.innerHTML = `<span>Loading ${type} ad...</span>`;
-
-    container.appendChild(adElement);
-
-    if (this._config?.debug) {
-      console.log(`📦 Placeholder created for slot: ${slotId} (${width} x ${height})`);
-    }
-  }
-
-  /**
-   * 컨테이너와 광고 타입에 따른 스마트한 크기 계산
-   */
-  private calculateAdSize(container: HTMLElement, type: AdType, options: any): { width: string; height: string } {
-    // 사용자가 명시적으로 크기를 지정한 경우
-    const explicitWidth = options.width;
-    const explicitHeight = options.height;
-    
-    // 너비 처리
-    let width: string;
-    if (typeof explicitWidth === 'number') {
-      width = `${explicitWidth}px`;
-    } else if (typeof explicitWidth === 'string') {
-      width = explicitWidth;
-    } else {
-      width = '100%'; // 기본값은 100%
-    }
-    
-    // 높이 처리 - 핵심 로직
-    let height: string;
-    if (typeof explicitHeight === 'number') {
-      height = `${explicitHeight}px`;
-    } else if (typeof explicitHeight === 'string' && explicitHeight !== '100%' && explicitHeight !== 'auto') {
-      // 명시적인 크기 문자열 (예: '200px', '50vh' 등)
-      height = explicitHeight;
-    } else {
-      // 100%, auto이거나 높이가 지정되지 않은 경우 스마트 계산
-      const containerHeight = this.getContainerHeight(container);
-      
-      if (containerHeight > 0) {
-        // 컨테이너에 높이가 있으면 100% 사용
-        height = '100%';
-        if (this._config?.debug) {
-          console.log(`📏 Using 100% height (container: ${containerHeight}px)`);
-        }
-      } else {
-        // 컨테이너에 높이가 없으면 타입별 기본값 사용 (나중에 동적 조정됨)
-        height = this.getDefaultHeightForAdType(type);
-        if (this._config?.debug) {
-          console.log(`📏 Using default height ${height} (will be optimized for ${type})`);
-        }
-      }
-    }
-    
-    return { width, height };
-  }
-
-  /**
-   * 컨테이너의 실제 높이 계산
-   */
-  private getContainerHeight(container: HTMLElement): number {
-    // 현재 계산된 스타일에서 높이 확인
-    const computedStyle = window.getComputedStyle(container);
-    const height = parseFloat(computedStyle.height);
-    
-    // height가 auto이거나 0이면 다른 방법들 시도
-    if (!height || height === 0) {
-      // min-height 확인
-      const minHeight = parseFloat(computedStyle.minHeight);
-      if (minHeight > 0) return minHeight;
-      
-      // CSS로 설정된 고정 높이 확인
-      if (container.style.height && container.style.height !== 'auto') {
-        const styleHeight = parseFloat(container.style.height);
-        if (styleHeight > 0) return styleHeight;
-      }
-      
-      // 속성으로 설정된 높이 확인
-      const heightAttr = container.getAttribute('height');
-      if (heightAttr) {
-        const attrHeight = parseFloat(heightAttr);
-        if (attrHeight > 0) return attrHeight;
-      }
-    }
-    
-    return height || 0;
-  }
-
-  /**
-   * 광고 타입별 기본 높이 반환
-   */
-  private getDefaultHeightForAdType(type: AdType): string {
-    switch (type) {
-      case AdType.BANNER:
-        return '250px'; // 일반 배너
-      case AdType.TEXT:
-        return '120px'; // 텍스트는 좀 더 작게
-      case AdType.VIDEO:
-        return '360px'; // 비디오는 16:9 비율 고려
-      case AdType.NATIVE:
-        return '200px'; // 네이티브는 중간 크기
-      case AdType.INTERSTITIAL:
-        return '400px'; // 전면광고는 크게
-      default:
-        return '250px';
-    }
-  }
-
-  /**
-   * 이미지 크기 정보 로드 (프리로딩)
-   */
-  private async loadImageDimensions(imageUrl: string): Promise<{ width: number; height: number }> {
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-      img.onload = () => {
-        resolve({ width: img.naturalWidth, height: img.naturalHeight });
-      };
-      img.onerror = () => {
-        reject(new Error(`Failed to load image: ${imageUrl}`));
-      };
-      img.src = imageUrl;
-    });
-  }
+  // createAdSlot 제거: AdRenderer.createPlaceholder 사용
 
   /**
    * 여러 광고의 최적 컨테이너 크기 계산 (동적 크기 조정)
    */
-  private async calculateOptimalContainerSize(
-    advertisements: Advertisement[], 
-    containerWidth: number, 
-    adType: AdType
-  ): Promise<{ width: string; height: string; aspectRatio: number }> {
-    if (!advertisements.length || adType !== AdType.BANNER) {
-      // 배너가 아니거나 광고가 없으면 기본값
-      return { 
-        width: '100%', 
-        height: this.getDefaultHeightForAdType(adType),
-        aspectRatio: 16/9
-      };
-    }
-
-    try {
-      // 모든 배너 이미지의 크기 정보 로드
-      const imageDimensions = await Promise.allSettled(
-        advertisements
-          .filter(ad => ad.imageUrl)
-          .map(ad => this.loadImageDimensions(ad.imageUrl!))
-      );
-
-      const validDimensions = imageDimensions
-        .filter((result): result is PromiseFulfilledResult<{ width: number; height: number }> => 
-          result.status === 'fulfilled'
-        )
-        .map(result => result.value);
-
-      if (validDimensions.length === 0) {
-        // 이미지 로드 실패시 기본값
-        return { 
-          width: '100%', 
-          height: this.getDefaultHeightForAdType(adType),
-          aspectRatio: 16/9
-        };
-      }
-
-      // 최적 전략 선택
-      const strategy = this.selectOptimalSizeStrategy(validDimensions);
-      const optimalHeight = this.calculateOptimalHeight(validDimensions, containerWidth, strategy);
-
-      if (this._config?.debug) {
-        console.log(`📐 Optimal container calculated: ${containerWidth}x${optimalHeight} (strategy: ${strategy})`);
-      }
-
-      return {
-        width: '100%',
-        height: `${optimalHeight}px`,
-        aspectRatio: containerWidth / optimalHeight
-      };
-
-    } catch (error) {
-      console.warn('Failed to calculate optimal size, using defaults:', error);
-      return { 
-        width: '100%', 
-        height: this.getDefaultHeightForAdType(adType),
-        aspectRatio: 16/9
-      };
-    }
-  }
+  // calculateOptimalContainerSize 제거: AdRenderer.calculateOptimalContainerSize 사용
 
   /**
    * 최적 크기 조정 전략 선택
    */
-  private selectOptimalSizeStrategy(dimensions: { width: number; height: number }[]): 'average' | 'common' | 'dominant' {
-    const aspectRatios = dimensions.map(d => d.width / d.height);
-    
-    // 1. 공통 비율이 있는지 확인 (±0.1 허용)
-    const ratioGroups = new Map<string, number>();
-    aspectRatios.forEach(ratio => {
-      const roundedRatio = Math.round(ratio * 10) / 10;
-      const key = roundedRatio.toString();
-      ratioGroups.set(key, (ratioGroups.get(key) || 0) + 1);
-    });
-
-    const maxGroup = Math.max(...ratioGroups.values());
-    const totalImages = dimensions.length;
-
-    // 70% 이상이 비슷한 비율이면 dominant 전략
-    if (maxGroup / totalImages >= 0.7) {
-      return 'dominant';
-    }
-
-    // 표준 비율들이 많으면 common 전략
-    const standardRatios = [16/9, 4/3, 1/1, 3/2];
-    const standardCount = aspectRatios.filter(ratio => 
-      standardRatios.some(standard => Math.abs(ratio - standard) < 0.1)
-    ).length;
-
-    if (standardCount / totalImages >= 0.5) {
-      return 'common';
-    }
-
-    // 기본은 평균 전략
-    return 'average';
-  }
+  // selectOptimalSizeStrategy 제거: AdRenderer 내부 구현 사용
 
   /**
    * 전략에 따른 최적 높이 계산
    */
-  private calculateOptimalHeight(
-    dimensions: { width: number; height: number }[], 
-    containerWidth: number, 
-    strategy: 'average' | 'common' | 'dominant'
-  ): number {
-    const aspectRatios = dimensions.map(d => d.width / d.height);
-
-    switch (strategy) {
-      case 'dominant':
-        // 가장 많은 비율을 기준으로
-        const ratioGroups = new Map<string, { ratio: number; count: number }>();
-        aspectRatios.forEach(ratio => {
-          const roundedRatio = Math.round(ratio * 10) / 10;
-          const key = roundedRatio.toString();
-          const existing = ratioGroups.get(key);
-          if (existing) {
-            existing.count++;
-          } else {
-            ratioGroups.set(key, { ratio: roundedRatio, count: 1 });
-          }
-        });
-        
-        const dominantGroup = Array.from(ratioGroups.values())
-          .reduce((max, current) => current.count > max.count ? current : max);
-        
-        return Math.round(containerWidth / dominantGroup.ratio);
-
-      case 'common':
-        // 표준 비율 중 가장 적합한 것 선택
-        const standardRatios = [
-          { ratio: 16/9, name: '16:9' },
-          { ratio: 4/3, name: '4:3' },
-          { ratio: 1/1, name: '1:1' },
-          { ratio: 3/2, name: '3:2' }
-        ];
-        
-        const avgRatio = aspectRatios.reduce((sum, ratio) => sum + ratio, 0) / aspectRatios.length;
-        const bestStandard = standardRatios.reduce((best, current) => 
-          Math.abs(current.ratio - avgRatio) < Math.abs(best.ratio - avgRatio) ? current : best
-        );
-        
-        if (this._config?.debug) {
-          console.log(`📊 Using standard ratio: ${bestStandard.name} (avg: ${avgRatio.toFixed(2)})`);
-        }
-        
-        return Math.round(containerWidth / bestStandard.ratio);
-
-      case 'average':
-      default:
-        // 평균 비율 사용
-        const averageRatio = aspectRatios.reduce((sum, ratio) => sum + ratio, 0) / aspectRatios.length;
-        return Math.round(containerWidth / averageRatio);
-    }
-  }
-
-  /**
-   * 개별 이미지에 최적화된 렌더링 스타일 적용
-   */
-  private applyOptimizedImageStyle(
-    img: HTMLImageElement, 
-    imageAspectRatio: number, 
-    containerAspectRatio: number
-  ): void {
-    const ratio = imageAspectRatio / containerAspectRatio;
-
-    if (Math.abs(ratio - 1) < 0.1) {
-      // 비율이 거의 같으면 cover 사용
-      img.style.objectFit = 'cover';
-      img.style.objectPosition = 'center';
-    } else if (ratio > 1.3) {
-      // 이미지가 훨씬 가로형이면 contain으로 전체 보이기
-      img.style.objectFit = 'contain';
-      img.style.objectPosition = 'center';
-      img.style.backgroundColor = '#f0f0f0'; // 빈 공간 배경색
-    } else if (ratio < 0.7) {
-      // 이미지가 훨씬 세로형이면 cover로 채우기
-      img.style.objectFit = 'cover';
-      img.style.objectPosition = 'center';
-    } else {
-      // 적당한 차이면 스마트 cover
-      img.style.objectFit = 'cover';
-      img.style.objectPosition = 'center';
-    }
-
-    if (this._config?.debug) {
-      console.log(`🎨 Image style applied: objectFit=${img.style.objectFit}, ratio=${ratio.toFixed(2)}`);
-    }
-  }
+  // calculateOptimalHeight 제거: AdRenderer 내부 구현 사용
 
   /**
    * 백그라운드에서 광고 콘텐츠 로드
@@ -618,22 +303,22 @@ export class AdsModule implements BaseModule {
       const adstageData = await this.fetchAdData(slot.adType, slot.config);
       
       if (!adstageData || adstageData.length === 0) {
-        this.renderFallback(slot);
+  this.adRenderer?.renderFallback(slot);
         return;
       }
 
       // 🆕 동적 크기 조정: 배너 광고의 경우 이미지 크기 기반으로 컨테이너 최적화
       if (slot.adType === AdType.BANNER && adstageData.length > 0) {
-        await this.optimizeContainerForBannerAds(slot, adstageData);
+        await this.adRenderer?.optimizeContainerForBannerAds(slot, adstageData);
       }
 
       // 광고가 여러 개이거나 autoSlide 옵션이 있으면 슬라이더로 렌더링
       if (adstageData.length > 1 || (slot.config as any)?.autoSlide) {
-        await this.renderAdSlider(slot, adstageData);
+        await this.adRenderer?.renderAdSlider(slot, adstageData);
       } else {
         // 광고가 1개면 일반 렌더링
         slot.advertisement = adstageData[0];
-        await this.renderAdElement(slot, adstageData[0]);
+  await this.adRenderer?.renderAdElement(slot, adstageData[0]);
         
         // ✅ 신규: Viewable impression 추적 시작 (기존 즉시 추적 대신)
         this.startBasicViewabilityTracking(slot, adstageData[0]);
@@ -646,41 +331,14 @@ export class AdsModule implements BaseModule {
       }
     } catch (error) {
       console.error(`❌ Failed to load ad for slot: ${slot.id}`, error);
-      this.renderFallback(slot);
+      this.adRenderer?.renderFallback(slot);
     }
   }
 
   /**
    * 배너 광고를 위한 컨테이너 최적화
    */
-  private async optimizeContainerForBannerAds(slot: AdSlot, advertisements: Advertisement[]): Promise<void> {
-    try {
-      const container = document.getElementById(slot.containerId);
-      const adElement = document.getElementById(slot.id);
-      
-      if (!container || !adElement) return;
-
-      // 현재 컨테이너 너비 확인
-      const containerWidth = container.getBoundingClientRect().width || 300;
-      
-      // 최적 크기 계산
-      const optimalSize = await this.calculateOptimalContainerSize(advertisements, containerWidth, slot.adType);
-      
-      // 컨테이너 크기 동적 조정
-      adElement.style.height = optimalSize.height;
-      
-      // 슬롯 정보 업데이트
-      (slot as any).optimizedHeight = optimalSize.height;
-      (slot as any).aspectRatio = optimalSize.aspectRatio;
-      
-      if (this._config?.debug) {
-        console.log(`🔧 Container optimized for ${advertisements.length} banner ads: ${optimalSize.height}`);
-      }
-      
-    } catch (error) {
-      console.warn('Container optimization failed, using default size:', error);
-    }
-  }
+  // optimizeContainerForBannerAds 제거: AdRenderer.optimizeContainerForBannerAds 사용
 
   /**
    * 기본 viewability 추적 시작
@@ -753,121 +411,12 @@ export class AdsModule implements BaseModule {
   /**
    * Fallback 광고 렌더링 - AdStage 확실한 컨테이너 우선 탐지
    */
-  private renderFallback(slot: AdSlot): void {
-    const element = document.getElementById(slot.id);
-    if (element) {
-      // 1순위: AdStage가 생성한 확실한 컨테이너들 (데이터 속성 기반)
-      const adstageContainers = [
-        element.querySelector('[data-adstage-container="true"]'), // 내부 AdStage 컨테이너
-        element.closest('[data-adstage-container="true"]'), // 상위 AdStage 컨테이너
-        element, // 자기 자신이 AdStage 컨테이너인 경우
-      ].filter(el => el && el.hasAttribute('data-adstage-container'));
-
-      // 2순위: AdStage 클래스 기반 컨테이너들
-      const classBasedContainers = [
-        element.closest('.adstage-slot'),
-        element.closest('.adstage-banner'),
-        element.closest('.adstage-text'), 
-        element.closest('.adstage-video'),
-        element.closest('.adstage-native'),
-        element.closest('.adstage-interstitial'),
-      ].filter(Boolean);
-
-      // 3순위: 일반적인 광고 컨테이너 패턴들 (fallback)
-      const generalContainers = [
-        element.closest('[class*="ad"]'),
-        element.closest('[class*="banner"]'),
-        element.closest('[class*="container"]'),
-        element.closest('div[style*="height"]'),
-        element.closest('div[style*="min-height"]'),
-        element.parentElement
-      ].filter(Boolean);
-
-      // 우선순위에 따라 컨테이너 선택
-      const possibleContainers = [
-        ...adstageContainers,
-        ...classBasedContainers, 
-        ...generalContainers
-      ];
-
-      // 가장 적절한 컨테이너 선택
-      const targetContainer = possibleContainers[0] as HTMLElement;
-      
-      if (targetContainer) {
-        // 컨테이너 타입 로깅
-        let containerType = 'unknown';
-        if (targetContainer.hasAttribute('data-adstage-container')) {
-          containerType = 'adstage-official';
-        } else if (targetContainer.classList.contains('adstage-slot')) {
-          containerType = 'adstage-class';
-        } else {
-          containerType = 'generic';
-        }
-
-        targetContainer.style.cssText += `
-          height: 0px !important;
-          min-height: 0px !important;
-          padding: 0px !important;
-          margin: 0px !important;
-          border: none !important;
-          overflow: hidden !important;
-          display: block !important;
-        `;
-        
-        // 내부 모든 요소 제거
-        targetContainer.innerHTML = '';
-        
-        // 빈 상태임을 표시하는 속성 추가
-        targetContainer.setAttribute('data-adstage-empty', 'true');
-        
-        if (this._config?.debug) {
-          console.warn(`⚠️ Ad container collapsed (${containerType}): ${slot.id}`, targetContainer);
-        }
-      } else {
-        // 컨테이너를 찾지 못한 경우 새로운 빈 컨테이너 생성
-        this.createEmptyContainer(slot);
-      }
-    }
-    
-    // 슬롯 상태 업데이트 (제거하지 않고 빈 상태로 마킹)
-    slot.advertisement = undefined;
-    (slot as any).isEmpty = true;
-  }
+  // renderFallback 제거: AdRenderer.renderFallback 사용
 
   /**
    * 빈 컨테이너 생성 (컨테이너를 찾지 못한 경우)
    */
-  private createEmptyContainer(slot: AdSlot): void {
-    const originalContainer = document.getElementById(slot.containerId);
-    if (originalContainer) {
-      // 기존 내용 제거
-      originalContainer.innerHTML = '';
-      
-      // 빈 AdStage 컨테이너 생성
-      const emptyElement = document.createElement('div');
-      emptyElement.id = slot.id;
-      emptyElement.className = 'adstage-slot adstage-empty';
-      emptyElement.setAttribute('data-adstage-container', 'true');
-      emptyElement.setAttribute('data-adstage-empty', 'true');
-      emptyElement.setAttribute('data-adstage-slot', slot.id);
-      
-      emptyElement.style.cssText = `
-        height: 0px !important;
-        min-height: 0px !important;
-        padding: 0px !important;
-        margin: 0px !important;
-        border: none !important;
-        overflow: hidden !important;
-        display: block !important;
-      `;
-      
-      originalContainer.appendChild(emptyElement);
-      
-      if (this._config?.debug) {
-        console.warn(`⚠️ Created empty AdStage container: ${slot.id}`);
-      }
-    }
-  }
+  // createEmptyContainer 제거: AdRenderer 내부 구현 사용
 
   /**
    * 광고 데이터 가져오기
@@ -922,276 +471,17 @@ export class AdsModule implements BaseModule {
   /**
    * 광고 슬라이더 렌더링 (여러 광고 또는 autoSlide 옵션)
    */
-  private async renderAdSlider(slot: AdSlot, advertisements: Advertisement[]): Promise<void> {
-    const container = document.getElementById(slot.containerId);
-    if (!container) {
-      throw new Error(`Container not found: ${slot.containerId}`);
-    }
-
-    // 이벤트 추적 콜백 함수 (중복 노출 방지 포함)
-    const trackEventCallback = async (adId: string, slotId: string, eventType: AdEventType) => {
-      // 노출 이벤트인 경우 중복 확인
-      if (eventType === AdEventType.VIEWABLE) {
-        if (ViewableEventTracker.isDuplicateViewable(adId, slotId, this._config?.debug)) {
-          if (this._config?.debug) {
-            console.log(`🚫 Duplicate viewable blocked for ad ${adId} in slot ${slotId}`);
-          }
-          return; // 중복 노출이면 추적하지 않음
-        }
-        
-        if (this._config?.debug) {
-          console.log(`✅ New viewable recorded for ad ${adId} in slot ${slotId}`);
-        }
-      }
-      
-      // 실제 API 호출로 이벤트 전송
-      if (this.advertisementEventTracker) {
-        try {
-          await this.advertisementEventTracker.trackAdvertisementEvent(
-            adId,
-            slotId,
-            eventType,
-            {} // 기본 메타데이터
-          );
-          
-          if (this._config?.debug) {
-            console.log(`📊 Advertisement event tracked: ${eventType} for ad ${adId} in slot ${slotId}`);
-          }
-        } catch (error) {
-          if (this._config?.debug) {
-            console.error(`❌ Failed to track ${eventType} event for ad ${adId}:`, error);
-          }
-        }
-      }
-      
-      // 🆕 슬라이더에서 VIEWABLE 이벤트 발생 시 해당 광고로 ViewabilityTracker 교체
-      if (eventType === AdEventType.VIEWABLE && advertisements.length > 1) {
-        const currentAd = advertisements.find(ad => ad._id === adId);
-        if (currentAd) {
-          // 기존 ViewabilityTracker 정리
-          if ((slot as any).viewabilityTracker) {
-            (slot as any).viewabilityTracker.destroy();
-            (slot as any).viewabilityTracker = null;
-          }
-          
-          // 현재 광고에 대해 새로운 ViewabilityTracker 시작
-          this.startBasicViewabilityTracking(slot, currentAd);
-          
-          if (this._config?.debug) {
-            console.log(`🔄 ViewabilityTracker switched to ad ${adId} in slider: ${slot.id}`);
-          }
-        }
-      }
-    };
-
-    let sliderElement: HTMLElement;
-
-    // 최적화된 슬라이더 옵션 준비
-    const optimizedSliderOptions = {
-      autoSlideInterval: ((slot.config as any)?.slideInterval || 5000) / 1000,
-      ...slot.config,
-      // 🆕 동적 크기 정보 전달
-      optimizedHeight: (slot as any).optimizedHeight,
-      aspectRatio: (slot as any).aspectRatio
-    };
-
-    // 텍스트 광고는 TextTransitionManager 사용, 그 외는 CarouselSliderManager 사용
-    if (slot.adType === AdType.TEXT) {
-      sliderElement = TextTransitionManager.createTextTransitionContainer(
-        slot,
-        advertisements,
-        optimizedSliderOptions,
-        trackEventCallback
-      );
-      
-      if (this._config?.debug) {
-        console.log(`✨ Text transition created for TEXT slot: ${slot.id} with ${advertisements.length} ads`);
-      }
-    } else {
-      sliderElement = CarouselSliderManager.createSliderContainer(
-        slot,
-        advertisements,
-        optimizedSliderOptions,
-        trackEventCallback
-      );
-      
-      if (this._config?.debug) {
-        console.log(`🎠 Carousel slider created for ${slot.adType} slot: ${slot.id} with ${advertisements.length} ads (optimized: ${(slot as any).optimizedHeight || 'default'})`);
-      }
-    }
-
-    // 기존 내용 제거하고 슬라이더 추가
-    container.innerHTML = '';
-    container.appendChild(sliderElement);
-    
-    // ✅ 신규: 슬라이더에서도 첫 번째 광고에 대해 ViewabilityTracker 시작
-    if (advertisements.length > 0) {
-      this.startBasicViewabilityTracking(slot, advertisements[0]);
-      
-      if (this._config?.debug) {
-        console.log(`🎯 Viewability tracking started for first ad in slider: ${slot.id}`);
-      }
-    }
-  }
+  // renderAdSlider 제거: AdRenderer.renderAdSlider 사용
 
   /**
    * 광고 렌더링 (단일 광고용)
    */
-  private async renderAd(slot: AdSlot): Promise<void> {
-    if (!slot.advertisement) {
-      throw new Error('No advertisement to render');
-    }
-
-    await this.renderAdElement(slot, slot.advertisement);
-    slot.isLoaded = true;
-  }
+  // renderAd 제거: AdRenderer.renderAd 사용
 
   /**
    * 광고 요소 렌더링 (기본 구현)
    */
-  private async renderAdElement(slot: AdSlot, ad: Advertisement): Promise<void> {
-    const container = document.getElementById(slot.containerId);
-    if (!container) return;
-
-    // 기본 HTML 구조 생성
-    const adElement = document.createElement('div');
-    adElement.className = 'adstage-ad';
-    
-    // 스마트한 크기 설정 - 최적화된 크기가 있으면 사용
-    const optimizedHeight = (slot as any).optimizedHeight;
-    const containerElement = container.parentElement || container;
-    
-    if (optimizedHeight) {
-      adElement.style.width = '100%';
-      adElement.style.height = optimizedHeight;
-    } else {
-      const { width, height } = this.calculateAdSize(containerElement, slot.adType, slot.config || {});
-      adElement.style.width = width;
-      adElement.style.height = height;
-    }
-
-    // 광고 타입별 렌더링
-    switch (slot.adType) {
-      case AdType.BANNER:
-        if (ad.imageUrl) {
-          await this.renderOptimizedBannerImage(adElement, ad, slot);
-        }
-        break;
-      
-      case AdType.TEXT:
-        const textDiv = document.createElement('div');
-        textDiv.innerHTML = `
-          <h3>${ad.title}</h3>
-          ${ad.description ? `<p>${ad.description}</p>` : ''}
-          ${ad.textContent ? `<div>${ad.textContent}</div>` : ''}
-        `;
-        adElement.appendChild(textDiv);
-        break;
-      
-      case AdType.VIDEO:
-        if (ad.videoUrl) {
-          const video = document.createElement('video');
-          video.src = ad.videoUrl;
-          video.controls = true;
-          video.style.width = '100%';
-          video.style.height = '100%';
-          adElement.appendChild(video);
-        }
-        break;
-      
-      default:
-        adElement.innerHTML = `<div>${ad.title}</div>`;
-    }
-
-    // 클릭 이벤트 추가
-    if (ad.linkUrl) {
-      adElement.style.cursor = 'pointer';
-      adElement.addEventListener('click', () => {
-        window.open(ad.linkUrl, '_blank');
-      });
-    }
-
-    container.innerHTML = '';
-    container.appendChild(adElement);
-  }
-
-  /**
-   * 최적화된 배너 이미지 렌더링
-   */
-  private async renderOptimizedBannerImage(adElement: HTMLElement, ad: Advertisement, slot: AdSlot): Promise<void> {
-    try {
-      // 사용자가 크기를 지정했는지 확인
-      const configWidth = slot.config?.width;
-      const configHeight = slot.config?.height;
-      
-      const hasUserDefinedWidth = configWidth && 
-        (typeof configWidth === 'number' || (typeof configWidth === 'string' && configWidth !== '100%'));
-      const hasUserDefinedHeight = configHeight && 
-        (typeof configHeight === 'number' || (typeof configHeight === 'string' && configHeight !== 'auto'));
-      const hasUserDefinedSize = hasUserDefinedWidth || hasUserDefinedHeight;
-      
-      // 이미지 요소 생성
-      const img = document.createElement('img');
-      img.src = ad.imageUrl!;
-      img.alt = ad.title;
-      
-      if (hasUserDefinedSize) {
-        // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
-        img.style.width = '100%';
-        img.style.height = '100%';
-        img.style.objectFit = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
-        img.style.objectPosition = 'center';
-        
-        if (this._config?.debug) {
-          console.log(`🎯 User-defined size detected: filling container completely`);
-        }
-      } else {
-        // 사용자가 크기를 지정하지 않은 경우: 동적 최적화 적용
-        const imageDimensions = await this.loadImageDimensions(ad.imageUrl!);
-        const imageAspectRatio = imageDimensions.width / imageDimensions.height;
-        const containerAspectRatio = (slot as any).aspectRatio || 16/9;
-        
-        img.style.width = '100%';
-        img.style.height = '100%';
-        
-        // 🎨 최적화된 스타일 적용
-        this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
-        
-        if (this._config?.debug) {
-          console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
-        }
-      }
-      
-      // 이미지 로드 완료 처리
-      img.onload = () => {
-        if (this._config?.debug) {
-          console.log(`✅ Banner image loaded successfully`);
-        }
-      };
-      
-      // 에러 처리
-      img.onerror = () => {
-        console.warn(`Failed to load banner image: ${ad.imageUrl}`);
-        // 폴백 텍스트 표시
-        adElement.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; background: #f0f0f0; color: #666;">${ad.title}</div>`;
-      };
-      
-      adElement.appendChild(img);
-      
-    } catch (error) {
-      console.warn('Failed to optimize banner image, using fallback:', error);
-      
-      // 기본 이미지 렌더링 (폴백)
-      const img = document.createElement('img');
-      img.src = ad.imageUrl!;
-      img.alt = ad.title;
-      img.style.width = '100%';
-      img.style.height = '100%';
-      img.style.objectFit = 'cover';
-      img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
-      adElement.appendChild(img);
-    }
-  }
+  // renderAdElement 제거: AdRenderer.renderAdElement 사용
 
   /**
    * 광고 슬롯 새로고침
@@ -1203,7 +493,7 @@ export class AdsModule implements BaseModule {
       
       if (newAdData && newAdData.length > 0) {
         slot.advertisement = newAdData[0]; // 첫 번째 광고로 업데이트
-        await this.renderAd(slot);
+  await this.adRenderer?.renderAd(slot);
         
         // 새로운 노출 추적
         if (this.advertisementEventTracker) {