@adstage/web-sdk 2.4.0 → 2.4.2

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) {
@@ -19,15 +22,8 @@ var Platform;
 // 광고 이벤트 타입
 var AdEventType;
 (function (AdEventType) {
-    AdEventType["IMPRESSION"] = "IMPRESSION";
-    AdEventType["CLICK"] = "CLICK";
-    AdEventType["HOVER"] = "HOVER";
     AdEventType["VIEWABLE"] = "VIEWABLE";
-    AdEventType["VIEWABLE_IMPRESSION"] = "VIEWABLE_IMPRESSION";
-    AdEventType["COMPLETED"] = "COMPLETED";
-    AdEventType["VIDEO_START"] = "VIDEO_START";
-    AdEventType["VIDEO_COMPLETE"] = "VIDEO_COMPLETE";
-    AdEventType["ERROR"] = "ERROR";
+    AdEventType["CLICK"] = "CLICK";
 })(AdEventType || (AdEventType = {}));
 // 디바이스 타입
 var DeviceType;
@@ -1085,6 +1081,7 @@ class BaseAdRenderer {
             display: 'block',
             'max-width': '100%',
             height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
         // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
         const parsedWidth = this.parseSizeValue(slot?.width);
@@ -1093,6 +1090,7 @@ class BaseAdRenderer {
             styles.width = '100%';
             styles.height = '100%';
             styles['object-fit'] = 'cover';
+            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
         }
         return styles;
     }
@@ -3316,6 +3314,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
@@ -3326,5 +3400,7 @@ 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 = 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 모듈 타입
  */
@@ -68,15 +71,8 @@ declare enum Platform {
     MOBILE = "MOBILE"
 }
 declare enum AdEventType {
-    IMPRESSION = "IMPRESSION",
-    CLICK = "CLICK",
-    HOVER = "HOVER",
     VIEWABLE = "VIEWABLE",
-    VIEWABLE_IMPRESSION = "VIEWABLE_IMPRESSION",
-    COMPLETED = "COMPLETED",
-    VIDEO_START = "VIDEO_START",
-    VIDEO_COMPLETE = "VIDEO_COMPLETE",
-    ERROR = "ERROR"
+    CLICK = "CLICK"
 }
 declare enum DeviceType {
     DESKTOP = "DESKTOP",
@@ -123,7 +119,7 @@ interface ViewabilityMetrics {
     isViewable: boolean;
     visibilityRatio: number;
     duration: number;
-    impressions: number;
+    viewables: number;
     attentionTime: number;
     scrollDepth: number;
     completionRate: number;
@@ -199,7 +195,7 @@ interface AdSlot {
     config?: AdSlotConfig;
     advertisement?: Advertisement;
     isViewable?: boolean;
-    impressionSent?: boolean;
+    viewableSent?: boolean;
     loadTime?: number;
     renderTime?: number;
     events?: AdEvent[];
@@ -490,6 +486,21 @@ declare class AdStage {
     static reset(): void;
 }
 
+interface AdStageProviderProps {
+    children: ReactNode;
+    /**
+     * 자동 초기화를 위한 설정 (선택사항)
+     * 제공되면 Provider 마운트 시 자동으로 초기화됩니다.
+     */
+    config?: AdStageConfig;
+}
+declare function AdStageProvider({ children, config }: AdStageProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * AdStage SDK Hook
+ * 초기화된 AdStage 인스턴스에 직접 접근할 수 있습니다.
+ */
+declare function useAdStageSDK(): typeof AdStage;
+
 /**
  * AdStage Web SDK
  * 네임스페이스 아키텍처 기반 SDK
@@ -498,4 +509,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, useAdStageSDK as useAdStage };

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) {
@@ -17,15 +20,8 @@ var Platform;
 // 광고 이벤트 타입
 var AdEventType;
 (function (AdEventType) {
-    AdEventType["IMPRESSION"] = "IMPRESSION";
-    AdEventType["CLICK"] = "CLICK";
-    AdEventType["HOVER"] = "HOVER";
     AdEventType["VIEWABLE"] = "VIEWABLE";
-    AdEventType["VIEWABLE_IMPRESSION"] = "VIEWABLE_IMPRESSION";
-    AdEventType["COMPLETED"] = "COMPLETED";
-    AdEventType["VIDEO_START"] = "VIDEO_START";
-    AdEventType["VIDEO_COMPLETE"] = "VIDEO_COMPLETE";
-    AdEventType["ERROR"] = "ERROR";
+    AdEventType["CLICK"] = "CLICK";
 })(AdEventType || (AdEventType = {}));
 // 디바이스 타입
 var DeviceType;
@@ -1083,6 +1079,7 @@ class BaseAdRenderer {
             display: 'block',
             'max-width': '100%',
             height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
         // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
         const parsedWidth = this.parseSizeValue(slot?.width);
@@ -1091,6 +1088,7 @@ class BaseAdRenderer {
             styles.width = '100%';
             styles.height = '100%';
             styles['object-fit'] = 'cover';
+            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
         }
         return styles;
     }
@@ -3314,6 +3312,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
@@ -3323,4 +3397,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, useAdStageSDK as useAdStage };

package/dist/index.standalone.js

@@ -17,15 +17,8 @@ var Platform;
 // 광고 이벤트 타입
 var AdEventType;
 (function (AdEventType) {
-    AdEventType["IMPRESSION"] = "IMPRESSION";
-    AdEventType["CLICK"] = "CLICK";
-    AdEventType["HOVER"] = "HOVER";
     AdEventType["VIEWABLE"] = "VIEWABLE";
-    AdEventType["VIEWABLE_IMPRESSION"] = "VIEWABLE_IMPRESSION";
-    AdEventType["COMPLETED"] = "COMPLETED";
-    AdEventType["VIDEO_START"] = "VIDEO_START";
-    AdEventType["VIDEO_COMPLETE"] = "VIDEO_COMPLETE";
-    AdEventType["ERROR"] = "ERROR";
+    AdEventType["CLICK"] = "CLICK";
 })(AdEventType || (AdEventType = {}));
 // 디바이스 타입
 var DeviceType;
@@ -1083,6 +1076,7 @@ class BaseAdRenderer {
             display: 'block',
             'max-width': '100%',
             height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
         // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
         const parsedWidth = this.parseSizeValue(slot?.width);
@@ -1091,6 +1085,7 @@ class BaseAdRenderer {
             styles.width = '100%';
             styles.height = '100%';
             styles['object-fit'] = 'cover';
+            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
         }
         return styles;
     }
@@ -3314,6 +3309,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
@@ -3323,4 +3469,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, useAdStageSDK as useAdStage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adstage/web-sdk",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "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/index.ts

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

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 as useAdStageContext, useAdStageSDK as useAdStage } 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';

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;

package/src/types/advertisement.ts

@@ -16,15 +16,8 @@ export enum Platform {
 
 // 광고 이벤트 타입
 export enum AdEventType {
-  IMPRESSION = 'IMPRESSION',
-  CLICK = 'CLICK',
-  HOVER = 'HOVER',
   VIEWABLE = 'VIEWABLE',
-  VIEWABLE_IMPRESSION = 'VIEWABLE_IMPRESSION',
-  COMPLETED = 'COMPLETED',
-  VIDEO_START = 'VIDEO_START',
-  VIDEO_COMPLETE = 'VIDEO_COMPLETE',
-  ERROR = 'ERROR',
+  CLICK = 'CLICK',
 }
 
 // 디바이스 타입
@@ -79,7 +72,7 @@ export interface ViewabilityMetrics {
   isViewable: boolean;
   visibilityRatio: number;
   duration: number;
-  impressions: number;
+  viewables: number;
   attentionTime: number;
   scrollDepth: number;
   completionRate: number;
@@ -171,7 +164,7 @@ export interface AdSlot {
   config?: AdSlotConfig;
   advertisement?: Advertisement;
   isViewable?: boolean;
-  impressionSent?: boolean;
+  viewableSent?: boolean;
   loadTime?: number;
   renderTime?: number;
   events?: AdEvent[];
@@ -185,13 +178,7 @@ export interface AdSlot {
 
 // 광고 성과 지표
 export interface AdAnalytics {
-  impressions: number;
+  viewables: number;
   clicks: number;
-  hovers: number;
-  viewableImpressions: number;
-  errors: number;
   ctr: number; // Click Through Rate
-  viewabilityRate: number;
-  averageViewTime: number;
-  totalViewTime: number;
 }

package/src/types/api.ts

@@ -76,13 +76,9 @@ export interface AnalyticsRequest {
 
 // 광고 분석 응답
 export interface AnalyticsResponse {
-  impressions: number;
+  viewables: number;
   clicks: number;
-  hovers: number;
-  viewableImpressions: number;
-  errors: number;
   ctr: number;
-  viewabilityRate: number;
   breakdown?: Record<string, AdAnalytics>;
 }