@adstage/web-sdk 2.5.2 → 2.6.0

package/src/renderers/banner-renderer.ts

@@ -1,35 +0,0 @@
-import type { Advertisement, AdSlot } from '../types/advertisement';
-import { BaseAdRenderer } from './base-renderer';
-import { DOMUtils } from '../utils/dom-utils';
-
-/**
- * 배너 광고 렌더러 - 이미지만 표시
- */
-export class BannerAdRenderer extends BaseAdRenderer {
-  render(ad: Advertisement, slot: AdSlot): HTMLElement {
-    const adElement = DOMUtils.safeCreateElement('div');
-    if (!adElement) {
-      // SSR 환경에서는 기본 div 반환
-      return document.createElement('div');
-    }
-    
-    // 기본 컨테이너 스타일 적용 (불필요한 스타일 제거)
-    this.applyStyles(adElement, this.getBaseContainerStyles(slot));
-
-    // 배너 광고는 이미지만 표시
-    if (!ad.imageUrl) {
-      // 이미지가 없는 경우 플레이스홀더 반환
-      const placeholder = this.createPlaceholder(slot, '배너 광고');
-      return placeholder || adElement;
-    }
-
-    const img = this.createImageElement(ad.imageUrl, '', slot);
-    if (img) {
-      DOMUtils.safeAppendChild(adElement, img);
-      // 클릭 이벤트 추가
-      this.addClickHandler(adElement, ad, slot);
-    }
-
-    return adElement;
-  }
-}

package/src/renderers/base-renderer.ts

