@adstage/web-sdk 2.1.4 → 2.2.0

package/dist/index.cjs.js

@@ -795,11 +795,12 @@ class CarouselSliderManager {
                 width = `${slot.width}px`;
             }
             containerStyles.width = width;
-            containerStyles.display = 'inline-block'; // 지정된 크기에 맞춤 (좌측 정렬)
+            containerStyles.display = 'block'; // ✅ 하단 공백 제거를 위해 block 사용
         }
         else {
-            // 컨텐츠 크기에 맞춤
-            containerStyles.display = 'inline-block';
+            // 컨텐츠 크기에 맞춤 - fit-content로 컨텐츠에 맞는 크기 설정
+            containerStyles.display = 'block';
+            containerStyles.width = 'fit-content'; // 컨텐츠 크기에 맞춤
         }
         if (slot.height && slot.height !== 0) {
             const height = typeof slot.height === 'string' ? slot.height : `${slot.height}px`;
@@ -1119,7 +1120,8 @@ class TextTransitionManager {
         const containerStyles = {
             position: 'relative',
             overflow: 'hidden',
-            display: 'inline-block',
+            display: 'block', // ✅ 하단 공백 제거를 위해 block 사용
+            width: 'fit-content', // 컨텐츠 크기에 맞춤
         };
         // 사용자가 크기를 지정한 경우
         if (slot.width && slot.width !== 0) {
@@ -3220,14 +3222,53 @@ class AdStage {
      * 편의성을 위한 정적 모듈 접근자들
      */
     static get ads() {
+        // 🚀 자동 초기화: 아직 초기화되지 않았으면 환경변수로 자동 초기화
+        if (!AdStage.instance?._isInitialized) {
+            AdStage.autoInit();
+        }
         return AdStage.getInstance().ads;
     }
     static get events() {
+        if (!AdStage.instance?._isInitialized) {
+            AdStage.autoInit();
+        }
         return AdStage.getInstance().events;
     }
     static get config() {
+        if (!AdStage.instance?._isInitialized) {
+            AdStage.autoInit();
+        }
         return AdStage.getInstance().config;
     }
+    /**
+     * 🆕 자동 초기화 - 환경변수 기반
+     */
+    static autoInit() {
+        if (typeof window === 'undefined')
+            return; // 서버 사이드에서는 실행 안함
+        try {
+            // 환경변수에서 API 키 자동 로드
+            const apiKey = window.__ADSTAGE_API_KEY__ || // 런타임 설정
+                process.env.NEXT_PUBLIC_ADSTAGE_API_KEY || // Next.js
+                process.env.REACT_APP_ADSTAGE_API_KEY || // Create React App
+                process.env.VITE_ADSTAGE_API_KEY || // Vite
+                'demo-api-key'; // 개발용 fallback
+            const isDevelopment = "production" === 'development' ||
+                window.__ADSTAGE_DEBUG__ === true;
+            AdStage.init({
+                apiKey: apiKey,
+                debug: isDevelopment,
+                modules: ['ads', 'config']
+            });
+            if (isDevelopment) {
+                console.log('🔄 AdStage SDK auto-initialized with API key:', apiKey.substring(0, 8) + '...');
+            }
+        }
+        catch (error) {
+            console.warn('AdStage auto-initialization failed:', error);
+            console.warn('Please call AdStage.init() manually or set NEXT_PUBLIC_ADSTAGE_API_KEY environment variable');
+        }
+    }
     /**
      * SDK 리셋 (테스트용)
      */

package/dist/index.d.ts

@@ -513,6 +513,10 @@ declare class AdStage {
     static get ads(): AdsModule;
     static get events(): EventsModule;
     static get config(): ConfigModule;
+    /**
+     * 🆕 자동 초기화 - 환경변수 기반
+     */
+    private static autoInit;
     /**
      * SDK 리셋 (테스트용)
      */

package/dist/index.esm.js

@@ -793,11 +793,12 @@ class CarouselSliderManager {
                 width = `${slot.width}px`;
             }
             containerStyles.width = width;
-            containerStyles.display = 'inline-block'; // 지정된 크기에 맞춤 (좌측 정렬)
+            containerStyles.display = 'block'; // ✅ 하단 공백 제거를 위해 block 사용
         }
         else {
-            // 컨텐츠 크기에 맞춤
-            containerStyles.display = 'inline-block';
+            // 컨텐츠 크기에 맞춤 - fit-content로 컨텐츠에 맞는 크기 설정
+            containerStyles.display = 'block';
+            containerStyles.width = 'fit-content'; // 컨텐츠 크기에 맞춤
         }
         if (slot.height && slot.height !== 0) {
             const height = typeof slot.height === 'string' ? slot.height : `${slot.height}px`;
@@ -1117,7 +1118,8 @@ class TextTransitionManager {
         const containerStyles = {
             position: 'relative',
             overflow: 'hidden',
-            display: 'inline-block',
+            display: 'block', // ✅ 하단 공백 제거를 위해 block 사용
+            width: 'fit-content', // 컨텐츠 크기에 맞춤
         };
         // 사용자가 크기를 지정한 경우
         if (slot.width && slot.width !== 0) {
@@ -3218,14 +3220,53 @@ class AdStage {
      * 편의성을 위한 정적 모듈 접근자들
      */
     static get ads() {
+        // 🚀 자동 초기화: 아직 초기화되지 않았으면 환경변수로 자동 초기화
+        if (!AdStage.instance?._isInitialized) {
+            AdStage.autoInit();
+        }
         return AdStage.getInstance().ads;
     }
     static get events() {
+        if (!AdStage.instance?._isInitialized) {
+            AdStage.autoInit();
+        }
         return AdStage.getInstance().events;
     }
     static get config() {
+        if (!AdStage.instance?._isInitialized) {
+            AdStage.autoInit();
+        }
         return AdStage.getInstance().config;
     }
+    /**
+     * 🆕 자동 초기화 - 환경변수 기반
+     */
+    static autoInit() {
+        if (typeof window === 'undefined')
+            return; // 서버 사이드에서는 실행 안함
+        try {
+            // 환경변수에서 API 키 자동 로드
+            const apiKey = window.__ADSTAGE_API_KEY__ || // 런타임 설정
+                process.env.NEXT_PUBLIC_ADSTAGE_API_KEY || // Next.js
+                process.env.REACT_APP_ADSTAGE_API_KEY || // Create React App
+                process.env.VITE_ADSTAGE_API_KEY || // Vite
+                'demo-api-key'; // 개발용 fallback
+            const isDevelopment = "production" === 'development' ||
+                window.__ADSTAGE_DEBUG__ === true;
+            AdStage.init({
+                apiKey: apiKey,
+                debug: isDevelopment,
+                modules: ['ads', 'config']
+            });
+            if (isDevelopment) {
+                console.log('🔄 AdStage SDK auto-initialized with API key:', apiKey.substring(0, 8) + '...');
+            }
+        }
+        catch (error) {
+            console.warn('AdStage auto-initialization failed:', error);
+            console.warn('Please call AdStage.init() manually or set NEXT_PUBLIC_ADSTAGE_API_KEY environment variable');
+        }
+    }
     /**
      * SDK 리셋 (테스트용)
      */

package/dist/index.standalone.js

@@ -793,11 +793,12 @@ class CarouselSliderManager {
                 width = `${slot.width}px`;
             }
             containerStyles.width = width;
-            containerStyles.display = 'inline-block'; // 지정된 크기에 맞춤 (좌측 정렬)
+            containerStyles.display = 'block'; // ✅ 하단 공백 제거를 위해 block 사용
         }
         else {
-            // 컨텐츠 크기에 맞춤
-            containerStyles.display = 'inline-block';
+            // 컨텐츠 크기에 맞춤 - fit-content로 컨텐츠에 맞는 크기 설정
+            containerStyles.display = 'block';
+            containerStyles.width = 'fit-content'; // 컨텐츠 크기에 맞춤
         }
         if (slot.height && slot.height !== 0) {
             const height = typeof slot.height === 'string' ? slot.height : `${slot.height}px`;
@@ -1117,7 +1118,8 @@ class TextTransitionManager {
         const containerStyles = {
             position: 'relative',
             overflow: 'hidden',
-            display: 'inline-block',
+            display: 'block', // ✅ 하단 공백 제거를 위해 block 사용
+            width: 'fit-content', // 컨텐츠 크기에 맞춤
         };
         // 사용자가 크기를 지정한 경우
         if (slot.width && slot.width !== 0) {
@@ -3218,14 +3220,53 @@ class AdStage {
      * 편의성을 위한 정적 모듈 접근자들
      */
     static get ads() {
+        // 🚀 자동 초기화: 아직 초기화되지 않았으면 환경변수로 자동 초기화
+        if (!AdStage.instance?._isInitialized) {
+            AdStage.autoInit();
+        }
         return AdStage.getInstance().ads;
     }
     static get events() {
+        if (!AdStage.instance?._isInitialized) {
+            AdStage.autoInit();
+        }
         return AdStage.getInstance().events;
     }
     static get config() {
+        if (!AdStage.instance?._isInitialized) {
+            AdStage.autoInit();
+        }
         return AdStage.getInstance().config;
     }
+    /**
+     * 🆕 자동 초기화 - 환경변수 기반
+     */
+    static autoInit() {
+        if (typeof window === 'undefined')
+            return; // 서버 사이드에서는 실행 안함
+        try {
+            // 환경변수에서 API 키 자동 로드
+            const apiKey = window.__ADSTAGE_API_KEY__ || // 런타임 설정
+                process.env.NEXT_PUBLIC_ADSTAGE_API_KEY || // Next.js
+                process.env.REACT_APP_ADSTAGE_API_KEY || // Create React App
+                process.env.VITE_ADSTAGE_API_KEY || // Vite
+                'demo-api-key'; // 개발용 fallback
+            const isDevelopment = "production" === 'development' ||
+                window.__ADSTAGE_DEBUG__ === true;
+            AdStage.init({
+                apiKey: apiKey,
+                debug: isDevelopment,
+                modules: ['ads', 'config']
+            });
+            if (isDevelopment) {
+                console.log('🔄 AdStage SDK auto-initialized with API key:', apiKey.substring(0, 8) + '...');
+            }
+        }
+        catch (error) {
+            console.warn('AdStage auto-initialization failed:', error);
+            console.warn('Please call AdStage.init() manually or set NEXT_PUBLIC_ADSTAGE_API_KEY environment variable');
+        }
+    }
     /**
      * SDK 리셋 (테스트용)
      */

package/package.json

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

package/src/core/AdStage.ts

@@ -102,17 +102,61 @@ export class AdStage {
    * 편의성을 위한 정적 모듈 접근자들
    */
   public static get ads() {
+    // 🚀 자동 초기화: 아직 초기화되지 않았으면 환경변수로 자동 초기화
+    if (!AdStage.instance?._isInitialized) {
+      AdStage.autoInit();
+    }
     return AdStage.getInstance().ads;
   }
 
   public static get events() {
+    if (!AdStage.instance?._isInitialized) {
+      AdStage.autoInit();
+    }
     return AdStage.getInstance().events;
   }
 
   public static get config() {
+    if (!AdStage.instance?._isInitialized) {
+      AdStage.autoInit();
+    }
     return AdStage.getInstance().config;
   }
 
+  /**
+   * 🆕 자동 초기화 - 환경변수 기반
+   */
+  private static autoInit(): void {
+    if (typeof window === 'undefined') return; // 서버 사이드에서는 실행 안함
+    
+    try {
+      // 환경변수에서 API 키 자동 로드
+      const apiKey = 
+        (window as any).__ADSTAGE_API_KEY__ || // 런타임 설정
+        process.env.NEXT_PUBLIC_ADSTAGE_API_KEY || // Next.js
+        process.env.REACT_APP_ADSTAGE_API_KEY || // Create React App
+        process.env.VITE_ADSTAGE_API_KEY || // Vite
+        'demo-api-key'; // 개발용 fallback
+
+      const isDevelopment = 
+        process.env.NODE_ENV === 'development' || 
+        (window as any).__ADSTAGE_DEBUG__ === true;
+
+      AdStage.init({
+        apiKey: apiKey,
+        debug: isDevelopment,
+        modules: ['ads', 'config']
+      });
+
+      if (isDevelopment) {
+        console.log('🔄 AdStage SDK auto-initialized with API key:', apiKey.substring(0, 8) + '...');
+      }
+    } catch (error) {
+      console.warn('AdStage auto-initialization failed:', error);
+      console.warn('Please call AdStage.init() manually or set NEXT_PUBLIC_ADSTAGE_API_KEY environment variable');
+    }
+  }
+
   /**
    * SDK 리셋 (테스트용)
    */

package/src/managers/ads/carousel-slider-manager.ts

@@ -39,10 +39,11 @@ export class CarouselSliderManager {
         width = `${slot.width}px`;
       }
       containerStyles.width = width;
-      containerStyles.display = 'inline-block'; // 지정된 크기에 맞춤 (좌측 정렬)
+      containerStyles.display = 'block'; // ✅ 하단 공백 제거를 위해 block 사용
     } else {
-      // 컨텐츠 크기에 맞춤
-      containerStyles.display = 'inline-block';
+      // 컨텐츠 크기에 맞춤 - fit-content로 컨텐츠에 맞는 크기 설정
+      containerStyles.display = 'block';
+      containerStyles.width = 'fit-content'; // 컨텐츠 크기에 맞춤
     }
     
     if (slot.height && slot.height !== 0) {

package/src/managers/ads/text-transition-manager.ts

@@ -25,7 +25,8 @@ export class TextTransitionManager {
     const containerStyles: Record<string, string> = {
       position: 'relative',
       overflow: 'hidden',
-      display: 'inline-block',
+      display: 'block', // ✅ 하단 공백 제거를 위해 block 사용
+      width: 'fit-content', // 컨텐츠 크기에 맞춤
     };
     
     // 사용자가 크기를 지정한 경우