@adstage/web-sdk 1.1.0

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

@@ -0,0 +1,226 @@
+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

@@ -0,0 +1,37 @@
+* {
+  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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,25 @@
+{
+  "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

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

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,200 @@
+* {
+  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

@@ -0,0 +1,27 @@
+'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>
+  );
+}