@adstage/web-sdk 1.3.4 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/README.md +539 -34
  2. package/dist/index.cjs.js +753 -509
  3. package/dist/index.d.ts +286 -97
  4. package/dist/index.esm.js +737 -485
  5. package/dist/index.standalone.js +737 -485
  6. package/package.json +12 -13
  7. package/src/constants/endpoints.ts +93 -0
  8. package/src/core/AdStage.ts +128 -0
  9. package/src/index.ts +14 -432
  10. package/src/managers/{slider-manager.ts → carousel-slider-manager.ts} +9 -8
  11. package/src/managers/event-tracker.ts +2 -4
  12. package/src/managers/{fade-slider-manager.ts → text-transition-manager.ts} +7 -7
  13. package/src/modules/ads/AdsModule.ts +525 -0
  14. package/src/modules/config/ConfigModule.ts +124 -0
  15. package/src/modules/events/EventsModule.ts +106 -0
  16. package/src/types/config.ts +74 -3
  17. package/src/types/index.ts +2 -1
  18. package/src/utils/api-headers.ts +52 -0
  19. package/src/utils/dom-utils.ts +1 -1
  20. package/examples/README.md +0 -33
  21. package/examples/banner-ads.html +0 -512
  22. package/examples/index.html +0 -338
  23. package/examples/native-ads.html +0 -634
  24. package/examples/react-app/README.md +0 -70
  25. package/examples/react-app/index.html +0 -13
  26. package/examples/react-app/package-lock.json +0 -3042
  27. package/examples/react-app/package.json +0 -26
  28. package/examples/react-app/pnpm-lock.yaml +0 -1857
  29. package/examples/react-app/public/index.standalone.js +0 -2331
  30. package/examples/react-app/src/App.tsx +0 -226
  31. package/examples/react-app/src/index.css +0 -37
  32. package/examples/react-app/src/main.tsx +0 -10
  33. package/examples/react-app/tsconfig.json +0 -25
  34. package/examples/react-app/tsconfig.node.json +0 -10
  35. package/examples/react-app/vite.config.ts +0 -15
  36. package/examples/react-nextjs/app/globals.css +0 -200
  37. package/examples/react-nextjs/app/layout.tsx +0 -27
  38. package/examples/react-nextjs/app/page.tsx +0 -258
  39. package/examples/react-nextjs/next.config.js +0 -9
  40. package/examples/react-nextjs/package.json +0 -22
  41. package/examples/react-nextjs/pnpm-lock.yaml +0 -343
  42. package/examples/react-nextjs/tsconfig.json +0 -34
  43. package/examples/text-ads.html +0 -597
  44. package/examples/video-ads.html +0 -739
  45. package/src/react/components/AdErrorBoundary.tsx +0 -75
  46. package/src/react/components/AdSlot.tsx +0 -144
  47. package/src/react/components/BannerAd.tsx +0 -24
  48. package/src/react/components/InterstitialAd.tsx +0 -24
  49. package/src/react/components/NativeAd.tsx +0 -24
  50. package/src/react/components/TextAd.tsx +0 -24
  51. package/src/react/components/VideoAd.tsx +0 -24
  52. package/src/react/components/index.ts +0 -8
  53. package/src/react/hooks/index.ts +0 -4
  54. package/src/react/hooks/useAdSlot.ts +0 -83
  55. package/src/react/hooks/useAdStage.ts +0 -14
  56. package/src/react/hooks/useAdTracking.ts +0 -61
  57. package/src/react/index.ts +0 -4
  58. package/src/react/providers/AdStageProvider.tsx +0 -86
  59. package/src/react/providers/index.ts +0 -2
  60. package/src/utils/sdk-standalone.ts +0 -155
