@adstage/web-sdk 2.2.2 → 2.3.0

package/dist/index.cjs.js

@@ -1,5 +1,8 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
 // 광고 타입 정의
 var AdType;
 (function (AdType) {
@@ -916,7 +919,7 @@ class CarouselSliderManager {
         let currentSlide = 0;
         const totalSlides = advertisements.length;
         const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
-        // 슬라이드 이동 함수 (무한 루프 지원)
+        // 슬라이드 이동 함수 (무한 루프 지원 + 동적 높이 조정)
         const moveToSlide = (index, instant = false) => {
             currentSlide = index;
             // 애니메이션 임시 비활성화 (무한 루프용)
@@ -928,6 +931,33 @@ class CarouselSliderManager {
             }
             // 항상 퍼센트 기반으로 이동
             slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
+            // 🆕 동적 높이 조정: 현재 슬라이드의 이미지 높이에 맞춰 컨테이너 높이 조정
+            if (!instant && !slot.height && !slot.width) { // 사용자가 크기를 지정하지 않은 경우에만
+                const currentSlideElement = slideContainer.children[currentSlide];
+                if (currentSlideElement) {
+                    const currentAdElement = currentSlideElement.children[0];
+                    if (currentAdElement) {
+                        // 이미지 요소 찾기
+                        const imgElement = currentAdElement.querySelector('img');
+                        if (imgElement) {
+                            // 이미지 로드 완료 후 높이 조정
+                            const adjustHeight = () => {
+                                const imgHeight = imgElement.getBoundingClientRect().height;
+                                if (imgHeight > 0) {
+                                    sliderWrapper.style.height = `${imgHeight}px`;
+                                    sliderWrapper.style.transition = instant ? 'none' : 'height 0.4s ease-out';
+                                }
+                            };
+                            if (imgElement.complete && imgElement.naturalHeight > 0) {
+                                adjustHeight();
+                            }
+                            else {
+                                imgElement.addEventListener('load', adjustHeight, { once: true });
+                            }
+                        }
+                    }
+                }
+            }
             // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
             const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
             if (dotContainer) {
@@ -3252,53 +3282,14 @@ 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 리셋 (테스트용)
      */
@@ -3310,6 +3301,82 @@ class AdStage {
     }
 }
 
+const AdStageContext = react.createContext(null);
+function AdStageProvider({ children, config }) {
+    const [isInitialized, setIsInitialized] = react.useState(false);
+    const [currentConfig, setCurrentConfig] = react.useState(null);
+    const [error, setError] = react.useState(null);
+    const initialize = (newConfig) => {
+        try {
+            setError(null);
+            // 기존 인스턴스가 있으면 리셋
+            if (isInitialized) {
+                AdStage.reset();
+            }
+            AdStage.init(newConfig);
+            setCurrentConfig(newConfig);
+            setIsInitialized(true);
+            if (newConfig.debug) {
+                console.log('✅ AdStage SDK initialized successfully via React Provider');
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+            setError(errorMessage);
+            console.error('❌ AdStage SDK initialization failed:', err);
+            setIsInitialized(false);
+            setCurrentConfig(null);
+        }
+    };
+    const reset = () => {
+        try {
+            AdStage.reset();
+            setIsInitialized(false);
+            setCurrentConfig(null);
+            setError(null);
+        }
+        catch (err) {
+            console.error('❌ AdStage SDK reset failed:', err);
+        }
+    };
+    // 자동 초기화
+    react.useEffect(() => {
+        if (config && !isInitialized) {
+            initialize(config);
+        }
+    }, [config, isInitialized]);
+    const contextValue = {
+        isInitialized,
+        config: currentConfig,
+        initialize,
+        reset,
+        error
+    };
+    return (jsxRuntime.jsx(AdStageContext.Provider, { value: contextValue, children: children }));
+}
+/**
+ * AdStage Context Hook
+ * AdStageProvider 내에서 SDK 상태에 접근할 수 있습니다.
+ */
+function useAdStage() {
+    const context = react.useContext(AdStageContext);
+    if (!context) {
+        throw new Error('useAdStage must be used within an AdStageProvider');
+    }
+    return context;
+}
+/**
+ * AdStage SDK Hook
+ * 초기화된 AdStage 인스턴스에 직접 접근할 수 있습니다.
+ */
+function useAdStageSDK() {
+    const { isInitialized } = useAdStage();
+    if (!isInitialized) {
+        throw new Error('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
+    }
+    return AdStage;
+}
+
 /**
  * AdStage Web SDK
  * 네임스페이스 아키텍처 기반 SDK
@@ -3320,5 +3387,8 @@ const SDK_VERSION = '2.0.0';
 const SUPPORTED_MODULES = ['ads', 'events', 'config'];
 
 exports.AdStage = AdStage;
+exports.AdStageProvider = AdStageProvider;
 exports.SDK_VERSION = SDK_VERSION;
 exports.SUPPORTED_MODULES = SUPPORTED_MODULES;
+exports.useAdStage = useAdStage;
+exports.useAdStageSDK = useAdStageSDK;

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
 /**
  * AdStage SDK 모듈 타입
  */
@@ -513,16 +516,39 @@ declare class AdStage {
     static get ads(): AdsModule;
     static get events(): EventsModule;
     static get config(): ConfigModule;
-    /**
-     * 🆕 자동 초기화 - 환경변수 기반
-     */
-    private static autoInit;
     /**
      * SDK 리셋 (테스트용)
      */
     static reset(): void;
 }
 
+interface AdStageContextType {
+    isInitialized: boolean;
+    config: AdStageConfig | null;
+    initialize: (config: AdStageConfig) => void;
+    reset: () => void;
+    error: string | null;
+}
+interface AdStageProviderProps {
+    children: ReactNode;
+    /**
+     * 자동 초기화를 위한 설정 (선택사항)
+     * 제공되면 Provider 마운트 시 자동으로 초기화됩니다.
+     */
+    config?: AdStageConfig;
+}
+declare function AdStageProvider({ children, config }: AdStageProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * AdStage Context Hook
+ * AdStageProvider 내에서 SDK 상태에 접근할 수 있습니다.
+ */
+declare function useAdStage(): AdStageContextType;
+/**
+ * AdStage SDK Hook
+ * 초기화된 AdStage 인스턴스에 직접 접근할 수 있습니다.
+ */
+declare function useAdStageSDK(): typeof AdStage;
+
 /**
  * AdStage Web SDK
  * 네임스페이스 아키텍처 기반 SDK
@@ -531,4 +557,4 @@ declare class AdStage {
 declare const SDK_VERSION = "2.0.0";
 declare const SUPPORTED_MODULES: readonly ["ads", "events", "config"];
 
-export { AdEventType, AdOptions, AdSlot, AdStage, AdStageConfig, AdType, Advertisement, ApiResponse, BaseModule, EventProperties, ModuleName, OrganizationInfo, PageData, SDK_VERSION, SUPPORTED_MODULES };
+export { AdEventType, AdOptions, AdSlot, AdStage, AdStageConfig, AdStageProvider, AdType, Advertisement, ApiResponse, BaseModule, EventProperties, ModuleName, OrganizationInfo, PageData, SDK_VERSION, SUPPORTED_MODULES, useAdStage, useAdStageSDK };

package/dist/index.esm.js

@@ -1,3 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useContext } from 'react';
+
 // 광고 타입 정의
 var AdType;
 (function (AdType) {
@@ -914,7 +917,7 @@ class CarouselSliderManager {
         let currentSlide = 0;
         const totalSlides = advertisements.length;
         const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
-        // 슬라이드 이동 함수 (무한 루프 지원)
+        // 슬라이드 이동 함수 (무한 루프 지원 + 동적 높이 조정)
         const moveToSlide = (index, instant = false) => {
             currentSlide = index;
             // 애니메이션 임시 비활성화 (무한 루프용)
@@ -926,6 +929,33 @@ class CarouselSliderManager {
             }
             // 항상 퍼센트 기반으로 이동
             slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
+            // 🆕 동적 높이 조정: 현재 슬라이드의 이미지 높이에 맞춰 컨테이너 높이 조정
+            if (!instant && !slot.height && !slot.width) { // 사용자가 크기를 지정하지 않은 경우에만
+                const currentSlideElement = slideContainer.children[currentSlide];
+                if (currentSlideElement) {
+                    const currentAdElement = currentSlideElement.children[0];
+                    if (currentAdElement) {
+                        // 이미지 요소 찾기
+                        const imgElement = currentAdElement.querySelector('img');
+                        if (imgElement) {
+                            // 이미지 로드 완료 후 높이 조정
+                            const adjustHeight = () => {
+                                const imgHeight = imgElement.getBoundingClientRect().height;
+                                if (imgHeight > 0) {
+                                    sliderWrapper.style.height = `${imgHeight}px`;
+                                    sliderWrapper.style.transition = instant ? 'none' : 'height 0.4s ease-out';
+                                }
+                            };
+                            if (imgElement.complete && imgElement.naturalHeight > 0) {
+                                adjustHeight();
+                            }
+                            else {
+                                imgElement.addEventListener('load', adjustHeight, { once: true });
+                            }
+                        }
+                    }
+                }
+            }
             // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
             const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
             if (dotContainer) {
@@ -3250,53 +3280,14 @@ 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 리셋 (테스트용)
      */
@@ -3308,6 +3299,82 @@ class AdStage {
     }
 }
 
+const AdStageContext = createContext(null);
+function AdStageProvider({ children, config }) {
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [currentConfig, setCurrentConfig] = useState(null);
+    const [error, setError] = useState(null);
+    const initialize = (newConfig) => {
+        try {
+            setError(null);
+            // 기존 인스턴스가 있으면 리셋
+            if (isInitialized) {
+                AdStage.reset();
+            }
+            AdStage.init(newConfig);
+            setCurrentConfig(newConfig);
+            setIsInitialized(true);
+            if (newConfig.debug) {
+                console.log('✅ AdStage SDK initialized successfully via React Provider');
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+            setError(errorMessage);
+            console.error('❌ AdStage SDK initialization failed:', err);
+            setIsInitialized(false);
+            setCurrentConfig(null);
+        }
+    };
+    const reset = () => {
+        try {
+            AdStage.reset();
+            setIsInitialized(false);
+            setCurrentConfig(null);
+            setError(null);
+        }
+        catch (err) {
+            console.error('❌ AdStage SDK reset failed:', err);
+        }
+    };
+    // 자동 초기화
+    useEffect(() => {
+        if (config && !isInitialized) {
+            initialize(config);
+        }
+    }, [config, isInitialized]);
+    const contextValue = {
+        isInitialized,
+        config: currentConfig,
+        initialize,
+        reset,
+        error
+    };
+    return (jsx(AdStageContext.Provider, { value: contextValue, children: children }));
+}
+/**
+ * AdStage Context Hook
+ * AdStageProvider 내에서 SDK 상태에 접근할 수 있습니다.
+ */
+function useAdStage() {
+    const context = useContext(AdStageContext);
+    if (!context) {
+        throw new Error('useAdStage must be used within an AdStageProvider');
+    }
+    return context;
+}
+/**
+ * AdStage SDK Hook
+ * 초기화된 AdStage 인스턴스에 직접 접근할 수 있습니다.
+ */
+function useAdStageSDK() {
+    const { isInitialized } = useAdStage();
+    if (!isInitialized) {
+        throw new Error('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
+    }
+    return AdStage;
+}
+
 /**
  * AdStage Web SDK
  * 네임스페이스 아키텍처 기반 SDK
@@ -3317,4 +3384,4 @@ class AdStage {
 const SDK_VERSION = '2.0.0';
 const SUPPORTED_MODULES = ['ads', 'events', 'config'];
 
-export { AdStage, SDK_VERSION, SUPPORTED_MODULES };
+export { AdStage, AdStageProvider, SDK_VERSION, SUPPORTED_MODULES, useAdStage, useAdStageSDK };

package/dist/index.standalone.js

@@ -914,7 +914,7 @@ class CarouselSliderManager {
         let currentSlide = 0;
         const totalSlides = advertisements.length;
         const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
-        // 슬라이드 이동 함수 (무한 루프 지원)
+        // 슬라이드 이동 함수 (무한 루프 지원 + 동적 높이 조정)
         const moveToSlide = (index, instant = false) => {
             currentSlide = index;
             // 애니메이션 임시 비활성화 (무한 루프용)
@@ -926,6 +926,33 @@ class CarouselSliderManager {
             }
             // 항상 퍼센트 기반으로 이동
             slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
+            // 🆕 동적 높이 조정: 현재 슬라이드의 이미지 높이에 맞춰 컨테이너 높이 조정
+            if (!instant && !slot.height && !slot.width) { // 사용자가 크기를 지정하지 않은 경우에만
+                const currentSlideElement = slideContainer.children[currentSlide];
+                if (currentSlideElement) {
+                    const currentAdElement = currentSlideElement.children[0];
+                    if (currentAdElement) {
+                        // 이미지 요소 찾기
+                        const imgElement = currentAdElement.querySelector('img');
+                        if (imgElement) {
+                            // 이미지 로드 완료 후 높이 조정
+                            const adjustHeight = () => {
+                                const imgHeight = imgElement.getBoundingClientRect().height;
+                                if (imgHeight > 0) {
+                                    sliderWrapper.style.height = `${imgHeight}px`;
+                                    sliderWrapper.style.transition = instant ? 'none' : 'height 0.4s ease-out';
+                                }
+                            };
+                            if (imgElement.complete && imgElement.naturalHeight > 0) {
+                                adjustHeight();
+                            }
+                            else {
+                                imgElement.addEventListener('load', adjustHeight, { once: true });
+                            }
+                        }
+                    }
+                }
+            }
             // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
             const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
             if (dotContainer) {
@@ -3250,53 +3277,14 @@ 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 리셋 (테스트용)
      */
@@ -3308,6 +3296,157 @@ class AdStage {
     }
 }
 
+var jsxRuntime = {exports: {}};
+
+var reactJsxRuntime_production_min = {};
+
+var react = {exports: {}};
+
+var react_production_min = {};
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReact_production_min;
+
+function requireReact_production_min () {
+	if (hasRequiredReact_production_min) return react_production_min;
+	hasRequiredReact_production_min = 1;
+var l=Symbol.for("react.element"),n=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),r=Symbol.for("react.profiler"),t=Symbol.for("react.provider"),u=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),z=Symbol.iterator;function A(a){if(null===a||"object"!==typeof a)return null;a=z&&a[z]||a["@@iterator"];return "function"===typeof a?a:null}
+	var B={isMounted:function(){return !1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B;}E.prototype.isReactComponent={};
+	E.prototype.setState=function(a,b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,a,b,"setState");};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate");};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B;}var H=G.prototype=new F;
+	H.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};
+	function M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=""+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f;}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return {$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}
+	function N(a,b){return {$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return "object"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={"=":"=0",":":"=2"};return "$"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\/+/g;function Q(a,b){return "object"===typeof a&&null!==a&&null!=a.key?escape(""+a.key):b.toString(36)}
+	function R(a,b,e,d,c){var k=typeof a;if("undefined"===k||"boolean"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case l:case n:h=!0;}}if(h)return h=a,c=c(h),a=""===d?"."+Q(h,0):d,I(c)?(e="",null!=a&&(e=a.replace(P,"$&/")+"/"),R(c,b,e,"",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?"":(""+c.key).replace(P,"$&/")+"/")+a)),b.push(c)),1;h=0;d=""===d?".":d+":";if(I(a))for(var g=0;g<a.length;g++){k=
+	a[g];var f=d+Q(k,g);h+=R(k,b,e,f,c);}else if(f=A(a),"function"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if("object"===k)throw b=String(a),Error("Objects are not valid as a React child (found: "+("[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b)+"). If you meant to render a collection of children, use an array instead.");return h}
+	function S(a,b,e){if(null==a)return a;var d=[],c=0;R(a,d,"","",function(a){return b.call(e,a,c++)});return d}function T(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._status)a._status=1,a._result=b;},function(b){if(0===a._status||-1===a._status)a._status=2,a._result=b;});-1===a._status&&(a._status=0,a._result=b);}if(1===a._status)return a._result.default;throw a._result;}
+	var U={current:null},V={transition:null},W={ReactCurrentDispatcher:U,ReactCurrentBatchConfig:V,ReactCurrentOwner:K};function X(){throw Error("act(...) is not supported in production builds of React.");}
+	react_production_min.Children={map:S,forEach:function(a,b,e){S(a,function(){b.apply(this,arguments);},e);},count:function(a){var b=0;S(a,function(){b++;});return b},toArray:function(a){return S(a,function(a){return a})||[]},only:function(a){if(!O(a))throw Error("React.Children.only expected to receive a single React element child.");return a}};react_production_min.Component=E;react_production_min.Fragment=p;react_production_min.Profiler=r;react_production_min.PureComponent=G;react_production_min.StrictMode=q;react_production_min.Suspense=w;
+	react_production_min.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=W;react_production_min.act=X;
+	react_production_min.cloneElement=function(a,b,e){if(null===a||void 0===a)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+a+".");var d=C({},a.props),c=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=K.current);void 0!==b.key&&(c=""+b.key);if(a.type&&a.type.defaultProps)var g=a.type.defaultProps;for(f in b)J.call(b,f)&&!L.hasOwnProperty(f)&&(d[f]=void 0===b[f]&&void 0!==g?g[f]:b[f]);}var f=arguments.length-2;if(1===f)d.children=e;else if(1<f){g=Array(f);
+	for(var m=0;m<f;m++)g[m]=arguments[m+2];d.children=g;}return {$$typeof:l,type:a.type,key:c,ref:k,props:d,_owner:h}};react_production_min.createContext=function(a){a={$$typeof:u,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null};a.Provider={$$typeof:t,_context:a};return a.Consumer=a};react_production_min.createElement=M;react_production_min.createFactory=function(a){var b=M.bind(null,a);b.type=a;return b};react_production_min.createRef=function(){return {current:null}};
+	react_production_min.forwardRef=function(a){return {$$typeof:v,render:a}};react_production_min.isValidElement=O;react_production_min.lazy=function(a){return {$$typeof:y,_payload:{_status:-1,_result:a},_init:T}};react_production_min.memo=function(a,b){return {$$typeof:x,type:a,compare:void 0===b?null:b}};react_production_min.startTransition=function(a){var b=V.transition;V.transition={};try{a();}finally{V.transition=b;}};react_production_min.unstable_act=X;react_production_min.useCallback=function(a,b){return U.current.useCallback(a,b)};react_production_min.useContext=function(a){return U.current.useContext(a)};
+	react_production_min.useDebugValue=function(){};react_production_min.useDeferredValue=function(a){return U.current.useDeferredValue(a)};react_production_min.useEffect=function(a,b){return U.current.useEffect(a,b)};react_production_min.useId=function(){return U.current.useId()};react_production_min.useImperativeHandle=function(a,b,e){return U.current.useImperativeHandle(a,b,e)};react_production_min.useInsertionEffect=function(a,b){return U.current.useInsertionEffect(a,b)};react_production_min.useLayoutEffect=function(a,b){return U.current.useLayoutEffect(a,b)};
+	react_production_min.useMemo=function(a,b){return U.current.useMemo(a,b)};react_production_min.useReducer=function(a,b,e){return U.current.useReducer(a,b,e)};react_production_min.useRef=function(a){return U.current.useRef(a)};react_production_min.useState=function(a){return U.current.useState(a)};react_production_min.useSyncExternalStore=function(a,b,e){return U.current.useSyncExternalStore(a,b,e)};react_production_min.useTransition=function(){return U.current.useTransition()};react_production_min.version="18.3.1";
+	return react_production_min;
+}
+
+{
+  react.exports = requireReact_production_min();
+}
+
+var reactExports = react.exports;
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_production_min;
+
+function requireReactJsxRuntime_production_min () {
+	if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
+	hasRequiredReactJsxRuntime_production_min = 1;
+var f=reactExports,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
+	function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+	return reactJsxRuntime_production_min;
+}
+
+{
+  jsxRuntime.exports = requireReactJsxRuntime_production_min();
+}
+
+var jsxRuntimeExports = jsxRuntime.exports;
+
+const AdStageContext = reactExports.createContext(null);
+function AdStageProvider({ children, config }) {
+    const [isInitialized, setIsInitialized] = reactExports.useState(false);
+    const [currentConfig, setCurrentConfig] = reactExports.useState(null);
+    const [error, setError] = reactExports.useState(null);
+    const initialize = (newConfig) => {
+        try {
+            setError(null);
+            // 기존 인스턴스가 있으면 리셋
+            if (isInitialized) {
+                AdStage.reset();
+            }
+            AdStage.init(newConfig);
+            setCurrentConfig(newConfig);
+            setIsInitialized(true);
+            if (newConfig.debug) {
+                console.log('✅ AdStage SDK initialized successfully via React Provider');
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+            setError(errorMessage);
+            console.error('❌ AdStage SDK initialization failed:', err);
+            setIsInitialized(false);
+            setCurrentConfig(null);
+        }
+    };
+    const reset = () => {
+        try {
+            AdStage.reset();
+            setIsInitialized(false);
+            setCurrentConfig(null);
+            setError(null);
+        }
+        catch (err) {
+            console.error('❌ AdStage SDK reset failed:', err);
+        }
+    };
+    // 자동 초기화
+    reactExports.useEffect(() => {
+        if (config && !isInitialized) {
+            initialize(config);
+        }
+    }, [config, isInitialized]);
+    const contextValue = {
+        isInitialized,
+        config: currentConfig,
+        initialize,
+        reset,
+        error
+    };
+    return (jsxRuntimeExports.jsx(AdStageContext.Provider, { value: contextValue, children: children }));
+}
+/**
+ * AdStage Context Hook
+ * AdStageProvider 내에서 SDK 상태에 접근할 수 있습니다.
+ */
+function useAdStage() {
+    const context = reactExports.useContext(AdStageContext);
+    if (!context) {
+        throw new Error('useAdStage must be used within an AdStageProvider');
+    }
+    return context;
+}
+/**
+ * AdStage SDK Hook
+ * 초기화된 AdStage 인스턴스에 직접 접근할 수 있습니다.
+ */
+function useAdStageSDK() {
+    const { isInitialized } = useAdStage();
+    if (!isInitialized) {
+        throw new Error('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
+    }
+    return AdStage;
+}
+
 /**
  * AdStage Web SDK
  * 네임스페이스 아키텍처 기반 SDK
@@ -3317,4 +3456,4 @@ class AdStage {
 const SDK_VERSION = '2.0.0';
 const SUPPORTED_MODULES = ['ads', 'events', 'config'];
 
-export { AdStage, SDK_VERSION, SUPPORTED_MODULES };
+export { AdStage, AdStageProvider, SDK_VERSION, SUPPORTED_MODULES, useAdStage, useAdStageSDK };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adstage/web-sdk",
-  "version": "2.2.2",
-  "description": "AdStage Web SDK - Production-ready marketing platform SDK with auto-initialization, dynamic sizing, centered image positioning, and user-defined size support",
+  "version": "2.3.0",
+  "description": "AdStage Web SDK - Production-ready marketing platform SDK with React Provider support for seamless integration",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/core/AdStage.ts

@@ -102,61 +102,17 @@ 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/index.ts

@@ -6,6 +6,9 @@
 // 메인 네임스페이스 클래스
 export { default as AdStage } from './core/AdStage';
 
+// React 통합 (선택적)
+export { AdStageProvider, useAdStage, useAdStageSDK } from './react';
+
 // 설정 및 타입
 export type { AdStageConfig, ModuleName, BaseModule, ApiResponse, OrganizationInfo } from './types/config';
 

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

@@ -184,7 +184,7 @@ export class CarouselSliderManager {
     const totalSlides = advertisements.length;
     const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
 
-    // 슬라이드 이동 함수 (무한 루프 지원)
+    // 슬라이드 이동 함수 (무한 루프 지원 + 동적 높이 조정)
     const moveToSlide = (index: number, instant = false) => {
       currentSlide = index;
       
@@ -198,6 +198,36 @@ export class CarouselSliderManager {
       // 항상 퍼센트 기반으로 이동
       slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
       
+      // 🆕 동적 높이 조정: 현재 슬라이드의 이미지 높이에 맞춰 컨테이너 높이 조정
+      if (!instant && !slot.height && !slot.width) { // 사용자가 크기를 지정하지 않은 경우에만
+        const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
+        const currentSlideElement = slideContainer.children[currentSlide] as HTMLElement;
+        
+        if (currentSlideElement) {
+          const currentAdElement = currentSlideElement.children[0] as HTMLElement;
+          if (currentAdElement) {
+            // 이미지 요소 찾기
+            const imgElement = currentAdElement.querySelector('img');
+            if (imgElement) {
+              // 이미지 로드 완료 후 높이 조정
+              const adjustHeight = () => {
+                const imgHeight = imgElement.getBoundingClientRect().height;
+                if (imgHeight > 0) {
+                  sliderWrapper.style.height = `${imgHeight}px`;
+                  sliderWrapper.style.transition = instant ? 'none' : 'height 0.4s ease-out';
+                }
+              };
+              
+              if (imgElement.complete && imgElement.naturalHeight > 0) {
+                adjustHeight();
+              } else {
+                imgElement.addEventListener('load', adjustHeight, { once: true });
+              }
+            }
+          }
+        }
+      }
+      
       // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
       const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
       if (dotContainer) {

package/src/react/AdStageProvider.tsx

@@ -0,0 +1,117 @@
+/**
+ * AdStage SDK - React Provider
+ * React 애플리케이션에서 AdStage SDK를 쉽게 사용할 수 있도록 하는 Provider 컴포넌트
+ */
+
+import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import AdStage from '../core/AdStage';
+import { AdStageConfig } from '../types/config';
+
+interface AdStageContextType {
+  isInitialized: boolean;
+  config: AdStageConfig | null;
+  initialize: (config: AdStageConfig) => void;
+  reset: () => void;
+  error: string | null;
+}
+
+const AdStageContext = createContext<AdStageContextType | null>(null);
+
+interface AdStageProviderProps {
+  children: ReactNode;
+  /**
+   * 자동 초기화를 위한 설정 (선택사항)
+   * 제공되면 Provider 마운트 시 자동으로 초기화됩니다.
+   */
+  config?: AdStageConfig;
+}
+
+export function AdStageProvider({ children, config }: AdStageProviderProps) {
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [currentConfig, setCurrentConfig] = useState<AdStageConfig | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const initialize = (newConfig: AdStageConfig) => {
+    try {
+      setError(null);
+      
+      // 기존 인스턴스가 있으면 리셋
+      if (isInitialized) {
+        AdStage.reset();
+      }
+
+      AdStage.init(newConfig);
+
+      setCurrentConfig(newConfig);
+      setIsInitialized(true);
+      
+      if (newConfig.debug) {
+        console.log('✅ AdStage SDK initialized successfully via React Provider');
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      setError(errorMessage);
+      console.error('❌ AdStage SDK initialization failed:', err);
+      setIsInitialized(false);
+      setCurrentConfig(null);
+    }
+  };
+
+  const reset = () => {
+    try {
+      AdStage.reset();
+      setIsInitialized(false);
+      setCurrentConfig(null);
+      setError(null);
+    } catch (err) {
+      console.error('❌ AdStage SDK reset failed:', err);
+    }
+  };
+
+  // 자동 초기화
+  useEffect(() => {
+    if (config && !isInitialized) {
+      initialize(config);
+    }
+  }, [config, isInitialized]);
+
+  const contextValue: AdStageContextType = {
+    isInitialized,
+    config: currentConfig,
+    initialize,
+    reset,
+    error
+  };
+
+  return (
+    <AdStageContext.Provider value={contextValue}>
+      {children}
+    </AdStageContext.Provider>
+  );
+}
+
+/**
+ * AdStage Context Hook
+ * AdStageProvider 내에서 SDK 상태에 접근할 수 있습니다.
+ */
+export function useAdStage(): AdStageContextType {
+  const context = useContext(AdStageContext);
+  if (!context) {
+    throw new Error('useAdStage must be used within an AdStageProvider');
+  }
+  return context;
+}
+
+/**
+ * AdStage SDK Hook
+ * 초기화된 AdStage 인스턴스에 직접 접근할 수 있습니다.
+ */
+export function useAdStageSDK() {
+  const { isInitialized } = useAdStage();
+  
+  if (!isInitialized) {
+    throw new Error('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
+  }
+  
+  return AdStage;
+}

package/src/react/index.ts

@@ -0,0 +1,11 @@
+/**
+ * AdStage Web SDK - React Integration
+ * React 애플리케이션을 위한 컴포넌트와 훅들
+ */
+
+export { AdStageProvider, useAdStage, useAdStageSDK } from './AdStageProvider';
+
+// 타입들도 재export
+export type { AdStageConfig, ModuleName, BaseModule } from '../types/config';
+export type { AdOptions } from '../modules/ads/AdsModule';
+export type { AdType, AdEventType, Advertisement, AdSlot } from '../types/advertisement';