@adstage/web-sdk 2.5.3 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adstage/web-sdk",
-  "version": "2.5.3",
+  "version": "2.6.1",
   "description": "AdStage Web SDK - Production-ready marketing platform SDK with React Provider support for seamless integration",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/constants/endpoints.ts

@@ -53,7 +53,6 @@ export class EndpointBuilder {
    */
   setBaseUrl(url: string): void {
     this.baseUrl = url;
-    console.log('🔄 API endpoint changed:', url);
   }
 
   /**

package/src/core/{AdStage.ts → adstage.ts}

@@ -4,9 +4,10 @@
  */
 
 import { AdStageConfig, ModuleName } from '../types/config';
-import { AdsModule } from '../modules/ads/AdsModule';
-import { ConfigModule } from '../modules/config/ConfigModule';
-import { EventsModule } from '../modules/events/EventsModule';
+import { AdsModule } from '../modules/ads/ads-module';
+import { ConfigModule } from '../modules/config/config-module';
+import { EventsModule } from '../modules/events/events-module';
+import { ViewableEventTracker } from '../managers/ads/viewable-event-tracker';
 import { endpoints } from '../constants/endpoints';
 
 export class AdStage {
@@ -46,10 +47,6 @@ export class AdStage {
       timeout: 30000,
       debug: false,
       modules: ['ads', 'events', 'config'],
-      validateOnInit: false,
-      fallbackMode: true,
-      offlineMode: false,
-      productionMode: false,
       ...config
     };
 
@@ -78,7 +75,7 @@ export class AdStage {
         version: '2.0.0',
         modules: enabledModules,
         apiKey: config.apiKey.substring(0, 8) + '...',
-        mode: config.productionMode ? 'production' : 'development'
+        mode: 'development'
       });
     }
   }
@@ -131,6 +128,37 @@ export class AdStage {
       AdStage.instance._config = null;
     }
   }
+
+  /**
+   * 디버그용 메서드들
+   */
+  public static debug = {
+    /**
+     * 모든 viewable 추적 데이터 초기화
+     */
+    clearAllViewable: (): void => {
+      ViewableEventTracker.clear();
+      console.log('✅ AdStage Debug: 모든 viewable 추적 데이터 초기화됨');
+    },
+
+    /**
+     * 특정 광고의 viewable 추적 초기화
+     */
+    clearAdViewable: (adId: string, slotId: string): void => {
+      ViewableEventTracker.clearAdViewable(adId, slotId);
+      console.log(`✅ AdStage Debug: 광고 ${adId}(${slotId})의 viewable 추적 초기화됨`);
+    },
+
+    /**
+     * 현재 추적 중인 viewable 상태 확인
+     */
+    getViewableStatus: (): void => {
+      console.log('📊 AdStage Debug: 현재 viewable 추적 상태', {
+        trackedCount: (ViewableEventTracker as any).viewableTracker.size,
+        trackedItems: Array.from((ViewableEventTracker as any).viewableTracker)
+      });
+    }
+  };
 }
 
 // 전역 네임스페이스로 내보내기

package/src/index.ts

@@ -4,7 +4,8 @@
  */
 
 // 메인 네임스페이스 클래스
-export { default as AdStage } from './core/AdStage';
+export { default as AdStage } from './core/adstage';
+import AdStageCore from './core/adstage';
 
 // React 통합
 export { AdStageProvider, useAdStageContext, useAdStageInstance } from './react';
@@ -13,8 +14,8 @@ export { AdStageProvider, useAdStageContext, useAdStageInstance } from './react'
 export type { AdStageConfig, ModuleName, BaseModule, ApiResponse, OrganizationInfo } from './types/config';
 
 // 모듈별 타입
-export type { AdOptions } from './modules/ads/AdsModule';
-export type { EventProperties, PageData } from './modules/events/EventsModule';
+export type { AdOptions } from './modules/ads/ads-module';
+export type { EventProperties, PageData } from './modules/events/events-module';
 
 // 광고 관련 타입
 export type { AdType, AdEventType, Advertisement, AdSlot } from './types/advertisement';
