@adstage/web-sdk 1.1.0 → 1.3.1

package/dist/index.standalone.js

@@ -1542,6 +1542,46 @@ class EventTracker {
         }
         return 0; // 기본값
     }
+    /**
+     * 커스텀 이벤트 추적
+     */
+    async trackCustomEvent(eventName, params) {
+        try {
+            // 디바이스 정보 수집
+            const deviceInfo = DeviceInfoCollector.collectDeviceInfo();
+            // 커스텀 이벤트 데이터 구성
+            const eventData = {
+                eventName,
+                params: params || {},
+                // 기본 메타데이터
+                userAgent: deviceInfo.userAgent,
+                platform: deviceInfo.platform,
+                screenWidth: deviceInfo.screenWidth,
+                screenHeight: deviceInfo.screenHeight,
+                deviceId: deviceInfo.deviceId,
+                sessionId: deviceInfo.sessionId,
+                timestamp: new Date().toISOString(),
+                // SDK 정보
+                sdkVersion: '1.3.1',
+                eventTimestamp: Date.now(),
+            };
+            // 커스텀 이벤트 API 엔드포인트로 전송
+            await fetch(`${this.baseUrl}/events/custom`, {
+                method: 'POST',
+                headers: {
+                    'x-api-key': this.apiKey,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(eventData),
+            });
+            if (this.debug) {
+                console.log(`📊 커스텀 이벤트 추적: ${eventName}`, eventData);
+            }
+        }
+        catch (error) {
+            console.error('커스텀 이벤트 추적 실패:', error);
+        }
+    }
 }
 
 /**
@@ -1660,402 +1700,135 @@ class SDKUtils {
     }
 }
 
-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.
+ * AdStage SDK Standalone API
+ * 간단하고 직관적인 사용을 위한 통합 API
  */
-
-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;
-
+let globalSDKInstance = null;
+let isInitializing = false;
 /**
- * @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.
+ * SDK 초기화 (한 번만 호출)
  */
