@adstage/web-sdk 2.5.3 → 2.6.0

package/dist/index.esm.js

@@ -31,47 +31,6 @@ var DeviceType;
     DeviceType["TABLET"] = "TABLET";
 })(DeviceType || (DeviceType = {}));
 
-/**
- * 단순한 VIEWABLE 이벤트 중복 방지 관리 클래스
- * - 세션당 동일 광고 1회만 VIEWABLE 이벤트 허용
- * - 메모리 기반 추적으로 단순화
- */
-class ViewableEventTracker {
-    /**
-     * 중복 viewable 이벤트 여부 확인
-     */
-    static isDuplicateViewable(adId, slotId, debug = false) {
-        const key = `${adId}_${slotId}`;
-        // 이미 VIEWABLE 이벤트가 발생한 광고인지 확인
-        if (ViewableEventTracker.viewableTracker.has(key)) {
-            if (debug) {
-                console.log(`Duplicate viewable blocked for ad ${adId} in slot ${slotId}`);
-            }
-            return true;
-        }
-        // 새로운 VIEWABLE 이벤트 기록
-        ViewableEventTracker.viewableTracker.add(key);
-        if (debug) {
-            console.log(`✅ New viewable recorded for ad ${adId} in slot ${slotId}`);
-        }
-        return false;
-    }
-    /**
-     * 모든 추적 데이터 정리 (디버그용)
-     */
-    static clear() {
-        ViewableEventTracker.viewableTracker.clear();
-    }
-    /**
-     * 특정 광고의 viewable 추적 초기화 (디버그용)
-     */
-    static clearAdViewable(adId, slotId) {
-        const key = `${adId}_${slotId}`;
-        ViewableEventTracker.viewableTracker.delete(key);
-    }
-}
-ViewableEventTracker.viewableTracker = new Set();
-
 /**
  * SSR 안전한 DOM API 래퍼 클래스
  * 서버사이드 렌더링 환경에서 DOM API 접근 시 오류를 방지합니다.
@@ -497,7 +456,7 @@ class ApiHeaders {
  * AdStage SDK - 버전 정보 유틸리티
  */
 // package.json에서 버전 정보 가져오기 (빌드 시 자동으로 교체됨)
-const SDK_VERSION$1 = '"2.5.3"';
+const SDK_VERSION$1 = '"2.6.0"';
 /**
  * SDK 버전 정보 반환
  */
@@ -526,15 +485,6 @@ class AdvertisementEventTracker {
             if (this.debug) {
                 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);
             // 디바이스 정보 수집
@@ -578,6 +528,12 @@ 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, {
                 method: 'POST',
@@ -599,7 +555,15 @@ class AdvertisementEventTracker {
             }
         }
         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
+            });
         }
     }
     /**
@@ -722,7 +686,6 @@ class EndpointBuilder {
      */
     setBaseUrl(url) {
         this.baseUrl = url;
-        console.log('🔄 API endpoint changed:', url);
     }
     /**
      * 기본 URL 반환
@@ -743,454 +706,152 @@ class EndpointBuilder {
 const endpoints = new EndpointBuilder();
 
 /**
- * 기본 광고 렌더러 추상 클래스
+ * 슬라이더 이벤트 추적 공통 유틸리티
+ * - 모든 슬라이더 타입에서 일관된 VIEWABLE 이벤트 추적
+ * - 중복 방지는 상위 레벨에서 처리
  */