@@ -22,3 +23,8 @@ export type { AdType, AdEventType, Advertisement, AdSlot } from './types/adverti
 // 버전 정보
 export const SDK_VERSION = '2.0.0';
 export const SUPPORTED_MODULES = ['ads', 'events', 'config'] as const;
+
+// 브라우저 환경에서 전역 객체로 노출 (디버깅용)
+if (typeof window !== 'undefined') {
+  (window as any).AdStage = AdStageCore;
+}

package/src/managers/ads/advertisement-event-tracker.ts

@@ -38,16 +38,6 @@ export class AdvertisementEventTracker {
         console.log(`🚀 AdvertisementEventTracker: Processing ${eventType} event for ad ${adId} in slot ${slotId}`);
       }
       
-      // VIEWABLE 이벤트 중복 확인
-      if (eventType === AdEventType.VIEWABLE) {
-        if (ViewableEventTracker.isDuplicateViewable(adId, slotId, this.debug)) {
-          if (this.debug) {
-            console.log(`⏭️ Skipping duplicate viewable event for ad ${adId} in slot ${slotId}`);
-          }
-          return;
-        }
-      }
-      
       // 현재 슬롯 정보 가져오기
       const slot = this.slots.get(slotId);
       
@@ -100,6 +90,12 @@ export class AdvertisementEventTracker {
           headers,
           eventData
         });
+        console.log(`🌐 Full API call details:`, {
+          method: 'POST',
+          url,
+          hasApiKey: !!this.apiKey,
+          bodySize: JSON.stringify(eventData).length
+        });
       }
 
       const response = await fetch(url, {
@@ -124,7 +120,15 @@ export class AdvertisementEventTracker {
         console.log(`✅ Successfully tracked advertisement event: ${eventType} for ad ${adId}`);
       }
     } catch (error) {
-      console.error('Failed to track advertisement event:', error);
+      console.error('❌ Failed to track advertisement event:', error);
+      console.error('🔍 Debug info:', {
+        baseUrl: this.baseUrl,
+        apiKey: this.apiKey ? `${this.apiKey.substring(0, 8)}...` : 'NOT_SET',
+        url: `${this.baseUrl}/advertisements/events/${adId}/${eventType}`,
+        eventType,
+        adId,
+        slotId
+      });
     }
   }
 

package/src/managers/ads/carousel-slider-manager.ts

@@ -1,6 +1,7 @@
 import { AdType, AdEventType } from '../../types/advertisement';
 import type { AdSlot, Advertisement } from '../../types/advertisement';