@@ -1,209 +0,0 @@
-import type { Advertisement, AdSlot, AdEventType } from '../types/advertisement';
-import { DOMUtils } from '../utils/dom-utils';
-
-/**
- * 광고 렌더러 인터페이스
- */
-export interface AdRenderer {
-  render(ad: Advertisement, slot: AdSlot): HTMLElement;
-}
-
-/**
- * 이벤트 추적 콜백 타입
- */
-export type EventTracker = (adId: string, slotId: string, eventType: AdEventType) => void;
-
-/**
- * 기본 광고 렌더러 추상 클래스
- */
-export abstract class BaseAdRenderer implements AdRenderer {
-  protected trackEvent?: EventTracker;
-
-  constructor(trackEvent?: EventTracker) {
-    this.trackEvent = trackEvent;
-  }
-
-  /**
-   * 광고 렌더링 (각 구현체에서 오버라이드)
-   */
-  abstract render(ad: Advertisement, slot: AdSlot): HTMLElement;
-
-  /**
-   * 공통 클릭 이벤트 핸들러 (SSR 안전)
-   */
-  protected addClickHandler(element: HTMLElement, ad: Advertisement, slot: AdSlot): void {
-    DOMUtils.safeAddEventListener(element, 'click', () => {
-      this.trackEvent?.(ad._id, slot.id, 'CLICK' as AdEventType);
-      if (ad.linkUrl) {
-        DOMUtils.safeWindowOpen(ad.linkUrl, '_blank');
-      }
-    });
-  }
-
-  /**
-   * 공통 스타일 적용 유틸리티 (SSR 안전)
-   */
-  protected applyStyles(element: HTMLElement, styles: Record<string, string>): void {
-    DOMUtils.safeApplyStyles(element, styles);
-  }
-
-  /**
-   * 크기 값 파싱 유틸리티 (px, %, number 지원)
-   */
-  protected parseSizeValue(value: number | string | undefined): string | undefined {
-    if (!value) return undefined;
-    
-    if (typeof value === 'number') {
-      return value > 0 ? `${value}px` : undefined;
-    }
-    
-    if (typeof value === 'string') {
-      const trimmed = value.trim();
-      if (!trimmed) return undefined;
-      
-      // 퍼센트 값 처리
-      if (trimmed.endsWith('%')) {
-        const percent = parseFloat(trimmed);
-        return !isNaN(percent) && percent > 0 ? trimmed : undefined;
-      }
-      
-      // px 값 처리 (px 단위 포함/미포함 모두 지원)
-      const numValue = trimmed.endsWith('px') 
-        ? parseFloat(trimmed.slice(0, -2))
-        : parseFloat(trimmed);
-        
-      return !isNaN(numValue) && numValue > 0 ? `${numValue}px` : undefined;
-    }
-    
-    return undefined;
-  }
-
-  /**
-   * 기본 컨테이너 스타일 (사용자 지정 크기만 적용)
-   */
-  protected getBaseContainerStyles(slot: AdSlot): Record<string, string> {
-    const styles: Record<string, string> = {
-      cursor: 'pointer',
-      position: 'relative',
-      overflow: 'hidden',
-    };
-    
-    // 사용자가 지정한 크기가 있을 때만 적용
-    const parsedWidth = this.parseSizeValue(slot.width);
-    const parsedHeight = this.parseSizeValue(slot.height);
-    
-    if (parsedWidth) {
-      styles.width = parsedWidth;
-    }
-    if (parsedHeight) {
-      styles.height = parsedHeight;
-    }
-    
-    return styles;
-  }
-
-  /**
-   * 이미지 스타일 (고유 사이즈 유지, 사용자 지정 크기 우선)
-   */
-  protected getImageStyles(slot?: AdSlot): Record<string, string> {
-    const styles: Record<string, string> = {
-      display: 'block',
-      'max-width': '100%',
-      height: 'auto',
-      'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
-    };
-    
-    // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
-    const parsedWidth = this.parseSizeValue(slot?.width);
-    const parsedHeight = this.parseSizeValue(slot?.height);
-    
-    if (parsedWidth && parsedHeight) {
-      styles.width = '100%';
-      styles.height = '100%';
-      styles['object-fit'] = 'cover';
-      styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
-    }
-    
-    return styles;
-  }
-
-  /**
-   * 기본 폰트 스타일
-   */
-  protected getBaseFontStyles(): Record<string, string> {
-    return {
-      'font-family': 'Arial, sans-serif',
-      'line-height': '1.4',
-      'word-break': 'keep-all',
-    };
-  }
-
-  /**
-   * 이미지 요소 생성 (SSR 안전)
-   */
-  protected createImageElement(imageUrl: string, alt: string = '', slot?: AdSlot): HTMLImageElement | null {
-    const img = DOMUtils.safeCreateElement('img') as HTMLImageElement;
-    if (!img) return null;
-    
-    img.src = imageUrl;
-    img.alt = alt;
-    this.applyStyles(img, this.getImageStyles(slot));
-    return img;
-  }
-
-  /**
-   * 텍스트 요소 생성 (SSR 안전)
-   */
-  protected createTextElement(
-    text: string,
-    tag: keyof HTMLElementTagNameMap = 'div',
-    additionalStyles: Record<string, string> = {}
-  ): HTMLElement | null {
-    const element = DOMUtils.safeCreateElement(tag);
-    if (!element) return null;
-    
-    DOMUtils.safeSetTextContent(element, text);
-    this.applyStyles(element, {
-      ...this.getBaseFontStyles(),
-      ...additionalStyles,
-    });
-    return element;
-  }
-
-  /**
-   * 플레이스홀더 요소 생성
-   */
-  protected createPlaceholder(slot: AdSlot, text: string = '광고'): HTMLElement {
-    let placeholder = DOMUtils.safeCreateElement('div');
-    
-    // SSR 환경에서 DOM을 사용할 수 없는 경우, 런타임에 생성되도록 함
-    if (!placeholder) {
-      // SSR에서는 빈 div를 반환하되, 브라우저에서는 제대로 작동하도록 함
-      if (typeof document !== 'undefined') {
-        placeholder = document.createElement('div');
-      } else {
-        // SSR 환경에서는 더미 객체 반환 (타입 단언 사용)
-        placeholder = {} as HTMLElement;
-      }
-    }
-    
-    // DOM이 사용 가능한 경우에만 스타일 적용
-    if (DOMUtils.canUseDOM() && placeholder) {
-      this.applyStyles(placeholder, {
-        ...this.getBaseContainerStyles(slot),
-        background: '#f8f9fa',
-        display: 'flex',
-        'align-items': 'center',
-        'justify-content': 'center',
-        color: '#6c757d',
-        ...this.getBaseFontStyles(),
-        // 플레이스홀더는 최소 크기 보장
-        'min-width': '100px',
-        'min-height': '100px',
-      });
-      DOMUtils.safeSetTextContent(placeholder, text);
-    }
-    
-    return placeholder;
-  }
-}

package/src/renderers/index.ts

