@adstage/web-sdk 2.4.0 → 2.4.1

package/dist/index.cjs.js

@@ -19,15 +19,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 +1078,7 @@ class BaseAdRenderer {
             display: 'block',
             'max-width': '100%',
             height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
         // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
         const parsedWidth = this.parseSizeValue(slot?.width);
@@ -1093,6 +1087,7 @@ class BaseAdRenderer {
             styles.width = '100%';
             styles.height = '100%';
             styles['object-fit'] = 'cover';
+            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
         }
         return styles;
     }

package/dist/index.d.ts

@@ -68,15 +68,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 +116,7 @@ interface ViewabilityMetrics {
     isViewable: boolean;
     visibilityRatio: number;
     duration: number;
-    impressions: number;
+    viewables: number;
     attentionTime: number;
     scrollDepth: number;
     completionRate: number;
@@ -199,7 +192,7 @@ interface AdSlot {
     config?: AdSlotConfig;
     advertisement?: Advertisement;
     isViewable?: boolean;
-    impressionSent?: boolean;
+    viewableSent?: boolean;
     loadTime?: number;
     renderTime?: number;
     events?: AdEvent[];

package/dist/index.esm.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;
     }

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;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adstage/web-sdk",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "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/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';

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>;
 }