package/examples/index.html DELETED
@@ -1,338 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="ko">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AdStage SDK - ESM 예제</title>
7
- <style>
8
- * {
9
- box-sizing: border-box;
10
- margin: 0;
11
- padding: 0;
12
- }
13
-
14
- body {
15
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
16
- line-height: 1.6;
17
- color: #333;
18
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
- min-height: 100vh;
20
- padding: 20px;
21
- }
22
-
23
- .container {
24
- max-width: 1200px;
25
- margin: 0 auto;
26
- background: white;
27
- border-radius: 12px;
28
- box-shadow: 0 10px 30px rgba(0,0,0,0.1);
29
- overflow: hidden;
30
- }
31
-
32
- .header {
33
- background: linear-gradient(135deg, #667eea, #764ba2);
34
- color: white;
35
- text-align: center;
36
- padding: 40px 20px;
37
- }
38
-
39
- .header h1 {
40
- font-size: 2.5rem;
41
- margin-bottom: 10px;
42
- }
43
-
44
- .header p {
45
- font-size: 1.2rem;
46
- opacity: 0.9;
47
- }
48
-
49
- .nav {
50
- background: #f8f9fa;
51
- padding: 20px;
52
- border-bottom: 1px solid #dee2e6;
53
- }
54
-
55
- .nav h2 {
56
- margin-bottom: 15px;
57
- color: #495057;
58
- }
59
-
60
- .nav-grid {
61
- display: grid;
62
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
63
- gap: 15px;
64
- }
65
-
66
- .nav-item {
67
- background: white;
68
- border: 2px solid #e9ecef;
69
- border-radius: 8px;
70
- padding: 15px;
71
- text-decoration: none;
72
- color: #495057;
73
- transition: all 0.3s ease;
74
- }
75
-
76
- .nav-item:hover {
77
- border-color: #667eea;
78
- transform: translateY(-2px);
79
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
80
- }
81
-
82
- .nav-item h3 {
83
- color: #667eea;
84
- margin-bottom: 8px;
85
- }
86
-
87
- .content {
88
- padding: 40px;
89
- }
90
-
91
- .demo-section {
92
- margin-bottom: 40px;
93
- }
94
-
95
- .demo-section h2 {
96
- color: #495057;
97
- margin-bottom: 20px;
98
- padding-bottom: 10px;
99
- border-bottom: 2px solid #667eea;
100
- }
101
-
102
- .ad-grid {
103
- display: grid;
104
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
105
- gap: 20px;
106
- margin-top: 20px;
107
- }
108
-
109
- .ad-slot {
110
- border: 2px dashed #dee2e6;
111
- border-radius: 8px;
112
- padding: 20px;
113
- text-align: center;
114
- background: #f8f9fa;
115
- min-height: 120px;
116
- display: flex;
117
- align-items: center;
118
- justify-content: center;
119
- position: relative;
120
- }
121
-
122
- .ad-slot::before {
123
- content: attr(data-label);
124
- position: absolute;
125
- top: 8px;
126
- left: 8px;
127
- font-size: 0.8rem;
128
- color: #6c757d;
129
- background: white;
130
- padding: 2px 6px;
131
- border-radius: 4px;
132
- }
133
-
134
- .status {
135
- margin-top: 20px;
136
- padding: 15px;
137
- background: #e7f3ff;
138
- border-left: 4px solid #0066cc;
139
- border-radius: 4px;
140
- }
141
-
142
- .code-snippet {
143
- background: #2d3748;
144
- color: #e2e8f0;
145
- padding: 20px;
146
- border-radius: 8px;
147
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
148
- font-size: 0.9rem;
149
- overflow-x: auto;
150
- margin: 15px 0;
151
- }
152
-
153
- .feature-grid {
154
- display: grid;
155
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
156
- gap: 20px;
157
- margin: 20px 0;
158
- }
159
-
160
- .feature-card {
161
- background: #f8f9fa;
162
- border: 1px solid #e9ecef;
163
- border-radius: 8px;
164
- padding: 20px;
165
- text-align: center;
166
- }
167
-
168
- .feature-icon {
169
- font-size: 2rem;
170
- margin-bottom: 10px;
171
- }
172
-
173
- .feature-title {
174
- font-weight: 600;
175
- color: #495057;
176
- margin-bottom: 8px;
177
- }
178
-
179
- .feature-desc {
180
- font-size: 0.9rem;
181
- color: #6c757d;
182
- }
183
- </style>
184
- </head>
185
- <body>
186
- <div class="container">
187
- <div class="header">
188
- <h1>🚀 AdStage SDK</h1>
189
- <p>ES Modules (ESM) 방식 예제</p>
190
- </div>
191
-
192
- <div class="nav">
193
- <h2>📖 예제 페이지</h2>
194
- <div class="nav-grid">
195
- <a href="banner-ads.html" class="nav-item">
196
- <h3>🖼️ 배너 광고</h3>
197
- <p>다양한 크기의 이미지 배너 광고</p>
198
- </a>
199
- <a href="text-ads.html" class="nav-item">
200
- <h3>📝 텍스트 광고</h3>
201
- <p>텍스트 기반 광고</p>
202
- </a>
203
- <a href="native-ads.html" class="nav-item">
204
- <h3>🎯 네이티브 광고</h3>
205
- <p>콘텐츠와 자연스럽게 어울리는 광고</p>
206
- </a>
207
- <a href="video-ads.html" class="nav-item">
208
- <h3>🎬 비디오 광고</h3>
209
- <p>비디오 콘텐츠 광고</p>
210
- </a>
211
- </div>
212
- </div>
213
-
214
- <div class="content">
215
- <div class="demo-section">
216
- <h2>🎮 실시간 데모</h2>
217
- <div class="code-snippet">
218
- import AdStageSDK, { AdType } from '../dist/index.standalone.js';
219
-
220
- // SDK 초기화
221
- const sdk = AdStageSDK.init({
222
- apiKey: 'demo-api-key',
223
- debug: true
224
- });
225
- </div>
226
-
227
- <div class="ad-grid">
228
- <div class="ad-slot" data-label="배너" id="demo-banner" adstage="demo-banner" ad-type="BANNER"></div>
229
- <div class="ad-slot" data-label="텍스트" id="demo-text" adstage="demo-text" ad-type="TEXT"></div>
230
- <div class="ad-slot" data-label="네이티브" id="demo-native" adstage="demo-native" ad-type="NATIVE"></div>
231
- </div>
232
-
233
- <div class="status" id="status">
234
- SDK 로딩 중...
235
- </div>
236
- </div>
237
-
238
- <div class="demo-section">
239
- <h2>✨ 주요 기능</h2>
240
- <div class="feature-grid">
241
- <div class="feature-card">
242
- <div class="feature-icon">🎯</div>
243
- <div class="feature-title">타겟팅</div>
244
- <div class="feature-desc">정확한 사용자 타겟팅</div>
245
- </div>
246
- <div class="feature-card">
247
- <div class="feature-icon">📊</div>
248
- <div class="feature-title">분석</div>
249
- <div class="feature-desc">실시간 성과 분석</div>
250
- </div>
251
- <div class="feature-card">
252
- <div class="feature-icon">🔄</div>
253
- <div class="feature-title">자동화</div>
254
- <div class="feature-desc">스마트 광고 최적화</div>
255
- </div>
256
- <div class="feature-card">
257
- <div class="feature-icon">⚡</div>
258
- <div class="feature-title">빠른 로딩</div>
259
- <div class="feature-desc">ESM 모듈 시스템</div>
260
- </div>
261
- </div>
262
- </div>
263
-
264
- <div class="demo-section">
265
- <h2>🔧 사용 방법</h2>
266
- <p><strong>1단계:</strong> ESM 방식으로 SDK Import</p>
267
- <div class="code-snippet">
268
- &lt;script type="module"&gt;
269
- import AdStageSDK, { AdType } from '../dist/index.standalone.js';
270
- &lt;/script&gt;
271
- </div>
272
-
273
- <p><strong>2단계:</strong> HTML에 광고 슬롯 추가</p>
274
- <div class="code-snippet">
275
- &lt;div adstage="my-ad" ad-type="BANNER"&gt;&lt;/div&gt;
276
- </div>
277
-
278
- <p><strong>3단계:</strong> SDK 초기화</p>
279
- <div class="code-snippet">
280
- const sdk = AdStageSDK.init({
281
- apiKey: 'YOUR_API_KEY',
282
- debug: true
283
- });
284
- </div>
285
- </div>
286
- </div>
287
- </div>
288
-
289
- <script type="module">
290
- import AdStageSDK, { AdType } from './dist/index.standalone.js';
291
-
292
- const statusEl = document.getElementById('status');
293
-
294
- try {
295
- // SDK 초기화
296
- const sdk = AdStageSDK.init({
297
- apiKey: '7dfddcfda637fbb73225bac3731688b80b90675942fe9f2057a88e2379aba2a4',
298
- debug: true
299
- });
300
-
301
- statusEl.innerHTML = '✅ SDK 초기화 완료 - 실제 광고 로딩 중...';
302
- statusEl.style.background = '#d4edda';
303
- statusEl.style.borderColor = '#28a745';
304
-
305
- // 실제 API에서 광고 자동 로드
306
- await sdk.autoLoadSlots();
307
-
308
- // 광고 슬롯들 클릭 이벤트 추가
309
- document.querySelectorAll('.ad-slot').forEach(slot => {
310
- slot.addEventListener('click', function() {
311
- const adType = this.getAttribute('ad-type');
312
- const slotId = this.getAttribute('adstage');
313
- console.log(`${adType} 광고 슬롯 클릭됨:`, slotId);
314
-
315
- // 시각적 피드백
316
- this.style.background = '#e3f2fd';
317
- setTimeout(() => {
318
- this.style.background = '#f8f9fa';
319
- }, 300);
320
- });
321
- });
322
-
323
- // 로딩 완료 메시지
324
- setTimeout(() => {
325
- statusEl.innerHTML = '🎯 실제 광고 로딩 완료! beta-api.adstage.app에서 가져온 광고입니다.';
326
- }, 2000);
327
-
328
- console.log('AdStage SDK 실제 API 광고 로드 완료');
329
-
330
- } catch (error) {
331
- console.error('SDK 초기화 오류:', error);
332
- statusEl.innerHTML = '❌ SDK 초기화 실패: ' + error.message;
333
- statusEl.style.background = '#f8d7da';
334
- statusEl.style.borderColor = '#dc3545';
335
- }
336
- </script>
337
- </body>
338
- </html>