@adstage/web-sdk 2.5.3 → 2.6.0

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

@@ -0,0 +1,340 @@
+/**
+ * 베이스 광고 렌더러 - 공통 기능 구현
+ */
+
+import { AdSlot, Advertisement, AdType, AdEventType } from '../../../types/advertisement';
+import { AdvertisementEventTracker } from '../../../managers/ads/advertisement-event-tracker';
+import { ViewableEventTracker } from '../../../managers/ads/viewable-event-tracker';
+import { IAdRenderer, AdRenderOptions } from '../interfaces/i-ad-renderer';
+
+export abstract class BaseAdRenderer implements IAdRenderer {
+  public readonly debug: boolean;
+  protected advertisementEventTracker: AdvertisementEventTracker | null;
+
+  constructor(
+    public readonly adType: AdType,
+    debug: boolean = false,
+    advertisementEventTracker?: AdvertisementEventTracker | null
+  ) {
+    this.debug = debug;
+    this.advertisementEventTracker = advertisementEventTracker || null;
+  }
+
+  /**
+   * Placeholder(슬롯 컨테이너) 생성 - 공통 구현
+   */
+  createPlaceholder(
+    container: HTMLElement,
+    slotId: string,
+    options: AdRenderOptions,
+    config?: any
+  ): void {
+    const adElement = document.createElement('div');
+    adElement.id = slotId;
+    adElement.className = `adstage-slot adstage-${String(this.adType).toLowerCase()}`;
+    adElement.setAttribute('data-adstage-container', 'true');
+    adElement.setAttribute('data-adstage-type', String(this.adType));
+    adElement.setAttribute('data-adstage-slot', slotId);
+
+    const { width, height } = this.calculateAdSize(container, options, config) || {
+      width: '100%',
+      height: this.getDefaultHeight()
+    };
+    
+    adElement.style.width = width;
+    adElement.style.height = height;
+    
+    // 플레이스홀더 스타일 모드 결정
+    const placeholderMode = config?.placeholderMode || options.placeholderMode || 'invisible';
+    
+    this.applyPlaceholderStyle(adElement, placeholderMode);
+
+    container.appendChild(adElement);
+
+    if (this.debug) {
+      console.log(`📦 Placeholder created for ${this.adType} slot: ${slotId} (${width} x ${height}) - Mode: ${placeholderMode}`);
+    }
+  }
+
+  /**
+   * 플레이스홀더 스타일 적용
+   */
+  private applyPlaceholderStyle(element: HTMLElement, mode: string): void {
+    switch (mode) {
+      case 'invisible':
+        // 완전히 투명한 플레이스홀더
+        element.style.backgroundColor = 'transparent';
+        element.style.border = 'none';
+        element.style.opacity = '0';
+        element.innerHTML = '';
+        break;
+        
+      case 'transparent':
+        // 투명하지만 공간은 차지
+        element.style.backgroundColor = 'transparent';
+        element.style.border = 'none';
+        element.style.display = 'block';
+        element.innerHTML = '';
+        break;
+        
+      case 'subtle':
+        // 매우 은은한 표시
+        element.style.backgroundColor = 'rgba(0, 0, 0, 0.02)';
+        element.style.border = 'none';
+        element.style.borderRadius = '4px';
+        element.style.display = 'flex';
+        element.style.alignItems = 'center';
+        element.style.justifyContent = 'center';
+        element.innerHTML = '<span style="color: rgba(0, 0, 0, 0.3); font-size: 11px; font-family: sans-serif;">•••</span>';
+        break;
+        
+      case 'minimal':
+        // 최소한의 표시 (기본값)
+        element.style.backgroundColor = 'rgba(248, 249, 250, 0.5)';
+        element.style.border = '1px solid rgba(0, 0, 0, 0.08)';
+        element.style.borderRadius = '6px';
+        element.style.display = 'flex';
+        element.style.alignItems = 'center';
+        element.style.justifyContent = 'center';
+        element.innerHTML = '<span style="color: rgba(0, 0, 0, 0.4); font-size: 12px; font-family: -apple-system, sans-serif;">•••</span>';
+        break;
+        
+      case 'debug':
+        // 개발/디버그용 명확한 표시
+        element.style.border = '2px dashed #e74c3c';
+        element.style.display = 'flex';
+        element.style.alignItems = 'center';
+        element.style.justifyContent = 'center';
+        element.style.backgroundColor = 'rgba(231, 76, 60, 0.1)';
+        element.style.color = '#e74c3c';
+        element.style.fontFamily = 'monospace';
+        element.style.fontSize = '11px';
+        element.innerHTML = `<span>Loading ${this.adType} ad...</span>`;
+        break;
+        
+      default:
+        // 기존 스타일 (legacy)
+        element.style.border = '1px dashed #ccc';
+        element.style.display = 'flex';
+        element.style.alignItems = 'center';
+        element.style.justifyContent = 'center';
+        element.style.backgroundColor = '#f9f9f9';
+        element.style.color = '#666';
+        element.innerHTML = `<span>Loading ${this.adType} ad...</span>`;
+    }
+  }
+
+  /**
+   * 광고 크기 계산 - 공통 구현
+   */
+  calculateAdSize(container: HTMLElement, options: AdRenderOptions, 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 || this.debug) {
+          console.log(`📏 Using 100% height (container: ${containerHeight}px)`);
+        }
+      } else {
+        // 컨테이너에 높이가 없으면 타입별 기본값 사용
+        height = this.getDefaultHeight();
+        if (config?.debug || this.debug) {
+          console.log(`📏 Using default height ${height} for ${this.adType}`);
+        }
+      }
+    }
+    
+    return { width, height };
+  }
+
+  /**
+   * 컨테이너의 실제 높이 계산 - 공통 구현
+   */
+  protected getContainerHeight(container: HTMLElement): number {
+    const computedStyle = window.getComputedStyle(container);
+    const height = parseFloat(computedStyle.height);
+    
+    if (!height || height === 0) {
+      const minHeight = parseFloat(computedStyle.minHeight);
+      if (minHeight > 0) return minHeight;
+      
+      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;
+  }
+
+  /**
+   * 이벤트 트래킹 콜백 생성 - 공통 구현
+   */
+  protected createEventTrackingCallback() {
+    return 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`);
+        }
+      }
+    };
+  }
+
+  /**
+   * 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-${String(this.adType).toLowerCase()}`),
+        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];
+      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(`⚠️ ${this.adType} 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 adstage-${String(this.adType).toLowerCase()}`;
+      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 ${this.adType} container: ${slot.id}`);
+      }
+    }
+  }
+
+  /**
+   * 디버그 로그 출력 - 공통 구현
+   */
+  protected log(message: string, ...args: any[]): void {
+    if (this.debug) {
+      console.log(`[${this.adType}] ${message}`, ...args);
+    }
+  }
+
+  // 추상 메서드들 - 각 렌더러에서 구현해야 함
+  abstract renderAdElement(slot: AdSlot, advertisement: Advertisement): Promise<void>;
+  abstract renderMultipleAds(slot: AdSlot, advertisements: Advertisement[]): Promise<void>;
+  abstract getDefaultHeight(): string;
+}

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

@@ -0,0 +1,256 @@
+/**
+ * 전면광고 전용 렌더러
+ */
+
+import { AdSlot, Advertisement, AdType } from '../../../types/advertisement';
+import { AdvertisementEventTracker } from '../../../managers/ads/advertisement-event-tracker';
+import { BaseAdRenderer } from './base-ad-renderer';
+
+export class InterstitialAdRenderer extends BaseAdRenderer {
+  constructor(debug: boolean = false, advertisementEventTracker?: AdvertisementEventTracker | null) {
+    super(AdType.INTERSTITIAL, debug, advertisementEventTracker);
+  }
+
+  /**
+   * 전면광고 기본 높이 (크게 설정)
+   */
+  getDefaultHeight(): string {
+    return '400px';
+  }
+
+  /**
+   * 단일 전면광고 렌더링
+   */
+  async renderAdElement(slot: AdSlot, advertisement: Advertisement): Promise<void> {
+    const container = document.getElementById(slot.containerId);
+    if (!container) return;
+
+    // 전면광고 오버레이 생성
+    const overlay = document.createElement('div');
+    overlay.className = 'adstage-interstitial-overlay';
+    overlay.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background: rgba(0, 0, 0, 0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10000;
+      animation: fadeIn 0.3s ease-out;
+    `;
+
+    // 전면광고 콘텐츠
+    const adContent = document.createElement('div');
+    adContent.className = 'adstage-interstitial-content';
+    adContent.style.cssText = `
+      position: relative;
+      max-width: 90vw;
+      max-height: 90vh;
+      background: white;
+      border-radius: 12px;
+      padding: 24px;
+      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
+      animation: slideUp 0.3s ease-out;
+      overflow: auto;
+    `;
+
+    // 닫기 버튼
+    const closeButton = document.createElement('button');
+    closeButton.innerHTML = '×';
+    closeButton.style.cssText = `
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: #f3f4f6;
+      color: #6b7280;
+      font-size: 20px;
+      font-weight: bold;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s;
+    `;
+
+    closeButton.addEventListener('click', () => {
+      this.closeInterstitial(overlay);
+    });
+
+    closeButton.addEventListener('mouseenter', () => {
+      closeButton.style.backgroundColor = '#e5e7eb';
+      closeButton.style.color = '#374151';
+    });
+
+    closeButton.addEventListener('mouseleave', () => {
+      closeButton.style.backgroundColor = '#f3f4f6';
+      closeButton.style.color = '#6b7280';
+    });
+
+    // 이미지 (있는 경우)
+    if (advertisement.imageUrl) {
+      const img = document.createElement('img');
+      img.src = advertisement.imageUrl;
+      img.alt = advertisement.title || 'Interstitial Advertisement';
+      img.style.cssText = `
+        width: 100%;
+        max-height: 300px;
+        object-fit: cover;
+        border-radius: 8px;
+        margin-bottom: 16px;
+      `;
+      adContent.appendChild(img);
+    }
+
+    // 제목
+    if (advertisement.title) {
+      const title = document.createElement('h2');
+      title.textContent = advertisement.title;
+      title.style.cssText = `
+        margin: 0 0 12px 0;
+        font-size: 24px;
+        font-weight: 700;
+        color: #111827;
+        line-height: 1.3;
+      `;
+      adContent.appendChild(title);
+    }
+
+    // 설명
+    if (advertisement.textContent) {
+      const description = document.createElement('p');
+      description.textContent = advertisement.textContent;
+      description.style.cssText = `
+        margin: 0 0 20px 0;
+        font-size: 16px;
+        color: #6b7280;
+        line-height: 1.5;
+      `;
+      adContent.appendChild(description);
+    }
+
+    // CTA 버튼 (링크가 있는 경우)
+    if (advertisement.linkUrl) {
+      const ctaButton = document.createElement('button');
+      ctaButton.textContent = 'Get Started';
+      ctaButton.style.cssText = `
+        width: 100%;
+        padding: 12px 24px;
+        background: #3b82f6;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background-color 0.2s;
+      `;
+      
+      ctaButton.addEventListener('click', () => {
+        if (this.advertisementEventTracker) {
+          console.log(`Interstitial click tracked for ad: ${advertisement._id}`);
+        }
+        window.open(advertisement.linkUrl!, '_blank');
+        this.closeInterstitial(overlay);
+      });
+      
+      ctaButton.addEventListener('mouseenter', () => {
+        ctaButton.style.backgroundColor = '#2563eb';
+      });
+      
+      ctaButton.addEventListener('mouseleave', () => {
+        ctaButton.style.backgroundColor = '#3b82f6';
+      });
+      
+      adContent.appendChild(ctaButton);
+    }
+
+    // ESC 키로 닫기
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        this.closeInterstitial(overlay);
+        document.removeEventListener('keydown', handleEscape);
+      }
+    };
+    document.addEventListener('keydown', handleEscape);
+
+    // 오버레이 클릭으로 닫기
+    overlay.addEventListener('click', (event) => {
+      if (event.target === overlay) {
+        this.closeInterstitial(overlay);
+      }
+    });
+
+    // CSS 애니메이션 추가
+    if (!document.getElementById('adstage-interstitial-styles')) {
+      const styles = document.createElement('style');
+      styles.id = 'adstage-interstitial-styles';
+      styles.textContent = `
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes slideUp {
+          from { 
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to { 
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `;
+      document.head.appendChild(styles);
+    }
+
+    adContent.appendChild(closeButton);
+    overlay.appendChild(adContent);
+    document.body.appendChild(overlay);
+
+    if (this.debug) {
+      console.log(`🖼️ Interstitial ad rendered: ${advertisement._id}`);
+    }
+  }
+
+  /**
+   * 다중 전면광고 렌더링 - 현재는 단일 렌더링만 지원
+   */
+  async renderMultipleAds(slot: AdSlot, advertisements: Advertisement[]): Promise<void> {
+    if (advertisements.length > 0) {
+      await this.renderAdElement(slot, advertisements[0]);
+      
+      if (this.debug) {
+        console.log(`🖼️ Interstitial ad rendered (first of ${advertisements.length}): ${slot.id}`);
+      }
+    } else {
+      if (this.debug) {
+        console.warn(`⚠️ No interstitial advertisements available for slot: ${slot.id}`);
+      }
+    }
+  }
+
+  /**
+   * 전면광고 닫기
+   */
+  private closeInterstitial(overlay: HTMLElement): void {
+    overlay.style.animation = 'fadeOut 0.3s ease-out forwards';
+    
+    // CSS 애니메이션이 없으면 즉시 제거
+    setTimeout(() => {
+      if (overlay.parentNode) {
+        overlay.parentNode.removeChild(overlay);
+      }
+    }, 300);
+
+    if (this.debug) {
+      console.log('🖼️ Interstitial ad closed');
+    }
+  }
+}