@adstage/web-sdk 2.1.2 → 2.1.3

package/dist/index.esm.js

@@ -2219,8 +2219,10 @@ class AdsModule {
         adElement.setAttribute('data-adstage-container', 'true');
         adElement.setAttribute('data-adstage-type', type);
         adElement.setAttribute('data-adstage-slot', slotId);
-        adElement.style.width = typeof options.width === 'number' ? `${options.width}px` : (options.width || '100%');
-        adElement.style.height = typeof options.height === 'number' ? `${options.height}px` : (options.height || '250px');
+        // 스마트한 크기 설정
+        const { width, height } = this.calculateAdSize(container, type, options);
+        adElement.style.width = width;
+        adElement.style.height = height;
         adElement.style.border = '1px dashed #ccc';
         adElement.style.display = 'flex';
         adElement.style.alignItems = 'center';
@@ -2230,7 +2232,266 @@ class AdsModule {
         adElement.innerHTML = `<span>Loading ${type} ad...</span>`;
         container.appendChild(adElement);
         if (this._config?.debug) {
-            console.log(`📦 Placeholder created for slot: ${slotId}`);
+            console.log(`📦 Placeholder created for slot: ${slotId} (${width} x ${height})`);
+        }
+    }
+    /**
+     * 컨테이너와 광고 타입에 따른 스마트한 크기 계산
+     */
+    calculateAdSize(container, type, options) {
+        // 사용자가 명시적으로 크기를 지정한 경우
+        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%') {
+            height = explicitHeight;
+        }
+        else {
+            // 100%이거나 높이가 지정되지 않은 경우 스마트 계산
+            const containerHeight = this.getContainerHeight(container);
+            if (containerHeight > 0) {
+                // 컨테이너에 높이가 있으면 100% 사용
+                height = '100%';
+                if (this._config?.debug) {
+                    console.log(`📏 Using 100% height (container: ${containerHeight}px)`);
+                }
+            }
+            else {
+                // 컨테이너에 높이가 없으면 타입별 기본값 사용
+                height = this.getDefaultHeightForAdType(type);
+                if (this._config?.debug) {
+                    console.log(`📏 Using default height ${height} (no container height)`);
+                }
+            }
+        }
+        return { width, height };
+    }
+    /**
+     * 컨테이너의 실제 높이 계산
+     */
+    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;
+    }
+    /**
+     * 광고 타입별 기본 높이 반환
+     */
+    getDefaultHeightForAdType(type) {
+        switch (type) {
+            case AdType.BANNER:
+                return '250px'; // 일반 배너
+            case AdType.TEXT:
+                return '120px'; // 텍스트는 좀 더 작게
+            case AdType.VIDEO:
+                return '360px'; // 비디오는 16:9 비율 고려
+            case AdType.NATIVE:
+                return '200px'; // 네이티브는 중간 크기
+            case AdType.INTERSTITIAL:
+                return '400px'; // 전면광고는 크게
+            default:
+                return '250px';
+        }
+    }
+    /**
+     * 이미지 크기 정보 로드 (프리로딩)
+     */
+    async 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;
+        });
+    }
+    /**
+     * 여러 광고의 최적 컨테이너 크기 계산 (동적 크기 조정)
+     */
+    async calculateOptimalContainerSize(advertisements, containerWidth, adType) {
+        if (!advertisements.length || adType !== AdType.BANNER) {
+            // 배너가 아니거나 광고가 없으면 기본값
+            return {
+                width: '100%',
+                height: this.getDefaultHeightForAdType(adType),
+                aspectRatio: 16 / 9
+            };
+        }
+        try {
+            // 모든 배너 이미지의 크기 정보 로드
+            const imageDimensions = await Promise.allSettled(advertisements
+                .filter(ad => ad.imageUrl)
+                .map(ad => this.loadImageDimensions(ad.imageUrl)));
+            const validDimensions = imageDimensions
+                .filter((result) => result.status === 'fulfilled')
+                .map(result => result.value);
+            if (validDimensions.length === 0) {
+                // 이미지 로드 실패시 기본값
+                return {
+                    width: '100%',
+                    height: this.getDefaultHeightForAdType(adType),
+                    aspectRatio: 16 / 9
+                };
+            }
+            // 최적 전략 선택
+            const strategy = this.selectOptimalSizeStrategy(validDimensions);
+            const optimalHeight = this.calculateOptimalHeight(validDimensions, containerWidth, strategy);
+            if (this._config?.debug) {
+                console.log(`📐 Optimal container calculated: ${containerWidth}x${optimalHeight} (strategy: ${strategy})`);
+            }
+            return {
+                width: '100%',
+                height: `${optimalHeight}px`,
+                aspectRatio: containerWidth / optimalHeight
+            };
+        }
+        catch (error) {
+            console.warn('Failed to calculate optimal size, using defaults:', error);
+            return {
+                width: '100%',
+                height: this.getDefaultHeightForAdType(adType),
+                aspectRatio: 16 / 9
+            };
+        }
+    }
+    /**
+     * 최적 크기 조정 전략 선택
+     */
+    selectOptimalSizeStrategy(dimensions) {
+        const aspectRatios = dimensions.map(d => d.width / d.height);
+        // 1. 공통 비율이 있는지 확인 (±0.1 허용)
+        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;
+        // 70% 이상이 비슷한 비율이면 dominant 전략
+        if (maxGroup / totalImages >= 0.7) {
+            return 'dominant';
+        }
+        // 표준 비율들이 많으면 common 전략
+        const standardRatios = [16 / 9, 4 / 3, 1 / 1, 3 / 2];
+        const standardCount = aspectRatios.filter(ratio => standardRatios.some(standard => Math.abs(ratio - standard) < 0.1)).length;
+        if (standardCount / totalImages >= 0.5) {
+            return 'common';
+        }
+        // 기본은 평균 전략
+        return 'average';
+    }
+    /**
+     * 전략에 따른 최적 높이 계산
+     */
+    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._config?.debug) {
+                    console.log(`📊 Using standard ratio: ${bestStandard.name} (avg: ${avgRatio.toFixed(2)})`);
+                }
+                return Math.round(containerWidth / bestStandard.ratio);
+            case 'average':
+            default:
+                // 평균 비율 사용
+                const averageRatio = aspectRatios.reduce((sum, ratio) => sum + ratio, 0) / aspectRatios.length;
+                return Math.round(containerWidth / averageRatio);
+        }
+    }
+    /**
+     * 개별 이미지에 최적화된 렌더링 스타일 적용
+     */
+    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._config?.debug) {
+            console.log(`🎨 Image style applied: objectFit=${img.style.objectFit}, ratio=${ratio.toFixed(2)}`);
         }
     }
     /**
@@ -2244,6 +2505,10 @@ class AdsModule {
                 this.renderFallback(slot);
                 return;
             }
+            // 🆕 동적 크기 조정: 배너 광고의 경우 이미지 크기 기반으로 컨테이너 최적화
+            if (slot.adType === AdType.BANNER && adstageData.length > 0) {
+                await this.optimizeContainerForBannerAds(slot, adstageData);
+            }
             // 광고가 여러 개이거나 autoSlide 옵션이 있으면 슬라이더로 렌더링
             if (adstageData.length > 1 || slot.config?.autoSlide) {
                 await this.renderAdSlider(slot, adstageData);
@@ -2265,6 +2530,32 @@ class AdsModule {
             this.renderFallback(slot);
         }
     }
+    /**
+     * 배너 광고를 위한 컨테이너 최적화
+     */
+    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._config?.debug) {
+                console.log(`🔧 Container optimized for ${advertisements.length} banner ads: ${optimalSize.height}`);
+            }
+        }
+        catch (error) {
+            console.warn('Container optimization failed, using default size:', error);
+        }
+    }
     /**
      * 기본 viewability 추적 시작
      */
