@adstage/web-sdk 1.1.0 → 1.3.0

package/README.md

@@ -1,70 +1,62 @@
 # AdStage Web SDK
 
-AdStage Web SDK는 웹사이트에 광고를 쉽게 통합할 수 있는 JavaScript/TypeScript 라이브러리입니다.
+> 🚀 **v1.2.0**: Standalone-First API로 더욱 간단해졌습니다!
 
-## 설치
+모든 웹 프레임워크에서 사용 가능한 AdStage 광고 SDK입니다.
+
+## 🎯 특징
+
+- **프레임워크 독립적**: React, Vue, Angular, Vanilla JS 모든 환경 지원
+- **초간단 API**: Provider나 Hook 없이 함수 호출만으로 사용
+- **자동 최적화**: 중복 방지, ID 자동 생성, 스마트 캐싱
+- **완전한 TypeScript 지원**
+
+## 📦 설치
 
 ```bash
 npm install @adstage/web-sdk
 ```
 
-## 사용법
-
-### 기본 사용법
+## 🚀 빠른 시작
 
+### 1. SDK 초기화
 ```javascript
-import { AdStageSDK, AdType } from '@adstage/web-sdk';
+import { initAdStage } from '@adstage/web-sdk';
 
-// SDK 초기화
-const sdk = AdStageSDK.init({
-  apiKey: 'your-api-key',
-  debug: true
+await initAdStage({
+  apiKey: 'your-api-key'
 });
-
-// 광고 슬롯 생성
-await sdk.createSlot(
-  'banner-slot-1',
-  'banner-container',
-  AdType.BANNER,
-  {
-    width: '100%',
-    height: 200
-  }
-);
 ```
 
-### React 컴포넌트 사용법
+### 2. 광고 생성
+```javascript
+import { createBanner } from '@adstage/web-sdk';
 
-```jsx
-import { AdStageProvider, useAdStage } from '@adstage/web-sdk';
+// HTML에 <div id="banner"></div> 준비 후
+await createBanner('banner');
+```
 
-function App() {
-  return (
-    <AdStageProvider config={{ apiKey: 'your-api-key' }}>
-      <MyComponent />
-    </AdStageProvider>
-  );
-}
+### 3. 이벤트 추적
+```javascript
+import { trackEvent } from '@adstage/web-sdk';
 
