@adstage/web-sdk 2.1.0 → 2.1.3

package/src/modules/ads/AdsModule.ts

@@ -279,8 +279,15 @@ export class AdsModule implements BaseModule {
     const adElement = document.createElement('div');
     adElement.id = slotId;
     adElement.className = `adstage-slot adstage-${type.toLowerCase()}`;
-    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');
+    // 확실한 컨테이너 식별을 위한 데이터 속성 추가
+    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';
@@ -292,7 +299,312 @@ 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%') {
+      height = explicitHeight;
+    } else {
+      // 100%이거나 높이가 지정되지 않은 경우 스마트 계산
+      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} (no container height)`);
+        }
+      }
+    }
+    
+    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)}`);
     }
   }
 
@@ -309,6 +621,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);
@@ -332,6 +649,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 추적 시작
    */
@@ -401,24 +750,122 @@ export class AdsModule implements BaseModule {
   }
 
   /**
-   * Fallback 광고 렌더링 - DOM에서 완전 제거
+   * Fallback 광고 렌더링 - AdStage 확실한 컨테이너 우선 탐지
    */
   private renderFallback(slot: AdSlot): void {
     const element = document.getElementById(slot.id);
     if (element) {
-      // 부모 컨테이너에서 광고 슬롯을 완전히 제거
-      const parentContainer = element.parentNode;
-      if (parentContainer) {
-        parentContainer.removeChild(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 slot completely removed from DOM: ${slot.id}`);
+          console.warn(`⚠️ Ad container collapsed (${containerType}): ${slot.id}`, targetContainer);
         }
+      } else {
+        // 컨테이너를 찾지 못한 경우 새로운 빈 컨테이너 생성
+        this.createEmptyContainer(slot);
       }
     }
     
-    // 슬롯 맵에서도 제거
-    this.slots.delete(slot.id);
+    // 슬롯 상태 업데이트 (제거하지 않고 빈 상태로 마킹)
+    slot.advertisement = undefined;
+    (slot as any).isEmpty = true;
+  }
+
+  /**
+   * 빈 컨테이너 생성 (컨테이너를 찾지 못한 경우)
+   */
+  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}`);
+      }
+    }
   }
 
   /**
@@ -503,15 +950,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
       );
       
@@ -522,15 +975,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'})`);
       }
     }
 
@@ -561,20 +1011,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;
       
@@ -615,6 +1070,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);
+    }
+  }
+
   /**
    * 광고 슬롯 새로고침
    */