@adstage/web-sdk 2.1.2 → 2.1.4

package/src/modules/ads/AdsModule.ts

@@ -82,7 +82,7 @@ export class AdsModule implements BaseModule {
     
     const adstageOptions = {
       width: options?.width || '100%',
-      height: options?.height || 250,
+      height: options?.height || 'auto', // 🔧 동적 크기 조정 활용
       autoSlide: options?.autoSlide || false,
       slideInterval: options?.slideInterval || 5000,
       onClick: options?.onClick,
@@ -284,8 +284,10 @@ export class AdsModule implements BaseModule {
     adElement.setAttribute('data-adstage-type', type);
     adElement.setAttribute('data-adstage-slot', slotId);
     
-    adElement.style.width = typeof options.width === 'number' ? `${options.width}px` : (options.width || '100%');
-    adElement.style.height = typeof options.height === 'number' ? `${options.height}px` : (options.height || '250px');
+    // 스마트한 크기 설정
+    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';
@@ -297,7 +299,313 @@ export class AdsModule implements BaseModule {
     container.appendChild(adElement);
 
     if (this._config?.debug) {
-      console.log(`📦 Placeholder created for slot: ${slotId}`);
+      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;
+    });
+  }
+
+  /**
+   * 여러 광고의 최적 컨테이너 크기 계산 (동적 크기 조정)
+   */
+  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
+      };
+    }
+  }
+
+  /**
+   * 최적 크기 조정 전략 선택
+   */
+  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';
+  }
+
+  /**
+   * 전략에 따른 최적 높이 계산
+   */
+  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)}`);
     }
   }
 
@@ -314,6 +622,11 @@ export class AdsModule implements BaseModule {
         return;
       }
 
+      // 🆕 동적 크기 조정: 배너 광고의 경우 이미지 크기 기반으로 컨테이너 최적화
+      if (slot.adType === AdType.BANNER && adstageData.length > 0) {
+        await this.optimizeContainerForBannerAds(slot, adstageData);
+      }
+
       // 광고가 여러 개이거나 autoSlide 옵션이 있으면 슬라이더로 렌더링
       if (adstageData.length > 1 || (slot.config as any)?.autoSlide) {
         await this.renderAdSlider(slot, adstageData);
@@ -337,6 +650,38 @@ export class AdsModule implements BaseModule {
     }
   }
 
+  /**
+   * 배너 광고를 위한 컨테이너 최적화
+   */
+  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);
+    }
+  }
+
   /**
    * 기본 viewability 추적 시작
    */
@@ -606,15 +951,21 @@ export class AdsModule implements BaseModule {
 
     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,
-        {
-          autoSlideInterval: ((slot.config as any)?.slideInterval || 5000) / 1000,
-          ...slot.config
-        },
+        optimizedSliderOptions,
         trackEventCallback
       );
       
@@ -625,15 +976,12 @@ export class AdsModule implements BaseModule {
       sliderElement = CarouselSliderManager.createSliderContainer(
         slot,
         advertisements,
-        {
-          autoSlideInterval: ((slot.config as any)?.slideInterval || 5000) / 1000,
-          ...slot.config
-        },
+        optimizedSliderOptions,
         trackEventCallback
       );
       
       if (this._config?.debug) {
-        console.log(`🎠 Carousel slider created for ${slot.adType} slot: ${slot.id} with ${advertisements.length} ads`);
+        console.log(`🎠 Carousel slider created for ${slot.adType} slot: ${slot.id} with ${advertisements.length} ads (optimized: ${(slot as any).optimizedHeight || 'default'})`);
       }
     }
 
@@ -664,20 +1012,25 @@ export class AdsModule implements BaseModule {
     // 기본 HTML 구조 생성
     const adElement = document.createElement('div');
     adElement.className = 'adstage-ad';
-    adElement.style.width = typeof slot.width === 'string' ? slot.width : `${slot.width}px`;
-    adElement.style.height = typeof slot.height === 'string' ? slot.height : `${slot.height}px`;
+    
+    // 스마트한 크기 설정 - 최적화된 크기가 있으면 사용
+    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) {
-          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';
-          adElement.appendChild(img);
+          await this.renderOptimizedBannerImage(adElement, ad, slot);
         }
         break;
       
@@ -718,6 +1071,58 @@ export class AdsModule implements BaseModule {
     container.appendChild(adElement);
   }
 
+  /**
+   * 최적화된 배너 이미지 렌더링
+   */
+  private async renderOptimizedBannerImage(adElement: HTMLElement, ad: Advertisement, slot: AdSlot): Promise<void> {
+    try {
+      // 이미지 크기 정보 로드
+      const imageDimensions = await this.loadImageDimensions(ad.imageUrl!);
+      const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+      
+      // 컨테이너 비율 계산
+      const containerAspectRatio = (slot as any).aspectRatio || 16/9;
+      
+      // 이미지 요소 생성
+      const img = document.createElement('img');
+      img.src = ad.imageUrl!;
+      img.alt = ad.title;
+      img.style.width = '100%';
+      img.style.height = '100%';
+      
+      // 🎨 최적화된 스타일 적용
+      this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+      
+      // 이미지 로드 완료 처리
+      img.onload = () => {
+        if (this._config?.debug) {
+          console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+        }
+      };
+      
+      // 에러 처리
+      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';
+      adElement.appendChild(img);
+    }
+  }
+
   /**
    * 광고 슬롯 새로고침
    */