@adstage/web-sdk 2.1.5 → 2.2.1

package/dist/index.cjs.js

@@ -394,6 +394,7 @@ class BaseAdRenderer {
             display: 'block',
             'max-width': '100%',
             height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
         // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
         const parsedWidth = this.parseSizeValue(slot?.width);
@@ -402,6 +403,7 @@ class BaseAdRenderer {
             styles.width = '100%';
             styles.height = '100%';
             styles['object-fit'] = 'cover';
+            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
         }
         return styles;
     }
@@ -2920,6 +2922,7 @@ class AdsModule {
             img.style.width = '100%';
             img.style.height = '100%';
             img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
             adElement.appendChild(img);
         }
     }
@@ -3222,14 +3225,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

@@ -392,6 +392,7 @@ class BaseAdRenderer {
             display: 'block',
             'max-width': '100%',
             height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
         // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
         const parsedWidth = this.parseSizeValue(slot?.width);
@@ -400,6 +401,7 @@ class BaseAdRenderer {
             styles.width = '100%';
             styles.height = '100%';
             styles['object-fit'] = 'cover';
+            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
         }
         return styles;
     }
@@ -2918,6 +2920,7 @@ class AdsModule {
             img.style.width = '100%';
             img.style.height = '100%';
             img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
             adElement.appendChild(img);
         }
     }
@@ -3220,14 +3223,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

@@ -392,6 +392,7 @@ class BaseAdRenderer {
             display: 'block',
             'max-width': '100%',
             height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
         // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
         const parsedWidth = this.parseSizeValue(slot?.width);
@@ -400,6 +401,7 @@ class BaseAdRenderer {
             styles.width = '100%';
             styles.height = '100%';
             styles['object-fit'] = 'cover';
+            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
         }
         return styles;
     }
@@ -2918,6 +2920,7 @@ class AdsModule {
             img.style.width = '100%';
             img.style.height = '100%';
             img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
             adElement.appendChild(img);
         }
     }
@@ -3220,14 +3223,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.5",
-  "description": "AdStage Web SDK - Production-ready marketing platform SDK with namespace architecture for ads, events, and config management",
+  "version": "2.2.1",
+  "description": "AdStage Web SDK - Production-ready marketing platform SDK with auto-initialization, dynamic sizing, and centered image positioning",
   "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/modules/ads/AdsModule.ts

@@ -1119,6 +1119,7 @@ export class AdsModule implements BaseModule {
       img.style.width = '100%';
       img.style.height = '100%';
       img.style.objectFit = 'cover';
+      img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
       adElement.appendChild(img);
     }
   }

package/src/renderers/base-renderer.ts

@@ -110,6 +110,7 @@ export abstract class BaseAdRenderer implements AdRenderer {
       display: 'block',
       'max-width': '100%',
       height: 'auto',
+      'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
     };
     
     // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
@@ -120,6 +121,7 @@ export abstract class BaseAdRenderer implements AdRenderer {
       styles.width = '100%';
       styles.height = '100%';
       styles['object-fit'] = 'cover';
+      styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
     }
     
     return styles;