@@ -2487,23 +2778,25 @@ class AdsModule {
             }
         };
         let sliderElement;
+        // 최적화된 슬라이더 옵션 준비
+        const optimizedSliderOptions = {
+            autoSlideInterval: (slot.config?.slideInterval || 5000) / 1000,
+            ...slot.config,
+            // 🆕 동적 크기 정보 전달
+            optimizedHeight: slot.optimizedHeight,
+            aspectRatio: slot.aspectRatio
+        };
         // 텍스트 광고는 TextTransitionManager 사용, 그 외는 CarouselSliderManager 사용
         if (slot.adType === AdType.TEXT) {
-            sliderElement = TextTransitionManager.createTextTransitionContainer(slot, advertisements, {
-                autoSlideInterval: (slot.config?.slideInterval || 5000) / 1000,
-                ...slot.config
-            }, trackEventCallback);
+            sliderElement = TextTransitionManager.createTextTransitionContainer(slot, advertisements, optimizedSliderOptions, trackEventCallback);
             if (this._config?.debug) {
                 console.log(`✨ Text transition created for TEXT slot: ${slot.id} with ${advertisements.length} ads`);
             }
         }
         else {
-            sliderElement = CarouselSliderManager.createSliderContainer(slot, advertisements, {
-                autoSlideInterval: (slot.config?.slideInterval || 5000) / 1000,
-                ...slot.config
-            }, trackEventCallback);
+            sliderElement = CarouselSliderManager.createSliderContainer(slot, advertisements, optimizedSliderOptions, trackEventCallback);
             if (this._config?.debug) {
-                console.log(`🎠 Carousel slider created for ${slot.adType} slot: ${slot.id} with ${advertisements.length} ads`);
+                console.log(`🎠 Carousel slider created for ${slot.adType} slot: ${slot.id} with ${advertisements.length} ads (optimized: ${slot.optimizedHeight || 'default'})`);
             }
         }
         // 기존 내용 제거하고 슬라이더 추가