-import { AdRendererFactory } from '../../renderers';
+import { SliderEventTracker } from './slider-event-tracker';
+import { AdClickHandler } from '../../utils/ad-click-handler';
 
 /**
  * 캐러셀 슬라이더 관리 클래스
@@ -10,6 +11,75 @@ import { AdRendererFactory } from '../../renderers';
  * - 도트 인디케이터 포함
  */
 export class CarouselSliderManager {
+  /**
+   * 간단한 광고 요소 생성 (크기 측정용)
+   */
+  private static createSimpleAdElement(slot: AdSlot, advertisement: Advertisement): HTMLElement {
+    const adElement = document.createElement('div');
+    adElement.className = `adstage-ad adstage-${String(slot.adType).toLowerCase()}`;
+    adElement.setAttribute('data-adstage-ad-id', advertisement._id);
+    adElement.setAttribute('data-adstage-slot-id', slot.id);
+    
+    // 기본 스타일 설정
+    adElement.style.display = 'block';
+    adElement.style.width = '100%';
+    adElement.style.height = 'auto';
+    
+    // 광고 타입별 기본 컨테이너 설정
+    switch (slot.adType) {
+      case AdType.BANNER:
+        if (advertisement.imageUrl) {
+          const img = document.createElement('img');
+          img.src = advertisement.imageUrl;
+          img.style.width = '100%';
+          img.style.height = 'auto';
+          img.style.objectFit = 'cover';
+          adElement.appendChild(img);
+        } else {
+          adElement.style.height = '100px';
+          adElement.style.backgroundColor = '#f0f0f0';
+          adElement.style.border = '1px dashed #ccc';
+          adElement.textContent = 'Banner Ad';
+        }
+        break;
+      case AdType.VIDEO:
+        if (advertisement.videoUrl) {
+          const video = document.createElement('video');
+          video.src = advertisement.videoUrl;
+          video.style.width = '100%';
+          video.style.height = 'auto';
+          adElement.appendChild(video);
+        } else {
+          adElement.style.height = '200px';
+          adElement.style.backgroundColor = '#000';
+          adElement.style.border = '1px solid #666';
+          adElement.textContent = 'Video Ad';
+          adElement.style.color = 'white';
+        }
+        break;
+      case AdType.TEXT:
+        if (advertisement.textContent) {
+          const textDiv = document.createElement('div');
+          textDiv.textContent = advertisement.textContent || '';
+          textDiv.style.padding = '8px';
+          textDiv.style.fontSize = '14px';
+          adElement.appendChild(textDiv);
+        } else {
+          adElement.style.height = '50px';
+          adElement.style.padding = '8px';
+          adElement.textContent = 'Text Ad';
+        }
+        break;
+      default:
+        adElement.style.height = '100px';
+        adElement.style.border = '1px dashed #ccc';
+        adElement.style.backgroundColor = '#f9f9f9';
+        adElement.textContent = `${slot.adType} Ad`;
+    }
+    
+    return adElement;
+  }
+
   /**
    * Create carousel slider container with dot indicators and navigation
    */
@@ -17,7 +87,8 @@ export class CarouselSliderManager {
     slot: AdSlot,
     advertisements: any[],
     options: any,
-    trackEventCallback: (adId: string, slotId: string, eventType: AdEventType) => void
+    trackEventCallback: (adId: string, slotId: string, eventType: AdEventType) => void,
+    debug: boolean = false
   ): HTMLElement {
     const sliderWrapper = document.createElement('div');
     sliderWrapper.className = 'adstage-slider-wrapper';
@@ -88,11 +159,7 @@ export class CarouselSliderManager {
       
       // 모든 광고의 크기를 측정하여 최대 크기 찾기
       advertisements.forEach(ad => {
-        const measureAdElement = AdRendererFactory.render(
-          ad,
-          slot,
-          trackEventCallback
-        );
+        const measureAdElement = this.createSimpleAdElement(slot, ad);
         measureContainer.appendChild(measureAdElement);
         
         const rect = measureAdElement.getBoundingClientRect();
@@ -162,10 +229,16 @@ export class CarouselSliderManager {
       });
 
       // 광고 렌더링
-      const adElement = AdRendererFactory.render(
+      const adElement = this.createSimpleAdElement(slot, ad);
+      
+      // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+      AdClickHandler.addClickEventForSlider(
+        adElement,
         ad,
         slot,
-        trackEventCallback
+        trackEventCallback,
+        debug,
+        String(slot.adType).toLowerCase()
       );
       
       slideElement.appendChild(adElement);
@@ -217,9 +290,14 @@ export class CarouselSliderManager {
         });
       }
 
-      // 현재 슬라이드의 광고에 대해 노출 이벤트 추적 (모든 슬라이드 포함)
-      console.log(`🎯 Triggering VIEWABLE event for slide change: ad ${advertisements[actualIndex]._id} (index: ${actualIndex}) in slot: ${slot.id}`);
-      trackEventCallback(advertisements[actualIndex]._id, slot.id, AdEventType.VIEWABLE);
+      // 🎯 공통 슬라이더 이벤트 추적 적용 (모든 슬라이드 포함)
+      SliderEventTracker.trackSlideViewable(
+        advertisements[actualIndex],
+        slot,
+        actualIndex,
+        trackEventCallback,
+        debug // debug 모드
+      );
     };
 
     // 무한 루프 처리 함수

package/src/managers/ads/slider-event-tracker.ts

@@ -0,0 +1,57 @@
+import { AdEventType } from '../../types/advertisement';
+import type { Advertisement, AdSlot } from '../../types/advertisement';
+
+/**
+ * 슬라이더 이벤트 추적 공통 유틸리티
+ * - 모든 슬라이더 타입에서 일관된 VIEWABLE 이벤트 추적
+ * - 중복 방지는 상위 레벨에서 처리
+ */
+export class SliderEventTracker {
+  /**
+   * 슬라이드 변경 시 VIEWABLE 이벤트 추적
+   * @param advertisement 현재 슬라이드의 광고
+   * @param slot 광고 슬롯
+   * @param slideIndex 현재 슬라이드 인덱스
+   * @param trackEventCallback 이벤트 추적 콜백
+   * @param debug 디버그 모드
+   */
+  static trackSlideViewable(
+    advertisement: Advertisement,
+    slot: AdSlot,
+    slideIndex: number,
+    trackEventCallback: (adId: string, slotId: string, eventType: AdEventType) => void,
+    debug: boolean = false
+  ): void {
+    if (debug) {
+      console.log(
+        `🎯 Triggering VIEWABLE event for slide change: ad ${advertisement._id} (index: ${slideIndex}) in slot: ${slot.id}`
+      );
+    }
+    
+    // 모든 슬라이드에 대해 VIEWABLE 이벤트 추적 (첫 번째 포함)
+    trackEventCallback(advertisement._id, slot.id, AdEventType.VIEWABLE);
+  }
+
+  /**
+   * 초기 슬라이드 로딩 시 VIEWABLE 이벤트 추적
+   * @param advertisement 첫 번째 슬라이드의 광고
+   * @param slot 광고 슬롯
+   * @param trackEventCallback 이벤트 추적 콜백
+   * @param debug 디버그 모드
+   */
+  static trackInitialSlideViewable(
+    advertisement: Advertisement,
+    slot: AdSlot,
+    trackEventCallback: (adId: string, slotId: string, eventType: AdEventType) => void,
+    debug: boolean = false
+  ): void {
+    if (debug) {
+      console.log(
+        `🎯 Triggering initial VIEWABLE event: ad ${advertisement._id} (index: 0) in slot: ${slot.id}`
+      );
+    }
+    
+    // 첫 번째 슬라이드도 동일하게 추적
+    trackEventCallback(advertisement._id, slot.id, AdEventType.VIEWABLE);
+  }
+}

package/src/managers/ads/text-transition-manager.ts

@@ -1,6 +1,8 @@
 import { AdType, AdEventType } from '../../types/advertisement';
 import type { AdSlot, Advertisement } from '../../types/advertisement';
-import { AdRendererFactory } from '../../renderers';
+import { SliderEventTracker } from './slider-event-tracker';
+import { TextAdUtils } from '../../utils/text-ad-utils';
+import { AdClickHandler } from '../../utils/ad-click-handler';
 
 /**
  * 텍스트 전환 효과 관리 클래스
@@ -10,14 +12,34 @@ import { AdRendererFactory } from '../../renderers';
  */
 export class TextTransitionManager {
   /**
-   * 텍스트 전환 슬라이더 컨테이너 생성
+   * 간단한 광고 요소 생성 (크기 측정용)
+   */
+  private static createSimpleAdElement(slot: AdSlot, advertisement: Advertisement): HTMLElement {
+    const adElement = document.createElement('div');
+    adElement.className = `adstage-ad adstage-${String(slot.adType).toLowerCase()}`;
+    adElement.setAttribute('data-adstage-ad-id', advertisement._id);
+    adElement.setAttribute('data-adstage-slot-id', slot.id);
+    
+    // 🎯 공통 스타일 및 콘텐츠 적용 (중복 제거)
+    adElement.style.cssText = TextAdUtils.createTextAdStyles(true);
+    TextAdUtils.setTextAdContent(adElement, advertisement);
+    
+    return adElement;
+  }
+
+  /**
+   * 텍스트 전환 컨테이너 생성
    */
   static createTextTransitionContainer(
     slot: AdSlot,
     advertisements: Advertisement[],
     options: any,
-    trackEventCallback: (adId: string, slotId: string, eventType: AdEventType) => void
+    trackEventCallback: (adId: string, slotId: string, eventType: AdEventType) => void,
+    debug: boolean = false
   ): HTMLElement {
+    // 사용자가 높이를 지정했는지 미리 확인 ('auto'나 undefined면 자동 높이)
+    const hasUserDefinedHeight = slot.height && slot.height !== 0 && slot.height !== 'auto';
+    
     const sliderWrapper = document.createElement('div');
     sliderWrapper.className = 'adstage-fade-slider-wrapper';
     
@@ -25,9 +47,15 @@ export class TextTransitionManager {
     const containerStyles: Record<string, string> = {
       position: 'relative',
       overflow: 'hidden',
-      display: 'inline-block',
+      display: 'block',
     };
     
+    // 높이가 지정되지 않은 경우 자동 높이 사용
+    if (!hasUserDefinedHeight) {
+      containerStyles.height = 'auto';
+      containerStyles.minHeight = 'fit-content';
+    }
+    
     // 사용자가 크기를 지정한 경우
     if (slot.width && slot.width !== 0) {
       let width: string;
@@ -39,7 +67,8 @@ export class TextTransitionManager {
       containerStyles.width = width;
     }
     
-    if (slot.height && slot.height !== 0) {
+    // 사용자가 높이를 명시적으로 지정한 경우에만 적용 ('auto'는 제외)
+    if (slot.height && slot.height !== 0 && slot.height !== 'auto' && hasUserDefinedHeight) {
       let height: string;
       if (typeof slot.height === 'string') {
         height = slot.height.includes('px') || slot.height.includes('%') ? slot.height : `${slot.height}px`;
@@ -57,18 +86,20 @@ export class TextTransitionManager {
     // 슬라이드 컨테이너
     const slideContainer = document.createElement('div');
     slideContainer.className = 'adstage-fade-slide-container';
+    
     slideContainer.style.cssText = `
       position: relative;
       width: 100%;
-      height: 100%;
+      ${hasUserDefinedHeight ? 'height: 100%;' : 'height: auto; min-height: fit-content;'}
     `;
 
     // 크기 측정을 위한 임시 컨테이너 (자동 크기 계산이 필요한 경우)
     let measureContainer: HTMLElement | null = null;
     const needsWidthMeasurement = !slot.width || slot.width === 0;
-    const needsHeightMeasurement = !slot.height || slot.height === 0;
+    const needsHeightMeasurement = !slot.height || slot.height === 0 || slot.height === undefined || slot.height === 'auto';
     
-    if (needsWidthMeasurement || needsHeightMeasurement) {
+    // 너비 측정만 필요한 경우 (높이는 자동으로 유지)
+    if (needsWidthMeasurement || (needsHeightMeasurement && hasUserDefinedHeight)) {
       measureContainer = document.createElement('div');
       measureContainer.style.cssText = `
         position: absolute;
@@ -97,11 +128,7 @@ export class TextTransitionManager {
       
       // 모든 광고의 크기를 측정하여 최대 크기 찾기
       advertisements.forEach(ad => {
-        const measureAdElement = AdRendererFactory.render(
-          ad,
-          slot,
-          trackEventCallback
-        );
+        const measureAdElement = this.createSimpleAdElement(slot, ad);
         measureContainer!.appendChild(measureAdElement);
         
         const rect = measureAdElement.getBoundingClientRect();
@@ -117,7 +144,8 @@ export class TextTransitionManager {
         sliderWrapper.style.width = `${maxWidth}px`;
       }
       
-      if (needsHeightMeasurement && maxHeight > 0) {
+      // 사용자가 높이를 지정하지 않은 경우 auto 높이 유지 (측정된 높이 적용하지 않음)
+      if (needsHeightMeasurement && maxHeight > 0 && hasUserDefinedHeight) {
         sliderWrapper.style.height = `${maxHeight}px`;
       }
       
@@ -130,26 +158,37 @@ export class TextTransitionManager {
     advertisements.forEach((ad, index) => {
       const slideElement = document.createElement('div');
       slideElement.className = 'adstage-fade-slide';
+      
+      // 자동 높이일 때는 첫 번째 슬라이드만 relative로 높이 확보
+      const isFirstSlide = index === 0;
+      const positionStyle = hasUserDefinedHeight ? 'absolute' : (isFirstSlide ? 'relative' : 'absolute');
+      
       slideElement.style.cssText = `
-        position: absolute;
-        top: 0;
-        left: 0;
+        position: ${positionStyle};
+        top: ${positionStyle === 'absolute' ? '0' : 'auto'};
+        left: ${positionStyle === 'absolute' ? '0' : 'auto'};
         width: 100%;
-        height: 100%;
+        ${hasUserDefinedHeight ? 'height: 100%;' : 'height: auto;'}
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-start;
         opacity: ${index === 0 ? '1' : '0'};
         transform: translateY(${index === 0 ? '0' : '20px'});
         transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
         z-index: ${index === 0 ? '2' : '1'};
       `;
 
-      // 광고 렌더링
-      const adElement = AdRendererFactory.render(
+      // 광고 렌더링 - 공통 함수 사용으로 일관성 유지
+      const adElement = this.createSimpleAdElement(slot, ad);
+      
+      // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+      AdClickHandler.addClickEventForSlider(
+        adElement,
         ad,
         slot,
-        trackEventCallback
+        trackEventCallback,
+        debug,
+        'Text'
       );
       
       slideElement.appendChild(adElement);
@@ -173,6 +212,21 @@ export class TextTransitionManager {
       const previousSlide = slideElements[currentSlide];
       const nextSlide = slideElements[index];
       
+      // 자동 높이 모드일 때는 위치 변경
+      if (!hasUserDefinedHeight) {
+        // 이전 슬라이드를 absolute로 변경
+        if (previousSlide.style.position === 'relative') {
+          previousSlide.style.position = 'absolute';
+          previousSlide.style.top = '0';
+          previousSlide.style.left = '0';
+        }
+        
+        // 다음 슬라이드를 relative로 변경하여 높이 확보
+        nextSlide.style.position = 'relative';
+        nextSlide.style.top = 'auto';
+        nextSlide.style.left = 'auto';
+      }
+      
       // 이전 슬라이드 페이드 아웃 (아래로)
       previousSlide.style.opacity = '0';
       previousSlide.style.transform = 'translateY(-20px)';
@@ -189,15 +243,26 @@ export class TextTransitionManager {
           slide.style.opacity = '0';
           slide.style.transform = 'translateY(20px)';
           slide.style.zIndex = '1';
+          
+          // 자동 높이 모드일 때는 다른 슬라이드들을 absolute로
+          if (!hasUserDefinedHeight && slide.style.position === 'relative') {
+            slide.style.position = 'absolute';
+            slide.style.top = '0';
+            slide.style.left = '0';
+          }
         }
       });
 
       currentSlide = index;
 
-      // 현재 슬라이드의 광고에 대해 노출 이벤트 추적
-      if (currentSlide > 0) { // 첫 번째는 이미 loadSlot에서 추적됨
-        trackEventCallback(advertisements[currentSlide]._id, slot.id, AdEventType.VIEWABLE);
-      }
+      // 🎯 공통 슬라이더 이벤트 추적 적용 (모든 슬라이드 포함)
+      SliderEventTracker.trackSlideViewable(
+        advertisements[currentSlide],
+        slot,
+        currentSlide,
+        trackEventCallback,
+        debug // debug 모드 상속
+      );
     };
 
     // 자동 슬라이드