@adstage/web-sdk 1.3.4 → 1.4.0

package/examples/react-app/src/App.tsx

@@ -1,226 +0,0 @@
-import { useEffect, useState } from 'react';
-// @ts-ignore - SDK 로컬 경로 사용
-import { AdStageSDK, AdType } from '../../../dist/index.esm.js';
-
-function App() {
-  const [isSDKInitialized, setIsSDKInitialized] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    // SDK 초기화
-    const initSDK = async () => {
-      try {
-        setIsLoading(true);
-        const sdk = AdStageSDK.init({
-          apiKey: process.env.REACT_APP_ADSTAGE_API_KEY || '',
-          debug: true
-        });
-        setIsSDKInitialized(true);
-        console.log('AdStage SDK 초기화 완료');
-      } catch (error) {
-        console.error('SDK 초기화 실패:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    initSDK();
-  }, []);
-
-  const createBannerSlot = async () => {
-    if (!isSDKInitialized) return;
-    
-    try {
-      const sdk = AdStageSDK.getInstance();
-      await sdk.createSlot(
-        'banner-slot-1',
-        'banner-container',
-        AdType.BANNER,
-        {
-          width: '100%',
-          height: 200,
-          autoSlideInterval: 5,
-          sliderEffect: 'fade'
-        }
-      );
-      console.log('배너 슬롯 생성 완료');
-    } catch (error) {
-      console.error('배너 슬롯 생성 실패:', error);
-    }
-  };
-
-  const createSliderSlot = async () => {
-    if (!isSDKInitialized) return;
-    
-    try {
-      const sdk = AdStageSDK.getInstance();
-      await sdk.createSlot(
-        'slider-slot-1',
-        'slider-container',
-        AdType.SLIDER,
-        {
-          width: 400,
-          height: 300,
-          autoSlideInterval: 3,
-          sliderEffect: 'slide'
-        }
-      );
-      console.log('슬라이더 슬롯 생성 완료');
-    } catch (error) {
-      console.error('슬라이더 슬롯 생성 실패:', error);
-    }
-  };
-
-  const trackCustomEvent = () => {
-    if (!isSDKInitialized) return;
-    
-    try {
-      const sdk = AdStageSDK.getInstance();
-      sdk.trackEvent('button_click', {
-        button_name: 'custom_event_button',
-        timestamp: new Date().toISOString()
-      });
-      console.log('커스텀 이벤트 추적 완료');
-    } catch (error) {
-      console.error('이벤트 추적 실패:', error);
-    }
-  };
-
-  return (
-    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
-      <h1>AdStage SDK React 예제</h1>
-      
-      {isLoading && (
-        <div style={{ color: '#666', marginBottom: '20px' }}>
-          SDK 초기화 중...
-        </div>
-      )}
-      
-      <div style={{ marginBottom: '20px' }}>
-        <strong>SDK 상태:</strong> 
-        <span style={{ 
-          color: isSDKInitialized ? '#28a745' : '#dc3545',
-          marginLeft: '8px'
-        }}>
-          {isSDKInitialized ? '초기화 완료' : '초기화되지 않음'}
-        </span>
-      </div>
-
-      <div style={{ marginBottom: '30px' }}>
-        <h2>광고 슬롯 관리</h2>
-        <div style={{ marginBottom: '10px' }}>
-          <button 
-            onClick={createBannerSlot}
-            disabled={!isSDKInitialized}
-            style={{
-              padding: '8px 16px',
-              marginRight: '10px',
-              backgroundColor: isSDKInitialized ? '#007bff' : '#ccc',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: isSDKInitialized ? 'pointer' : 'not-allowed'
-            }}
-          >
-            배너 광고 생성
-          </button>
-          <button 
-            onClick={createSliderSlot}
-            disabled={!isSDKInitialized}
-            style={{
-              padding: '8px 16px',
-              backgroundColor: isSDKInitialized ? '#28a745' : '#ccc',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: isSDKInitialized ? 'pointer' : 'not-allowed'
-            }}
-          >
-            슬라이더 광고 생성
-          </button>
-        </div>
-      </div>
-
-      <div style={{ marginBottom: '30px' }}>
-        <h2>이벤트 추적</h2>
-        <button 
-          onClick={trackCustomEvent}
-          disabled={!isSDKInitialized}
-          style={{
-            padding: '8px 16px',
-            backgroundColor: isSDKInitialized ? '#ffc107' : '#ccc',
-            color: isSDKInitialized ? '#212529' : 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: isSDKInitialized ? 'pointer' : 'not-allowed'
-          }}
-        >
-          커스텀 이벤트 추적
-        </button>
-      </div>
-
-      <div style={{ marginBottom: '20px' }}>
-        <h2>광고 컨테이너</h2>
-        
-        <div style={{ marginBottom: '20px' }}>
-          <h3>배너 광고</h3>
-          <div 
-            id="banner-container" 
-            style={{
-              border: '2px dashed #ccc',
-              borderRadius: '4px',
-              padding: '20px',
-              textAlign: 'center',
-              backgroundColor: '#f8f9fa',
-              minHeight: '200px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center'
-            }}
-          >
-            배너 광고가 여기에 로드됩니다
-          </div>
-        </div>
-
-        <div style={{ marginBottom: '20px' }}>
-          <h3>슬라이더 광고</h3>
-          <div 
-            id="slider-container" 
-            style={{
-              border: '2px dashed #ccc',
-              borderRadius: '4px',
-              padding: '20px',
-              textAlign: 'center',
-              backgroundColor: '#f8f9fa',
-              minHeight: '300px',
-              width: '400px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center'
-            }}
-          >
-            슬라이더 광고가 여기에 로드됩니다
-          </div>
-        </div>
-      </div>
-
-      <div style={{ 
-        marginTop: '40px', 
-        padding: '16px', 
-        backgroundColor: '#e9ecef', 
-        borderRadius: '4px',
-        fontSize: '14px'
-      }}>
-        <h3 style={{ marginTop: '0' }}>사용 방법:</h3>
-        <ol>
-          <li>SDK가 초기화되면 "초기화 완료" 상태가 표시됩니다</li>
-          <li>"배너 광고 생성" 또는 "슬라이더 광고 생성" 버튼을 클릭하여 광고 슬롯을 생성합니다</li>
-          <li>"커스텀 이벤트 추적" 버튼을 클릭하여 사용자 이벤트를 추적합니다</li>
-          <li>브라우저 개발자 도구의 콘솔에서 SDK 동작을 확인할 수 있습니다</li>
-        </ol>
-      </div>
-    </div>
-  );
-}
-
-export default App;

package/examples/react-app/src/index.css

@@ -1,37 +0,0 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-  line-height: 1.6;
-  color: #333;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  min-height: 100vh;
-}
-
-#root {
-  min-height: 100vh;
-}
-
-button:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
-  transition: all 0.3s ease;
-}
-
-button:active {
-  transform: translateY(0);
-}
-
-@media (max-width: 768px) {
-  .metrics-grid {
-    grid-template-columns: 1fr !important;
-  }
-  
-  .button-group {
-    flex-direction: column;
-  }
-}

