@adstage/web-sdk 1.3.2 → 1.3.3

package/dist/index.cjs.js

@@ -1852,29 +1852,53 @@ class AdStageSDK {
                 ...(options?.deviceType && { deviceType: options.deviceType }),
                 ...(options?.country && { country: options.country }),
             });
-            const response = await fetch(`${this.baseUrl}/advertisements/list?${queryParams}`, {
+            const requestUrl = `${this.baseUrl}/advertisements/list?${queryParams}`;
+            if (this.config.debug) {
+                console.log(`🌐 광고 API 요청 시작:`, {
+                    url: requestUrl,
+                    apiKey: this.config.apiKey.substring(0, 10) + '...',
+                    slot: slot.id
+                });
+            }
+            const response = await fetch(requestUrl, {
                 headers: {
                     'x-api-key': this.config.apiKey,
                     'Content-Type': 'application/json',
                 },
             });
+            if (this.config.debug) {
+                console.log(`📡 API 응답 상태:`, {
+                    status: response.status,
+                    statusText: response.statusText,
+                    ok: response.ok
+                });
+            }
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
             const data = await response.json();
+            if (this.config.debug) {
+                console.log(`📊 API 응답 데이터:`, {
+                    data,
+                    advertisementsCount: data.advertisements ? data.advertisements.length : 0
+                });
+            }
             const advertisements = data.advertisements || [];
             if (advertisements.length > 0) {
+                if (this.config.debug) {
+                    console.log(`✅ ${advertisements.length}개 광고 발견:`, advertisements);
+                }
                 // 여러 광고가 있을 경우 슬라이드로 렌더링
                 this.renderSlotWithSlider(slot, advertisements, options);
                 // 첫 번째 광고에 대해서만 노출 이벤트 추적
                 await this.eventTracker.trackEvent(advertisements[0]._id, slot.id, exports.AdEventType.IMPRESSION);
             }
             else {
-                console.warn(`No advertisements available for slot ${slot.id}`);
+                console.warn(`⚠️ 슬롯 ${slot.id}에 사용 가능한 광고가 없습니다. API 응답:`, data);
             }
         }
         catch (error) {
-            console.error(`Failed to load slot ${slot.id}:`, error);
+            console.error(`❌ 슬롯 ${slot.id} 로드 실패:`, error);
         }
     }
     /**
@@ -1882,8 +1906,18 @@ class AdStageSDK {
      */
     renderSlotWithSlider(slot, advertisements, options) {
         const container = DOMUtils.safeGetElementById(slot.containerId);
-        if (!container)
+        if (!container) {
+            console.error(`❌ 컨테이너를 찾을 수 없습니다: ${slot.containerId}`);
             return;
+        }
+        if (this.config.debug) {
+            console.log(`🎨 광고 렌더링 시작:`, {
+                slotId: slot.id,
+                containerId: slot.containerId,
+                advertisementCount: advertisements.length,
+                container: container
+            });
+        }
         if (advertisements.length === 1) {
             // 광고가 하나뿐이면 기본 렌더링
             this.renderSlot(slot, advertisements[0]);
@@ -1907,7 +1941,11 @@ class AdStageSDK {
         slot.isLoaded = true;
         if (this.config.debug) {
             const sliderType = useFadeEffect ? 'fade slider' : 'slider';
-            console.log(`Rendered ${advertisements.length} ads with ${sliderType} for slot ${slot.id}:`, advertisements);
+            console.log(`✅ ${advertisements.length}개 광고를 ${sliderType}로 렌더링 완료:`, {
+                slotId: slot.id,
+                container: container,
+                sliderContainer: sliderContainer
+            });
         }
     }
     /**
@@ -1915,15 +1953,36 @@ class AdStageSDK {
      */
     renderSlot(slot, ad) {
         const container = DOMUtils.safeGetElementById(slot.containerId);
-        if (!container)
+        if (!container) {
+            console.error(`❌ 컨테이너를 찾을 수 없습니다: ${slot.containerId}`);
             return;
+        }
+        if (this.config.debug) {
+            console.log(`🎨 단일 광고 렌더링 시작:`, {
+                slotId: slot.id,
+                containerId: slot.containerId,
+                ad: ad,
+                container: container
+            });
+        }
         // 팩토리를 사용해서 적절한 렌더러로 광고 생성
         const adElement = AdRendererFactory.render(ad, slot, (adId, slotId, eventType) => this.eventTracker.trackEvent(adId, slotId, eventType));
+        if (this.config.debug) {
+            console.log(`🔧 광고 요소 생성됨:`, {
+                adElement: adElement,
+                tagName: adElement.tagName,
+                innerHTML: adElement.innerHTML.substring(0, 200) + '...'
+            });
+        }
         container.innerHTML = '';
         container.appendChild(adElement);
         slot.isLoaded = true;
         if (this.config.debug) {
-            console.log(`Rendered ad for slot ${slot.id}:`, ad);
+            console.log(`✅ 단일 광고 렌더링 완료:`, {
+                slotId: slot.id,
+                ad: ad,
+                containerContent: container.innerHTML.substring(0, 200) + '...'
+            });
         }
     }
     /**

package/dist/index.esm.js

@@ -1848,29 +1848,53 @@ class AdStageSDK {
                 ...(options?.deviceType && { deviceType: options.deviceType }),
                 ...(options?.country && { country: options.country }),
             });
-            const response = await fetch(`${this.baseUrl}/advertisements/list?${queryParams}`, {
+            const requestUrl = `${this.baseUrl}/advertisements/list?${queryParams}`;
+            if (this.config.debug) {
+                console.log(`🌐 광고 API 요청 시작:`, {
+                    url: requestUrl,
+                    apiKey: this.config.apiKey.substring(0, 10) + '...',
+                    slot: slot.id
+                });
+            }
+            const response = await fetch(requestUrl, {
                 headers: {
                     'x-api-key': this.config.apiKey,
                     'Content-Type': 'application/json',
                 },
             });
+            if (this.config.debug) {
+                console.log(`📡 API 응답 상태:`, {
+                    status: response.status,
+                    statusText: response.statusText,
+                    ok: response.ok
+                });
+            }
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
             const data = await response.json();
+            if (this.config.debug) {
+                console.log(`📊 API 응답 데이터:`, {
+                    data,
+                    advertisementsCount: data.advertisements ? data.advertisements.length : 0
+                });
+            }
             const advertisements = data.advertisements || [];
             if (advertisements.length > 0) {
+                if (this.config.debug) {
+                    console.log(`✅ ${advertisements.length}개 광고 발견:`, advertisements);
+                }
                 // 여러 광고가 있을 경우 슬라이드로 렌더링
                 this.renderSlotWithSlider(slot, advertisements, options);
                 // 첫 번째 광고에 대해서만 노출 이벤트 추적
                 await this.eventTracker.trackEvent(advertisements[0]._id, slot.id, AdEventType.IMPRESSION);
             }
             else {
-                console.warn(`No advertisements available for slot ${slot.id}`);
+                console.warn(`⚠️ 슬롯 ${slot.id}에 사용 가능한 광고가 없습니다. API 응답:`, data);
             }
         }
         catch (error) {
-            console.error(`Failed to load slot ${slot.id}:`, error);
+            console.error(`❌ 슬롯 ${slot.id} 로드 실패:`, error);
         }
     }
     /**
@@ -1878,8 +1902,18 @@ class AdStageSDK {
      */
     renderSlotWithSlider(slot, advertisements, options) {
         const container = DOMUtils.safeGetElementById(slot.containerId);
-        if (!container)
+        if (!container) {
+            console.error(`❌ 컨테이너를 찾을 수 없습니다: ${slot.containerId}`);
             return;
+        }
+        if (this.config.debug) {
+            console.log(`🎨 광고 렌더링 시작:`, {
+                slotId: slot.id,
+                containerId: slot.containerId,
+                advertisementCount: advertisements.length,
+                container: container
+            });
+        }
         if (advertisements.length === 1) {
             // 광고가 하나뿐이면 기본 렌더링
             this.renderSlot(slot, advertisements[0]);
@@ -1903,7 +1937,11 @@ class AdStageSDK {
         slot.isLoaded = true;
         if (this.config.debug) {
             const sliderType = useFadeEffect ? 'fade slider' : 'slider';
-            console.log(`Rendered ${advertisements.length} ads with ${sliderType} for slot ${slot.id}:`, advertisements);
+            console.log(`✅ ${advertisements.length}개 광고를 ${sliderType}로 렌더링 완료:`, {
+                slotId: slot.id,
+                container: container,
+                sliderContainer: sliderContainer
+            });
         }
     }
     /**
@@ -1911,15 +1949,36 @@ class AdStageSDK {
      */
     renderSlot(slot, ad) {
         const container = DOMUtils.safeGetElementById(slot.containerId);
-        if (!container)
+        if (!container) {
+            console.error(`❌ 컨테이너를 찾을 수 없습니다: ${slot.containerId}`);
             return;
+        }
+        if (this.config.debug) {
+            console.log(`🎨 단일 광고 렌더링 시작:`, {
+                slotId: slot.id,
+                containerId: slot.containerId,
+                ad: ad,
+                container: container
+            });
+        }
         // 팩토리를 사용해서 적절한 렌더러로 광고 생성
         const adElement = AdRendererFactory.render(ad, slot, (adId, slotId, eventType) => this.eventTracker.trackEvent(adId, slotId, eventType));
+        if (this.config.debug) {
+            console.log(`🔧 광고 요소 생성됨:`, {
+                adElement: adElement,
+                tagName: adElement.tagName,
+                innerHTML: adElement.innerHTML.substring(0, 200) + '...'
+            });
+        }
         container.innerHTML = '';
         container.appendChild(adElement);
         slot.isLoaded = true;
         if (this.config.debug) {
-            console.log(`Rendered ad for slot ${slot.id}:`, ad);
+            console.log(`✅ 단일 광고 렌더링 완료:`, {
+                slotId: slot.id,
+                ad: ad,
+                containerContent: container.innerHTML.substring(0, 200) + '...'
+            });
         }
     }
     /**

package/dist/index.standalone.js

@@ -1848,29 +1848,53 @@ class AdStageSDK {
                 ...(options?.deviceType && { deviceType: options.deviceType }),
                 ...(options?.country && { country: options.country }),
             });
-            const response = await fetch(`${this.baseUrl}/advertisements/list?${queryParams}`, {
+            const requestUrl = `${this.baseUrl}/advertisements/list?${queryParams}`;
+            if (this.config.debug) {
+                console.log(`🌐 광고 API 요청 시작:`, {
+                    url: requestUrl,
+                    apiKey: this.config.apiKey.substring(0, 10) + '...',
+                    slot: slot.id
+                });
+            }
+            const response = await fetch(requestUrl, {
                 headers: {
                     'x-api-key': this.config.apiKey,
                     'Content-Type': 'application/json',
                 },
             });
+            if (this.config.debug) {
+                console.log(`📡 API 응답 상태:`, {
+                    status: response.status,
+                    statusText: response.statusText,
+                    ok: response.ok
+                });
+            }
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
             const data = await response.json();
+            if (this.config.debug) {
+                console.log(`📊 API 응답 데이터:`, {
+                    data,
+                    advertisementsCount: data.advertisements ? data.advertisements.length : 0
+                });
+            }
             const advertisements = data.advertisements || [];
             if (advertisements.length > 0) {
+                if (this.config.debug) {
+                    console.log(`✅ ${advertisements.length}개 광고 발견:`, advertisements);
+                }
                 // 여러 광고가 있을 경우 슬라이드로 렌더링
                 this.renderSlotWithSlider(slot, advertisements, options);
                 // 첫 번째 광고에 대해서만 노출 이벤트 추적
                 await this.eventTracker.trackEvent(advertisements[0]._id, slot.id, AdEventType.IMPRESSION);
             }
             else {
-                console.warn(`No advertisements available for slot ${slot.id}`);
+                console.warn(`⚠️ 슬롯 ${slot.id}에 사용 가능한 광고가 없습니다. API 응답:`, data);
             }
         }
         catch (error) {
-            console.error(`Failed to load slot ${slot.id}:`, error);
+            console.error(`❌ 슬롯 ${slot.id} 로드 실패:`, error);
         }
     }
     /**
@@ -1878,8 +1902,18 @@ class AdStageSDK {
      */
     renderSlotWithSlider(slot, advertisements, options) {
         const container = DOMUtils.safeGetElementById(slot.containerId);
-        if (!container)
+        if (!container) {
+            console.error(`❌ 컨테이너를 찾을 수 없습니다: ${slot.containerId}`);
             return;
+        }
+        if (this.config.debug) {
+            console.log(`🎨 광고 렌더링 시작:`, {
+                slotId: slot.id,
+                containerId: slot.containerId,
+                advertisementCount: advertisements.length,
+                container: container
+            });
+        }
         if (advertisements.length === 1) {
             // 광고가 하나뿐이면 기본 렌더링
             this.renderSlot(slot, advertisements[0]);
@@ -1903,7 +1937,11 @@ class AdStageSDK {
         slot.isLoaded = true;
         if (this.config.debug) {
             const sliderType = useFadeEffect ? 'fade slider' : 'slider';
-            console.log(`Rendered ${advertisements.length} ads with ${sliderType} for slot ${slot.id}:`, advertisements);
+            console.log(`✅ ${advertisements.length}개 광고를 ${sliderType}로 렌더링 완료:`, {
+                slotId: slot.id,
+                container: container,
+                sliderContainer: sliderContainer
+            });
         }
     }
     /**
@@ -1911,15 +1949,36 @@ class AdStageSDK {
      */
     renderSlot(slot, ad) {
         const container = DOMUtils.safeGetElementById(slot.containerId);
-        if (!container)
+        if (!container) {
+            console.error(`❌ 컨테이너를 찾을 수 없습니다: ${slot.containerId}`);
             return;
+        }
+        if (this.config.debug) {
+            console.log(`🎨 단일 광고 렌더링 시작:`, {
+                slotId: slot.id,
+                containerId: slot.containerId,
+                ad: ad,
+                container: container
+            });
+        }
         // 팩토리를 사용해서 적절한 렌더러로 광고 생성
         const adElement = AdRendererFactory.render(ad, slot, (adId, slotId, eventType) => this.eventTracker.trackEvent(adId, slotId, eventType));
+        if (this.config.debug) {
+            console.log(`🔧 광고 요소 생성됨:`, {
+                adElement: adElement,
+                tagName: adElement.tagName,
+                innerHTML: adElement.innerHTML.substring(0, 200) + '...'
+            });
+        }
         container.innerHTML = '';
         container.appendChild(adElement);
         slot.isLoaded = true;
         if (this.config.debug) {
-            console.log(`Rendered ad for slot ${slot.id}:`, ad);
+            console.log(`✅ 단일 광고 렌더링 완료:`, {
+                slotId: slot.id,
+                ad: ad,
+                containerContent: container.innerHTML.substring(0, 200) + '...'
+            });
         }
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adstage/web-sdk",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "AdStage Web SDK for displaying advertisements",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/index.ts

@@ -127,34 +127,61 @@ export class AdStageSDK {
         ...(options?.country && { country: options.country }),
       });
 
-      const response = await fetch(
-        `${this.baseUrl}/advertisements/list?${queryParams}`,
-        {
-          headers: {
-            'x-api-key': this.config.apiKey,
-            'Content-Type': 'application/json',
-          },
-        }
-      );
+      const requestUrl = `${this.baseUrl}/advertisements/list?${queryParams}`;
+      
+      if (this.config.debug) {
+        console.log(`🌐 광고 API 요청 시작:`, {
+          url: requestUrl,
+          apiKey: this.config.apiKey.substring(0, 10) + '...',
+          slot: slot.id
+        });
+      }
+
+      const response = await fetch(requestUrl, {
+        headers: {
+          'x-api-key': this.config.apiKey,
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (this.config.debug) {
+        console.log(`📡 API 응답 상태:`, {
+          status: response.status,
+          statusText: response.statusText,
+          ok: response.ok
+        });
+      }
 
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
 
       const data = await response.json();
+      
+      if (this.config.debug) {
+        console.log(`📊 API 응답 데이터:`, {
+          data,
+          advertisementsCount: data.advertisements ? data.advertisements.length : 0
+        });
+      }
+      
       const advertisements = data.advertisements || [];
 
       if (advertisements.length > 0) {
+        if (this.config.debug) {
+          console.log(`✅ ${advertisements.length}개 광고 발견:`, advertisements);
+        }
+        
         // 여러 광고가 있을 경우 슬라이드로 렌더링
         this.renderSlotWithSlider(slot, advertisements, options);
         
         // 첫 번째 광고에 대해서만 노출 이벤트 추적
         await this.eventTracker.trackEvent(advertisements[0]._id, slot.id, AdEventType.IMPRESSION);
       } else {
-        console.warn(`No advertisements available for slot ${slot.id}`);
+        console.warn(`⚠️ 슬롯 ${slot.id}에 사용 가능한 광고가 없습니다. API 응답:`, data);
       }
     } catch (error) {
-      console.error(`Failed to load slot ${slot.id}:`, error);
+      console.error(`❌ 슬롯 ${slot.id} 로드 실패:`, error);
     }
   }
 
@@ -163,7 +190,19 @@ export class AdStageSDK {
    */
   private renderSlotWithSlider(slot: AdSlot, advertisements: Advertisement[], options?: any): void {
     const container = DOMUtils.safeGetElementById(slot.containerId);
-    if (!container) return;
+    if (!container) {
+      console.error(`❌ 컨테이너를 찾을 수 없습니다: ${slot.containerId}`);
+      return;
+    }
+
+    if (this.config.debug) {
+      console.log(`🎨 광고 렌더링 시작:`, {
+        slotId: slot.id,
+        containerId: slot.containerId,
+        advertisementCount: advertisements.length,
+        container: container
+      });
+    }
 
     if (advertisements.length === 1) {
       // 광고가 하나뿐이면 기본 렌더링
@@ -202,7 +241,11 @@ export class AdStageSDK {
 
     if (this.config.debug) {
       const sliderType = useFadeEffect ? 'fade slider' : 'slider';
-      console.log(`Rendered ${advertisements.length} ads with ${sliderType} for slot ${slot.id}:`, advertisements);
+      console.log(`✅ ${advertisements.length}개 광고를 ${sliderType}로 렌더링 완료:`, {
+        slotId: slot.id,
+        container: container,
+        sliderContainer: sliderContainer
+      });
     }
   }
 
@@ -211,7 +254,19 @@ export class AdStageSDK {
    */
   private renderSlot(slot: AdSlot, ad: Advertisement): void {
     const container = DOMUtils.safeGetElementById(slot.containerId);
-    if (!container) return;
+    if (!container) {
+      console.error(`❌ 컨테이너를 찾을 수 없습니다: ${slot.containerId}`);
+      return;
+    }
+
+    if (this.config.debug) {
+      console.log(`🎨 단일 광고 렌더링 시작:`, {
+        slotId: slot.id,
+        containerId: slot.containerId,
+        ad: ad,
+        container: container
+      });
+    }
 
     // 팩토리를 사용해서 적절한 렌더러로 광고 생성
     const adElement = AdRendererFactory.render(
@@ -220,12 +275,24 @@ export class AdStageSDK {
       (adId, slotId, eventType) => this.eventTracker.trackEvent(adId, slotId, eventType)
     );
 
+    if (this.config.debug) {
+      console.log(`🔧 광고 요소 생성됨:`, {
+        adElement: adElement,
+        tagName: adElement.tagName,
+        innerHTML: adElement.innerHTML.substring(0, 200) + '...'
+      });
+    }
+
     container.innerHTML = '';
     container.appendChild(adElement);
     slot.isLoaded = true;
 
     if (this.config.debug) {
-      console.log(`Rendered ad for slot ${slot.id}:`, ad);
+      console.log(`✅ 단일 광고 렌더링 완료:`, {
+        slotId: slot.id,
+        ad: ad,
+        containerContent: container.innerHTML.substring(0, 200) + '...'
+      });
     }
   }