-
-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({
-    sdk: null,
-    isLoading: true,
-    error: null,
-    isInitialized: false,
-});
-const AdStageProvider = ({ config, children, autoInit = true, }) => {
-    const [sdk, setSdk] = reactExports.useState(null);
-    const [isLoading, setIsLoading] = reactExports.useState(true);
-    const [error, setError] = reactExports.useState(null);
-    const [isInitialized, setIsInitialized] = reactExports.useState(false);
-    reactExports.useEffect(() => {
-        const initializeSDK = async () => {
-            try {
-                setIsLoading(true);
-                setError(null);
-                // Dynamic import를 사용해서 circular dependency 방지
-                const { AdStageSDK } = await Promise.resolve().then(function () { return index; });
-                // SDK 인스턴스 생성
-                const sdkInstance = AdStageSDK.init(config);
-                setSdk(sdkInstance);
-                setIsInitialized(true);
-                setIsLoading(false);
-            }
-            catch (err) {
-                const errorMessage = err instanceof Error ? err.message : 'SDK 초기화 중 오류가 발생했습니다.';
-                setError(errorMessage);
-                setIsLoading(false);
-                console.error('AdStage SDK initialization failed:', err);
-            }
-        };
-        initializeSDK();
-    }, [config.apiKey, config.debug, autoInit]);
-    const value = {
-        sdk,
-        isLoading,
-        error,
-        isInitialized,
-    };
-    return (jsxRuntimeExports.jsx(AdStageContext.Provider, { value: value, children: children }));
-};
-
-/**
- * AdStage SDK 인스턴스에 접근하기 위한 Hook
- * AdStageProvider 내부에서만 사용 가능
- */
-const useAdStage = () => {
-    const context = reactExports.useContext(AdStageContext);
-    if (!context) {
-        throw new Error('useAdStage must be used within an AdStageProvider');
+async function initAdStage(config) {
+    if (globalSDKInstance) {
+        console.warn('AdStage SDK가 이미 초기화되었습니다.');
+        return;
+    }
+    if (isInitializing) {
+        console.warn('AdStage SDK 초기화가 진행 중입니다.');
+        return;
+    }
+    isInitializing = true;
+    try {
+        // 동적 import로 circular dependency 방지
+        const { AdStageSDK } = await Promise.resolve().then(function () { return index; });
+        globalSDKInstance = AdStageSDK.init({
+            apiKey: config.apiKey,
+            debug: config.debug || false
+        });
+        console.log('✅ AdStage SDK 초기화 완료');
     }
-    return context;
-};
-
-/**
- * 범용 광고 슬롯 컴포넌트
- * 모든 광고 타입을 지원하며 SSR 환경에서도 안전하게 동작
- */
-const AdSlot = ({ slotId, adType, width, height, className, style, autoSlideInterval = 3, sliderEffect = 'slide', language, deviceType, country, }) => {
-    const containerRef = reactExports.useRef(null);
-    const { sdk, isLoading, error } = useAdStage();
-    const containerId = reactExports.useMemo(() => `adstage-${slotId}`, [slotId]);
-    reactExports.useEffect(() => {
-        if (!sdk || !containerRef.current || isLoading || error) {
-            return;
-        }
-        // 컨테이너에 ID 설정
-        containerRef.current.id = containerId;
-        // 광고 슬롯 생성
-        const createSlot = async () => {
-            try {
-                await sdk.createSlot(slotId, containerId, adType, {
-                    width,
-                    height,
-                    language,
-                    deviceType,
-                    country,
-                    autoSlideInterval,
-                    sliderEffect,
-                });
-            }
-            catch (err) {
-                console.error(`Failed to create ad slot ${slotId}:`, err);
-            }
-        };
-        createSlot();
-        // 클린업 함수
-        return () => {
-            // SDK에 removeSlot 메서드가 없으므로 DOM 정리만 수행
-            if (containerRef.current) {
-                containerRef.current.innerHTML = '';
-            }
-        };
-    }, [
-        sdk,
-        slotId,
-        containerId,
-        adType,
-        width,
-        height,
-        language,
-        deviceType,
-        country,
-        autoSlideInterval,
-        sliderEffect,
-        isLoading,
-        error,
-    ]);
-    const containerStyle = {
-        width: typeof width === 'number' ? `${width}px` : width,
-        height: typeof height === 'number' ? `${height}px` : height,
-        ...style,
-    };
-    // 로딩 상태 표시
-    if (isLoading) {
-        return (jsxRuntimeExports.jsx("div", { className: className, style: {
-                ...containerStyle,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: '#f5f5f5',
-                border: '1px dashed #ccc',
-                color: '#999',
-            }, children: "Loading Ad..." }));
-    }
-    // 에러 상태 표시
-    if (error) {
-        return (jsxRuntimeExports.jsx("div", { className: className, style: {
-                ...containerStyle,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: '#fee',
-                border: '1px solid #fcc',
-                color: '#c00',
-            }, children: "Ad Load Error" }));
-    }
-    return (jsxRuntimeExports.jsx("div", { ref: containerRef, className: className, style: containerStyle }));
-};
-
+    catch (error) {
+        console.error('❌ AdStage SDK 초기화 실패:', error);
+        throw error;
+    }
+    finally {
+        isInitializing = false;
+    }
+}
 /**
- * 배너 광고 전용 컴포넌트
- * AdSlot의 래퍼로 adType이 BANNER로 고정됨
+ * 배너 광고 생성 (가장 간단한 API)
  */
-const BannerAd = (props) => {
-    return jsxRuntimeExports.jsx(AdSlot, { ...props, adType: AdType.BANNER });
-};
-
+async function createBanner(containerId, options) {
+    if (!globalSDKInstance) {
+        throw new Error('AdStage SDK가 초기화되지 않았습니다. initAdStage()를 먼저 호출하세요.');
+    }
+    const slotId = `banner-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    return globalSDKInstance.createSlot(slotId, containerId, 'BANNER', {
+        width: options?.width || '100%',
+        height: options?.height || 120,
+        autoSlideInterval: options?.autoSlide ? (options.slideInterval || 5) : 0,
+        sliderEffect: 'fade'
+    });
+}
 /**
- * 텍스트 광고 전용 컴포넌트
- * AdSlot의 래퍼로 adType이 TEXT로 고정됨
+ * 텍스트 광고 생성
  */
-const TextAd = (props) => {
-    return jsxRuntimeExports.jsx(AdSlot, { ...props, adType: AdType.TEXT });
-};
-
+async function createTextAd(containerId, options) {
+    if (!globalSDKInstance) {
+        throw new Error('AdStage SDK가 초기화되지 않았습니다.');
+    }
+    const slotId = `text-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    return globalSDKInstance.createSlot(slotId, containerId, 'TEXT', {
+        maxLines: options?.maxLines || 3,
+        style: options?.style || 'card'
+    });
+}
 /**
- * 네이티브 광고 전용 컴포넌트
- * AdSlot의 래퍼로 adType이 NATIVE로 고정됨
+ * 비디오 광고 생성
  */
-const NativeAd = (props) => {
-    return jsxRuntimeExports.jsx(AdSlot, { ...props, adType: AdType.NATIVE });
-};
-
+async function createVideoAd(containerId, options) {
+    if (!globalSDKInstance) {
+        throw new Error('AdStage SDK가 초기화되지 않았습니다.');
+    }
+    const slotId = `video-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    return globalSDKInstance.createSlot(slotId, containerId, 'VIDEO', {
+        width: options?.width || '100%',
+        height: options?.height || 300,
+        autoplay: options?.autoplay || false,
+        muted: options?.muted || true
+    });
+}
 /**
- * 비디오 광고 전용 컴포넌트
- * AdSlot의 래퍼로 adType이 VIDEO로 고정됨
+ * 커스텀 이벤트 추적
  */
-const VideoAd = (props) => {
-    return jsxRuntimeExports.jsx(AdSlot, { ...props, adType: AdType.VIDEO });
-};
-
+function trackEvent(eventName, params) {
+    if (!globalSDKInstance) {
+        console.warn('AdStage SDK가 초기화되지 않았습니다. 이벤트 추적을 건너뜁니다.');
+        return;
+    }
+    try {
+        globalSDKInstance.trackCustomEvent(eventName, {
+            timestamp: new Date().toISOString(),
+            ...params
+        });
+        console.log(`📊 이벤트 추적: ${eventName}`, params);
+    }
+    catch (error) {
+        console.error('이벤트 추적 실패:', error);
+    }
+}
 /**
- * 인터스티셜 광고 전용 컴포넌트
- * AdSlot의 래퍼로 adType이 INTERSTITIAL로 고정됨
+ * SDK 상태 확인
  */
-const InterstitialAd = (props) => {
-    return jsxRuntimeExports.jsx(AdSlot, { ...props, adType: AdType.INTERSTITIAL });
-};
-
+function isAdStageReady() {
+    return globalSDKInstance !== null && !isInitializing;
+}
 /**
- * 광고 컴포넌트에서 발생하는 오류를 포착하는 Error Boundary
- * 광고 로딩 실패 시 fallback UI를 표시하고 앱 전체가 크래시되는 것을 방지
+ * SDK 인스턴스 가져오기 (고급 사용자용)
  */
-class AdErrorBoundary extends reactExports.Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false, error: null };
-    }
-    static getDerivedStateFromError(error) {
-        return { hasError: true, error };
-    }
-    componentDidCatch(error, errorInfo) {
-        console.error('AdStage Error Boundary caught an error:', error, errorInfo);
-        // 사용자 정의 에러 핸들러 호출
-        if (this.props.onError) {
-            this.props.onError(error, errorInfo);
-        }
-    }
-    render() {
-        if (this.state.hasError) {
-            // 사용자 정의 fallback이 있으면 사용, 없으면 기본 fallback 표시
-            if (this.props.fallback) {
-                return this.props.fallback;
-            }
-            return (jsxRuntimeExports.jsxs("div", { style: {
-                    padding: '20px',
-                    textAlign: 'center',
-                    backgroundColor: '#fee',
-                    border: '1px solid #fcc',
-                    borderRadius: '4px',
-                    color: '#c00',
-                }, children: [jsxRuntimeExports.jsx("h3", { children: "\uAD11\uACE0 \uB85C\uB529 \uC624\uB958" }), jsxRuntimeExports.jsx("p", { children: "\uAD11\uACE0\uB97C \uBD88\uB7EC\uC624\uB294 \uC911 \uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4." }), jsxRuntimeExports.jsx("button", { onClick: () => this.setState({ hasError: false, error: null }), style: {
-                            padding: '8px 16px',
-                            backgroundColor: '#fff',
-                            border: '1px solid #ccc',
-                            borderRadius: '4px',
-                            cursor: 'pointer',
-                        }, children: "\uB2E4\uC2DC \uC2DC\uB3C4" })] }));
-        }
-        return this.props.children;
+function getAdStageInstance() {
+    if (!globalSDKInstance) {
+        console.warn('AdStage SDK가 초기화되지 않았습니다.');
+        return null;
     }
+    return globalSDKInstance;
 }
-
 /**
- * 광고 슬롯 생성 및 관리를 위한 Hook
- * 컴포넌트에서 직접 슬롯을 제어하고 싶을 때 사용
+ * SDK 초기화 해제 (필요시)
  */
-const useAdSlot = (options) => {
-    const { sdk } = useAdStage();
-    const [isLoading, setIsLoading] = reactExports.useState(false);
-    const [error, setError] = reactExports.useState(null);
-    const [isCreated, setIsCreated] = reactExports.useState(false);
-    const createSlot = async () => {
-        if (!sdk) {
-            setError('SDK not initialized');
-            return;
-        }
-        setIsLoading(true);
-        setError(null);
+function destroyAdStage() {
+    if (globalSDKInstance) {
         try {
-            await sdk.createSlot(options.slotId, options.containerId, options.adType, {
-                width: options.width,
-                height: options.height,
-                language: options.language,
-                deviceType: options.deviceType,
-                country: options.country,
-                autoSlideInterval: options.autoSlideInterval,
-                sliderEffect: options.sliderEffect,
-            });
-            setIsCreated(true);
-        }
-        catch (err) {
-            const errorMessage = err instanceof Error ? err.message : '슬롯 생성 중 오류가 발생했습니다.';
-            setError(errorMessage);
-            setIsCreated(false);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    const resetSlot = () => {
-        setIsLoading(false);
-        setError(null);
-        setIsCreated(false);
-    };
-    // SDK가 변경되면 상태 초기화
-    reactExports.useEffect(() => {
-        resetSlot();
-    }, [sdk]);
-    return {
-        isLoading,
-        error,
-        isCreated,
-        createSlot,
-        resetSlot,
-    };
-};
-
-/**
- * 광고 이벤트 추적을 위한 Hook
- * 커스텀 이벤트 추적이 필요할 때 사용
- */
-const useAdTracking = () => {
-    const { sdk } = useAdStage();
-    const trackEvent = reactExports.useCallback((adId, slotId, eventType) => {
-        if (!sdk) {
-            console.warn('SDK not initialized - cannot track event');
-            return;
+            // SDK cleanup logic here
+            globalSDKInstance = null;
+            console.log('🧹 AdStage SDK 정리 완료');
         }
-        try {
-            // SDK의 eventTracker에 직접 접근할 수 없으므로 
-            // 여기서는 console.log로 대체하거나 SDK에 public 메서드가 있다면 사용
-            console.log('Ad Event Tracked:', { adId, slotId, eventType });
-            // 실제 구현에서는 SDK에 trackEvent 메서드가 있다면 사용
-            // sdk.trackEvent(adId, slotId, eventType);
-        }
-        catch (err) {
-            console.error('Failed to track event:', err);
-        }
-    }, [sdk]);
-    const trackClick = reactExports.useCallback((adId, slotId) => {
-        trackEvent(adId, slotId, AdEventType.CLICK);
-    }, [trackEvent]);
-    const trackImpression = reactExports.useCallback((adId, slotId) => {
-        trackEvent(adId, slotId, AdEventType.IMPRESSION);
-    }, [trackEvent]);
-    const trackView = reactExports.useCallback((adId, slotId) => {
-        trackEvent(adId, slotId, AdEventType.VIEWABLE);
-    }, [trackEvent]);
-    const trackClose = reactExports.useCallback((adId, slotId) => {
-        trackEvent(adId, slotId, AdEventType.COMPLETED);
-    }, [trackEvent]);
-    return {
-        trackEvent,
-        trackClick,
-        trackImpression,
-        trackView,
-        trackClose,
-    };
-};
+        catch (error) {
+            console.error('SDK 정리 중 오류:', error);
+        }
+    }
+}
 
 /**
  * AdStage SDK 메인 클래스
@@ -2283,6 +2056,23 @@ class AdStageSDK {
     getAllSlots() {
         return new Map(this.slots);
     }
+    /**
+     * 커스텀 이벤트 추적
+     */
+    trackCustomEvent(eventName, params) {
+        try {
+            this.eventTracker.trackCustomEvent(eventName, {
+                timestamp: new Date().toISOString(),
+                ...params
+            });
+            if (this.config.debug) {
+                console.log(`📊 커스텀 이벤트 추적: ${eventName}`, params);
+            }
+        }
+        catch (error) {
+            console.error('커스텀 이벤트 추적 실패:', error);
+        }
+    }
 }
 AdStageSDK.instance = null;
 async function autoInit() {
@@ -2308,24 +2098,23 @@ if (DOMUtils.isBrowser()) {
         DOMUtils.waitForDOM().then(autoInit);
     }
 }
+// React exports (React가 있을 때만 사용 - 레거시)
+// export * from './react';
 
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AdErrorBoundary: AdErrorBoundary,
     get AdEventType () { return AdEventType; },
-    AdSlot: AdSlot,
-    AdStageProvider: AdStageProvider,
     AdStageSDK: AdStageSDK,
     get AdType () { return AdType; },
-    BannerAd: BannerAd,
-    InterstitialAd: InterstitialAd,
-    NativeAd: NativeAd,
-    TextAd: TextAd,
-    VideoAd: VideoAd,
+    createBanner: createBanner,
+    createTextAd: createTextAd,
+    createVideoAd: createVideoAd,
     default: AdStageSDK,
-    useAdSlot: useAdSlot,
-    useAdStage: useAdStage,
-    useAdTracking: useAdTracking
+    destroyAdStage: destroyAdStage,
+    getAdStageInstance: getAdStageInstance,
+    initAdStage: initAdStage,
+    isAdStageReady: isAdStageReady,
+    trackEvent: trackEvent
 });
 
-export { AdErrorBoundary, AdEventType, AdSlot, AdStageProvider, AdStageSDK, AdType, BannerAd, InterstitialAd, NativeAd, TextAd, VideoAd, AdStageSDK as default, useAdSlot, useAdStage, useAdTracking };
+export { AdEventType, AdStageSDK, AdType, createBanner, createTextAd, createVideoAd, AdStageSDK as default, destroyAdStage, getAdStageInstance, initAdStage, isAdStageReady, trackEvent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adstage/web-sdk",
-  "version": "1.1.0",
+  "version": "1.3.1",
   "description": "AdStage Web SDK for displaying advertisements",
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -62,7 +62,6 @@
     "@rollup/plugin-typescript": "^11.1.0",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0",
-    "react": "^18.0.0",
     "rollup": "^3.23.0",
     "rollup-plugin-dts": "^5.3.0",
     "tslib": "^2.8.1",
@@ -71,6 +70,11 @@
   "peerDependencies": {
     "react": ">=16.8.0"
   },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/nbase-io/adstage.git",