@@ -2530,19 +2823,23 @@ class AdsModule {
         // 기본 HTML 구조 생성
         const adElement = document.createElement('div');
         adElement.className = 'adstage-ad';
-        adElement.style.width = typeof slot.width === 'string' ? slot.width : `${slot.width}px`;
-        adElement.style.height = typeof slot.height === 'string' ? slot.height : `${slot.height}px`;
+        // 스마트한 크기 설정 - 최적화된 크기가 있으면 사용
+        const optimizedHeight = slot.optimizedHeight;
+        const containerElement = container.parentElement || container;
+        if (optimizedHeight) {
+            adElement.style.width = '100%';
+            adElement.style.height = optimizedHeight;
+        }
+        else {
+            const { width, height } = this.calculateAdSize(containerElement, slot.adType, slot.config || {});
+            adElement.style.width = width;
+            adElement.style.height = height;
+        }
         // 광고 타입별 렌더링
         switch (slot.adType) {
             case AdType.BANNER:
                 if (ad.imageUrl) {
-                    const img = document.createElement('img');
-                    img.src = ad.imageUrl;
-                    img.alt = ad.title;
-                    img.style.width = '100%';
-                    img.style.height = '100%';
-                    img.style.objectFit = 'cover';
-                    adElement.appendChild(img);
+                    await this.renderOptimizedBannerImage(adElement, ad, slot);
                 }
                 break;
             case AdType.TEXT:
@@ -2577,6 +2874,50 @@ class AdsModule {
         container.innerHTML = '';
         container.appendChild(adElement);
     }
+    /**
+     * 최적화된 배너 이미지 렌더링
+     */
+    async renderOptimizedBannerImage(adElement, ad, slot) {
+        try {
+            // 이미지 크기 정보 로드
+            const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
+            const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+            // 컨테이너 비율 계산
+            const containerAspectRatio = slot.aspectRatio || 16 / 9;
+            // 이미지 요소 생성
+            const img = document.createElement('img');
+            img.src = ad.imageUrl;
+            img.alt = ad.title;
+            img.style.width = '100%';
+            img.style.height = '100%';
+            // 🎨 최적화된 스타일 적용
+            this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+            // 이미지 로드 완료 처리
+            img.onload = () => {
+                if (this._config?.debug) {
+                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+                }
+            };
+            // 에러 처리
+            img.onerror = () => {
+                console.warn(`Failed to load banner image: ${ad.imageUrl}`);
+                // 폴백 텍스트 표시
+                adElement.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; background: #f0f0f0; color: #666;">${ad.title}</div>`;
+            };
+            adElement.appendChild(img);
+        }
+        catch (error) {
+            console.warn('Failed to optimize banner image, using fallback:', error);
+            // 기본 이미지 렌더링 (폴백)
+            const img = document.createElement('img');
+            img.src = ad.imageUrl;
+            img.alt = ad.title;
+            img.style.width = '100%';
+            img.style.height = '100%';
+            img.style.objectFit = 'cover';
+            adElement.appendChild(img);
+        }
+    }
     /**
      * 광고 슬롯 새로고침
      */