package/examples/react-app/src/main.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)

package/examples/react-app/tsconfig.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/examples/react-app/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/examples/react-app/vite.config.ts

@@ -1,15 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 3000,
-    open: true
-  },
-  resolve: {
-    alias: {
-      '@adstage/web-sdk': '../../dist/index.esm.js'
-    }
-  }
-})

package/examples/react-nextjs/app/globals.css

@@ -1,200 +0,0 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-  line-height: 1.6;
-  color: #333;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  min-height: 100vh;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-.header {
-  text-align: center;
-  background: white;
-  border-radius: 12px;
-  padding: 40px 30px;
-  margin-bottom: 30px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-}
-
-.header h1 {
-  color: #667eea;
-  font-size: 2.5rem;
-  margin-bottom: 10px;
-}
-
-.header p {
-  color: #666;
-  font-size: 1.1rem;
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-}
-
-.metrics {
-  background: white;
-  border-radius: 12px;
-  padding: 30px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-}
-
-.metrics h2 {
-  color: #555;
-  margin-bottom: 20px;
-  font-size: 1.5rem;
-}
-
-.metrics-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 20px;
-}
-
-.metric-card {
-  text-align: center;
-  padding: 20px;
-  background: #f8f9fa;
-  border-radius: 8px;
-  border: 2px solid #e9ecef;
-}
-
-.metric-value {
-  font-size: 2rem;
-  font-weight: bold;
-  color: #667eea;
-}
-
-.metric-label {
-  color: #666;
-  margin-top: 5px;
-  font-size: 0.9rem;
-}
-
-.ads-section {
-  background: white;
-  border-radius: 12px;
-  padding: 30px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-}
-
-.ads-section h2 {
-  color: #555;
-  margin-bottom: 25px;
-  font-size: 1.5rem;
-}
-
-.ad-demo {
-  margin-bottom: 30px;
-  padding: 20px;
-  border: 2px solid #f0f0f0;
-  border-radius: 8px;
-  background: #fafafa;
-}
-
-.ad-demo h3 {
-  color: #555;
-  margin-bottom: 15px;
-  font-size: 1.2rem;
-}
-
-.banner-ad, .text-ad, .native-ad, .video-ad {
-  margin: 15px 0;
-  padding: 20px;
-  border: 1px dashed #ccc;
-  border-radius: 6px;
-  background: white;
-  min-height: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.interaction-section {
-  background: white;
-  border-radius: 12px;
-  padding: 30px;
-  text-align: center;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-}
-
-.interaction-section h2 {
-  color: #555;
-  margin-bottom: 25px;
-  font-size: 1.5rem;
-}
-
-.conversion-btn, .reset-btn {
-  padding: 12px 24px;
-  margin: 0 10px;
-  border: none;
-  border-radius: 6px;
-  font-size: 16px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.conversion-btn {
-  background: #28a745;
-  color: white;
-}
-
-.conversion-btn:hover {
-  background: #218838;
-  transform: translateY(-2px);
-}
-
-.reset-btn {
-  background: #6c757d;
-  color: white;
-}
-
-.reset-btn:hover {
-  background: #5a6268;
-  transform: translateY(-2px);
-}
-
-.footer {
-  text-align: center;
-  background: white;
-  border-radius: 12px;
-  padding: 20px;
-  margin-top: 30px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-  color: #666;
-}
-
-@media (max-width: 768px) {
-  .container {
-    padding: 10px;
-  }
-  
-  .header h1 {
-    font-size: 2rem;
-  }
-  
-  .metrics-grid {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
-  }
-  
-  .metric-card {
-    padding: 15px 10px;
-  }
-  
-  .metric-value {
-    font-size: 1.5rem;
-  }
-}

package/examples/react-nextjs/app/layout.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-// @ts-ignore - SDK 로컬 경로 사용
-import { AdStageProvider } from '../../../dist/index.esm.js';
-import './globals.css';
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="ko">
-      <body>
-        <AdStageProvider 
-          config={{
-            apiKey: process.env.NEXT_PUBLIC_ADSTAGE_API_KEY || '',
-            debug: process.env.NODE_ENV === 'development'
-          }}
-          autoInit={true}
-        >
-          {children}
-        </AdStageProvider>
-      </body>
-    </html>
-  );
-}