@@ -1,71 +0,0 @@
-import { AdType } from '../types/advertisement';
-import type { Advertisement, AdSlot } from '../types/advertisement';
-import type { AdRenderer, EventTracker } from './base-renderer';
-import { BannerAdRenderer } from './banner-renderer';
-import { TextAdRenderer } from './text-renderer';
-import { NativeAdRenderer } from './native-renderer';
-import { VideoAdRenderer } from './video-renderer';
-import { InterstitialAdRenderer } from './interstitial-renderer';
-
-/**
- * 광고 렌더러 팩토리
- * - 광고 타입에 따라 적절한 렌더러 인스턴스를 반환
- */
-export class AdRendererFactory {
-  private static renderers = new Map<AdType, new (trackEvent?: EventTracker) => AdRenderer>();
-
-  static {
-    // 렌더러 등록
-    this.renderers.set(AdType.BANNER, BannerAdRenderer);
-    this.renderers.set(AdType.TEXT, TextAdRenderer);
-    this.renderers.set(AdType.NATIVE, NativeAdRenderer);
-    this.renderers.set(AdType.VIDEO, VideoAdRenderer);
-    this.renderers.set(AdType.INTERSTITIAL, InterstitialAdRenderer);
-    this.renderers.set(AdType.POPUP, InterstitialAdRenderer); // POPUP은 INTERSTITIAL과 동일
-  }
-
-  /**
-   * 광고 타입에 맞는 렌더러 생성
-   */
-  static createRenderer(adType: AdType, trackEvent?: EventTracker): AdRenderer {
-    const RendererClass = this.renderers.get(adType);
-    
-    if (!RendererClass) {
-      console.warn(`No renderer found for ad type: ${adType}, falling back to Banner renderer`);
-      return new BannerAdRenderer(trackEvent);
-    }
-
-    return new RendererClass(trackEvent);
-  }
-
-  /**
-   * 광고 렌더링 (편의 메서드)
-   */
-  static render(ad: Advertisement, slot: AdSlot, trackEvent?: EventTracker): HTMLElement {
-    const renderer = this.createRenderer(slot.adType, trackEvent);
-    return renderer.render(ad, slot);
-  }
-
-  /**
-   * 사용 가능한 렌더러 타입 목록
-   */
-  static getSupportedAdTypes(): AdType[] {
-    return Array.from(this.renderers.keys());
-  }
-
-  /**
-   * 커스텀 렌더러 등록
-   */
-  static registerRenderer(adType: AdType, RendererClass: new (trackEvent?: EventTracker) => AdRenderer): void {
-    this.renderers.set(adType, RendererClass);
-  }
-}
-
-// 개별 렌더러들 export
-export { BannerAdRenderer } from './banner-renderer';
-export { TextAdRenderer } from './text-renderer';
-export { NativeAdRenderer } from './native-renderer';
-export { VideoAdRenderer } from './video-renderer';
-export { InterstitialAdRenderer } from './interstitial-renderer';
-export { BaseAdRenderer } from './base-renderer';
-export type { AdRenderer, EventTracker } from './base-renderer';

package/src/renderers/interstitial-renderer.ts

@@ -1,70 +0,0 @@
-import type { Advertisement, AdSlot, AdEventType } from '../types/advertisement';
-import { DOMUtils } from '../utils/dom-utils';
-import { BaseAdRenderer } from './base-renderer';
-
-/**
- * 전면/팝업 광고 렌더러 - 핵심 콘텐츠만 표시
- */
-export class InterstitialAdRenderer extends BaseAdRenderer {
-  render(ad: Advertisement, slot: AdSlot): HTMLElement {
-    let adElement = DOMUtils.safeCreateElement('div');
-    
-    if (!adElement) {
-      return this.createPlaceholder(slot, '전면 광고');
-    }
-    
-    // 컨테이너 스타일 적용 (불필요한 스타일 제거)
-    this.applyStyles(adElement, {
-      ...this.getBaseContainerStyles(slot),
-      display: 'flex',
-      'flex-direction': 'column',
-    });
-
-    // 우선순위: 1. 이미지, 2. 비디오, 3. 텍스트
-    if (ad.imageUrl) {
-      const img = this.createImageElement(ad.imageUrl, '', slot);
-      if (img) {
-        adElement.appendChild(img);
-      }
-    } else if (ad.videoUrl) {
-      // 이미지가 없고 비디오가 있는 경우
-      const video = this.createVideoElement(ad.videoUrl, ad, slot);
-      if (video) {
-        adElement.appendChild(video);
-      }
-    } else {
-      // 모든 콘텐츠가 없는 경우
-      return this.createPlaceholder(slot, '전면 광고');
-    }
-
-    // 클릭 이벤트 추가
-    this.addClickHandler(adElement, ad, slot);
-
-    return adElement;
-  }
-
-  /**
-   * 비디오 요소 생성
-   */
-  private createVideoElement(videoUrl: string, ad: Advertisement, slot: AdSlot): HTMLVideoElement | null {
-    const video = DOMUtils.safeCreateElement('video') as HTMLVideoElement;
-    if (!video) return null;
-    
-    video.src = videoUrl;
-    video.controls = true;
-    
-    // 비디오도 이미지와 같은 스타일 적용
-    this.applyStyles(video, this.getImageStyles(slot));
-    
-    // 비디오 이벤트 추적
-    video.addEventListener('play', () => {
-      this.trackEvent?.(ad._id, slot.id, 'VIDEO_START' as AdEventType);
-    });
-    
-    video.addEventListener('ended', () => {
-      this.trackEvent?.(ad._id, slot.id, 'VIDEO_COMPLETE' as AdEventType);
-    });
-    
-    return video;
-  }
-}