-function MyComponent() {
-  const { sdk, isLoading, isInitialized } = useAdStage();
-  
-  // SDK 사용...
-}
+trackEvent('button_click', { page: 'home' });
 ```
 
-## 지원하는 광고 타입
-
-- BANNER: 배너 광고
-- SLIDER: 슬라이더 광고  
-- TEXT: 텍스트 광고
-- NATIVE: 네이티브 광고
-- VIDEO: 비디오 광고
+## 📋 API 레퍼런스
 
-## 라이센스
+### 초기화
+- `initAdStage(config)` - SDK 초기화
+- `isAdStageReady()` - 초기화 상태 확인
 
-MIT
+### 광고 생성
+- `createBanner(containerId, options?)` - 배너 광고
+- `createTextAd(containerId, options?)` - 텍스트 광고  
+- `createVideoAd(containerId, options?)` - 비디오 광고
 
-## 지원
+### 유틸리티
+- `trackEvent(name, params?)` - 이벤트 추적
+- `getAdStageInstance()` - SDK 인스턴스 (고급)
+- `destroyAdStage()` - SDK 정리
 
-문의사항이 있으시면 [GitHub Issues](https://github.com/nbase-io/adstage/issues)에 등록해주세요.
+자세한 사용법은 [STANDALONE_GUIDE.md](./STANDALONE_GUIDE.md)를 참고하세요.

package/dist/index.cjs.js

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var require$$0 = require('react');
-
 // 광고 타입 정의
 exports.AdType = void 0;
 (function (AdType) {
@@ -1666,357 +1664,135 @@ class SDKUtils {
     }
 }
 
-var jsxRuntime = {exports: {}};
-
-var reactJsxRuntime_production_min = {};
-
 /**
- * @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.
+ * AdStage SDK Standalone API
+ * 간단하고 직관적인 사용을 위한 통합 API
  */
-
-var hasRequiredReactJsxRuntime_production_min;
-
-function requireReactJsxRuntime_production_min () {
-	if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
-	hasRequiredReactJsxRuntime_production_min = 1;
-var f=require$$0,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 = require$$0.createContext({
-    sdk: null,
-    isLoading: true,
-    error: null,
-    isInitialized: false,
-});
-const AdStageProvider = ({ config, children, autoInit = true, }) => {
-    const [sdk, setSdk] = require$$0.useState(null);
-    const [isLoading, setIsLoading] = require$$0.useState(true);
-    const [error, setError] = require$$0.useState(null);
-    const [isInitialized, setIsInitialized] = require$$0.useState(false);
-    require$$0.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 }));
-};
-
+let globalSDKInstance = null;
+let isInitializing = false;
 /**
- * AdStage SDK 인스턴스에 접근하기 위한 Hook
- * AdStageProvider 내부에서만 사용 가능
+ * SDK 초기화 (한 번만 호출)
  */
-const useAdStage = () => {
-    const context = require$$0.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 = require$$0.useRef(null);
-    const { sdk, isLoading, error } = useAdStage();
-    const containerId = require$$0.useMemo(() => `adstage-${slotId}`, [slotId]);
-    require$$0.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: exports.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: exports.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: exports.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: exports.AdType.VIDEO });
-};
-
+function trackEvent(eventName, params) {
+    if (!globalSDKInstance) {
+        console.warn('AdStage SDK가 초기화되지 않았습니다. 이벤트 추적을 건너뜁니다.');
+        return;
+    }
+    try {
+        globalSDKInstance.trackEvent(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: exports.AdType.INTERSTITIAL });
-};
-
+function isAdStageReady() {
+    return globalSDKInstance !== null && !isInitializing;
+}
 /**
- * 광고 컴포넌트에서 발생하는 오류를 포착하는 Error Boundary
- * 광고 로딩 실패 시 fallback UI를 표시하고 앱 전체가 크래시되는 것을 방지
+ * SDK 인스턴스 가져오기 (고급 사용자용)
  */
-class AdErrorBoundary extends require$$0.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] = require$$0.useState(false);
-    const [error, setError] = require$$0.useState(null);
-    const [isCreated, setIsCreated] = require$$0.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가 변경되면 상태 초기화
-    require$$0.useEffect(() => {
-        resetSlot();
-    }, [sdk]);
-    return {
-        isLoading,
-        error,
-        isCreated,
-        createSlot,
-        resetSlot,
-    };
-};
-
-/**
- * 광고 이벤트 추적을 위한 Hook
- * 커스텀 이벤트 추적이 필요할 때 사용
- */
-const useAdTracking = () => {
-    const { sdk } = useAdStage();
-    const trackEvent = require$$0.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 = require$$0.useCallback((adId, slotId) => {
-        trackEvent(adId, slotId, exports.AdEventType.CLICK);
-    }, [trackEvent]);
-    const trackImpression = require$$0.useCallback((adId, slotId) => {
-        trackEvent(adId, slotId, exports.AdEventType.IMPRESSION);
-    }, [trackEvent]);
-    const trackView = require$$0.useCallback((adId, slotId) => {
-        trackEvent(adId, slotId, exports.AdEventType.VIEWABLE);
-    }, [trackEvent]);
-    const trackClose = require$$0.useCallback((adId, slotId) => {
-        trackEvent(adId, slotId, exports.AdEventType.COMPLETED);
-    }, [trackEvent]);
-    return {
-        trackEvent,
-        trackClick,
-        trackImpression,
-        trackView,
-        trackClose,
-    };
-};
+        catch (error) {
+            console.error('SDK 정리 중 오류:', error);
+        }
+    }
+}
 
 /**
  * AdStage SDK 메인 클래스
@@ -2269,36 +2045,32 @@ 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 exports.AdEventType; },
-    AdSlot: AdSlot,
-    AdStageProvider: AdStageProvider,
     AdStageSDK: AdStageSDK,
     get AdType () { return exports.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
 });
 
-exports.AdErrorBoundary = AdErrorBoundary;
-exports.AdSlot = AdSlot;
-exports.AdStageProvider = AdStageProvider;
 exports.AdStageSDK = AdStageSDK;
-exports.BannerAd = BannerAd;
-exports.InterstitialAd = InterstitialAd;
-exports.NativeAd = NativeAd;
-exports.TextAd = TextAd;
-exports.VideoAd = VideoAd;
+exports.createBanner = createBanner;
+exports.createTextAd = createTextAd;
+exports.createVideoAd = createVideoAd;
 exports.default = AdStageSDK;
-exports.useAdSlot = useAdSlot;
-exports.useAdStage = useAdStage;
-exports.useAdTracking = useAdTracking;
+exports.destroyAdStage = destroyAdStage;
+exports.getAdStageInstance = getAdStageInstance;
+exports.initAdStage = initAdStage;
+exports.isAdStageReady = isAdStageReady;
+exports.trackEvent = trackEvent;