@adstage/web-sdk 2.5.3 → 2.6.0

package/src/modules/ads/renderers/banner-ad-renderer.ts

@@ -0,0 +1,414 @@
+/**
+import { AdSlot, Advertisement, AdType } from '../../../types/advertisement';
+import { AdvertisementEventTracker } from '../../../managers/ads/advertisement-event-tracker';
+import { CarouselSliderManager } from '../../../managers/ads/carousel-slider-manager';
+import { BaseAdRenderer } from './base-ad-renderer';
+import { AdRenderOptions } from '../interfaces/i-ad-renderer'; 광고 전용 렌더러
+ */
+
+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 { BaseAdRenderer } from './base-ad-renderer';
+import { AdRenderOptions } from '../interfaces/i-ad-renderer';
+import { AdClickHandler } from '../../../utils/ad-click-handler';
+
+export class BannerAdRenderer extends BaseAdRenderer {
+  constructor(debug: boolean = false, advertisementEventTracker?: AdvertisementEventTracker | null) {
+    super(AdType.BANNER, debug, advertisementEventTracker);
+  }
+
+  /**
+   * 배너 광고 기본 높이
+   */
+  getDefaultHeight(): string {
+    return '250px';
+  }
+
+  /**
+   * 단일 배너 광고 렌더링
+   */
+  async renderAdElement(slot: AdSlot, advertisement: Advertisement): Promise<void> {
+    const container = document.getElementById(slot.containerId);
+    if (!container) return;
+
+    const adElement = document.createElement('div');
+    adElement.className = 'adstage-ad adstage-banner-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 config = slot.config as any;
+      const options: AdRenderOptions = {
+        width: config?.width,
+        height: config?.height
+      };
+      const { width, height } = this.calculateAdSize(containerElement, options, { debug: this.debug });
+      adElement.style.width = width;
+      adElement.style.height = height;
+    }
+
+    if (advertisement.imageUrl) {
+      await this.renderOptimizedBannerImage(adElement, advertisement, slot);
+    } else {
+      adElement.innerHTML = `<div>${advertisement.title || 'Banner Ad'}</div>`;
+    }
+
+    // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+    AdClickHandler.addClickEventForRenderer(
+      adElement,
+      advertisement,
+      slot,
+      () => this.createEventTrackingCallback(),
+      this.debug,
+      'Banner'
+    );
+
+    container.innerHTML = '';
+    container.appendChild(adElement);
+  }
+
+  /**
+   * 다중 배너 광고 렌더링 (슬라이더)
+   */
+  async renderMultipleAds(slot: AdSlot, advertisements: Advertisement[]): Promise<void> {
+    const container = document.getElementById(slot.containerId);
+    if (!container) {
+      throw new Error(`Container not found: ${slot.containerId}`);
+    }
+
+    // 배너 광고를 위한 컨테이너 최적화
+    await this.optimizeContainerForBannerAds(slot, advertisements);
+
+    const trackEventCallback = this.createEventTrackingCallback();
+    
+    const optimizedSliderOptions = {
+      autoSlideInterval: ((slot.config as any)?.slideInterval || 5000) / 1000,
+      ...slot.config,
+      optimizedHeight: (slot as any).optimizedHeight,
+      aspectRatio: (slot as any).aspectRatio
+    };
+
+    const sliderElement = CarouselSliderManager.createSliderContainer(
+      slot,
+      advertisements,
+      optimizedSliderOptions,
+      trackEventCallback,
+      this.debug
+    );
+
+    if (sliderElement) {
+      container.innerHTML = '';
+      container.appendChild(sliderElement);
+      
+      if (this.debug) {
+        console.log(`🎠 Banner carousel created for slot: ${slot.id} with ${advertisements.length} ads (optimized: ${(slot as any).optimizedHeight || 'default'})`);
+      }
+    }
+  }
+
+  /**
+   * 여러 광고의 최적 컨테이너 크기 계산
+   */
+  async calculateOptimalContainerSize(
+    advertisements: Advertisement[],
+    containerWidth: number
+  ): Promise<{ width: string; height: string; aspectRatio: number }> {
+    if (!advertisements.length) {
+      return {
+        width: '100%',
+        height: this.getDefaultHeight(),
+        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.getDefaultHeight(),
+          aspectRatio: 16 / 9
+        };
+      }
+
+      const strategy = this.selectOptimalSizeStrategy(validDimensions);
+      const optimalHeight = this.calculateOptimalHeight(validDimensions, containerWidth, strategy);
+
+      if (this.debug) {
+        console.log(`📐 Optimal banner container calculated: ${containerWidth}x${optimalHeight} (strategy: ${strategy})`);
+      }
+
+      return {
+        width: '100%',
+        height: `${optimalHeight}px`,
+        aspectRatio: containerWidth / optimalHeight
+      };
+    } catch (error) {
+      console.warn('Failed to calculate optimal banner size, using defaults:', error);
+      return {
+        width: '100%',
+        height: this.getDefaultHeight(),
+        aspectRatio: 16 / 9
+      };
+    }
+  }
+
+  /**
+   * 배너 광고를 위한 컨테이너 최적화
+   */
+  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);
+
+      adElement.style.height = optimalSize.height;
+      (slot as any).optimizedHeight = optimalSize.height;
+      (slot as any).aspectRatio = optimalSize.aspectRatio;
+
+      if (this.debug) {
+        console.log(`🔧 Banner container optimized for ${advertisements.length} ads: ${optimalSize.height}`);
+      }
+    } catch (error) {
+      console.warn('Banner container optimization failed, using default size:', error);
+    }
+  }
+
+  /**
+   * 최적 크기 조정 전략 선택
+   */
+  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);
+      }
+    }
+  }
+
+  /**
+   * 이미지 로드 및 실제 크기 획득
+   */
+  private 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) {
+      img.style.objectFit = 'cover';
+      img.style.objectPosition = 'center';
+    } else if (ratio > 1.3) {
+      img.style.objectFit = 'contain';
+      img.style.objectPosition = 'center';
+      img.style.backgroundColor = '#f0f0f0';
+    } else if (ratio < 0.7) {
+      img.style.objectFit = 'cover';
+      img.style.objectPosition = 'center';
+    } else {
+      img.style.objectFit = 'cover';
+      img.style.objectPosition = 'center';
+    }
+
+    if (this.debug) {
+      console.log(`🎨 Banner image style applied: objectFit=${img.style.objectFit}, ratio=${ratio.toFixed(2)}`);
+    }
+  }
+
+  /**
+   * 배너 이미지 최적화 렌더링 - public으로 변경
+   */
+  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 || 'Banner Advertisement';
+    
+    container.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999;">Loading...</div>';
+    
+    try {
+      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(`📸 Banner image dimensions: ${imageDimensions.width}x${imageDimensions.height}`);
+        console.log(`📦 Banner 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);
+      
+      // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+      AdClickHandler.addClickEventForRenderer(
+        img,
+        advertisement,
+        slot,
+        () => this.createEventTrackingCallback(),
+        this.debug,
+        'Banner'
+      );
+      
+      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);
+        
+        // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+        AdClickHandler.addClickEventForRenderer(
+          img,
+          advertisement,
+          slot,
+          () => this.createEventTrackingCallback(),
+          this.debug,
+          'Banner'
+        );
+      }
+      
+      return img;
+    }
+  }
+}