@adstage/web-sdk 2.5.3 → 2.6.1

package/src/modules/ads/AdRenderer.ts

@@ -1,735 +0,0 @@
-/**
- * AdRenderer - 광고 렌더링 전용 클래스
- * AdsModule에서 렌더링 관련 기능을 분리
- */
-
-import { AdSlot, Advertisement, AdType, AdEventType } from '../../types/advertisement';
-import { AdvertisementEventTracker } from '../../managers/ads/advertisement-event-tracker';
-import { CarouselSliderManager } from '../../managers/ads/carousel-slider-manager';
-import { TextTransitionManager } from '../../managers/ads/text-transition-manager';
-import { ViewableEventTracker } from '../../managers/ads/viewable-event-tracker';
-
-export class AdRenderer {
-  private debug: boolean;
-  private advertisementEventTracker: AdvertisementEventTracker | null;
-
-  constructor(debug: boolean = false, advertisementEventTracker?: AdvertisementEventTracker | null) {
-    this.debug = debug;
-    this.advertisementEventTracker = advertisementEventTracker || null;
-  }
-
-  /**
-   * Placeholder(슬롯 컨테이너) 생성
-   */
-  createPlaceholder(
-    container: HTMLElement,
-    slotId: string,
-    type: AdType,
-    options: any,
-    _config?: any
-  ): void {
-    const adElement = document.createElement('div');
-    adElement.id = slotId;
-    adElement.className = `adstage-slot adstage-${String(type).toLowerCase()}`;
-    adElement.setAttribute('data-adstage-container', 'true');
-    adElement.setAttribute('data-adstage-type', String(type));
-    adElement.setAttribute('data-adstage-slot', slotId);
-
-    const { width, height } = this.calculateAdSize(container, type, options, _config) || {
-      width: '100%',
-      height: '250px'
-    };
-    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.debug) {
-      console.log(`📦 Placeholder created for slot: ${slotId} (${width} x ${height})`);
-    }
-  }
-
-  /**
-   * 여러 광고의 최적 컨테이너 크기 계산 (동적 크기 조정)
-   */
-  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) || '250px',
-        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) || '250px',
-          aspectRatio: 16 / 9
-        };
-      }
-
-      const strategy = this.selectOptimalSizeStrategy(validDimensions);
-      const optimalHeight = this.calculateOptimalHeight(validDimensions, containerWidth, strategy);
-
-      if (this.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) || '250px',
-        aspectRatio: 16 / 9
-      };
-    }
-  }
-
-  /**
-   * 최적 크기 조정 전략 선택
-   */
-  private selectOptimalSizeStrategy(
-    dimensions: { width: number; height: number }[]
-  ): 'average' | 'common' | 'dominant' {
-    const aspectRatios = dimensions.map(d => d.width / d.height);
-
-    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;
-
-    if (maxGroup / totalImages >= 0.7) {
-      return 'dominant';
-    }
-
-    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';
-  }
-
-  /**
-   * 전략에 따른 최적 높이 계산
-   */
-  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.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);
-      }
-    }
-  }
-
-  /**
-   * 배너 광고를 위한 컨테이너 최적화
-   */
-  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.debug) {
-        console.log(`🔧 Container optimized for ${advertisements.length} banner ads: ${optimalSize.height}`);
-      }
-    } catch (error) {
-      console.warn('Container optimization failed, using default size:', error);
-    }
-  }
-
-  /**
-   * 광고 슬라이더 렌더링 (여러 광고 또는 autoSlide 옵션)
-   */
-  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.debug)) {
-          if (this.debug) {
-            console.log(`🚫 Duplicate viewable blocked for ad ${adId} in slot ${slotId}`);
-          }
-          return;
-        }
-        if (this.debug) {
-          console.log(`✅ New viewable recorded for ad ${adId} in slot ${slotId}`);
-        }
-      }
-
-      if (this.advertisementEventTracker) {
-        try {
-          if (this.debug) {
-            console.log(`🔄 Starting advertisement event tracking: ${eventType} for ad ${adId} in slot ${slotId}`);
-          }
-          await this.advertisementEventTracker.trackAdvertisementEvent(adId, slotId, eventType);
-          if (this.debug) {
-            console.log(`📊 Advertisement event tracked: ${eventType} for ad ${adId} in slot ${slotId}`);
-          }
-        } catch (error) {
-          if (this.debug) {
-            console.error(`❌ Failed to track ${eventType} event for ad ${adId}:`, error);
-          }
-        }
-      } else {
-        if (this.debug) {
-          console.warn(`⚠️ AdvertisementEventTracker not available for ${eventType} event`);
-        }
-      }
-    };
-
-    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
-    };
-
-    if (slot.adType === AdType.TEXT) {
-      sliderElement = TextTransitionManager.createTextTransitionContainer(
-        slot,
-        advertisements,
-        optimizedSliderOptions,
-        trackEventCallback
-      );
-      if (this.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.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);
-    if (this.debug) {
-      console.log(`� Slider uses manual VIEWABLE event tracking for ${advertisements.length} ads`);
-    }
-  }
-
-  /**
-   * 광고 렌더링 (단일 광고용)
-   */
-  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;
-  }
-
-  /**
-   * 광고 요소 렌더링 (기본 구현)
-   */
-  async renderAdElement(slot: AdSlot, ad: Advertisement): Promise<void> {
-    const container = document.getElementById(slot.containerId);
-    if (!container) return;
-
-    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 = String(optimizedHeight);
-    } else {
-      const { width, height } =
-        this.calculateAdSize(containerElement, slot.adType, slot.config || {}, { debug: this.debug }) ||
-        { width: '100%', height: '250px' };
-      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 = `
-          ${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);
-  }
-
-  /**
-   * Fallback 광고 렌더링 - 컨테이너 접기/생성
-   */
-  renderFallback(slot: AdSlot): void {
-    const element = document.getElementById(slot.id);
-    if (element) {
-      const adstageContainers = [
-        element.querySelector('[data-adstage-container="true"]'),
-        element.closest('[data-adstage-container="true"]'),
-        element
-      ].filter(el => el && (el as HTMLElement).hasAttribute('data-adstage-container')) as HTMLElement[];
-
-      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) as HTMLElement[];
-
-      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) as HTMLElement[];
-
-      const possibleContainers = [...adstageContainers, ...classBasedContainers, ...generalContainers];
-      const targetContainer = possibleContainers[0];
-
-      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.debug) {
-          console.warn(`⚠️ Ad container collapsed (${containerType}): ${slot.id}`, targetContainer);
-        }
-      } else {
-        this.createEmptyContainer(slot);
-      }
-    }
-    slot.advertisement = undefined;
-    (slot as any).isEmpty = true;
-  }
-
-  /**
-   * 빈 컨테이너 생성 (컨테이너를 찾지 못한 경우)
-   */
-  private createEmptyContainer(slot: AdSlot): void {
-    const originalContainer = document.getElementById(slot.containerId);
-    if (originalContainer) {
-      originalContainer.innerHTML = '';
-      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.debug) {
-        console.warn(`⚠️ Created empty AdStage container: ${slot.id}`);
-      }
-    }
-  }
-
-  /**
-   * 광고 타입별 기본 높이 반환
-   */
-  getDefaultHeightForAdType(type: AdType): string {
-    switch (type) {
-      case AdType.BANNER:
-        return '250px'; // 일반 배너
-      case AdType.TEXT:
-        return '60px'; // 텍스트는 좀 더 작게
-      case AdType.VIDEO:
-        return '360px'; // 비디오는 16:9 비율 고려
-      case AdType.NATIVE:
-        return '200px'; // 네이티브는 중간 크기
-      case AdType.INTERSTITIAL:
-        return '400px'; // 전면광고는 크게
-      default:
-        return '250px';
-    }
-  }
-
-  /**
-   * 컨테이너와 광고 타입에 따른 스마트한 크기 계산
-   */
-  calculateAdSize(container: HTMLElement, type: AdType, options: any, config: 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 (config?.debug) {
-          console.log(`📏 Using 100% height (container: ${containerHeight}px)`);
-        }
-      } else {
-        // 컨테이너에 높이가 없으면 타입별 기본값 사용 (나중에 동적 조정됨)
-        height = this.getDefaultHeightForAdType(type);
-        if (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;
-  }
-
-  /**
-   * 이미지 로드 및 실제 크기 획득 (Promise 기반)
-   */
-  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;
-    });
-  }
-
-  /**
-   * 이미지와 컨테이너 비율을 고려한 최적화 스타일 적용
-   */
-  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.debug) {
-      console.log(`🎨 Image style applied: objectFit=${img.style.objectFit}, ratio=${ratio.toFixed(2)}`);
-    }
-  }
-
-  /**
-   * 배너 이미지 최적화 렌더링
-   * 이미지 실제 크기를 로드한 후 컨테이너와 비율을 맞춤
-   */
-  async renderOptimizedBannerImage(
-    container: HTMLElement,
-    advertisement: Advertisement,
-    slot: AdSlot
-  ): Promise<HTMLImageElement> {
-    const img = document.createElement('img');
-    
-    // 기본 스타일 설정
-    img.style.width = '100%';
-    img.style.height = '100%';
-    img.style.display = 'block';
-    img.style.borderRadius = '8px';
-    img.alt = advertisement.title || 'Advertisement';
-    
-    // 이미지 로딩 상태 표시
-    container.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999;">Loading...</div>';
-    
-    try {
-      // 이미지 URL 체크
-      if (!advertisement.imageUrl) {
-        throw new Error('Image URL is not provided');
-      }
-
-      // 🆕 이미지 실제 크기 로드
-      const imageDimensions = await this.loadImageDimensions(advertisement.imageUrl);
-      
-      // 컨테이너 크기 정보
-      const containerRect = container.getBoundingClientRect();
-      const containerWidth = containerRect.width;
-      const containerHeight = containerRect.height;
-      
-      if (this.debug) {
-        console.log(`📸 Image dimensions: ${imageDimensions.width}x${imageDimensions.height}`);
-        console.log(`📦 Container dimensions: ${containerWidth}x${containerHeight}`);
-      }
-      
-      // 비율 계산
-      const imageAspectRatio = imageDimensions.width / imageDimensions.height;
-      const containerAspectRatio = containerWidth / containerHeight;
-      
-      // 🆕 스마트 스타일 적용
-      this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
-      
-      // 이미지 설정 및 추가
-      img.src = advertisement.imageUrl;
-      
-      // 컨테이너 클리어 후 이미지 추가
-      container.innerHTML = '';
-      container.appendChild(img);
-      
-      // 클릭 이벤트 등록
-      if (advertisement.linkUrl) {
-        img.style.cursor = 'pointer';
-        img.addEventListener('click', () => {
-          if (this.advertisementEventTracker) {
-            // AdvertisementEventTracker의 실제 메소드명을 확인해야 함
-            console.log(`Click tracked for ad: ${advertisement._id}`);
-          }
-          window.open(advertisement.linkUrl, '_blank');
-        });
-      }
-      
-      if (this.debug) {
-        console.log(`✅ Optimized banner image rendered for ad: ${advertisement._id}`);
-      }
-      
-      return img;
-      
-    } catch (error) {
-      console.error('❌ Failed to load optimized banner image:', error);
-      
-      // 폴백: 일반 이미지 렌더링
-      if (advertisement.imageUrl) {
-        img.src = advertisement.imageUrl;
-        img.style.objectFit = 'cover';
-        img.style.objectPosition = 'center';
-        
-        container.innerHTML = '';
-        container.appendChild(img);
-        
-        if (advertisement.linkUrl) {
-          img.style.cursor = 'pointer';
-          img.addEventListener('click', () => {
-            if (this.advertisementEventTracker) {
-              console.log(`Click tracked for ad: ${advertisement._id}`);
-            }
-            window.open(advertisement.linkUrl, '_blank');
-          });
-        }
-      }
-      
-      return img;
-    }
-  }
-
-  /**
-   * 디버그 로그 출력
-   */
-  private log(message: string, ...args: any[]): void {
-    if (this.debug) {
-      console.log(message, ...args);
-    }
-  }
-}