package/src/renderers/native-renderer.ts

@@ -1,35 +0,0 @@
-import type { Advertisement, AdSlot } from '../types/advertisement';
-import { DOMUtils } from '../utils/dom-utils';
-import { BaseAdRenderer } from './base-renderer';
-
-/**
- * 네이티브 광고 렌더러 - 이미지 + textContent 표시
- */
-export class NativeAdRenderer extends BaseAdRenderer {
-  render(ad: Advertisement, slot: AdSlot): HTMLElement {
-    const adElement = DOMUtils.safeCreateElement('div');
-    if (!adElement) {
-      return document.createElement('div');
-    }
-    
-    // 컨테이너 스타일 적용 (불필요한 스타일 제거)
-    this.applyStyles(adElement, this.getBaseContainerStyles(slot));
-
-    // 네이티브 광고는 이미지만 표시
-    if (!ad.imageUrl) {
-      // 이미지가 없는 경우 플레이스홀더 반환
-      const placeholder = this.createPlaceholder(slot, '네이티브 광고');
-      return placeholder || adElement;
-    }
-
-    // 이미지 생성 (고유 사이즈 또는 사용자 지정 크기)
-    const img = this.createImageElement(ad.imageUrl, '', slot);
-    if (img) {
-      DOMUtils.safeAppendChild(adElement, img);
-      // 클릭 이벤트 추가
-      this.addClickHandler(adElement, ad, slot);
-    }
-
-    return adElement;
-  }
-}

package/src/renderers/text-renderer.ts

