@adstage/web-sdk 2.4.2 → 2.4.5

package/dist/index.cjs.js

@@ -607,13 +607,32 @@ class AdvertisementEventTracker {
                     riskLevel: additionalData.riskLevel,
                 }),
             };
-            await fetch(`${this.baseUrl}/advertisements/events/${adId}/${eventType}`, {
+            const url = `${this.baseUrl}/advertisements/events/${adId}/${eventType}`;
+            const headers = ApiHeaders.createForEvents(this.apiKey, eventData);
+            if (this.debug) {
+                console.log(`🚀 Sending advertisement event: ${eventType} for ad ${adId}`, {
+                    url,
+                    headers,
+                    eventData
+                });
+            }
+            const response = await fetch(url, {
                 method: 'POST',
-                headers: ApiHeaders.createForEvents(this.apiKey, eventData),
+                headers,
                 body: JSON.stringify(eventData),
             });
             if (this.debug) {
-                console.log(`Tracked advertisement event: ${eventType} for ad ${adId}`, eventData);
+                console.log(`📡 API Response Status: ${response.status} ${response.statusText}`, {
+                    url,
+                    ok: response.ok
+                });
+            }
+            if (!response.ok) {
+                const errorText = await response.text();
+                throw new Error(`API request failed: ${response.status} ${response.statusText} - ${errorText}`);
+            }
+            if (this.debug) {
+                console.log(`✅ Successfully tracked advertisement event: ${eventType} for ad ${adId}`);
             }
         }
         catch (error) {
@@ -948,6 +967,7 @@ const API_PATHS = {
     /** 광고 관련 */
     advertisements: {
         list: '/advertisements/list',
+        detail: '/advertisements',
         events: '/advertisements/events'
     },
     /** 이벤트 관련 */
@@ -966,6 +986,7 @@ class EndpointBuilder {
          */
         this.advertisements = {
             list: () => `${this.baseUrl}${API_PATHS.advertisements.list}`,
+            detail: (adId) => `${this.baseUrl}${API_PATHS.advertisements.detail}/${adId}`,
             events: (adId, eventType) => `${this.baseUrl}${API_PATHS.advertisements.events}/${adId}/${eventType}`
         };
         /**
@@ -1206,7 +1227,7 @@ class TextAdRenderer extends BaseAdRenderer {
         // 기본 컨테이너 스타일
         const containerStyles = {
             ...this.getBaseContainerStyles(slot),
-            padding: '20px',
+            padding: '4px',
             background: 'transparent',
             display: 'flex',
             'align-items': 'center',
@@ -1234,7 +1255,7 @@ class TextAdRenderer extends BaseAdRenderer {
         }
         // 텍스트 콘텐츠 생성
         const textContent = this.createTextElement(ad.textContent, 'div', {
-            'font-size': '16px',
+            'font-size': '14px',
             'font-weight': '500',
             color: '#212529',
             width: '100%', // 전체 너비 사용하여 텍스트 정렬이 적용되도록 함
@@ -2285,8 +2306,6 @@ class AdRenderer {
             case AdType.TEXT: {
                 const textDiv = document.createElement('div');
                 textDiv.innerHTML = `
-          <h3>${ad.title}</h3>
-          ${ad.description ? `<p>${ad.description}</p>` : ''}
           ${ad.textContent ? `<div>${ad.textContent}</div>` : ''}
         `;
                 adElement.appendChild(textDiv);
@@ -2412,7 +2431,7 @@ class AdRenderer {
             case AdType.BANNER:
                 return '250px'; // 일반 배너
             case AdType.TEXT:
-                return '120px'; // 텍스트는 좀 더 작게
+                return '60px'; // 텍스트는 좀 더 작게
             case AdType.VIDEO:
                 return '360px'; // 비디오는 16:9 비율 고려
             case AdType.NATIVE:
@@ -2682,6 +2701,8 @@ class AdsModule {
             autoSlide: options?.autoSlide || false,
             slideInterval: options?.slideInterval || 5000,
             onClick: options?.onClick,
+            // 특정 광고 ID
+            adId: options?.adId,
             // 필터링 옵션들 전달
             language: options?.language,
             deviceType: options?.deviceType,
@@ -2698,6 +2719,8 @@ class AdsModule {
             maxLines: options?.maxLines || 3,
             style: options?.style || 'default',
             onClick: options?.onClick,
+            // 특정 광고 ID
+            adId: options?.adId,
             // 필터링 옵션들 전달
             language: options?.language,
             deviceType: options?.deviceType,
@@ -2897,8 +2920,8 @@ class AdsModule {
         // 기본 fraud 검사
         const fraudDetector = new BasicFraudDetector();
         // viewability 추적
-        const tracker = new ViewabilityTracker(element, slot.adType, (metrics) => {
-            this.handleViewableEvent(ad, slot, metrics, fraudDetector);
+        const tracker = new ViewabilityTracker(element, slot.adType, async (metrics) => {
+            await this.handleViewableEvent(ad, slot, metrics, fraudDetector);
         });
         // 정리를 위해 저장
         slot.viewabilityTracker = tracker;
@@ -2952,7 +2975,27 @@ class AdsModule {
         if (!this._config?.apiKey) {
             throw new Error('API key not configured');
         }
-        // GET 요청용 query parameters 구성
+        // 특정 광고 ID가 지정된 경우, 해당 광고만 요청
+        if (options.adId) {
+            const url = `${endpoints.advertisements.detail(options.adId)}`;
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: ApiHeaders.create(this._config.apiKey)
+            });
+            if (!response.ok) {
+                if (response.status === 404) {
+                    console.warn(`🚫 Advertisement not found with ID: ${options.adId}`);
+                    return [];
+                }
+                throw new Error(`Failed to fetch ad data: ${response.status}`);
+            }
+            const advertisement = await response.json();
+            if (this._config?.debug) {
+                console.log(`📊 Fetched specific ad with ID: ${options.adId}`, advertisement);
+            }
+            return [advertisement];
+        }
+        // 일반적인 광고 목록 요청
         const params = new URLSearchParams();
         params.append('adType', type);
         // 백엔드 API에서 실제 지원하는 필터링 옵션들만 추가
@@ -3371,21 +3414,22 @@ function AdStageProvider({ children, config }) {
  * AdStage Context Hook
  * AdStageProvider 내에서 SDK 상태에 접근할 수 있습니다.
  */
-function useAdStage() {
+function useAdStageContext() {
     const context = react.useContext(AdStageContext);
     if (!context) {
-        throw new Error('useAdStage must be used within an AdStageProvider');
+        throw new Error('useAdStageContext must be used within an AdStageProvider');
     }
     return context;
 }
 /**
- * AdStage SDK Hook
+ * AdStage Instance Hook
  * 초기화된 AdStage 인스턴스에 직접 접근할 수 있습니다.
  */
-function useAdStageSDK() {
-    const { isInitialized } = useAdStage();
+function useAdStageInstance() {
+    const { isInitialized } = useAdStageContext();
     if (!isInitialized) {
-        throw new Error('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
+        console.warn('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
+        return null;
     }
     return AdStage;
 }
@@ -3403,4 +3447,5 @@ exports.AdStage = AdStage;
 exports.AdStageProvider = AdStageProvider;
 exports.SDK_VERSION = SDK_VERSION;
 exports.SUPPORTED_MODULES = SUPPORTED_MODULES;
-exports.useAdStage = useAdStageSDK;
+exports.useAdStageContext = useAdStageContext;
+exports.useAdStageInstance = useAdStageInstance;

package/dist/index.d.ts

@@ -220,6 +220,7 @@ interface AdOptions {
     autoplay?: boolean;
     muted?: boolean;
     onClick?: (adData: any) => void;
+    adId?: string;
     language?: 'ko' | 'en' | 'ja' | 'zh';
     deviceType?: 'MOBILE' | 'DESKTOP';
     country?: 'KR' | 'US' | 'JP' | 'CN' | 'DE';
@@ -486,6 +487,13 @@ declare class AdStage {
     static reset(): void;
 }
 
+interface AdStageContextType {
+    isInitialized: boolean;
+    config: AdStageConfig | null;
+    initialize: (config: AdStageConfig) => void;
+    reset: () => void;
+    error: string | null;
+}
 interface AdStageProviderProps {
     children: ReactNode;
     /**
@@ -496,10 +504,15 @@ interface AdStageProviderProps {
 }
 declare function AdStageProvider({ children, config }: AdStageProviderProps): react_jsx_runtime.JSX.Element;
 /**
- * AdStage SDK Hook
+ * AdStage Context Hook
+ * AdStageProvider 내에서 SDK 상태에 접근할 수 있습니다.
+ */
+declare function useAdStageContext(): AdStageContextType;
+/**
+ * AdStage Instance Hook
  * 초기화된 AdStage 인스턴스에 직접 접근할 수 있습니다.
  */
-declare function useAdStageSDK(): typeof AdStage;
+declare function useAdStageInstance(): typeof AdStage | null;
 
 /**
  * AdStage Web SDK
@@ -509,4 +522,4 @@ declare function useAdStageSDK(): typeof AdStage;
 declare const SDK_VERSION = "2.0.0";
 declare const SUPPORTED_MODULES: readonly ["ads", "events", "config"];
 
-export { AdEventType, AdOptions, AdSlot, AdStage, AdStageConfig, AdStageProvider, AdType, Advertisement, ApiResponse, BaseModule, EventProperties, ModuleName, OrganizationInfo, PageData, SDK_VERSION, SUPPORTED_MODULES, useAdStageSDK as useAdStage };
+export { AdEventType, AdOptions, AdSlot, AdStage, AdStageConfig, AdStageProvider, AdType, Advertisement, ApiResponse, BaseModule, EventProperties, ModuleName, OrganizationInfo, PageData, SDK_VERSION, SUPPORTED_MODULES, useAdStageContext, useAdStageInstance };

package/dist/index.esm.js

@@ -605,13 +605,32 @@ class AdvertisementEventTracker {
                     riskLevel: additionalData.riskLevel,
                 }),
             };
-            await fetch(`${this.baseUrl}/advertisements/events/${adId}/${eventType}`, {
+            const url = `${this.baseUrl}/advertisements/events/${adId}/${eventType}`;
+            const headers = ApiHeaders.createForEvents(this.apiKey, eventData);
+            if (this.debug) {
+                console.log(`🚀 Sending advertisement event: ${eventType} for ad ${adId}`, {
+                    url,
+                    headers,
+                    eventData
+                });
+            }
+            const response = await fetch(url, {
                 method: 'POST',
-                headers: ApiHeaders.createForEvents(this.apiKey, eventData),
+                headers,
                 body: JSON.stringify(eventData),
             });
             if (this.debug) {
-                console.log(`Tracked advertisement event: ${eventType} for ad ${adId}`, eventData);
+                console.log(`📡 API Response Status: ${response.status} ${response.statusText}`, {
+                    url,
+                    ok: response.ok
+                });
+            }
+            if (!response.ok) {
+                const errorText = await response.text();
+                throw new Error(`API request failed: ${response.status} ${response.statusText} - ${errorText}`);
+            }
+            if (this.debug) {
+                console.log(`✅ Successfully tracked advertisement event: ${eventType} for ad ${adId}`);
             }
         }
         catch (error) {
@@ -946,6 +965,7 @@ const API_PATHS = {
     /** 광고 관련 */
     advertisements: {
         list: '/advertisements/list',
+        detail: '/advertisements',
         events: '/advertisements/events'
     },
     /** 이벤트 관련 */
@@ -964,6 +984,7 @@ class EndpointBuilder {
          */
         this.advertisements = {
             list: () => `${this.baseUrl}${API_PATHS.advertisements.list}`,
+            detail: (adId) => `${this.baseUrl}${API_PATHS.advertisements.detail}/${adId}`,
             events: (adId, eventType) => `${this.baseUrl}${API_PATHS.advertisements.events}/${adId}/${eventType}`
         };
         /**
@@ -1204,7 +1225,7 @@ class TextAdRenderer extends BaseAdRenderer {
         // 기본 컨테이너 스타일
         const containerStyles = {
             ...this.getBaseContainerStyles(slot),
-            padding: '20px',
+            padding: '4px',
             background: 'transparent',
             display: 'flex',
             'align-items': 'center',
@@ -1232,7 +1253,7 @@ class TextAdRenderer extends BaseAdRenderer {
         }
         // 텍스트 콘텐츠 생성
         const textContent = this.createTextElement(ad.textContent, 'div', {
-            'font-size': '16px',
+            'font-size': '14px',
             'font-weight': '500',
             color: '#212529',
             width: '100%', // 전체 너비 사용하여 텍스트 정렬이 적용되도록 함
@@ -2283,8 +2304,6 @@ class AdRenderer {
             case AdType.TEXT: {
                 const textDiv = document.createElement('div');
                 textDiv.innerHTML = `
-          <h3>${ad.title}</h3>
-          ${ad.description ? `<p>${ad.description}</p>` : ''}
           ${ad.textContent ? `<div>${ad.textContent}</div>` : ''}
         `;
                 adElement.appendChild(textDiv);
@@ -2410,7 +2429,7 @@ class AdRenderer {
             case AdType.BANNER:
                 return '250px'; // 일반 배너
             case AdType.TEXT:
-                return '120px'; // 텍스트는 좀 더 작게
+                return '60px'; // 텍스트는 좀 더 작게
             case AdType.VIDEO:
                 return '360px'; // 비디오는 16:9 비율 고려
             case AdType.NATIVE:
@@ -2680,6 +2699,8 @@ class AdsModule {
             autoSlide: options?.autoSlide || false,
             slideInterval: options?.slideInterval || 5000,
             onClick: options?.onClick,
+            // 특정 광고 ID
+            adId: options?.adId,
             // 필터링 옵션들 전달
             language: options?.language,
             deviceType: options?.deviceType,
@@ -2696,6 +2717,8 @@ class AdsModule {
             maxLines: options?.maxLines || 3,
             style: options?.style || 'default',
             onClick: options?.onClick,
+            // 특정 광고 ID
+            adId: options?.adId,
             // 필터링 옵션들 전달
             language: options?.language,
             deviceType: options?.deviceType,
@@ -2895,8 +2918,8 @@ class AdsModule {
         // 기본 fraud 검사
         const fraudDetector = new BasicFraudDetector();
         // viewability 추적
-        const tracker = new ViewabilityTracker(element, slot.adType, (metrics) => {
-            this.handleViewableEvent(ad, slot, metrics, fraudDetector);
+        const tracker = new ViewabilityTracker(element, slot.adType, async (metrics) => {
+            await this.handleViewableEvent(ad, slot, metrics, fraudDetector);
         });
         // 정리를 위해 저장
         slot.viewabilityTracker = tracker;
@@ -2950,7 +2973,27 @@ class AdsModule {
         if (!this._config?.apiKey) {
             throw new Error('API key not configured');
         }
-        // GET 요청용 query parameters 구성
+        // 특정 광고 ID가 지정된 경우, 해당 광고만 요청
+        if (options.adId) {
+            const url = `${endpoints.advertisements.detail(options.adId)}`;
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: ApiHeaders.create(this._config.apiKey)
+            });
+            if (!response.ok) {
+                if (response.status === 404) {
+                    console.warn(`🚫 Advertisement not found with ID: ${options.adId}`);
+                    return [];
+                }
+                throw new Error(`Failed to fetch ad data: ${response.status}`);
+            }
+            const advertisement = await response.json();
+            if (this._config?.debug) {
+                console.log(`📊 Fetched specific ad with ID: ${options.adId}`, advertisement);
+            }
+            return [advertisement];
+        }
+        // 일반적인 광고 목록 요청
         const params = new URLSearchParams();
         params.append('adType', type);
         // 백엔드 API에서 실제 지원하는 필터링 옵션들만 추가
@@ -3369,21 +3412,22 @@ function AdStageProvider({ children, config }) {
  * AdStage Context Hook
  * AdStageProvider 내에서 SDK 상태에 접근할 수 있습니다.
  */
-function useAdStage() {
+function useAdStageContext() {
     const context = useContext(AdStageContext);
     if (!context) {
-        throw new Error('useAdStage must be used within an AdStageProvider');
+        throw new Error('useAdStageContext must be used within an AdStageProvider');
     }
     return context;
 }
 /**
- * AdStage SDK Hook
+ * AdStage Instance Hook
  * 초기화된 AdStage 인스턴스에 직접 접근할 수 있습니다.
  */
-function useAdStageSDK() {
-    const { isInitialized } = useAdStage();
+function useAdStageInstance() {
+    const { isInitialized } = useAdStageContext();
     if (!isInitialized) {
-        throw new Error('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
+        console.warn('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
+        return null;
     }
     return AdStage;
 }
@@ -3397,4 +3441,4 @@ function useAdStageSDK() {
 const SDK_VERSION = '2.0.0';
 const SUPPORTED_MODULES = ['ads', 'events', 'config'];
 
-export { AdStage, AdStageProvider, SDK_VERSION, SUPPORTED_MODULES, useAdStageSDK as useAdStage };
+export { AdStage, AdStageProvider, SDK_VERSION, SUPPORTED_MODULES, useAdStageContext, useAdStageInstance };

package/dist/index.standalone.js

@@ -602,13 +602,32 @@ class AdvertisementEventTracker {
                     riskLevel: additionalData.riskLevel,
                 }),
             };
-            await fetch(`${this.baseUrl}/advertisements/events/${adId}/${eventType}`, {
+            const url = `${this.baseUrl}/advertisements/events/${adId}/${eventType}`;
+            const headers = ApiHeaders.createForEvents(this.apiKey, eventData);
+            if (this.debug) {
+                console.log(`🚀 Sending advertisement event: ${eventType} for ad ${adId}`, {
+                    url,
+                    headers,
+                    eventData
+                });
+            }
+            const response = await fetch(url, {
                 method: 'POST',
-                headers: ApiHeaders.createForEvents(this.apiKey, eventData),
+                headers,
                 body: JSON.stringify(eventData),
             });
             if (this.debug) {
-                console.log(`Tracked advertisement event: ${eventType} for ad ${adId}`, eventData);
+                console.log(`📡 API Response Status: ${response.status} ${response.statusText}`, {
+                    url,
+                    ok: response.ok
+                });
+            }
+            if (!response.ok) {
+                const errorText = await response.text();
+                throw new Error(`API request failed: ${response.status} ${response.statusText} - ${errorText}`);
+            }
+            if (this.debug) {
+                console.log(`✅ Successfully tracked advertisement event: ${eventType} for ad ${adId}`);
             }
         }
         catch (error) {
@@ -943,6 +962,7 @@ const API_PATHS = {
     /** 광고 관련 */
     advertisements: {
         list: '/advertisements/list',
+        detail: '/advertisements',
         events: '/advertisements/events'
     },
     /** 이벤트 관련 */
@@ -961,6 +981,7 @@ class EndpointBuilder {
          */
         this.advertisements = {
             list: () => `${this.baseUrl}${API_PATHS.advertisements.list}`,
+            detail: (adId) => `${this.baseUrl}${API_PATHS.advertisements.detail}/${adId}`,
             events: (adId, eventType) => `${this.baseUrl}${API_PATHS.advertisements.events}/${adId}/${eventType}`
         };
         /**
@@ -1201,7 +1222,7 @@ class TextAdRenderer extends BaseAdRenderer {
         // 기본 컨테이너 스타일
         const containerStyles = {
             ...this.getBaseContainerStyles(slot),
-            padding: '20px',
+            padding: '4px',
             background: 'transparent',
             display: 'flex',
             'align-items': 'center',
@@ -1229,7 +1250,7 @@ class TextAdRenderer extends BaseAdRenderer {
         }
         // 텍스트 콘텐츠 생성
         const textContent = this.createTextElement(ad.textContent, 'div', {
-            'font-size': '16px',
+            'font-size': '14px',
             'font-weight': '500',
             color: '#212529',
             width: '100%', // 전체 너비 사용하여 텍스트 정렬이 적용되도록 함
@@ -2280,8 +2301,6 @@ class AdRenderer {
             case AdType.TEXT: {
                 const textDiv = document.createElement('div');
                 textDiv.innerHTML = `
-          <h3>${ad.title}</h3>
-          ${ad.description ? `<p>${ad.description}</p>` : ''}
           ${ad.textContent ? `<div>${ad.textContent}</div>` : ''}
         `;
                 adElement.appendChild(textDiv);
@@ -2407,7 +2426,7 @@ class AdRenderer {
             case AdType.BANNER:
                 return '250px'; // 일반 배너
             case AdType.TEXT:
-                return '120px'; // 텍스트는 좀 더 작게
+                return '60px'; // 텍스트는 좀 더 작게
             case AdType.VIDEO:
                 return '360px'; // 비디오는 16:9 비율 고려
             case AdType.NATIVE:
@@ -2677,6 +2696,8 @@ class AdsModule {
             autoSlide: options?.autoSlide || false,
             slideInterval: options?.slideInterval || 5000,
             onClick: options?.onClick,
+            // 특정 광고 ID
+            adId: options?.adId,
             // 필터링 옵션들 전달
             language: options?.language,
             deviceType: options?.deviceType,
@@ -2693,6 +2714,8 @@ class AdsModule {
             maxLines: options?.maxLines || 3,
             style: options?.style || 'default',
             onClick: options?.onClick,
+            // 특정 광고 ID
+            adId: options?.adId,
             // 필터링 옵션들 전달
             language: options?.language,
             deviceType: options?.deviceType,
@@ -2892,8 +2915,8 @@ class AdsModule {
         // 기본 fraud 검사
         const fraudDetector = new BasicFraudDetector();
         // viewability 추적
-        const tracker = new ViewabilityTracker(element, slot.adType, (metrics) => {
-            this.handleViewableEvent(ad, slot, metrics, fraudDetector);
+        const tracker = new ViewabilityTracker(element, slot.adType, async (metrics) => {
+            await this.handleViewableEvent(ad, slot, metrics, fraudDetector);
         });
         // 정리를 위해 저장
         slot.viewabilityTracker = tracker;
@@ -2947,7 +2970,27 @@ class AdsModule {
         if (!this._config?.apiKey) {
             throw new Error('API key not configured');
         }
-        // GET 요청용 query parameters 구성
+        // 특정 광고 ID가 지정된 경우, 해당 광고만 요청
+        if (options.adId) {
+            const url = `${endpoints.advertisements.detail(options.adId)}`;
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: ApiHeaders.create(this._config.apiKey)
+            });
+            if (!response.ok) {
+                if (response.status === 404) {
+                    console.warn(`🚫 Advertisement not found with ID: ${options.adId}`);
+                    return [];
+                }
+                throw new Error(`Failed to fetch ad data: ${response.status}`);
+            }
+            const advertisement = await response.json();
+            if (this._config?.debug) {
+                console.log(`📊 Fetched specific ad with ID: ${options.adId}`, advertisement);
+            }
+            return [advertisement];
+        }
+        // 일반적인 광고 목록 요청
         const params = new URLSearchParams();
         params.append('adType', type);
         // 백엔드 API에서 실제 지원하는 필터링 옵션들만 추가
@@ -3441,21 +3484,22 @@ function AdStageProvider({ children, config }) {
  * AdStage Context Hook
  * AdStageProvider 내에서 SDK 상태에 접근할 수 있습니다.
  */
-function useAdStage() {
+function useAdStageContext() {
     const context = reactExports.useContext(AdStageContext);
     if (!context) {
-        throw new Error('useAdStage must be used within an AdStageProvider');
+        throw new Error('useAdStageContext must be used within an AdStageProvider');
     }
     return context;
 }
 /**
- * AdStage SDK Hook
+ * AdStage Instance Hook
  * 초기화된 AdStage 인스턴스에 직접 접근할 수 있습니다.
  */
-function useAdStageSDK() {
-    const { isInitialized } = useAdStage();
+function useAdStageInstance() {
+    const { isInitialized } = useAdStageContext();
     if (!isInitialized) {
-        throw new Error('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
+        console.warn('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
+        return null;
     }
     return AdStage;
 }
@@ -3469,4 +3513,4 @@ function useAdStageSDK() {
 const SDK_VERSION = '2.0.0';
 const SUPPORTED_MODULES = ['ads', 'events', 'config'];
 
-export { AdStage, AdStageProvider, SDK_VERSION, SUPPORTED_MODULES, useAdStageSDK as useAdStage };
+export { AdStage, AdStageProvider, SDK_VERSION, SUPPORTED_MODULES, useAdStageContext, useAdStageInstance };

package/package.json

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

package/src/constants/endpoints.ts

@@ -26,6 +26,7 @@ export const API_PATHS = {
   /** 광고 관련 */
   advertisements: {
     list: '/advertisements/list',
+    detail: '/advertisements',
     events: '/advertisements/events'
   },
   
@@ -67,6 +68,7 @@ export class EndpointBuilder {
    */
   advertisements = {
     list: () => `${this.baseUrl}${API_PATHS.advertisements.list}`,
+    detail: (adId: string) => `${this.baseUrl}${API_PATHS.advertisements.detail}/${adId}`,
     events: (adId: string, eventType: string) => 
       `${this.baseUrl}${API_PATHS.advertisements.events}/${adId}/${eventType}`
   };

package/src/index.ts

@@ -7,7 +7,7 @@
 export { default as AdStage } from './core/AdStage';
 
 // React 통합
-export { AdStageProvider, useAdStage } from './react';
+export { AdStageProvider, useAdStageContext, useAdStageInstance } from './react';
 
 // 설정 및 타입
 export type { AdStageConfig, ModuleName, BaseModule, ApiResponse, OrganizationInfo } from './types/config';

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

@@ -107,17 +107,37 @@ export class AdvertisementEventTracker {
       };
 
 
-      await fetch(
-        `${this.baseUrl}/advertisements/events/${adId}/${eventType}`,
-        {
-          method: 'POST',
-          headers: ApiHeaders.createForEvents(this.apiKey, eventData),
-          body: JSON.stringify(eventData),
-        }
-      );
+      const url = `${this.baseUrl}/advertisements/events/${adId}/${eventType}`;
+      const headers = ApiHeaders.createForEvents(this.apiKey, eventData);
+      
+      if (this.debug) {
+        console.log(`🚀 Sending advertisement event: ${eventType} for ad ${adId}`, {
+          url,
+          headers,
+          eventData
+        });
+      }
+
+      const response = await fetch(url, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(eventData),
+      });
+
+      if (this.debug) {
+        console.log(`📡 API Response Status: ${response.status} ${response.statusText}`, {
+          url,
+          ok: response.ok
+        });
+      }
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`API request failed: ${response.status} ${response.statusText} - ${errorText}`);
+      }
 
       if (this.debug) {
-        console.log(`Tracked advertisement event: ${eventType} for ad ${adId}`, eventData);
+        console.log(`✅ Successfully tracked advertisement event: ${eventType} for ad ${adId}`);
       }
     } catch (error) {
       console.error('Failed to track advertisement event:', error);

package/src/modules/ads/AdRenderer.ts

@@ -345,8 +345,6 @@ export class AdRenderer {
       case AdType.TEXT: {
         const textDiv = document.createElement('div');
         textDiv.innerHTML = `
-          <h3>${ad.title}</h3>
-          ${ad.description ? `<p>${ad.description}</p>` : ''}
           ${ad.textContent ? `<div>${ad.textContent}</div>` : ''}
         `;
         adElement.appendChild(textDiv);
@@ -480,7 +478,7 @@ export class AdRenderer {
       case AdType.BANNER:
         return '250px'; // 일반 배너
       case AdType.TEXT:
-        return '120px'; // 텍스트는 좀 더 작게
+        return '60px'; // 텍스트는 좀 더 작게
       case AdType.VIDEO:
         return '360px'; // 비디오는 16:9 비율 고려
       case AdType.NATIVE:

package/src/modules/ads/AdsModule.ts

@@ -26,6 +26,8 @@ export interface AdOptions {
   autoplay?: boolean;
   muted?: boolean;
   onClick?: (adData: any) => void;
+  // 특정 광고 ID 지정
+  adId?: string;
   // 광고 필터링 옵션 (백엔드 API에서 실제 지원하는 것들만)
   language?: 'ko' | 'en' | 'ja' | 'zh';
   deviceType?: 'MOBILE' | 'DESKTOP';
@@ -91,6 +93,8 @@ export class AdsModule implements BaseModule {
       autoSlide: options?.autoSlide || false,
       slideInterval: options?.slideInterval || 5000,
       onClick: options?.onClick,
+      // 특정 광고 ID
+      adId: options?.adId,
       // 필터링 옵션들 전달
       language: options?.language,
       deviceType: options?.deviceType,
@@ -110,6 +114,8 @@ export class AdsModule implements BaseModule {
       maxLines: options?.maxLines || 3,
       style: options?.style || 'default',
       onClick: options?.onClick,
+      // 특정 광고 ID
+      adId: options?.adId,
       // 필터링 옵션들 전달
       language: options?.language,
       deviceType: options?.deviceType,
@@ -351,8 +357,8 @@ export class AdsModule implements BaseModule {
     const fraudDetector = new BasicFraudDetector();
     
     // viewability 추적
-    const tracker = new ViewabilityTracker(element, slot.adType, (metrics) => {
-      this.handleViewableEvent(ad, slot, metrics, fraudDetector);
+    const tracker = new ViewabilityTracker(element, slot.adType, async (metrics) => {
+      await this.handleViewableEvent(ad, slot, metrics, fraudDetector);
     });
     
     // 정리를 위해 저장
@@ -426,7 +432,33 @@ export class AdsModule implements BaseModule {
       throw new Error('API key not configured');
     }
 
-    // GET 요청용 query parameters 구성
+    // 특정 광고 ID가 지정된 경우, 해당 광고만 요청
+    if (options.adId) {
+      const url = `${endpoints.advertisements.detail(options.adId)}`;
+      
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: ApiHeaders.create(this._config.apiKey)
+      });
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          console.warn(`🚫 Advertisement not found with ID: ${options.adId}`);
+          return [];
+        }
+        throw new Error(`Failed to fetch ad data: ${response.status}`);
+      }
+
+      const advertisement = await response.json();
+      
+      if (this._config?.debug) {
+        console.log(`📊 Fetched specific ad with ID: ${options.adId}`, advertisement);
+      }
+      
+      return [advertisement];
+    }
+
+    // 일반적인 광고 목록 요청
     const params = new URLSearchParams();
     params.append('adType', type);
     

package/src/react/AdStageProvider.tsx

@@ -94,23 +94,24 @@ export function AdStageProvider({ children, config }: AdStageProviderProps) {
  * AdStage Context Hook
  * AdStageProvider 내에서 SDK 상태에 접근할 수 있습니다.
  */
-export function useAdStage(): AdStageContextType {
+export function useAdStageContext(): AdStageContextType {
   const context = useContext(AdStageContext);
   if (!context) {
-    throw new Error('useAdStage must be used within an AdStageProvider');
+    throw new Error('useAdStageContext must be used within an AdStageProvider');
   }
   return context;
 }
 
 /**
- * AdStage SDK Hook
+ * AdStage Instance Hook
  * 초기화된 AdStage 인스턴스에 직접 접근할 수 있습니다.
  */
-export function useAdStageSDK() {
-  const { isInitialized } = useAdStage();
+export function useAdStageInstance() {
+  const { isInitialized } = useAdStageContext();
   
   if (!isInitialized) {
-    throw new Error('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
+    console.warn('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
+    return null;
   }
   
   return AdStage;

package/src/react/index.ts

@@ -3,7 +3,7 @@
  * React 애플리케이션을 위한 컴포넌트와 훅들
  */
 
-export { AdStageProvider, useAdStage as useAdStageContext, useAdStageSDK as useAdStage } from './AdStageProvider';
+export { AdStageProvider, useAdStageContext, useAdStageInstance } from './AdStageProvider';
 
 // 타입들도 재export
 export type { AdStageConfig, ModuleName, BaseModule } from '../types/config';

package/src/renderers/text-renderer.ts

@@ -16,7 +16,7 @@ export class TextAdRenderer extends BaseAdRenderer {
     // 기본 컨테이너 스타일
     const containerStyles: Record<string, string> = {
       ...this.getBaseContainerStyles(slot),
-      padding: '20px',
+      padding: '4px',
       background: 'transparent',
       display: 'flex',
       'align-items': 'center',
@@ -52,7 +52,7 @@ export class TextAdRenderer extends BaseAdRenderer {
       ad.textContent,
       'div',
       {
-        'font-size': '16px',
+        'font-size': '14px',
         'font-weight': '500',
         color: '#212529',
         width: '100%', // 전체 너비 사용하여 텍스트 정렬이 적용되도록 함