-class BaseAdRenderer {
-    constructor(trackEvent) {
-        this.trackEvent = trackEvent;
-    }
-    /**
-     * 공통 클릭 이벤트 핸들러 (SSR 안전)
-     */
-    addClickHandler(element, ad, slot) {
-        DOMUtils.safeAddEventListener(element, 'click', () => {
-            this.trackEvent?.(ad._id, slot.id, 'CLICK');
-            if (ad.linkUrl) {
-                DOMUtils.safeWindowOpen(ad.linkUrl, '_blank');
-            }
-        });
-    }
-    /**
-     * 공통 스타일 적용 유틸리티 (SSR 안전)
-     */
-    applyStyles(element, styles) {
-        DOMUtils.safeApplyStyles(element, styles);
-    }
-    /**
-     * 크기 값 파싱 유틸리티 (px, %, number 지원)
-     */
-    parseSizeValue(value) {
-        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;
-    }
-    /**
-     * 기본 컨테이너 스타일 (사용자 지정 크기만 적용)
-     */
-    getBaseContainerStyles(slot) {
-        const styles = {
-            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;
-    }
+class SliderEventTracker {
     /**
-     * 이미지 스타일 (고유 사이즈 유지, 사용자 지정 크기 우선)
+     * 슬라이드 변경 시 VIEWABLE 이벤트 추적
+     * @param advertisement 현재 슬라이드의 광고
+     * @param slot 광고 슬롯
+     * @param slideIndex 현재 슬라이드 인덱스
+     * @param trackEventCallback 이벤트 추적 콜백
+     * @param debug 디버그 모드
      */
-    getImageStyles(slot) {
-        const styles = {
-            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'; // 🎯 크기 조정 시에도 중앙 정렬
+    static trackSlideViewable(advertisement, slot, slideIndex, trackEventCallback, debug = false) {
+        if (debug) {
+            console.log(`🎯 Triggering VIEWABLE event for slide change: ad ${advertisement._id} (index: ${slideIndex}) in slot: ${slot.id}`);
         }
-        return styles;
+        // 모든 슬라이드에 대해 VIEWABLE 이벤트 추적 (첫 번째 포함)
+        trackEventCallback(advertisement._id, slot.id, AdEventType.VIEWABLE);
     }
     /**
-     * 기본 폰트 스타일
+     * 초기 슬라이드 로딩 시 VIEWABLE 이벤트 추적
+     * @param advertisement 첫 번째 슬라이드의 광고
+     * @param slot 광고 슬롯
+     * @param trackEventCallback 이벤트 추적 콜백
+     * @param debug 디버그 모드
      */
-    getBaseFontStyles() {
-        return {
-            'font-family': 'Arial, sans-serif',
-            'line-height': '1.4',
-            'word-break': 'keep-all',
-        };
-    }
-    /**
-     * 이미지 요소 생성 (SSR 안전)
-     */
-    createImageElement(imageUrl, alt = '', slot) {
-        const img = DOMUtils.safeCreateElement('img');
-        if (!img)
-            return null;
-        img.src = imageUrl;
-        img.alt = alt;
-        this.applyStyles(img, this.getImageStyles(slot));
-        return img;
-    }
-    /**
-     * 텍스트 요소 생성 (SSR 안전)
-     */
-    createTextElement(text, tag = 'div', additionalStyles = {}) {
-        const element = DOMUtils.safeCreateElement(tag);
-        if (!element)
-            return null;
-        DOMUtils.safeSetTextContent(element, text);
-        this.applyStyles(element, {
-            ...this.getBaseFontStyles(),
-            ...additionalStyles,
-        });
-        return element;
-    }
-    /**
-     * 플레이스홀더 요소 생성
-     */
-    createPlaceholder(slot, text = '광고') {
-        let placeholder = DOMUtils.safeCreateElement('div');
-        // SSR 환경에서 DOM을 사용할 수 없는 경우, 런타임에 생성되도록 함
-        if (!placeholder) {
-            // SSR에서는 빈 div를 반환하되, 브라우저에서는 제대로 작동하도록 함
-            if (typeof document !== 'undefined') {
-                placeholder = document.createElement('div');
-            }
-            else {
-                // SSR 환경에서는 더미 객체 반환 (타입 단언 사용)
-                placeholder = {};
-            }
-        }
-        // 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;
-    }
-}
-
-/**
- * 배너 광고 렌더러 - 이미지만 표시
- */
-class BannerAdRenderer extends BaseAdRenderer {
-    render(ad, slot) {
-        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;
-    }
-}
-
-/**
- * 텍스트 광고 렌더러 - textContent만 표시
- */
-class TextAdRenderer extends BaseAdRenderer {
-    render(ad, slot) {
-        let adElement = DOMUtils.safeCreateElement('div');
-        if (!adElement) {
-            return this.createPlaceholder(slot, '텍스트 광고');
-        }
-        // 기본 컨테이너 스타일
-        const containerStyles = {
-            ...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;
-    }
-}
-
-/**
- * 네이티브 광고 렌더러 - 이미지 + textContent 표시
- */
-class NativeAdRenderer extends BaseAdRenderer {
-    render(ad, slot) {
-        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);
+    static trackInitialSlideViewable(advertisement, slot, trackEventCallback, debug = false) {
+        if (debug) {
+            console.log(`🎯 Triggering initial VIEWABLE event: ad ${advertisement._id} (index: 0) in slot: ${slot.id}`);
         }
-        return adElement;
+        // 첫 번째 슬라이드도 동일하게 추적
+        trackEventCallback(advertisement._id, slot.id, AdEventType.VIEWABLE);
     }
 }
 
 /**
- * 비디오 광고 렌더러 - 비디오 또는 이미지 표시
+ * 광고 클릭 이벤트 핸들러 유틸리티
+ * 모든 광고 타입에서 일관된 클릭 이벤트 처리를 위한 공통 컴포넌트
  */
-class VideoAdRenderer extends BaseAdRenderer {
-    render(ad, slot) {
-        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;
-    }
+class AdClickHandler {
     /**
-     * 비디오 요소 생성
+     * 광고 요소에 클릭 이벤트를 추가하는 공통 함수
+     * @param element - 클릭 이벤트를 추가할 DOM 요소
+     * @param advertisement - 광고 데이터
+     * @param slot - 광고 슬롯 정보
+     * @param trackEventCallback - 이벤트 추적 콜백 함수
+     * @param debug - 디버그 모드
+     * @param adTypeLabel - 광고 타입 라벨 (로그용, 선택사항)
      */
-    createVideoElement(videoUrl, ad, slot) {
-        const video = DOMUtils.safeCreateElement('video');
-        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');
-        });
-        video.addEventListener('ended', () => {
-            this.trackEvent?.(ad._id, slot.id, 'VIDEO_COMPLETE');
-        });
-        return video;
-    }
-}
-
-/**
- * 전면/팝업 광고 렌더러 - 핵심 콘텐츠만 표시
- */
-class InterstitialAdRenderer extends BaseAdRenderer {
-    render(ad, slot) {
-        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);
-            }
+    static addClickEvent(element, advertisement, slot, trackEventCallback, debug = false, adTypeLabel) {
+        // linkUrl이 없으면 클릭 이벤트 추가하지 않음
+        if (!advertisement.linkUrl) {
+            return;
         }
-        else if (ad.videoUrl) {
-            // 이미지가 없고 비디오가 있는 경우
-            const video = this.createVideoElement(ad.videoUrl, ad, slot);
-            if (video) {
-                adElement.appendChild(video);
+        // 커서 스타일 설정
+        element.style.cursor = 'pointer';
+        // 클릭 이벤트 리스너 추가
+        element.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            // 이벤트 추적
+            if (trackEventCallback) {
+                trackEventCallback(advertisement._id, slot.id, AdEventType.CLICK);
+            }
+            // 링크 이동
+            window.open(advertisement.linkUrl, '_blank');
+            // 디버그 로그
+            if (debug) {
+                const typeLabel = adTypeLabel || String(slot.adType).toLowerCase();
+                console.log(`🔗 ${typeLabel} ad clicked: ${advertisement._id} -> ${advertisement.linkUrl}`);
             }
-        }
-        else {
-            // 모든 콘텐츠가 없는 경우
-            return this.createPlaceholder(slot, '전면 광고');
-        }
-        // 클릭 이벤트 추가
-        this.addClickHandler(adElement, ad, slot);
-        return adElement;
-    }
-    /**
-     * 비디오 요소 생성
-     */
-    createVideoElement(videoUrl, ad, slot) {
-        const video = DOMUtils.safeCreateElement('video');
-        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');
-        });
-        video.addEventListener('ended', () => {
-            this.trackEvent?.(ad._id, slot.id, 'VIDEO_COMPLETE');
         });
-        return video;
     }
-}
-
-var _a;
-/**
- * 광고 렌더러 팩토리
- * - 광고 타입에 따라 적절한 렌더러 인스턴스를 반환
- */
-class AdRendererFactory {
     /**
-     * 광고 타입에 맞는 렌더러 생성
+     * 렌더러에서 사용할 수 있는 간편한 클릭 이벤트 추가 함수
+     * BaseAdRenderer를 상속받은 클래스에서 사용
+     * @param element - 클릭 이벤트를 추가할 DOM 요소
+     * @param advertisement - 광고 데이터
+     * @param slot - 광고 슬롯 정보
+     * @param createEventTrackingCallback - 이벤트 추적 콜백 생성 함수
+     * @param debug - 디버그 모드
+     * @param adTypeLabel - 광고 타입 라벨 (로그용, 선택사항)
      */
-    static createRenderer(adType, trackEvent) {
-        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);
+    static addClickEventForRenderer(element, advertisement, slot, createEventTrackingCallback, debug = false, adTypeLabel) {
+        // linkUrl이 없으면 클릭 이벤트 추가하지 않음
+        if (!advertisement.linkUrl) {
+            return;
         }
-        return new RendererClass(trackEvent);
+        // 커서 스타일 설정
+        element.style.cursor = 'pointer';
+        // 클릭 이벤트 리스너 추가
+        element.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            // 이벤트 추적 콜백 생성
+            const trackEventCallback = createEventTrackingCallback();
+            trackEventCallback(advertisement._id, slot.id, AdEventType.CLICK);
+            // 링크 이동
+            window.open(advertisement.linkUrl, '_blank');
+            // 디버그 로그
+            if (debug) {
+                const typeLabel = adTypeLabel || String(slot.adType).toLowerCase();
+                console.log(`🔗 ${typeLabel} ad clicked: ${advertisement._id} -> ${advertisement.linkUrl}`);
+            }
+        });
     }
     /**
-     * 광고 렌더링 (편의 메서드)
+     * 슬라이더/매니저에서 사용할 수 있는 클릭 이벤트 추가 함수
+     * 이미 trackEventCallback이 준비된 상황에서 사용
+     * @param element - 클릭 이벤트를 추가할 DOM 요소
+     * @param advertisement - 광고 데이터
+     * @param slot - 광고 슬롯 정보
+     * @param trackEventCallback - 준비된 이벤트 추적 콜백
+     * @param debug - 디버그 모드
+     * @param adTypeLabel - 광고 타입 라벨 (로그용, 선택사항)
      */
-    static render(ad, slot, trackEvent) {
-        const renderer = this.createRenderer(slot.adType, trackEvent);
-        return renderer.render(ad, slot);
+    static addClickEventForSlider(element, advertisement, slot, trackEventCallback, debug = false, adTypeLabel) {
+        this.addClickEvent(element, advertisement, slot, trackEventCallback, debug, adTypeLabel);
     }
     /**
-     * 사용 가능한 렌더러 타입 목록
+     * 클릭 가능한 광고인지 확인하는 헬퍼 함수
+     * @param advertisement - 광고 데이터
+     * @returns linkUrl이 있으면 true, 없으면 false
      */
-    static getSupportedAdTypes() {
-        return Array.from(this.renderers.keys());
+    static isClickable(advertisement) {
+        return Boolean(advertisement.linkUrl);
     }
     /**
-     * 커스텀 렌더러 등록
+     * 여러 요소에 대해 일괄적으로 클릭 이벤트를 추가하는 함수
+     * @param elements - 클릭 이벤트를 추가할 DOM 요소들
+     * @param advertisements - 광고 데이터 배열 (elements와 같은 순서)
+     * @param slot - 광고 슬롯 정보
+     * @param trackEventCallback - 이벤트 추적 콜백
+     * @param debug - 디버그 모드
+     * @param adTypeLabel - 광고 타입 라벨 (로그용, 선택사항)
      */
-    static registerRenderer(adType, RendererClass) {
-        this.renderers.set(adType, RendererClass);
+    static addClickEventsBatch(elements, advertisements, slot, trackEventCallback, debug = false, adTypeLabel) {
+        elements.forEach((element, index) => {
+            const advertisement = advertisements[index];
+            if (advertisement) {
+                this.addClickEvent(element, advertisement, slot, trackEventCallback, debug, adTypeLabel);
+            }
+        });
     }
 }
-_a = AdRendererFactory;
-AdRendererFactory.renderers = new Map();
-(() => {
-    // 렌더러 등록
-    _a.renderers.set(AdType.BANNER, BannerAdRenderer);
-    _a.renderers.set(AdType.TEXT, TextAdRenderer);
-    _a.renderers.set(AdType.NATIVE, NativeAdRenderer);
-    _a.renderers.set(AdType.VIDEO, VideoAdRenderer);
-    _a.renderers.set(AdType.INTERSTITIAL, InterstitialAdRenderer);
-    _a.renderers.set(AdType.POPUP, InterstitialAdRenderer); // POPUP은 INTERSTITIAL과 동일
-})();
 
 /**
  * 캐러셀 슬라이더 관리 클래스
@@ -1200,10 +861,78 @@ AdRendererFactory.renderers = new Map();
  * - 도트 인디케이터 포함
  */
 class CarouselSliderManager {
+    /**
+     * 간단한 광고 요소 생성 (크기 측정용)
+     */
+    static createSimpleAdElement(slot, advertisement) {
+        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
      */
-    static createSliderContainer(slot, advertisements, options, trackEventCallback) {
+    static createSliderContainer(slot, advertisements, options, trackEventCallback, debug = false) {
         const sliderWrapper = document.createElement('div');
         sliderWrapper.className = 'adstage-slider-wrapper';
         // 사용자 지정 크기가 있으면 적용, 없으면 콘텐츠 크기에 맞춤
@@ -1266,7 +995,7 @@ class CarouselSliderManager {
             let maxHeight = 0;
             // 모든 광고의 크기를 측정하여 최대 크기 찾기
             advertisements.forEach(ad => {
-                const measureAdElement = AdRendererFactory.render(ad, slot, trackEventCallback);
+                const measureAdElement = this.createSimpleAdElement(slot, ad);
                 measureContainer.appendChild(measureAdElement);
                 const rect = measureAdElement.getBoundingClientRect();
                 if (rect.width > maxWidth)
@@ -1324,7 +1053,9 @@ class CarouselSliderManager {
                 slideElement.style.setProperty(key, value);
             });
             // 광고 렌더링
-            const adElement = AdRendererFactory.render(ad, slot, trackEventCallback);
+            const adElement = this.createSimpleAdElement(slot, ad);
+            // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+            AdClickHandler.addClickEventForSlider(adElement, ad, slot, trackEventCallback, debug, String(slot.adType).toLowerCase());
             slideElement.appendChild(adElement);
             slideContainer.appendChild(slideElement);
         });
@@ -1368,9 +1099,9 @@ 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 모드
+            );
         };
         // 무한 루프 처리 함수
         const handleInfiniteLoop = () => {
@@ -1530,48 +1261,750 @@ class CarouselSliderManager {
 }
 
 /**
- * 텍스트 전환 효과 관리 클래스
- * - 텍스트 광고 전용 페이드 인/아웃 + 상하 움직임 효과
- * - 부드러운 전환 애니메이션 (vertical transition)
- * - 무한 루프 지원
+ * 단순한 VIEWABLE 이벤트 중복 방지 관리 클래스
+ * - 세션당 동일 광고 1회만 VIEWABLE 이벤트 허용
+ * - 메모리 기반 추적으로 단순화
  */
-class TextTransitionManager {
+class ViewableEventTracker {
     /**
-     * 텍스트 전환 슬라이더 컨테이너 생성
+     * 중복 viewable 이벤트 여부 확인
      */
-    static createTextTransitionContainer(slot, advertisements, options, trackEventCallback) {
-        const sliderWrapper = document.createElement('div');
-        sliderWrapper.className = 'adstage-fade-slider-wrapper';
-        // 래퍼 스타일 설정
-        const containerStyles = {
-            position: 'relative',
-            overflow: 'hidden',
-            display: 'inline-block',
-        };
-        // 사용자가 크기를 지정한 경우
-        if (slot.width && slot.width !== 0) {
-            let width;
-            if (typeof slot.width === 'string') {
-                width = slot.width.includes('px') || slot.width.includes('%') ? slot.width : `${slot.width}px`;
-            }
-            else {
-                width = `${slot.width}px`;
+    static isDuplicateViewable(adId, slotId, debug = false) {
+        const key = `${adId}_${slotId}`;
+        // 이미 VIEWABLE 이벤트가 발생한 광고인지 확인
+        if (ViewableEventTracker.viewableTracker.has(key)) {
+            if (debug) {
+                console.log(`Duplicate viewable blocked for ad ${adId} in slot ${slotId}`);
             }
-            containerStyles.width = width;
+            return true;
         }
-        if (slot.height && slot.height !== 0) {
-            let height;
-            if (typeof slot.height === 'string') {
-                height = slot.height.includes('px') || slot.height.includes('%') ? slot.height : `${slot.height}px`;
-            }
-            else {
-                height = `${slot.height}px`;
-            }
-            containerStyles.height = height;
+        // 새로운 VIEWABLE 이벤트 기록
+        ViewableEventTracker.viewableTracker.add(key);
+        if (debug) {
+            console.log(`✅ New viewable recorded for ad ${adId} in slot ${slotId}`);
         }
-        // 스타일 적용
-        Object.entries(containerStyles).forEach(([key, value]) => {
-            sliderWrapper.style.setProperty(key, value);
+        return false;
+    }
+    /**
+     * 모든 추적 데이터 정리 (디버그용)
+     */
+    static clear() {
+        ViewableEventTracker.viewableTracker.clear();
+    }
+    /**
+     * 특정 광고의 viewable 추적 초기화 (디버그용)
+     */
+    static clearAdViewable(adId, slotId) {
+        const key = `${adId}_${slotId}`;
+        ViewableEventTracker.viewableTracker.delete(key);
+    }
+}
+ViewableEventTracker.viewableTracker = new Set();
+
+/**
+ * 베이스 광고 렌더러 - 공통 기능 구현
+ */
+class BaseAdRenderer {
+    constructor(adType, debug = false, advertisementEventTracker) {
+        this.adType = adType;
+        this.debug = debug;
+        this.advertisementEventTracker = advertisementEventTracker || null;
+    }
+    /**
+     * Placeholder(슬롯 컨테이너) 생성 - 공통 구현
+     */
+    createPlaceholder(container, slotId, options, config) {
+        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}`);
+        }
+    }
+    /**
+     * 플레이스홀더 스타일 적용
+     */
+    applyPlaceholderStyle(element, mode) {
+        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, options, config) {
+        // 사용자가 명시적으로 크기를 지정한 경우
+        const explicitWidth = options.width;
+        const explicitHeight = options.height;
+        // 너비 처리
+        let width;
+        if (typeof explicitWidth === 'number') {
+            width = `${explicitWidth}px`;
+        }
+        else if (typeof explicitWidth === 'string') {
+            width = explicitWidth;
+        }
+        else {
+            width = '100%'; // 기본값은 100%
+        }
+        // 높이 처리 - 핵심 로직
+        let height;
+        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 };
+    }
+    /**
+     * 컨테이너의 실제 높이 계산 - 공통 구현
+     */
+    getContainerHeight(container) {
+        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;
+    }
+    /**
+     * 이벤트 트래킹 콜백 생성 - 공통 구현
+     */
+    createEventTrackingCallback() {
+        return async (adId, slotId, eventType) => {
+            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) {
+        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.hasAttribute('data-adstage-container'));
+            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);
+            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.isEmpty = true;
+    }
+    /**
+     * 빈 컨테이너 생성 - 공통 구현
+     */
+    createEmptyContainer(slot) {
+        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}`);
+            }
+        }
+    }
+    /**
+     * 디버그 로그 출력 - 공통 구현
+     */
+    log(message, ...args) {
+        if (this.debug) {
+            console.log(`[${this.adType}] ${message}`, ...args);
+        }
+    }
+}
+
+/**
+import { AdSlot, Advertisement, AdType } from '../../../types/advertisement';
+import { AdvertisementEventTracker } from '../../../managers/ads/advertisement-event-tracker';
+import { CarouselSliderManager } from '../../../managers/ads/carousel-slider-manager';
+import { BaseAdRenderer } from './base-ad-renderer';
+import { AdRenderOptions } from '../interfaces/i-ad-renderer'; 광고 전용 렌더러
+ */
+class BannerAdRenderer extends BaseAdRenderer {
+    constructor(debug = false, advertisementEventTracker) {
+        super(AdType.BANNER, debug, advertisementEventTracker);
+    }
+    /**
+     * 배너 광고 기본 높이
+     */
+    getDefaultHeight() {
+        return '250px';
+    }
+    /**
+     * 단일 배너 광고 렌더링
+     */
+    async renderAdElement(slot, advertisement) {
+        const container = document.getElementById(slot.containerId);
+        if (!container)
+            return;
+        const adElement = document.createElement('div');
+        adElement.className = 'adstage-ad adstage-banner-ad';
+        const optimizedHeight = slot.optimizedHeight;
+        const containerElement = container.parentElement || container;
+        if (optimizedHeight) {
+            adElement.style.width = '100%';
+            adElement.style.height = String(optimizedHeight);
+        }
+        else {
+            const config = slot.config;
+            const options = {
+                width: config?.width,
+                height: config?.height
+            };
+            const { width, height } = this.calculateAdSize(containerElement, options, { debug: this.debug });
+            adElement.style.width = width;
+            adElement.style.height = height;
+        }
+        if (advertisement.imageUrl) {
+            await this.renderOptimizedBannerImage(adElement, advertisement, slot);
+        }
+        else {
+            adElement.innerHTML = `<div>${advertisement.title || 'Banner Ad'}</div>`;
+        }
+        // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+        AdClickHandler.addClickEventForRenderer(adElement, advertisement, slot, () => this.createEventTrackingCallback(), this.debug, 'Banner');
+        container.innerHTML = '';
+        container.appendChild(adElement);
+    }
+    /**
+     * 다중 배너 광고 렌더링 (슬라이더)
+     */
+    async renderMultipleAds(slot, advertisements) {
+        const container = document.getElementById(slot.containerId);
+        if (!container) {
+            throw new Error(`Container not found: ${slot.containerId}`);
+        }
+        // 배너 광고를 위한 컨테이너 최적화
+        await this.optimizeContainerForBannerAds(slot, advertisements);
+        const trackEventCallback = this.createEventTrackingCallback();
+        const optimizedSliderOptions = {
+            autoSlideInterval: (slot.config?.slideInterval || 5000) / 1000,
+            ...slot.config,
+            optimizedHeight: slot.optimizedHeight,
+            aspectRatio: slot.aspectRatio
+        };
+        const sliderElement = CarouselSliderManager.createSliderContainer(slot, advertisements, optimizedSliderOptions, trackEventCallback, this.debug);
+        if (sliderElement) {
+            container.innerHTML = '';
+            container.appendChild(sliderElement);
+            if (this.debug) {
+                console.log(`🎠 Banner carousel created for slot: ${slot.id} with ${advertisements.length} ads (optimized: ${slot.optimizedHeight || 'default'})`);
+            }
+        }
+    }
+    /**
+     * 여러 광고의 최적 컨테이너 크기 계산
+     */
+    async calculateOptimalContainerSize(advertisements, containerWidth) {
+        if (!advertisements.length) {
+            return {
+                width: '100%',
+                height: this.getDefaultHeight(),
+                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.status === 'fulfilled')
+                .map(result => result.value);
+            if (validDimensions.length === 0) {
+                return {
+                    width: '100%',
+                    height: this.getDefaultHeight(),
+                    aspectRatio: 16 / 9
+                };
+            }
+            const strategy = this.selectOptimalSizeStrategy(validDimensions);
+            const optimalHeight = this.calculateOptimalHeight(validDimensions, containerWidth, strategy);
+            if (this.debug) {
+                console.log(`📐 Optimal banner container calculated: ${containerWidth}x${optimalHeight} (strategy: ${strategy})`);
+            }
+            return {
+                width: '100%',
+                height: `${optimalHeight}px`,
+                aspectRatio: containerWidth / optimalHeight
+            };
+        }
+        catch (error) {
+            console.warn('Failed to calculate optimal banner size, using defaults:', error);
+            return {
+                width: '100%',
+                height: this.getDefaultHeight(),
+                aspectRatio: 16 / 9
+            };
+        }
+    }
+    /**
+     * 배너 광고를 위한 컨테이너 최적화
+     */
+    async optimizeContainerForBannerAds(slot, advertisements) {
+        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);
+            adElement.style.height = optimalSize.height;
+            slot.optimizedHeight = optimalSize.height;
+            slot.aspectRatio = optimalSize.aspectRatio;
+            if (this.debug) {
+                console.log(`🔧 Banner container optimized for ${advertisements.length} ads: ${optimalSize.height}`);
+            }
+        }
+        catch (error) {
+            console.warn('Banner container optimization failed, using default size:', error);
+        }
+    }
+    /**
+     * 최적 크기 조정 전략 선택
+     */
+    selectOptimalSizeStrategy(dimensions) {
+        const aspectRatios = dimensions.map(d => d.width / d.height);
+        const ratioGroups = new Map();
+        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;
+        if (maxGroup / totalImages >= 0.7) {
+            return 'dominant';
+        }
+        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';
+    }
+    /**
+     * 전략에 따른 최적 높이 계산
+     */
+    calculateOptimalHeight(dimensions, containerWidth, strategy) {
+        const aspectRatios = dimensions.map(d => d.width / d.height);
+        switch (strategy) {
+            case 'dominant': {
+                const ratioGroups = new Map();
+                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.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);
+            }
+        }
+    }
+    /**
+     * 이미지 로드 및 실제 크기 획득
+     */
+    loadImageDimensions(imageUrl) {
+        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;
+        });
+    }
+    /**
+     * 이미지와 컨테이너 비율을 고려한 최적화 스타일 적용
+     */
+    applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio) {
+        const ratio = imageAspectRatio / containerAspectRatio;
+        if (Math.abs(ratio - 1) < 0.1) {
+            img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center';
+        }
+        else if (ratio > 1.3) {
+            img.style.objectFit = 'contain';
+            img.style.objectPosition = 'center';
+            img.style.backgroundColor = '#f0f0f0';
+        }
+        else if (ratio < 0.7) {
+            img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center';
+        }
+        else {
+            img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center';
+        }
+        if (this.debug) {
+            console.log(`🎨 Banner image style applied: objectFit=${img.style.objectFit}, ratio=${ratio.toFixed(2)}`);
+        }
+    }
+    /**
+     * 배너 이미지 최적화 렌더링 - public으로 변경
+     */
+    async renderOptimizedBannerImage(container, advertisement, slot) {
+        const img = document.createElement('img');
+        img.style.width = '100%';
+        img.style.height = '100%';
+        img.style.display = 'block';
+        img.style.borderRadius = '8px';
+        img.alt = advertisement.title || 'Banner Advertisement';
+        container.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999;">Loading...</div>';
+        try {
+            if (!advertisement.imageUrl) {
+                throw new Error('Image URL is not provided');
+            }
+            const imageDimensions = await this.loadImageDimensions(advertisement.imageUrl);
+            const containerRect = container.getBoundingClientRect();
+            const containerWidth = containerRect.width;
+            const containerHeight = containerRect.height;
+            if (this.debug) {
+                console.log(`📸 Banner image dimensions: ${imageDimensions.width}x${imageDimensions.height}`);
+                console.log(`📦 Banner container dimensions: ${containerWidth}x${containerHeight}`);
+            }
+            const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+            const containerAspectRatio = containerWidth / containerHeight;
+            this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+            img.src = advertisement.imageUrl;
+            container.innerHTML = '';
+            container.appendChild(img);
+            // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+            AdClickHandler.addClickEventForRenderer(img, advertisement, slot, () => this.createEventTrackingCallback(), this.debug, 'Banner');
+            if (this.debug) {
+                console.log(`✅ Optimized banner image rendered for ad: ${advertisement._id}`);
+            }
+            return img;
+        }
+        catch (error) {
+            console.error('❌ Failed to load optimized banner image:', error);
+            if (advertisement.imageUrl) {
+                img.src = advertisement.imageUrl;
+                img.style.objectFit = 'cover';
+                img.style.objectPosition = 'center';
+                container.innerHTML = '';
+                container.appendChild(img);
+                // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+                AdClickHandler.addClickEventForRenderer(img, advertisement, slot, () => this.createEventTrackingCallback(), this.debug, 'Banner');
+            }
+            return img;
+        }
+    }
+}
+
+/**
+ * 텍스트 광고 공통 유틸리티 함수들
+ */
+class TextAdUtils {
+    /**
+     * 텍스트 광고의 기본 스타일을 생성
+     * @param isSimple 간단한 스타일 여부
+     * @returns CSS 스타일 문자열
+     */
+    static createTextAdStyles(isSimple = false) {
+        const baseStyles = `
+      font-family: 'Arial', sans-serif;
+      text-decoration: none;
+      display: block;
+      text-align: left;
+      transition: color 0.3s ease;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: visible;
+      padding-right: 2px;
+      padding-left: 2px;
+      white-space: nowrap;
+    `;
+        return baseStyles;
+    }
+    /**
+     * 텍스트 광고의 콘텐츠를 설정 (textContent 우선, 없으면 title)
+     * @param element 설정할 HTML 요소
+     * @param adData 광고 데이터
+     */
+    static setTextAdContent(element, adData) {
+        const content = adData.textContent || adData.title || '';
+        element.textContent = content;
+    }
+}
+
+/**
+ * 텍스트 전환 효과 관리 클래스
+ * - 텍스트 광고 전용 페이드 인/아웃 + 상하 움직임 효과
+ * - 부드러운 전환 애니메이션 (vertical transition)
+ * - 무한 루프 지원
+ */
+class TextTransitionManager {
+    /**
+     * 간단한 광고 요소 생성 (크기 측정용)
+     */
+    static createSimpleAdElement(slot, advertisement) {
+        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, advertisements, options, trackEventCallback, debug = false) {
+        // 사용자가 높이를 지정했는지 미리 확인 ('auto'나 undefined면 자동 높이)
+        const hasUserDefinedHeight = slot.height && slot.height !== 0 && slot.height !== 'auto';
+        const sliderWrapper = document.createElement('div');
+        sliderWrapper.className = 'adstage-fade-slider-wrapper';
+        // 래퍼 스타일 설정
+        const containerStyles = {
+            position: 'relative',
+            overflow: 'hidden',
+            display: 'block',
+        };
+        // 높이가 지정되지 않은 경우 자동 높이 사용
+        if (!hasUserDefinedHeight) {
+            containerStyles.height = 'auto';
+            containerStyles.minHeight = 'fit-content';
+        }
+        // 사용자가 크기를 지정한 경우
+        if (slot.width && slot.width !== 0) {
+            let width;
+            if (typeof slot.width === 'string') {
+                width = slot.width.includes('px') || slot.width.includes('%') ? slot.width : `${slot.width}px`;
+            }
+            else {
+                width = `${slot.width}px`;
+            }
+            containerStyles.width = width;
+        }
+        // 사용자가 높이를 명시적으로 지정한 경우에만 적용 ('auto'는 제외)
+        if (slot.height && slot.height !== 0 && slot.height !== 'auto' && hasUserDefinedHeight) {
+            let height;
+            if (typeof slot.height === 'string') {
+                height = slot.height.includes('px') || slot.height.includes('%') ? slot.height : `${slot.height}px`;
+            }
+            else {
+                height = `${slot.height}px`;
+            }
+            containerStyles.height = height;
+        }
+        // 스타일 적용
+        Object.entries(containerStyles).forEach(([key, value]) => {
+            sliderWrapper.style.setProperty(key, value);
         });
         // 슬라이드 컨테이너
         const slideContainer = document.createElement('div');
@@ -1579,13 +2012,14 @@ class TextTransitionManager {
         slideContainer.style.cssText = `
       position: relative;
       width: 100%;
-      height: 100%;
+      ${hasUserDefinedHeight ? 'height: 100%;' : 'height: auto; min-height: fit-content;'}
     `;
         // 크기 측정을 위한 임시 컨테이너 (자동 크기 계산이 필요한 경우)
         let measureContainer = null;
         const needsWidthMeasurement = !slot.width || slot.width === 0;
-        const needsHeightMeasurement = !slot.height || slot.height === 0;
-        if (needsWidthMeasurement || needsHeightMeasurement) {
+        const needsHeightMeasurement = !slot.height || slot.height === 0 || slot.height === undefined || slot.height === 'auto';
+        // 너비 측정만 필요한 경우 (높이는 자동으로 유지)
+        if (needsWidthMeasurement || (needsHeightMeasurement && hasUserDefinedHeight)) {
             measureContainer = document.createElement('div');
             measureContainer.style.cssText = `
         position: absolute;
@@ -1611,7 +2045,7 @@ class TextTransitionManager {
             let maxHeight = 0;
             // 모든 광고의 크기를 측정하여 최대 크기 찾기
             advertisements.forEach(ad => {
-                const measureAdElement = AdRendererFactory.render(ad, slot, trackEventCallback);
+                const measureAdElement = this.createSimpleAdElement(slot, ad);
                 measureContainer.appendChild(measureAdElement);
                 const rect = measureAdElement.getBoundingClientRect();
                 if (rect.width > maxWidth)
@@ -1625,7 +2059,8 @@ class TextTransitionManager {
             if (needsWidthMeasurement && maxWidth > 0) {
                 sliderWrapper.style.width = `${maxWidth}px`;
             }
-            if (needsHeightMeasurement && maxHeight > 0) {
+            // 사용자가 높이를 지정하지 않은 경우 auto 높이 유지 (측정된 높이 적용하지 않음)
+            if (needsHeightMeasurement && maxHeight > 0 && hasUserDefinedHeight) {
                 sliderWrapper.style.height = `${maxHeight}px`;
             }
             // 측정 컨테이너 제거
@@ -1636,22 +2071,27 @@ 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(ad, slot, trackEventCallback);
+            // 광고 렌더링 - 공통 함수 사용으로 일관성 유지
+            const adElement = this.createSimpleAdElement(slot, ad);
+            // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+            AdClickHandler.addClickEventForSlider(adElement, ad, slot, trackEventCallback, debug, 'Text');
             slideElement.appendChild(adElement);
             slideContainer.appendChild(slideElement);
             slideElements.push(slideElement);
@@ -1670,6 +2110,19 @@ 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)';
@@ -1684,13 +2137,18 @@ 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 모드 상속
+            );
         };
         // 자동 슬라이드
         let autoSlideTimer = setInterval(() => {
@@ -1755,496 +2213,975 @@ class TextTransitionManager {
 }
 
 /**
- * AdRenderer - 광고 렌더링 전용 클래스
- * AdsModule에서 렌더링 관련 기능을 분리
+ * 텍스트 광고 전용 렌더러
  */
-class AdRenderer {
+class TextAdRenderer extends BaseAdRenderer {
     constructor(debug = false, advertisementEventTracker) {
-        this.debug = debug;
-        this.advertisementEventTracker = advertisementEventTracker || null;
+        super(AdType.TEXT, debug, advertisementEventTracker);
     }
     /**
-     * Placeholder(슬롯 컨테이너) 생성
+     * 텍스트 광고 기본 높이
+     */
+    getDefaultHeight() {
+        return '60px';
+    }
+    /**
+     * 단일 텍스트 광고 렌더링
      */
-    createPlaceholder(container, slotId, type, options, _config) {
+    async renderAdElement(slot, advertisement) {
+        const container = document.getElementById(slot.containerId);
+        if (!container)
+            return;
         const adElement = document.createElement('div');
-        adElement.id = slotId;
-        adElement.className = `adstage-slot adstage-${String(type).toLowerCase()}`;
-        adElement.setAttribute('data-adstage-container', 'true');
-        adElement.setAttribute('data-adstage-type', String(type));
-        adElement.setAttribute('data-adstage-slot', slotId);
-        const { width, height } = this.calculateAdSize(container, type, options, _config) || {
-            width: '100%',
-            height: '250px'
-        };
-        adElement.style.width = width;
-        adElement.style.height = height;
-        adElement.style.border = '1px dashed #ccc';
-        adElement.style.display = 'flex';
-        adElement.style.alignItems = 'center';
-        adElement.style.justifyContent = 'center';
-        adElement.style.backgroundColor = '#f9f9f9';
-        adElement.style.color = '#666';
-        adElement.innerHTML = `<span>Loading ${type} ad...</span>`;
+        adElement.className = 'adstage-ad adstage-text-ad';
+        const optimizedHeight = slot.optimizedHeight;
+        const containerElement = container.parentElement || container;
+        if (optimizedHeight) {
+            adElement.style.width = '100%';
+            adElement.style.height = String(optimizedHeight);
+        }
+        else {
+            const config = slot.config;
+            const options = {
+                width: config?.width,
+                height: config?.height
+            };
+            const { width, height } = this.calculateAdSize(containerElement, options, { debug: this.debug });
+            adElement.style.width = width;
+            adElement.style.height = height;
+        }
+        // 텍스트 콘텐츠 렌더링
+        const textDiv = document.createElement('div');
+        textDiv.className = 'adstage-text-content';
+        textDiv.style.cssText = TextAdUtils.createTextAdStyles(false);
+        TextAdUtils.setTextAdContent(textDiv, advertisement); // 최대 라인 수 제한
+        const maxLines = slot.config?.maxLines;
+        if (maxLines && typeof maxLines === 'number') {
+            textDiv.style.display = '-webkit-box';
+            textDiv.style.webkitLineClamp = String(maxLines);
+            textDiv.style.webkitBoxOrient = 'vertical';
+            textDiv.style.overflow = 'hidden';
+        }
+        adElement.appendChild(textDiv);
+        // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+        AdClickHandler.addClickEventForRenderer(adElement, advertisement, slot, () => this.createEventTrackingCallback(), this.debug, 'Text');
+        container.innerHTML = '';
         container.appendChild(adElement);
         if (this.debug) {
-            console.log(`📦 Placeholder created for slot: ${slotId} (${width} x ${height})`);
+            console.log(`✨ Single text ad rendered: ${advertisement._id}`);
         }
     }
     /**
-     * 여러 광고의 최적 컨테이너 크기 계산 (동적 크기 조정)
+     * 다중 텍스트 광고 렌더링 (전환 효과)
      */
-    async calculateOptimalContainerSize(advertisements, containerWidth, adType) {
-        if (!advertisements.length || adType !== AdType.BANNER) {
-            return {
-                width: '100%',
-                height: this.getDefaultHeightForAdType(adType) || '250px',
-                aspectRatio: 16 / 9
-            };
+    async renderMultipleAds(slot, advertisements) {
+        const container = document.getElementById(slot.containerId);
+        if (!container) {
+            throw new Error(`Container not found: ${slot.containerId}`);
         }
-        try {
-            const imageDimensions = await Promise.allSettled(advertisements
-                .filter(ad => ad.imageUrl)
-                .map(ad => this.loadImageDimensions(ad.imageUrl)));
-            const validDimensions = imageDimensions
-                .filter((result) => result.status === 'fulfilled')
-                .map(result => result.value);
-            if (validDimensions.length === 0) {
-                return {
-                    width: '100%',
-                    height: this.getDefaultHeightForAdType(adType) || '250px',
-                    aspectRatio: 16 / 9
-                };
+        const trackEventCallback = this.createEventTrackingCallback();
+        const optimizedSliderOptions = {
+            autoSlideInterval: (slot.config?.slideInterval || 5000) / 1000,
+            ...slot.config,
+            optimizedHeight: slot.optimizedHeight,
+            aspectRatio: slot.aspectRatio
+        };
+        const sliderElement = TextTransitionManager.createTextTransitionContainer(slot, advertisements, optimizedSliderOptions, trackEventCallback, this.debug);
+        if (sliderElement) {
+            container.innerHTML = '';
+            container.appendChild(sliderElement);
+            if (this.debug) {
+                console.log(`✨ Text transition created for slot: ${slot.id} with ${advertisements.length} ads`);
             }
-            const strategy = this.selectOptimalSizeStrategy(validDimensions);
-            const optimalHeight = this.calculateOptimalHeight(validDimensions, containerWidth, strategy);
+        }
+    }
+}
+
+/**
+ * 비디오 광고 전용 렌더러
+ */
+class VideoAdRenderer extends BaseAdRenderer {
+    constructor(debug = false, advertisementEventTracker) {
+        super(AdType.VIDEO, debug, advertisementEventTracker);
+    }
+    /**
+     * 비디오 광고 기본 높이 (16:9 비율 고려)
+     */
+    getDefaultHeight() {
+        return '360px';
+    }
+    /**
+     * 단일 비디오 광고 렌더링
+     */
+    async renderAdElement(slot, advertisement) {
+        const container = document.getElementById(slot.containerId);
+        if (!container)
+            return;
+        // 비디오 전용 컨테이너 생성
+        const videoContainer = document.createElement('div');
+        videoContainer.className = 'adstage-video-container';
+        videoContainer.style.cssText = `
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #000;
+      border-radius: 8px;
+      overflow: hidden;
+    `;
+        // 비디오 요소 렌더링
+        this.renderVideoElementDirect(videoContainer, advertisement, slot);
+        container.innerHTML = '';
+        container.appendChild(videoContainer);
+        if (this.debug) {
+            console.log(`🎬 Single video ad rendered: ${advertisement._id}`);
+        }
+    }
+    /**
+     * 다중 비디오 광고 렌더링 - 비디오는 단일 렌더링만 지원
+     */
+    async renderMultipleAds(slot, advertisements) {
+        const container = document.getElementById(slot.containerId);
+        if (!container) {
+            throw new Error(`Container not found: ${slot.containerId}`);
+        }
+        if (advertisements.length > 0) {
+            const videoAd = advertisements[0]; // 첫 번째 비디오만 사용
+            // 비디오 전용 컨테이너 생성
+            const videoContainer = document.createElement('div');
+            videoContainer.className = 'adstage-video-container';
+            videoContainer.style.cssText = `
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #000;
+        border-radius: 8px;
+        overflow: hidden;
+      `;
+            // 비디오 요소 렌더링
+            this.renderVideoElementDirect(videoContainer, videoAd, slot);
+            // 컨테이너에 추가
+            container.innerHTML = '';
+            container.appendChild(videoContainer);
+            // VIEWABLE 이벤트 추적
+            const trackEventCallback = this.createEventTrackingCallback();
+            setTimeout(() => {
+                trackEventCallback(videoAd._id, slot.id, AdEventType.VIEWABLE);
+            }, 100);
             if (this.debug) {
-                console.log(`📐 Optimal container calculated: ${containerWidth}x${optimalHeight} (strategy: ${strategy})`);
+                console.log(`🎬 Single video rendered for VIDEO slot: ${slot.id} (${videoAd._id})`);
             }
-            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) || '250px',
-                aspectRatio: 16 / 9
-            };
+        else {
+            if (this.debug) {
+                console.warn(`⚠️ No video advertisements available for slot: ${slot.id}`);
+            }
         }
     }
     /**
-     * 최적 크기 조정 전략 선택
+     * 비디오 요소 직접 렌더링
      */
-    selectOptimalSizeStrategy(dimensions) {
-        const aspectRatios = dimensions.map(d => d.width / d.height);
-        const ratioGroups = new Map();
-        aspectRatios.forEach(ratio => {
-            const roundedRatio = Math.round(ratio * 10) / 10;
-            const key = roundedRatio.toString();
-            ratioGroups.set(key, (ratioGroups.get(key) || 0) + 1);
+    renderVideoElementDirect(container, advertisement, slot) {
+        // 비디오 컨테이너를 relative로 설정
+        container.style.position = 'relative';
+        const video = document.createElement('video');
+        // 비디오 기본 설정
+        video.style.width = '100%';
+        video.style.height = '100%';
+        video.style.objectFit = 'contain';
+        video.preload = 'metadata';
+        // 슬롯 설정에서 비디오 옵션들 확인 (기본값 적용)
+        const config = slot.config;
+        // 디버깅: config 내용 확인
+        if (this.debug) {
+            console.log('🎬 Video config received:', config);
+        }
+        // 기본 설정: 모든 컨트롤 숨김 (사용자 요구사항 - config에 상관없이 기본값 적용)
+        video.controls = false;
+        // 기본 설정: 자동 재생 true (config에 상관없이 기본값 적용, 단 사용자가 명시적으로 false 설정시 존중)
+        video.autoplay = config?.autoplay === false ? false : true;
+        // 기본 설정: 음소거 true (기본값 강제 적용)
+        video.muted = true;
+        // 기본 설정: 반복 재생 true (config에 상관없이 기본값 적용, 단 사용자가 명시적으로 false 설정시 존중)
+        video.loop = config?.loop === false ? false : true;
+        // 디버깅: 최종 비디오 설정 확인
+        if (this.debug) {
+            console.log('🎬 Final video settings:', {
+                autoplay: video.autoplay,
+                muted: video.muted,
+                loop: video.loop,
+                controls: video.controls
+            });
+        }
+        // playsinline 설정 (모바일에서 전체화면 방지)
+        if (config?.playsinline !== false) {
+            video.setAttribute('playsinline', '');
+        }
+        // 사용자가 명시적으로 controls=true를 설정한 경우에만 오버라이드 (첫 번째 비디오는 기본값 유지)
+        if (config?.controls === true) {
+            video.controls = true;
+            if (this.debug) {
+                console.log('🎬 User explicitly enabled controls, overriding default');
+            }
+        }
+        // 특별한 컨트롤 설정 처리
+        if (config?.hideControls) {
+            // 완전히 모든 컨트롤 숨김 (pointer-events까지 차단)
+            video.controls = false;
+            video.style.cssText += `
+        pointer-events: none;
+      `;
+        }
+        else if (config?.customControls) {
+            // controls가 true일 때만 특정 컨트롤 숨기기 (CSS로 처리)
+            if (video.controls) {
+                const customControlsStyle = document.createElement('style');
+                customControlsStyle.textContent = `
+          video::-webkit-media-controls-play-button {
+            display: ${config.customControls.hidePlayButton ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-timeline {
+            display: ${config.customControls.hideProgressBar ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-current-time-display {
+            display: ${config.customControls.hideCurrentTime ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-time-remaining-display {
+            display: ${config.customControls.hideRemainingTime ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-volume-slider {
+            display: ${config.customControls.hideVolumeSlider ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-mute-button {
+            display: ${config.customControls.hideMuteButton ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-fullscreen-button {
+            display: ${config.customControls.hideFullscreenButton ? 'none' : 'block'} !important;
+          }
+        `;
+                document.head.appendChild(customControlsStyle);
+            }
+        }
+        else if (video.controls) {
+            // controls=true이지만 특별한 설정이 없을 때, 기본 스타일 적용 (시간만 표시)
+            const defaultControlsStyle = document.createElement('style');
+            defaultControlsStyle.id = 'adstage-video-default-controls';
+            defaultControlsStyle.textContent = `
+        .adstage-video-container video::-webkit-media-controls-mute-button {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-fullscreen-button {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-toggle-closed-captions-button {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-volume-slider {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-overflow-button {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-picture-in-picture-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-mute-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-fullscreen-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-toggle-closed-captions-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-volume-slider {
+          display: none !important;
+        }
+        video::-webkit-media-controls-overflow-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-picture-in-picture-button {
+          display: none !important;
+        }
+      `;
+            // 스타일이 이미 존재하지 않으면 추가
+            if (!document.getElementById('adstage-video-default-controls')) {
+                document.head.appendChild(defaultControlsStyle);
+            }
+        }
+        // 기본값이 controls=false이므로 아무것도 표시하지 않음
+        if (this.debug) {
+            console.log('🎬 Video controls setting:', video.controls ? 'enabled' : 'disabled (default)');
+        }
+        // 커스텀 음소거 토글 버튼 생성 (기본적으로 항상 표시)
+        const muteButton = document.createElement('button');
+        muteButton.className = 'adstage-video-mute-button';
+        muteButton.style.cssText = `
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      width: 40px;
+      height: 40px;
+      border: none;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.7);
+      color: white;
+      font-size: 16px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+      transition: all 0.3s ease;
+      backdrop-filter: blur(4px);
+    `;
+        // hideControls가 true면 음소거 버튼도 숨김
+        if (config?.hideControls) {
+            muteButton.style.display = 'none';
+        }
+        // 음소거 상태에 따른 아이콘 업데이트
+        const updateMuteButtonIcon = () => {
+            const mutedIcon = `
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
+          <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
+        </svg>
+      `;
+            const unmutedIcon = `
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
+          <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+        </svg>
+      `;
+            muteButton.innerHTML = video.muted ? mutedIcon : unmutedIcon;
+            muteButton.title = video.muted ? 'Click to unmute' : 'Click to mute';
+        };
+        // 초기 아이콘 설정
+        updateMuteButtonIcon();
+        // 음소거 버튼 클릭 이벤트
+        muteButton.addEventListener('click', (e) => {
+            e.stopPropagation(); // 비디오 클릭 이벤트 방지
+            video.muted = !video.muted;
+            updateMuteButtonIcon();
+            if (this.debug) {
+                console.log(`🔊 Video mute toggled: ${video.muted ? 'muted' : 'unmuted'}`);
+            }
         });
-        const maxGroup = Math.max(...ratioGroups.values());
-        const totalImages = dimensions.length;
-        if (maxGroup / totalImages >= 0.7) {
-            return 'dominant';
+        // 마우스 호버 효과
+        muteButton.addEventListener('mouseenter', () => {
+            muteButton.style.background = 'rgba(0, 0, 0, 0.9)';
+            muteButton.style.transform = 'scale(1.1)';
+        });
+        muteButton.addEventListener('mouseleave', () => {
+            muteButton.style.background = 'rgba(0, 0, 0, 0.7)';
+            muteButton.style.transform = 'scale(1)';
+        });
+        // 비디오 URL 설정
+        if (advertisement.videoUrl) {
+            video.src = advertisement.videoUrl;
+            // 자동 재생을 위한 다단계 시도
+            const attemptAutoplay = () => {
+                if (video.autoplay && video.muted && video.paused) {
+                    video.play().catch(error => {
+                        if (this.debug) {
+                            console.warn('🎬 Auto-play was prevented:', error);
+                            console.warn('🎬 Trying muted autoplay fallback...');
+                        }
+                        // 음소거 상태에서 다시 시도
+                        video.muted = true;
+                        video.play().catch(fallbackError => {
+                            if (this.debug) {
+                                console.error('🎬 Autoplay completely failed:', fallbackError);
+                            }
+                        });
+                    });
+                }
+            };
+            // 다양한 이벤트에서 자동 재생 시도
+            video.addEventListener('loadedmetadata', () => {
+                if (this.debug) {
+                    console.log('🎬 Video metadata loaded, attempting autoplay...');
+                }
+                attemptAutoplay();
+            });
+            video.addEventListener('canplay', () => {
+                if (this.debug) {
+                    console.log('🎬 Video can play, attempting autoplay...');
+                }
+                attemptAutoplay();
+            });
+            video.addEventListener('loadeddata', () => {
+                if (this.debug) {
+                    console.log('🎬 Video data loaded, attempting autoplay...');
+                }
+                attemptAutoplay();
+            });
+            // 비디오 로드 시작 즉시 한 번 시도
+            setTimeout(() => {
+                if (this.debug) {
+                    console.log('🎬 Initial autoplay attempt after timeout...');
+                }
+                attemptAutoplay();
+            }, 100);
+        }
+        else if (advertisement.imageUrl) {
+            // 비디오 URL이 없으면 이미지를 대체 표시
+            const img = document.createElement('img');
+            img.src = advertisement.imageUrl;
+            img.style.width = '100%';
+            img.style.height = '100%';
+            img.style.objectFit = 'contain';
+            img.alt = advertisement.title || 'Video thumbnail';
+            container.appendChild(img);
+            return;
+        }
+        // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+        AdClickHandler.addClickEventForRenderer(video, advertisement, slot, () => this.createEventTrackingCallback(), this.debug, 'Video');
+        // 비디오 로드 에러 처리
+        video.addEventListener('error', (e) => {
+            console.error('Video load failed:', e);
+            // 대체 이미지 표시
+            if (advertisement.imageUrl) {
+                const img = document.createElement('img');
+                img.src = advertisement.imageUrl;
+                img.style.width = '100%';
+                img.style.height = '100%';
+                img.style.objectFit = 'contain';
+                img.alt = advertisement.title || 'Video thumbnail';
+                // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+                AdClickHandler.addClickEventForRenderer(img, advertisement, slot, () => this.createEventTrackingCallback(), this.debug, 'Video fallback');
+                container.innerHTML = '';
+                container.appendChild(img);
+            }
+        });
+        // 비디오와 음소거 버튼을 컨테이너에 추가
+        container.appendChild(video);
+        container.appendChild(muteButton);
+        if (this.debug) {
+            console.log(`🎬 Video element created for ad: ${advertisement._id} (autoplay: ${video.autoplay}, muted: ${video.muted}, loop: ${video.loop})`);
+        }
+    }
+}
+
+/**
+ * 네이티브 광고 전용 렌더러
+ */
+class NativeAdRenderer extends BaseAdRenderer {
+    constructor(debug = false, advertisementEventTracker) {
+        super(AdType.NATIVE, debug, advertisementEventTracker);
+    }
+    /**
+     * 네이티브 광고 기본 높이
+     */
+    getDefaultHeight() {
+        return '200px';
+    }
+    /**
+     * 단일 네이티브 광고 렌더링
+     */
+    async renderAdElement(slot, advertisement) {
+        const container = document.getElementById(slot.containerId);
+        if (!container)
+            return;
+        const adElement = document.createElement('div');
+        adElement.className = 'adstage-ad adstage-native-ad';
+        adElement.style.cssText = `
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: 16px;
+      background: #fff;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    `;
+        // 제목
+        if (advertisement.title) {
+            const title = document.createElement('h3');
+            title.textContent = advertisement.title;
+            title.style.cssText = `
+        margin: 0 0 8px 0;
+        font-size: 16px;
+        font-weight: 600;
+        color: #111827;
+        line-height: 1.3;
+      `;
+            adElement.appendChild(title);
+        }
+        // 설명
+        if (advertisement.textContent) {
+            const description = document.createElement('p');
+            description.textContent = advertisement.textContent;
+            description.style.cssText = `
+        margin: 0 0 12px 0;
+        font-size: 14px;
+        color: #6b7280;
+        line-height: 1.4;
+        flex: 1;
+      `;
+            adElement.appendChild(description);
+        }
+        // 이미지 (있는 경우)
+        if (advertisement.imageUrl) {
+            const imageContainer = document.createElement('div');
+            imageContainer.style.cssText = `
+        width: 100%;
+        height: 120px;
+        margin-bottom: 12px;
+        border-radius: 6px;
+        overflow: hidden;
+        background: #f3f4f6;
+      `;
+            const img = document.createElement('img');
+            img.src = advertisement.imageUrl;
+            img.alt = advertisement.title || 'Native Advertisement';
+            img.style.cssText = `
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      `;
+            imageContainer.appendChild(img);
+            adElement.appendChild(imageContainer);
+        }
+        // CTA 버튼 (링크가 있는 경우)
+        if (advertisement.linkUrl) {
+            const ctaButton = document.createElement('button');
+            ctaButton.textContent = 'Learn More';
+            ctaButton.style.cssText = `
+        padding: 8px 16px;
+        background: #3b82f6;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        align-self: flex-start;
+        transition: background-color 0.2s;
+      `;
+            ctaButton.addEventListener('click', () => {
+                if (this.advertisementEventTracker) {
+                    console.log(`Native click tracked for ad: ${advertisement._id}`);
+                }
+                window.open(advertisement.linkUrl, '_blank');
+            });
+            ctaButton.addEventListener('mouseenter', () => {
+                ctaButton.style.backgroundColor = '#2563eb';
+            });
+            ctaButton.addEventListener('mouseleave', () => {
+                ctaButton.style.backgroundColor = '#3b82f6';
+            });
+            adElement.appendChild(ctaButton);
         }
-        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';
+        container.innerHTML = '';
+        container.appendChild(adElement);
+        if (this.debug) {
+            console.log(`🏠 Single native ad rendered: ${advertisement._id}`);
         }
-        return 'average';
     }
     /**
-     * 전략에 따른 최적 높이 계산
+     * 다중 네이티브 광고 렌더링 - 현재는 단일 렌더링만 지원
      */
-    calculateOptimalHeight(dimensions, containerWidth, strategy) {
-        const aspectRatios = dimensions.map(d => d.width / d.height);
-        switch (strategy) {
-            case 'dominant': {
-                const ratioGroups = new Map();
-                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.debug) {
-                    console.log(`📊 Using standard ratio: ${bestStandard.name} (avg: ${avgRatio.toFixed(2)})`);
-                }
-                return Math.round(containerWidth / bestStandard.ratio);
+    async renderMultipleAds(slot, advertisements) {
+        if (advertisements.length > 0) {
+            await this.renderAdElement(slot, advertisements[0]);
+            if (this.debug) {
+                console.log(`🏠 Native ad rendered (first of ${advertisements.length}): ${slot.id}`);
             }
-            case 'average':
-            default: {
-                const averageRatio = aspectRatios.reduce((sum, ratio) => sum + ratio, 0) / aspectRatios.length;
-                return Math.round(containerWidth / averageRatio);
+        }
+        else {
+            if (this.debug) {
+                console.warn(`⚠️ No native advertisements available for slot: ${slot.id}`);
             }
         }
     }
+}
+
+/**
+ * 전면광고 전용 렌더러
+ */
+class InterstitialAdRenderer extends BaseAdRenderer {
+    constructor(debug = false, advertisementEventTracker) {
+        super(AdType.INTERSTITIAL, debug, advertisementEventTracker);
+    }
     /**
-     * 배너 광고를 위한 컨테이너 최적화
+     * 전면광고 기본 높이 (크게 설정)
      */
-    async optimizeContainerForBannerAds(slot, advertisements) {
-        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.optimizedHeight = optimalSize.height;
-            slot.aspectRatio = optimalSize.aspectRatio;
-            if (this.debug) {
-                console.log(`🔧 Container optimized for ${advertisements.length} banner ads: ${optimalSize.height}`);
-            }
-        }
-        catch (error) {
-            console.warn('Container optimization failed, using default size:', error);
-        }
+    getDefaultHeight() {
+        return '400px';
     }
     /**
-     * 광고 슬라이더 렌더링 (여러 광고 또는 autoSlide 옵션)
+     * 단일 전면광고 렌더링
      */
-    async renderAdSlider(slot, advertisements) {
+    async renderAdElement(slot, advertisement) {
         const container = document.getElementById(slot.containerId);
-        if (!container) {
-            throw new Error(`Container not found: ${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);
         }
-        const trackEventCallback = async (adId, slotId, eventType) => {
-            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`);
+        // 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) => {
+            if (event.key === 'Escape') {
+                this.closeInterstitial(overlay);
+                document.removeEventListener('keydown', handleEscape);
             }
         };
-        let sliderElement;
-        const optimizedSliderOptions = {
-            autoSlideInterval: (slot.config?.slideInterval || 5000) / 1000,
-            ...slot.config,
-            optimizedHeight: slot.optimizedHeight,
-            aspectRatio: slot.aspectRatio
-        };
-        if (slot.adType === AdType.TEXT) {
-            sliderElement = TextTransitionManager.createTextTransitionContainer(slot, advertisements, optimizedSliderOptions, trackEventCallback);
+        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, advertisements) {
+        if (advertisements.length > 0) {
+            await this.renderAdElement(slot, advertisements[0]);
             if (this.debug) {
-                console.log(`✨ Text transition created for TEXT slot: ${slot.id} with ${advertisements.length} ads`);
+                console.log(`🖼️ Interstitial ad rendered (first of ${advertisements.length}): ${slot.id}`);
             }
         }
         else {
-            sliderElement = CarouselSliderManager.createSliderContainer(slot, advertisements, optimizedSliderOptions, trackEventCallback);
             if (this.debug) {
-                console.log(`🎠 Carousel slider created for ${slot.adType} slot: ${slot.id} with ${advertisements.length} ads (optimized: ${slot.optimizedHeight || 'default'})`);
+                console.warn(`⚠️ No interstitial advertisements available for slot: ${slot.id}`);
             }
         }
-        container.innerHTML = '';
-        container.appendChild(sliderElement);
+    }
+    /**
+     * 전면광고 닫기
+     */
+    closeInterstitial(overlay) {
+        overlay.style.animation = 'fadeOut 0.3s ease-out forwards';
+        // CSS 애니메이션이 없으면 즉시 제거
+        setTimeout(() => {
+            if (overlay.parentNode) {
+                overlay.parentNode.removeChild(overlay);
+            }
+        }, 300);
         if (this.debug) {
-            console.log(`� Slider uses manual VIEWABLE event tracking for ${advertisements.length} ads`);
+            console.log('🖼️ Interstitial ad closed');
         }
     }
+}
+
+/**
+ * AdRenderer - 광고 렌더링 팩토리 클래스
+ * 광고 타입별로 적절한 렌더러를 생성하고 관리
+ */
+class AdRenderer {
+    constructor(debug = false, advertisementEventTracker) {
+        this.renderers = new Map();
+        this.debug = debug;
+        this.advertisementEventTracker = advertisementEventTracker || null;
+        // 각 광고 타입별 렌더러 초기화
+        this.initializeRenderers();
+    }
     /**
-     * 광고 렌더링 (단일 광고용)
+     * 광고 타입별 렌더러 초기화
      */
-    async renderAd(slot) {
-        if (!slot.advertisement) {
-            throw new Error('No advertisement to render');
+    initializeRenderers() {
+        this.renderers.set(AdType.BANNER, new BannerAdRenderer(this.debug, this.advertisementEventTracker));
+        this.renderers.set(AdType.TEXT, new TextAdRenderer(this.debug, this.advertisementEventTracker));
+        this.renderers.set(AdType.VIDEO, new VideoAdRenderer(this.debug, this.advertisementEventTracker));
+        this.renderers.set(AdType.NATIVE, new NativeAdRenderer(this.debug, this.advertisementEventTracker));
+        this.renderers.set(AdType.INTERSTITIAL, new InterstitialAdRenderer(this.debug, this.advertisementEventTracker));
+        if (this.debug) {
+            console.log(`🏭 AdRenderer factory initialized with ${this.renderers.size} renderers`);
         }
-        await this.renderAdElement(slot, slot.advertisement);
-        slot.isLoaded = true;
     }
     /**
-     * 광고 요소 렌더링 (기본 구현)
+     * 광고 요소를 동기적으로 생성해서 반환 (크기 측정 등을 위한 helper)
      */
-    async renderAdElement(slot, ad) {
-        const container = document.getElementById(slot.containerId);
-        if (!container)
-            return;
+    createAdElement(slot, advertisement) {
+        const renderer = this.getRenderer(slot.adType);
+        // 기본 광고 요소 생성
         const adElement = document.createElement('div');
-        adElement.className = 'adstage-ad';
-        const optimizedHeight = slot.optimizedHeight;
-        const containerElement = container.parentElement || container;
-        if (optimizedHeight) {
-            adElement.style.width = '100%';
-            adElement.style.height = String(optimizedHeight);
-        }
-        else {
-            const { width, height } = this.calculateAdSize(containerElement, slot.adType, slot.config || {}, { debug: this.debug }) ||
-                { width: '100%', height: '250px' };
-            adElement.style.width = width;
-            adElement.style.height = height;
-        }
+        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);
+        // 광고 타입별 기본 컨테이너 설정
+        const { width, height } = renderer.calculateAdSize(adElement, slot.config || {}, advertisement);
+        adElement.style.width = width;
+        adElement.style.height = height;
+        adElement.style.display = 'block';
+        // 간단한 내용 설정 (크기 측정용)
         switch (slot.adType) {
             case AdType.BANNER:
-                if (ad.imageUrl) {
-                    await this.renderOptimizedBannerImage(adElement, ad, slot);
+                if (advertisement.imageUrl) {
+                    const img = document.createElement('img');
+                    img.src = advertisement.imageUrl;
+                    img.style.width = '100%';
+                    img.style.height = '100%';
+                    img.style.objectFit = 'cover';
+                    adElement.appendChild(img);
                 }
                 break;
-            case AdType.TEXT: {
-                const textDiv = document.createElement('div');
-                textDiv.innerHTML = `
-          ${ad.textContent ? `<div>${ad.textContent}</div>` : ''}
-        `;
-                adElement.appendChild(textDiv);
-                break;
-            }
             case AdType.VIDEO:
-                if (ad.videoUrl) {
+                if (advertisement.videoUrl) {
                     const video = document.createElement('video');
-                    video.src = ad.videoUrl;
-                    video.controls = true;
+                    video.src = advertisement.videoUrl;
                     video.style.width = '100%';
                     video.style.height = '100%';
                     adElement.appendChild(video);
                 }
                 break;
+            case AdType.TEXT:
+                if (advertisement.textContent) {
+                    const textDiv = document.createElement('div');
+                    textDiv.textContent = advertisement.textContent || '';
+                    textDiv.style.padding = '8px';
+                    adElement.appendChild(textDiv);
+                }
+                break;
             default:
-                adElement.innerHTML = `<div>${ad.title}</div>`;
-        }
-        if (ad.linkUrl) {
-            adElement.style.cursor = 'pointer';
-            adElement.addEventListener('click', () => {
-                window.open(ad.linkUrl, '_blank');
-            });
+                // 기본 placeholder
+                adElement.style.border = '1px dashed #ccc';
+                adElement.style.backgroundColor = '#f9f9f9';
+                adElement.textContent = `${slot.adType} Ad`;
         }
-        container.innerHTML = '';
-        container.appendChild(adElement);
+        return adElement;
     }
     /**
-     * Fallback 광고 렌더링 - 컨테이너 접기/생성
+     * 광고 타입에 따른 렌더러 획득
      */
-    renderFallback(slot) {
-        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.hasAttribute('data-adstage-container'));
-            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);
-            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];
-            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(`⚠️ Ad container collapsed (${containerType}): ${slot.id}`, targetContainer);
-                }
-            }
-            else {
-                this.createEmptyContainer(slot);
-            }
+    getRenderer(adType) {
+        const renderer = this.renderers.get(adType);
+        if (!renderer) {
+            throw new Error(`No renderer found for ad type: ${adType}`);
         }
-        slot.advertisement = undefined;
-        slot.isEmpty = true;
+        return renderer;
+    }
+    /**
+     * Placeholder(슬롯 컨테이너) 생성
+     */
+    createPlaceholder(container, slotId, type, options, config) {
+        const renderer = this.getRenderer(type);
+        renderer.createPlaceholder(container, slotId, options, config);
     }
     /**
-     * 빈 컨테이너 생성 (컨테이너를 찾지 못한 경우)
+     * 배너 광고를 위한 컨테이너 최적화 (배너 전용)
      */
-    createEmptyContainer(slot) {
-        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';
-            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);
+    async optimizeContainerForBannerAds(slot, advertisements) {
+        if (slot.adType !== AdType.BANNER) {
             if (this.debug) {
-                console.warn(`⚠️ Created empty AdStage container: ${slot.id}`);
+                console.warn(`⚠️ Container optimization is only supported for BANNER ads, got: ${slot.adType}`);
             }
+            return;
         }
+        const bannerRenderer = this.getRenderer(AdType.BANNER);
+        await bannerRenderer.optimizeContainerForBannerAds(slot, advertisements);
     }
     /**
-     * 광고 타입별 기본 높이 반환
+     * 광고 슬라이더 렌더링 (여러 광고 또는 autoSlide 옵션)
      */
-    getDefaultHeightForAdType(type) {
-        switch (type) {
-            case AdType.BANNER:
-                return '250px'; // 일반 배너
-            case AdType.TEXT:
-                return '60px'; // 텍스트는 좀 더 작게
-            case AdType.VIDEO:
-                return '360px'; // 비디오는 16:9 비율 고려
-            case AdType.NATIVE:
-                return '200px'; // 네이티브는 중간 크기
-            case AdType.INTERSTITIAL:
-                return '400px'; // 전면광고는 크게
-            default:
-                return '250px';
-        }
+    async renderAdSlider(slot, advertisements) {
+        const renderer = this.getRenderer(slot.adType);
+        await renderer.renderMultipleAds(slot, advertisements);
     }
     /**
-     * 컨테이너와 광고 타입에 따른 스마트한 크기 계산
+     * 광고 렌더링 (단일 광고용)
      */
-    calculateAdSize(container, type, options, config) {
-        // 사용자가 명시적으로 크기를 지정한 경우
-        const explicitWidth = options.width;
-        const explicitHeight = options.height;
-        // 너비 처리
-        let width;
-        if (typeof explicitWidth === 'number') {
-            width = `${explicitWidth}px`;
-        }
-        else if (typeof explicitWidth === 'string') {
-            width = explicitWidth;
-        }
-        else {
-            width = '100%'; // 기본값은 100%
-        }
-        // 높이 처리 - 핵심 로직
-        let height;
-        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) {
-                    console.log(`📏 Using 100% height (container: ${containerHeight}px)`);
-                }
-            }
-            else {
-                // 컨테이너에 높이가 없으면 타입별 기본값 사용 (나중에 동적 조정됨)
-                height = this.getDefaultHeightForAdType(type);
-                if (config?.debug) {
-                    console.log(`📏 Using default height ${height} (will be optimized for ${type})`);
-                }
-            }
+    async renderAd(slot) {
+        if (!slot.advertisement) {
+            throw new Error('No advertisement to render');
         }
-        return { width, height };
+        const renderer = this.getRenderer(slot.adType);
+        await renderer.renderAdElement(slot, slot.advertisement);
+        slot.isLoaded = true;
     }
     /**
-     * 컨테이너의 실제 높이 계산
+     * 광고 요소 렌더링 (기본 구현) - 호환성을 위해 유지
      */
-    getContainerHeight(container) {
-        // 현재 계산된 스타일에서 높이 확인
-        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;
+    async renderAdElement(slot, ad) {
+        const renderer = this.getRenderer(slot.adType);
+        await renderer.renderAdElement(slot, ad);
+    }
+    /**
+     * Fallback 광고 렌더링 - 컨테이너 접기/생성
+     */
+    renderFallback(slot) {
+        const renderer = this.getRenderer(slot.adType);
+        renderer.renderFallback(slot);
+    }
+    /**
+     * 광고 타입별 기본 높이 반환
+     */
+    getDefaultHeightForAdType(type) {
+        const renderer = this.getRenderer(type);
+        return renderer.getDefaultHeight();
+    }
+    /**
+     * 컨테이너와 광고 타입에 따른 스마트한 크기 계산
+     */
+    calculateAdSize(container, type, options, config) {
+        const renderer = this.getRenderer(type);
+        return renderer.calculateAdSize(container, options, config);
     }
     /**
-     * 이미지 로드 및 실제 크기 획득 (Promise 기반)
+     * 이미지 로드 및 실제 크기 획득 (배너 전용)
      */
     loadImageDimensions(imageUrl) {
         return new Promise((resolve, reject) => {
@@ -2259,118 +3196,36 @@ class AdRenderer {
         });
     }
     /**
-     * 이미지와 컨테이너 비율을 고려한 최적화 스타일 적용
+     * 배너 이미지 최적화 렌더링 (배너 전용)
      */
-    applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio) {
-        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.debug) {
-            console.log(`🎨 Image style applied: objectFit=${img.style.objectFit}, ratio=${ratio.toFixed(2)}`);
+    async renderOptimizedBannerImage(container, advertisement, slot) {
+        if (slot.adType !== AdType.BANNER) {
+            throw new Error('renderOptimizedBannerImage is only supported for BANNER ads');
         }
+        const bannerRenderer = this.getRenderer(AdType.BANNER);
+        return await bannerRenderer.renderOptimizedBannerImage(container, advertisement, slot);
     }
     /**
-     * 배너 이미지 최적화 렌더링
-     * 이미지 실제 크기를 로드한 후 컨테이너와 비율을 맞춤
+     * 여러 광고의 최적 컨테이너 크기 계산 (배너 전용)
      */
-    async renderOptimizedBannerImage(container, advertisement, slot) {
-        const img = document.createElement('img');
-        // 기본 스타일 설정
-        img.style.width = '100%';
-        img.style.height = '100%';
-        img.style.display = 'block';
-        img.style.borderRadius = '8px';
-        img.alt = advertisement.title || 'Advertisement';
-        // 이미지 로딩 상태 표시
-        container.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999;">Loading...</div>';
-        try {
-            // 이미지 URL 체크
-            if (!advertisement.imageUrl) {
-                throw new Error('Image URL is not provided');
-            }
-            // 🆕 이미지 실제 크기 로드
-            const imageDimensions = await this.loadImageDimensions(advertisement.imageUrl);
-            // 컨테이너 크기 정보
-            const containerRect = container.getBoundingClientRect();
-            const containerWidth = containerRect.width;
-            const containerHeight = containerRect.height;
-            if (this.debug) {
-                console.log(`📸 Image dimensions: ${imageDimensions.width}x${imageDimensions.height}`);
-                console.log(`📦 Container dimensions: ${containerWidth}x${containerHeight}`);
-            }
-            // 비율 계산
-            const imageAspectRatio = imageDimensions.width / imageDimensions.height;
-            const containerAspectRatio = containerWidth / containerHeight;
-            // 🆕 스마트 스타일 적용
-            this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
-            // 이미지 설정 및 추가
-            img.src = advertisement.imageUrl;
-            // 컨테이너 클리어 후 이미지 추가
-            container.innerHTML = '';
-            container.appendChild(img);
-            // 클릭 이벤트 등록
-            if (advertisement.linkUrl) {
-                img.style.cursor = 'pointer';
-                img.addEventListener('click', () => {
-                    if (this.advertisementEventTracker) {
-                        // AdvertisementEventTracker의 실제 메소드명을 확인해야 함
-                        console.log(`Click tracked for ad: ${advertisement._id}`);
-                    }
-                    window.open(advertisement.linkUrl, '_blank');
-                });
-            }
-            if (this.debug) {
-                console.log(`✅ Optimized banner image rendered for ad: ${advertisement._id}`);
-            }
-            return img;
-        }
-        catch (error) {
-            console.error('❌ Failed to load optimized banner image:', error);
-            // 폴백: 일반 이미지 렌더링
-            if (advertisement.imageUrl) {
-                img.src = advertisement.imageUrl;
-                img.style.objectFit = 'cover';
-                img.style.objectPosition = 'center';
-                container.innerHTML = '';
-                container.appendChild(img);
-                if (advertisement.linkUrl) {
-                    img.style.cursor = 'pointer';
-                    img.addEventListener('click', () => {
-                        if (this.advertisementEventTracker) {
-                            console.log(`Click tracked for ad: ${advertisement._id}`);
-                        }
-                        window.open(advertisement.linkUrl, '_blank');
-                    });
-                }
-            }
-            return img;
+    async calculateOptimalContainerSize(advertisements, containerWidth, adType) {
+        if (adType !== AdType.BANNER) {
+            const renderer = this.getRenderer(adType);
+            return {
+                width: '100%',
+                height: renderer.getDefaultHeight(),
+                aspectRatio: 16 / 9
+            };
         }
+        const bannerRenderer = this.getRenderer(AdType.BANNER);
+        return await bannerRenderer.calculateOptimalContainerSize(advertisements, containerWidth);
     }
     /**
      * 디버그 로그 출력
      */
     log(message, ...args) {
         if (this.debug) {
-            console.log(message, ...args);
+            console.log(`[AdRenderer] ${message}`, ...args);
         }
     }
 }
@@ -2388,6 +3243,8 @@ class AdsModule {
         this.advertisementEventTracker = null;
         // 렌더링 관련
         this.adRenderer = null;
+        // DOM 변화 감지를 위한 MutationObserver
+        this.mutationObserver = null;
     }
     /**
      * Ads 모듈 초기화 (동기)
@@ -2398,9 +3255,11 @@ class AdsModule {
         this.advertisementEventTracker = new AdvertisementEventTracker(endpoints.getBaseUrl(), config.apiKey, config.debug || false, this.slots);
         // AdRenderer 초기화
         this.adRenderer = new AdRenderer(config.debug || false, this.advertisementEventTracker);
+        // DOM 변화 감지를 위한 MutationObserver 설정
+        this.setupAutoCleanup();
         this._isReady = true;
         if (config.debug) {
-            console.log('🎯 Ads module initialized (sync mode)');
+            console.log('🎯 Ads module initialized (sync mode) with auto-cleanup');
         }
     }
     /**
@@ -2454,16 +3313,24 @@ class AdsModule {
         return this.createAd(containerId, AdType.TEXT, adstageOptions);
     }
     /**
-     * 비디오 광고 생성 (동기)
+     * 비디오 광고 생성 (동기) - 단일 비디오만 지원
      */
     video(containerId, options) {
         this.ensureReady();
         const adstageOptions = {
             width: options?.width || 640,
             height: options?.height || 360,
-            autoplay: options?.autoplay || false,
-            muted: options?.muted || true,
-            onClick: options?.onClick
+            autoplay: options?.autoplay !== undefined ? options.autoplay : true, // 기본값 true (사용자 요구사항)
+            muted: options?.muted !== undefined ? options.muted : true, // 기본값 true
+            loop: options?.loop !== undefined ? options.loop : true, // 기본값 true (사용자 요구사항)
+            playsinline: options?.playsinline !== false, // 기본값 true
+            controls: options?.controls !== undefined ? options.controls : false, // 기본값 false (사용자 요구사항)
+            hideControls: options?.hideControls || false,
+            customControls: options?.customControls,
+            autoSlide: false, // 비디오는 슬라이드 비활성화
+            maxAds: 1, // 하나의 비디오만 가져오기
+            onClick: options?.onClick,
+            ...(options?.adId && { adId: options.adId }) // 특정 비디오 ID가 있으면 사용
         };
         return this.createAd(containerId, AdType.VIDEO, adstageOptions);
     }
@@ -2541,12 +3408,58 @@ class AdsModule {
         if (!this._config?.apiKey) {
             throw new Error('API key not configured');
         }
-        const container = document.getElementById(containerId);
-        if (!container) {
-            throw new Error(`Container not found: ${containerId}`);
-        }
-        // 고유한 슬롯 ID 생성
+        // 즉시 슬롯 ID 생성 (개발자에게 바로 반환)
         const slotId = `adstage-${type}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        // 비동기로 광고 생성 처리 (디바운싱 및 재시도 로직 포함)
+        this.createAdWithRetry(containerId, type, options, slotId, 0);
+        return slotId;
+    }
+    async createAdWithRetry(containerId, type, options, slotId, attempt) {
+        const maxAttempts = 5;
+        const delays = [0, 50, 100, 200, 500]; // 점진적 지연
+        let container = null;
+        let containerIdString;
+        // HTMLElement인지 string인지 구분
+        if (typeof containerId === 'string') {
+            // string인 경우 DOM에서 찾기
+            containerIdString = containerId;
+            container = document.getElementById(containerId);
+            if (!container) {
+                if (attempt < maxAttempts - 1) {
+                    if (this._config?.debug) {
+                        console.warn(`Container not found: ${containerId}. Retrying in ${delays[attempt + 1]}ms... (attempt ${attempt + 1}/${maxAttempts})`);
+                    }
+                    setTimeout(() => {
+                        this.createAdWithRetry(containerId, type, options, slotId, attempt + 1);
+                    }, delays[attempt + 1]);
+                    return;
+                }
+                else {
+                    console.error(`Container not found after ${maxAttempts} attempts: ${containerId}`);
+                    return;
+                }
+            }
+        }
+        else {
+            // HTMLElement인 경우 직접 사용
+            container = containerId;
+            containerIdString = container.id || `auto-${slotId}`;
+            // ID가 없으면 자동 생성
+            if (!container.id) {
+                container.id = containerIdString;
+            }
+        }
+        // 컨테이너를 찾았으면 광고 생성
+        try {
+            this.createAdInternal(containerIdString, type, options, slotId, container);
+        }
+        catch (error) {
+            console.error('광고 생성 중 오류 발생:', error);
+        }
+    }
+    createAdInternal(containerId, type, options, slotId, container) {
+        // 컨테이너에 슬롯 ID 속성 추가 (MutationObserver가 감지할 수 있도록)
+        container.setAttribute('data-adstage-slot-id', slotId);
         // 즉시 placeholder 생성 (AdRenderer 위임)
         this.adRenderer?.createPlaceholder(container, slotId, type, options, this._config);
         // 광고 슬롯 정보 저장
@@ -2555,7 +3468,7 @@ class AdsModule {
             containerId,
             adType: type,
             width: options.width || '100%',
-            height: options.height || 250,
+            height: options.height || (type === AdType.TEXT ? 'auto' : 250), // 텍스트 광고는 콘텐츠 높이에 맞춤
             isLoaded: false,
             isVisible: false,
             refreshRate: 0,
@@ -2576,7 +3489,6 @@ class AdsModule {
         if (this.advertisementEventTracker && this._config?.debug) {
             console.log(`📊 Advertisement event tracking enabled for slot: ${slotId}`);
         }
-        return slotId;
     }
     /**
      * 백그라운드에서 광고 콘텐츠 로드
@@ -2757,6 +3669,98 @@ class AdsModule {
             throw new Error('Ads module not initialized. Call AdStage.init() first.');
         }
     }
+    /**
+     * DOM 변화 감지를 통한 자동 정리 설정
+     */
+    setupAutoCleanup() {
+        // 브라우저 환경에서만 실행
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            return;
+        }
+        // 기존 observer가 있으면 해제
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+        // 새로운 MutationObserver 생성
+        this.mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                // 제거된 노드들 확인
+                mutation.removedNodes.forEach((node) => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        this.handleRemovedElement(node);
+                    }
+                });
+            });
+        });
+        // document 전체를 관찰 (childList와 subtree 옵션 사용)
+        this.mutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+        if (this._config?.debug) {
+            console.log('🔍 Auto-cleanup MutationObserver enabled');
+        }
+    }
+    /**
+     * 제거된 요소에서 광고 슬롯 정리
+     */
+    handleRemovedElement(element) {
+        // 제거된 요소가 광고 컨테이너인지 확인
+        const slotId = element.getAttribute('data-adstage-slot-id');
+        if (slotId) {
+            this.autoDestroy(slotId);
+            return;
+        }
+        // 제거된 요소의 하위에 광고 컨테이너가 있는지 확인
+        const adContainers = element.querySelectorAll('[data-adstage-slot-id]');
+        adContainers.forEach((container) => {
+            const containerSlotId = container.getAttribute('data-adstage-slot-id');
+            if (containerSlotId) {
+                this.autoDestroy(containerSlotId);
+            }
+        });
+    }
+    /**
+     * 자동 정리 (로그 없이 조용히 정리)
+     */
+    autoDestroy(slotId) {
+        const slot = this.slots.get(slotId);
+        if (slot) {
+            try {
+                // 슬롯 정리 (로그 출력 최소화)
+                this.slots.delete(slotId);
+                if (this._config?.debug) {
+                    console.log(`🧹 Auto-cleanup: slot ${slotId} removed`);
+                }
+            }
+            catch (error) {
+                if (this._config?.debug) {
+                    console.warn(`Auto-cleanup failed for slot ${slotId}:`, error);
+                }
+            }
+        }
+    }
+    /**
+     * 모듈 종료 시 정리
+     */
+    destroyModule() {
+        const debugMode = this._config?.debug;
+        // MutationObserver 해제
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+        }
+        // 모든 슬롯 정리
+        this.slots.clear();
+        // 다른 리소스들 정리
+        this.advertisementEventTracker = null;
+        this.adRenderer = null;
+        this._isReady = false;
+        this._config = null;
+        if (debugMode) {
+            console.log('🗑️ Ads module destroyed');
+        }
+    }
 }
 
 /**
@@ -2778,10 +3782,6 @@ class ConfigModule {
             timeout: 30000,
             debug: false,
             modules: ['ads', 'events', 'config'],
-            validateOnInit: false,
-            fallbackMode: true,
-            offlineMode: false,
-            productionMode: false,
             ...config
         };
         // 사용자가 baseUrl을 제공한 경우 endpoints에 설정
@@ -2793,7 +3793,7 @@ class ConfigModule {
             console.log('✅ Config module initialized (sync mode)', {
                 modules: this._config.modules,
                 endpoint: endpoints.getBaseUrl(),
-                mode: config.productionMode ? 'production' : 'development'
+                mode: 'development'
             });
         }
     }
@@ -2979,10 +3979,6 @@ class AdStage {
             timeout: 30000,
             debug: false,
             modules: ['ads', 'events', 'config'],
-            validateOnInit: false,
-            fallbackMode: true,
-            offlineMode: false,
-            productionMode: false,
             ...config
         };
         // 🔧 baseUrl이 설정된 경우 전역 endpoints 객체 업데이트
@@ -3006,7 +4002,7 @@ class AdStage {
                 version: '2.0.0',
                 modules: enabledModules,
                 apiKey: config.apiKey.substring(0, 8) + '...',
-                mode: config.productionMode ? 'production' : 'development'
+                mode: 'development'
             });
         }
     }
@@ -3053,6 +4049,34 @@ class AdStage {
         }
     }
 }
+/**
+ * 디버그용 메서드들
+ */
+AdStage.debug = {
+    /**
+     * 모든 viewable 추적 데이터 초기화
+     */
+    clearAllViewable: () => {
+        ViewableEventTracker.clear();
+        console.log('✅ AdStage Debug: 모든 viewable 추적 데이터 초기화됨');
+    },
+    /**
+     * 특정 광고의 viewable 추적 초기화
+     */
+    clearAdViewable: (adId, slotId) => {
+        ViewableEventTracker.clearAdViewable(adId, slotId);
+        console.log(`✅ AdStage Debug: 광고 ${adId}(${slotId})의 viewable 추적 초기화됨`);
+    },
+    /**
+     * 현재 추적 중인 viewable 상태 확인
+     */
+    getViewableStatus: () => {
+        console.log('📊 AdStage Debug: 현재 viewable 추적 상태', {
+            trackedCount: ViewableEventTracker.viewableTracker.size,
+            trackedItems: Array.from(ViewableEventTracker.viewableTracker)
+        });
+    }
+};
 
 const AdStageContext = createContext(null);
 function AdStageProvider({ children, config }) {
@@ -3139,5 +4163,9 @@ function useAdStageInstance() {
 // 버전 정보
 const SDK_VERSION = '2.0.0';
 const SUPPORTED_MODULES = ['ads', 'events', 'config'];
+// 브라우저 환경에서 전역 객체로 노출 (디버깅용)
+if (typeof window !== 'undefined') {
+    window.AdStage = AdStage;
+}
 
 export { AdStage, AdStageProvider, SDK_VERSION, SUPPORTED_MODULES, useAdStageContext, useAdStageInstance };