@adstage/web-sdk 2.1.0 → 2.1.2

package/dist/index.cjs.js

@@ -2217,6 +2217,10 @@ class AdsModule {
         const adElement = document.createElement('div');
         adElement.id = slotId;
         adElement.className = `adstage-slot adstage-${type.toLowerCase()}`;
+        // 확실한 컨테이너 식별을 위한 데이터 속성 추가
+        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');
         adElement.style.border = '1px dashed #ccc';
@@ -2314,22 +2318,110 @@ class AdsModule {
         }
     }
     /**
-     * Fallback 광고 렌더링 - DOM에서 완전 제거
+     * Fallback 광고 렌더링 - AdStage 확실한 컨테이너 우선 탐지
      */
     renderFallback(slot) {
         const element = document.getElementById(slot.id);
         if (element) {
-            // 부모 컨테이너에서 광고 슬롯을 완전히 제거
-            const parentContainer = element.parentNode;
-            if (parentContainer) {
-                parentContainer.removeChild(element);
+            // 1순위: AdStage가 생성한 확실한 컨테이너들 (데이터 속성 기반)
+            const adstageContainers = [
+                element.querySelector('[data-adstage-container="true"]'), // 내부 AdStage 컨테이너
+                element.closest('[data-adstage-container="true"]'), // 상위 AdStage 컨테이너
+                element, // 자기 자신이 AdStage 컨테이너인 경우
+            ].filter(el => el && el.hasAttribute('data-adstage-container'));
+            // 2순위: AdStage 클래스 기반 컨테이너들
+            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);
+            // 3순위: 일반적인 광고 컨테이너 패턴들 (fallback)
+            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._config?.debug) {
-                    console.warn(`⚠️ Ad slot completely removed from DOM: ${slot.id}`);
+                    console.warn(`⚠️ Ad 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 = '';
+            // 빈 AdStage 컨테이너 생성
+            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);
+            if (this._config?.debug) {
+                console.warn(`⚠️ Created empty AdStage container: ${slot.id}`);
+            }
         }
-        // 슬롯 맵에서도 제거
-        this.slots.delete(slot.id);
     }
     /**
      * 광고 데이터 가져오기

package/dist/index.d.ts

@@ -295,9 +295,13 @@ declare class AdsModule implements BaseModule {
      */
     private handleViewableEvent;
     /**
-     * Fallback 광고 렌더링 - DOM에서 완전 제거
+     * Fallback 광고 렌더링 - AdStage 확실한 컨테이너 우선 탐지
      */
     private renderFallback;
+    /**
+     * 빈 컨테이너 생성 (컨테이너를 찾지 못한 경우)
+     */
+    private createEmptyContainer;
     /**
      * 광고 데이터 가져오기
      */

package/dist/index.esm.js

@@ -2215,6 +2215,10 @@ class AdsModule {
         const adElement = document.createElement('div');
         adElement.id = slotId;
         adElement.className = `adstage-slot adstage-${type.toLowerCase()}`;
+        // 확실한 컨테이너 식별을 위한 데이터 속성 추가
+        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');
         adElement.style.border = '1px dashed #ccc';
@@ -2312,22 +2316,110 @@ class AdsModule {
         }
     }
     /**
-     * Fallback 광고 렌더링 - DOM에서 완전 제거
+     * Fallback 광고 렌더링 - AdStage 확실한 컨테이너 우선 탐지
      */
     renderFallback(slot) {
         const element = document.getElementById(slot.id);
         if (element) {
-            // 부모 컨테이너에서 광고 슬롯을 완전히 제거
-            const parentContainer = element.parentNode;
-            if (parentContainer) {
-                parentContainer.removeChild(element);
+            // 1순위: AdStage가 생성한 확실한 컨테이너들 (데이터 속성 기반)
+            const adstageContainers = [
+                element.querySelector('[data-adstage-container="true"]'), // 내부 AdStage 컨테이너
+                element.closest('[data-adstage-container="true"]'), // 상위 AdStage 컨테이너
+                element, // 자기 자신이 AdStage 컨테이너인 경우
+            ].filter(el => el && el.hasAttribute('data-adstage-container'));
+            // 2순위: AdStage 클래스 기반 컨테이너들
+            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);
+            // 3순위: 일반적인 광고 컨테이너 패턴들 (fallback)
+            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._config?.debug) {
-                    console.warn(`⚠️ Ad slot completely removed from DOM: ${slot.id}`);
+                    console.warn(`⚠️ Ad 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 = '';
+            // 빈 AdStage 컨테이너 생성
+            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);
+            if (this._config?.debug) {
+                console.warn(`⚠️ Created empty AdStage container: ${slot.id}`);
+            }
         }
-        // 슬롯 맵에서도 제거
-        this.slots.delete(slot.id);
     }
     /**
      * 광고 데이터 가져오기

package/dist/index.standalone.js

@@ -2215,6 +2215,10 @@ class AdsModule {
         const adElement = document.createElement('div');
         adElement.id = slotId;
         adElement.className = `adstage-slot adstage-${type.toLowerCase()}`;
+        // 확실한 컨테이너 식별을 위한 데이터 속성 추가
+        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');
         adElement.style.border = '1px dashed #ccc';
@@ -2312,22 +2316,110 @@ class AdsModule {
         }
     }
     /**
-     * Fallback 광고 렌더링 - DOM에서 완전 제거
+     * Fallback 광고 렌더링 - AdStage 확실한 컨테이너 우선 탐지
      */
     renderFallback(slot) {
         const element = document.getElementById(slot.id);
         if (element) {
-            // 부모 컨테이너에서 광고 슬롯을 완전히 제거
-            const parentContainer = element.parentNode;
-            if (parentContainer) {
-                parentContainer.removeChild(element);
+            // 1순위: AdStage가 생성한 확실한 컨테이너들 (데이터 속성 기반)
+            const adstageContainers = [
+                element.querySelector('[data-adstage-container="true"]'), // 내부 AdStage 컨테이너
+                element.closest('[data-adstage-container="true"]'), // 상위 AdStage 컨테이너
+                element, // 자기 자신이 AdStage 컨테이너인 경우
+            ].filter(el => el && el.hasAttribute('data-adstage-container'));
+            // 2순위: AdStage 클래스 기반 컨테이너들
+            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);
+            // 3순위: 일반적인 광고 컨테이너 패턴들 (fallback)
+            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._config?.debug) {
-                    console.warn(`⚠️ Ad slot completely removed from DOM: ${slot.id}`);
+                    console.warn(`⚠️ Ad 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 = '';
+            // 빈 AdStage 컨테이너 생성
+            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);
+            if (this._config?.debug) {
+                console.warn(`⚠️ Created empty AdStage container: ${slot.id}`);
+            }
         }
-        // 슬롯 맵에서도 제거
-        this.slots.delete(slot.id);
     }
     /**
      * 광고 데이터 가져오기

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adstage/web-sdk",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "AdStage Web SDK - Production-ready marketing platform SDK with namespace architecture for ads, events, and config management",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/modules/ads/AdsModule.ts

@@ -279,6 +279,11 @@ export class AdsModule implements BaseModule {
     const adElement = document.createElement('div');
     adElement.id = slotId;
     adElement.className = `adstage-slot adstage-${type.toLowerCase()}`;
+    // 확실한 컨테이너 식별을 위한 데이터 속성 추가
+    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');
     adElement.style.border = '1px dashed #ccc';
@@ -401,24 +406,122 @@ export class AdsModule implements BaseModule {
   }
 
   /**
-   * Fallback 광고 렌더링 - DOM에서 완전 제거
+   * Fallback 광고 렌더링 - AdStage 확실한 컨테이너 우선 탐지
    */
   private renderFallback(slot: AdSlot): void {
     const element = document.getElementById(slot.id);
     if (element) {
-      // 부모 컨테이너에서 광고 슬롯을 완전히 제거
-      const parentContainer = element.parentNode;
-      if (parentContainer) {
-        parentContainer.removeChild(element);
+      // 1순위: AdStage가 생성한 확실한 컨테이너들 (데이터 속성 기반)
+      const adstageContainers = [
+        element.querySelector('[data-adstage-container="true"]'), // 내부 AdStage 컨테이너
+        element.closest('[data-adstage-container="true"]'), // 상위 AdStage 컨테이너
+        element, // 자기 자신이 AdStage 컨테이너인 경우
+      ].filter(el => el && el.hasAttribute('data-adstage-container'));
+
+      // 2순위: AdStage 클래스 기반 컨테이너들
+      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);
+
+      // 3순위: 일반적인 광고 컨테이너 패턴들 (fallback)
+      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] as HTMLElement;
+      
+      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._config?.debug) {
-          console.warn(`⚠️ Ad slot completely removed from DOM: ${slot.id}`);
+          console.warn(`⚠️ Ad container collapsed (${containerType}): ${slot.id}`, targetContainer);
         }
+      } else {
+        // 컨테이너를 찾지 못한 경우 새로운 빈 컨테이너 생성
+        this.createEmptyContainer(slot);
       }
     }
     
-    // 슬롯 맵에서도 제거
-    this.slots.delete(slot.id);
+    // 슬롯 상태 업데이트 (제거하지 않고 빈 상태로 마킹)
+    slot.advertisement = undefined;
+    (slot as any).isEmpty = true;
+  }
+
+  /**
+   * 빈 컨테이너 생성 (컨테이너를 찾지 못한 경우)
+   */
+  private createEmptyContainer(slot: AdSlot): void {
+    const originalContainer = document.getElementById(slot.containerId);
+    if (originalContainer) {
+      // 기존 내용 제거
+      originalContainer.innerHTML = '';
+      
+      // 빈 AdStage 컨테이너 생성
+      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);
+      
+      if (this._config?.debug) {
+        console.warn(`⚠️ Created empty AdStage container: ${slot.id}`);
+      }
+    }
   }
 
   /**