@@ -1,94 +0,0 @@
-import type { Advertisement, AdSlot } from '../types/advertisement';
-import { BaseAdRenderer } from './base-renderer';
-import { DOMUtils } from '../utils/dom-utils';
-
-/**
- * 텍스트 광고 렌더러 - textContent만 표시
- */
-export class TextAdRenderer extends BaseAdRenderer {
-  render(ad: Advertisement, slot: AdSlot): HTMLElement {
-    let adElement = DOMUtils.safeCreateElement('div');
-    
-    if (!adElement) {
-      return this.createPlaceholder(slot, '텍스트 광고');
-    }
-    
-    // 기본 컨테이너 스타일
-    const containerStyles: Record<string, string> = {
-      ...this.getBaseContainerStyles(slot),
-      padding: '4px',
-      background: 'transparent',
-      display: 'flex',
-      'align-items': 'center',
-      'justify-content': 'center',
-      // text-align은 사용자가 설정할 수 있도록 기본값에서 제외
-      ...this.getBaseFontStyles(),
-    };
-    
-    // 사용자가 크기를 지정하지 않은 경우 컨텐츠에 맞춤
-    if (!slot.width || slot.width === 0) {
-      containerStyles.display = 'inline-flex';
-      containerStyles['white-space'] = 'nowrap';
-      containerStyles['justify-content'] = 'flex-start'; // 좌측 정렬로 변경
-    }
-    
-    // height만 자동인 경우 줄바꿈 허용
-    if ((slot.width && slot.width !== 0) && (!slot.height || slot.height === 0)) {
-      containerStyles['white-space'] = 'normal';
-      containerStyles['min-height'] = 'auto';
-      containerStyles['justify-content'] = 'flex-start'; // 좌측 정렬로 변경
-    }
-    
-    this.applyStyles(adElement, containerStyles);
-
-    // 텍스트 광고는 textContent만 표시
-    if (!ad.textContent) {
-      // 텍스트가 없는 경우 플레이스홀더 반환
-      return this.createPlaceholder(slot, '텍스트 광고');
-    }
-
-    // 텍스트 콘텐츠 생성
-    const textContent = this.createTextElement(
-      ad.textContent,
-      'div',
-      {
-        'font-size': '14px',
-        'font-weight': '500',
-        color: '#212529',
-        width: '100%', // 전체 너비 사용하여 텍스트 정렬이 적용되도록 함
-      }
-    );
-
-    if (textContent) {
-      adElement.appendChild(textContent);
-    }
-
-    // 사용자가 text-align을 지정했는지 확인하고 레이아웃 조정
-    setTimeout(() => {
-      if (!adElement || typeof window === 'undefined') return;
-      
-      const computedStyle = window.getComputedStyle(adElement);
-      const textAlign = computedStyle.textAlign;
-      
-      // 사용자가 text-align을 설정했고, width가 없는 경우
-      if (textAlign && textAlign !== 'start' && textAlign !== 'left' && (!slot.width || slot.width === 0)) {
-        // 블록 레벨로 변경하여 text-align이 제대로 작동하도록 함
-        adElement.style.display = 'block';
-        adElement.style.whiteSpace = 'normal';
-        
-        // 최소 너비 설정 (텍스트가 한 줄일 때를 위해)
-        if (textContent) {
-          const textRect = textContent.getBoundingClientRect();
-          if (textRect.width > 0) {
-            adElement.style.minWidth = `${textRect.width}px`;
-          }
-        }
-      }
-    }, 0);
-
-    // 클릭 이벤트 추가
-    this.addClickHandler(adElement, ad, slot);
-
-    return adElement;
-  }
-}

package/src/renderers/video-renderer.ts

@@ -1,63 +0,0 @@
-import type { Advertisement, AdSlot, AdEventType } from '../types/advertisement';
-import { DOMUtils } from '../utils/dom-utils';
-import { BaseAdRenderer } from './base-renderer';
-
-/**
- * 비디오 광고 렌더러 - 비디오 또는 이미지 표시
- */
-export class VideoAdRenderer extends BaseAdRenderer {
-  render(ad: Advertisement, slot: AdSlot): HTMLElement {
-    let adElement = DOMUtils.safeCreateElement('div');
-    
-    if (!adElement) {
-      return this.createPlaceholder(slot, '비디오 광고');
-    }
-    
-    // 컨테이너 스타일 적용 (불필요한 스타일 제거)
-    this.applyStyles(adElement, {
-      ...this.getBaseContainerStyles(slot),
-      background: '#000',
-    });
-
-    // 비디오 광고는 비디오만 표시
-    if (!ad.videoUrl) {
-      // 비디오가 없는 경우 플레이스홀더 반환
-      return this.createPlaceholder(slot, '비디오 광고');
-    }
-
-    const video = this.createVideoElement(ad.videoUrl, ad, slot);
-    if (video) {
-      adElement.appendChild(video);
-    }
-
-    // 클릭 이벤트 추가
-    this.addClickHandler(adElement, ad, slot);
-
-    return adElement;
-  }
-
-  /**
-   * 비디오 요소 생성
-   */
-  private createVideoElement(videoUrl: string, ad: Advertisement, slot: AdSlot): HTMLVideoElement | null {
-    const video = DOMUtils.safeCreateElement('video') as HTMLVideoElement;
-    if (!video) return null;
-    
-    video.src = videoUrl;
-    video.controls = true;
-    
-    // 비디오도 이미지와 같은 스타일 적용
-    this.applyStyles(video, this.getImageStyles(slot));
-    
-    // 비디오 이벤트 추적
-    video.addEventListener('play', () => {
-      this.trackEvent?.(ad._id, slot.id, 'VIDEO_START' as AdEventType);
-    });
-    
-    video.addEventListener('ended', () => {
-      this.trackEvent?.(ad._id, slot.id, 'VIDEO_COMPLETE' as AdEventType);
-    });
-    
-    return video;
-  }
-}