@adstage/web-sdk 1.3.3 → 1.4.0

package/src/react/components/AdErrorBoundary.tsx

@@ -1,75 +0,0 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-
-interface AdErrorBoundaryProps {
-  children: ReactNode;
-  fallback?: ReactNode;
-  onError?: (error: Error, errorInfo: ErrorInfo) => void;
-}
-
-interface AdErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-}
-
-/**
- * 광고 컴포넌트에서 발생하는 오류를 포착하는 Error Boundary
- * 광고 로딩 실패 시 fallback UI를 표시하고 앱 전체가 크래시되는 것을 방지
- */
-export class AdErrorBoundary extends Component<AdErrorBoundaryProps, AdErrorBoundaryState> {
-  constructor(props: AdErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): AdErrorBoundaryState {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: 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 (
-        <div
-          style={{
-            padding: '20px',
-            textAlign: 'center',
-            backgroundColor: '#fee',
-            border: '1px solid #fcc',
-            borderRadius: '4px',
-            color: '#c00',
-          }}
-        >
-          <h3>광고 로딩 오류</h3>
-          <p>광고를 불러오는 중 문제가 발생했습니다.</p>
-          <button
-            onClick={() => this.setState({ hasError: false, error: null })}
-            style={{
-              padding: '8px 16px',
-              backgroundColor: '#fff',
-              border: '1px solid #ccc',
-              borderRadius: '4px',
-              cursor: 'pointer',
-            }}
-          >
-            다시 시도
-          </button>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}

package/src/react/components/AdSlot.tsx

@@ -1,144 +0,0 @@
-import React, { useEffect, useRef, useMemo } from 'react';
-import { AdType } from '../../types/advertisement';
-import { useAdStage } from '../hooks/useAdStage';
-
-interface AdSlotProps {
-  slotId: string;
-  adType: AdType;
-  width?: string | number;
-  height?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  autoSlideInterval?: number;
-  sliderEffect?: 'slide' | 'fade';
-  language?: string;
-  deviceType?: string;
-  country?: string;
-}
-
-/**
- * 범용 광고 슬롯 컴포넌트
- * 모든 광고 타입을 지원하며 SSR 환경에서도 안전하게 동작
- */
-export const AdSlot: React.FC<AdSlotProps> = ({
-  slotId,
-  adType,
-  width,
-  height,
-  className,
-  style,
-  autoSlideInterval = 3,
-  sliderEffect = 'slide',
-  language,
-  deviceType,
-  country,
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const { sdk, isLoading, error } = useAdStage();
-
-  const containerId = useMemo(() => `adstage-${slotId}`, [slotId]);
-
-  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: React.CSSProperties = {
-    width: typeof width === 'number' ? `${width}px` : width,
-    height: typeof height === 'number' ? `${height}px` : height,
-    ...style,
-  };
-
-  // 로딩 상태 표시
-  if (isLoading) {
-    return (
-      <div
-        className={className}
-        style={{
-          ...containerStyle,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: '#f5f5f5',
-          border: '1px dashed #ccc',
-          color: '#999',
-        }}
-      >
-        Loading Ad...
-      </div>
-    );
-  }
-
-  // 에러 상태 표시
-  if (error) {
-    return (
-      <div
-        className={className}
-        style={{
-          ...containerStyle,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: '#fee',
-          border: '1px solid #fcc',
-          color: '#c00',
-        }}
-      >
-        Ad Load Error
-      </div>
-    );
-  }
-
-  return (
-    <div
-      ref={containerRef}
-      className={className}
-      style={containerStyle}
-    />
-  );
-};

package/src/react/components/BannerAd.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { AdType } from '../../types/advertisement';
-import { AdSlot } from './AdSlot';
-
-interface BannerAdProps {
-  slotId: string;
-  width?: string | number;
-  height?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  autoSlideInterval?: number;
-  sliderEffect?: 'slide' | 'fade';
-  language?: string;
-  deviceType?: string;
-  country?: string;
-}
-
-/**
- * 배너 광고 전용 컴포넌트
- * AdSlot의 래퍼로 adType이 BANNER로 고정됨
- */
-export const BannerAd: React.FC<BannerAdProps> = (props) => {
-  return <AdSlot {...props} adType={AdType.BANNER} />;
-};

package/src/react/components/InterstitialAd.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { AdType } from '../../types/advertisement';
-import { AdSlot } from './AdSlot';
-
-interface InterstitialAdProps {
-  slotId: string;
-  width?: string | number;
-  height?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  autoSlideInterval?: number;
-  sliderEffect?: 'slide' | 'fade';
-  language?: string;
-  deviceType?: string;
-  country?: string;
-}
-
-/**
- * 인터스티셜 광고 전용 컴포넌트
- * AdSlot의 래퍼로 adType이 INTERSTITIAL로 고정됨
- */
-export const InterstitialAd: React.FC<InterstitialAdProps> = (props) => {
-  return <AdSlot {...props} adType={AdType.INTERSTITIAL} />;
-};

package/src/react/components/NativeAd.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { AdType } from '../../types/advertisement';
-import { AdSlot } from './AdSlot';
-
-interface NativeAdProps {
-  slotId: string;
-  width?: string | number;
-  height?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  autoSlideInterval?: number;
-  sliderEffect?: 'slide' | 'fade';
-  language?: string;
-  deviceType?: string;
-  country?: string;
-}
-
-/**
- * 네이티브 광고 전용 컴포넌트
- * AdSlot의 래퍼로 adType이 NATIVE로 고정됨
- */
-export const NativeAd: React.FC<NativeAdProps> = (props) => {
-  return <AdSlot {...props} adType={AdType.NATIVE} />;
-};

package/src/react/components/TextAd.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { AdType } from '../../types/advertisement';
-import { AdSlot } from './AdSlot';
-
-interface TextAdProps {
-  slotId: string;
-  width?: string | number;
-  height?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  autoSlideInterval?: number;
-  sliderEffect?: 'slide' | 'fade';
-  language?: string;
-  deviceType?: string;
-  country?: string;
-}
-
-/**
- * 텍스트 광고 전용 컴포넌트
- * AdSlot의 래퍼로 adType이 TEXT로 고정됨
- */
-export const TextAd: React.FC<TextAdProps> = (props) => {
-  return <AdSlot {...props} adType={AdType.TEXT} />;
-};

package/src/react/components/VideoAd.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { AdType } from '../../types/advertisement';
-import { AdSlot } from './AdSlot';
-
-interface VideoAdProps {
-  slotId: string;
-  width?: string | number;
-  height?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  autoSlideInterval?: number;
-  sliderEffect?: 'slide' | 'fade';
-  language?: string;
-  deviceType?: string;
-  country?: string;
-}
-
-/**
- * 비디오 광고 전용 컴포넌트
- * AdSlot의 래퍼로 adType이 VIDEO로 고정됨
- */
-export const VideoAd: React.FC<VideoAdProps> = (props) => {
-  return <AdSlot {...props} adType={AdType.VIDEO} />;
-};

package/src/react/components/index.ts

@@ -1,8 +0,0 @@
-// React 컴포넌트들
-export { AdSlot } from './AdSlot';
-export { BannerAd } from './BannerAd';
-export { TextAd } from './TextAd';
-export { NativeAd } from './NativeAd';
-export { VideoAd } from './VideoAd';
-export { InterstitialAd } from './InterstitialAd';
-export { AdErrorBoundary } from './AdErrorBoundary';

package/src/react/hooks/index.ts

@@ -1,4 +0,0 @@
-// React Hook들
-export { useAdStage } from './useAdStage';
-export { useAdSlot } from './useAdSlot';
-export { useAdTracking } from './useAdTracking';

package/src/react/hooks/useAdSlot.ts

@@ -1,83 +0,0 @@
-import { useEffect, useState } from 'react';
-import { AdType } from '../../types/advertisement';
-import { useAdStage } from './useAdStage';
-
-interface UseAdSlotOptions {
-  slotId: string;
-  containerId: string;
-  adType: AdType;
-  width?: string | number;
-  height?: string | number;
-  language?: string;
-  deviceType?: string;
-  country?: string;
-  autoSlideInterval?: number;
-  sliderEffect?: 'slide' | 'fade';
-}
-
-interface UseAdSlotReturn {
-  isLoading: boolean;
-  error: string | null;
-  isCreated: boolean;
-  createSlot: () => Promise<void>;
-  resetSlot: () => void;
-}
-
-/**
- * 광고 슬롯 생성 및 관리를 위한 Hook
- * 컴포넌트에서 직접 슬롯을 제어하고 싶을 때 사용
- */
-export const useAdSlot = (options: UseAdSlotOptions): UseAdSlotReturn => {
-  const { sdk } = useAdStage();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [isCreated, setIsCreated] = useState(false);
-
-  const createSlot = async () => {
-    if (!sdk) {
-      setError('SDK not initialized');
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
-    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가 변경되면 상태 초기화
-  useEffect(() => {
-    resetSlot();
-  }, [sdk]);
-
-  return {
-    isLoading,
-    error,
-    isCreated,
-    createSlot,
-    resetSlot,
-  };
-};

package/src/react/hooks/useAdStage.ts

@@ -1,14 +0,0 @@
-import { useContext } from 'react';
-import { AdStageContext, type AdStageContextValue } from '../providers/AdStageProvider';
-
-/**
- * AdStage SDK 인스턴스에 접근하기 위한 Hook
- * AdStageProvider 내부에서만 사용 가능
- */
-export const useAdStage = (): AdStageContextValue => {
-  const context = useContext(AdStageContext);
-  if (!context) {
-    throw new Error('useAdStage must be used within an AdStageProvider');
-  }
-  return context;
-};

package/src/react/hooks/useAdTracking.ts

@@ -1,61 +0,0 @@
-import { useCallback } from 'react';
-import { AdEventType } from '../../types/advertisement';
-import { useAdStage } from './useAdStage';
-
-interface UseAdTrackingReturn {
-  trackEvent: (adId: string, slotId: string, eventType: AdEventType) => void;
-  trackClick: (adId: string, slotId: string) => void;
-  trackImpression: (adId: string, slotId: string) => void;
-  trackView: (adId: string, slotId: string) => void;
-  trackClose: (adId: string, slotId: string) => void;
-}
-
-/**
- * 광고 이벤트 추적을 위한 Hook
- * 커스텀 이벤트 추적이 필요할 때 사용
- */
-export const useAdTracking = (): UseAdTrackingReturn => {
-  const { sdk } = useAdStage();
-
-  const trackEvent = useCallback((adId: string, slotId: string, eventType: AdEventType) => {
-    if (!sdk) {
-      console.warn('SDK not initialized - cannot track event');
-      return;
-    }
-
-    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 = useCallback((adId: string, slotId: string) => {
-    trackEvent(adId, slotId, AdEventType.CLICK);
-  }, [trackEvent]);
-
-  const trackImpression = useCallback((adId: string, slotId: string) => {
-    trackEvent(adId, slotId, AdEventType.IMPRESSION);
-  }, [trackEvent]);
-
-  const trackView = useCallback((adId: string, slotId: string) => {
-    trackEvent(adId, slotId, AdEventType.VIEWABLE);
-  }, [trackEvent]);
-
-  const trackClose = useCallback((adId: string, slotId: string) => {
-    trackEvent(adId, slotId, AdEventType.COMPLETED);
-  }, [trackEvent]);
-
-  return {
-    trackEvent,
-    trackClick,
-    trackImpression,
-    trackView,
-    trackClose,
-  };
-};

package/src/react/index.ts

@@ -1,4 +0,0 @@
-// React 관련 모든 exports
-export * from './components';
-export * from './hooks';
-export * from './providers';

package/src/react/providers/AdStageProvider.tsx

@@ -1,86 +0,0 @@
-import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
-
-// 타입만 import해서 circular dependency 방지
-import type { AdStageConfig } from '../../index';
-
-// AdStageSDK 클래스 타입 정의 (런타임에는 dynamic import 사용)
-interface AdStageSDKClass {
-  init(config: AdStageConfig): AdStageSDKInstance;
-}
-
-interface AdStageSDKInstance {
-  createSlot: (...args: any[]) => Promise<void>;
-  removeSlot?: (slotId: string) => void;
-}
-
-export interface AdStageContextValue {
-  sdk: AdStageSDKInstance | null;
-  isLoading: boolean;
-  error: string | null;
-  isInitialized: boolean;
-}
-
-const AdStageContext = createContext<AdStageContextValue>({
-  sdk: null,
-  isLoading: true,
-  error: null,
-  isInitialized: false,
-});
-
-export { AdStageContext };
-
-interface AdStageProviderProps {
-  config: AdStageConfig;
-  children: ReactNode;
-  autoInit?: boolean;
-}
-
-export const AdStageProvider: React.FC<AdStageProviderProps> = ({
-  config,
-  children,
-  autoInit = true,
-}) => {
-  const [sdk, setSdk] = useState<AdStageSDKInstance | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [isInitialized, setIsInitialized] = useState(false);
-
-  useEffect(() => {
-    const initializeSDK = async () => {
-      try {
-        setIsLoading(true);
-        setError(null);
-
-        // Dynamic import를 사용해서 circular dependency 방지
-        const { AdStageSDK } = await import('../../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: AdStageContextValue = {
-    sdk,
-    isLoading,
-    error,
-    isInitialized,
-  };
-
-  return (
-    <AdStageContext.Provider value={value}>
-      {children}
-    </AdStageContext.Provider>
-  );
-};

package/src/react/providers/index.ts

@@ -1,2 +0,0 @@
-// React Provider
-export { AdStageProvider } from './AdStageProvider';