@adstage/web-sdk 1.3.3 → 1.4.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 (61) hide show
  1. package/README.md +178 -35
  2. package/dist/index.cjs.js +810 -481
  3. package/dist/index.d.ts +286 -97
  4. package/dist/index.esm.js +794 -457
  5. package/dist/index.standalone.js +794 -457
  6. package/package.json +2 -2
  7. package/src/constants/endpoints.ts +93 -0
  8. package/src/core/AdStage.ts +128 -0
  9. package/src/index.ts +14 -413
  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/deeplinks/DeeplinksModule.ts +0 -0
  16. package/src/modules/events/EventsModule.ts +106 -0
  17. package/src/types/config.ts +74 -3
  18. package/src/types/index.ts +2 -1
  19. package/src/utils/api-headers.ts +52 -0
  20. package/src/utils/dom-utils.ts +93 -0
  21. package/examples/README.md +0 -33
  22. package/examples/banner-ads.html +0 -512
  23. package/examples/index.html +0 -338
  24. package/examples/native-ads.html +0 -634
  25. package/examples/react-app/README.md +0 -70
  26. package/examples/react-app/index.html +0 -13
  27. package/examples/react-app/package-lock.json +0 -3042
  28. package/examples/react-app/package.json +0 -26
  29. package/examples/react-app/pnpm-lock.yaml +0 -1857
  30. package/examples/react-app/public/index.standalone.js +0 -2331
  31. package/examples/react-app/src/App.tsx +0 -226
  32. package/examples/react-app/src/index.css +0 -37
  33. package/examples/react-app/src/main.tsx +0 -10
  34. package/examples/react-app/tsconfig.json +0 -25
  35. package/examples/react-app/tsconfig.node.json +0 -10
  36. package/examples/react-app/vite.config.ts +0 -15
  37. package/examples/react-nextjs/app/globals.css +0 -200
  38. package/examples/react-nextjs/app/layout.tsx +0 -27
  39. package/examples/react-nextjs/app/page.tsx +0 -258
  40. package/examples/react-nextjs/next.config.js +0 -9
  41. package/examples/react-nextjs/package.json +0 -22
  42. package/examples/react-nextjs/pnpm-lock.yaml +0 -343
  43. package/examples/react-nextjs/tsconfig.json +0 -34
  44. package/examples/text-ads.html +0 -597
  45. package/examples/video-ads.html +0 -739
  46. package/src/react/components/AdErrorBoundary.tsx +0 -75
  47. package/src/react/components/AdSlot.tsx +0 -144
  48. package/src/react/components/BannerAd.tsx +0 -24
  49. package/src/react/components/InterstitialAd.tsx +0 -24
  50. package/src/react/components/NativeAd.tsx +0 -24
  51. package/src/react/components/TextAd.tsx +0 -24
  52. package/src/react/components/VideoAd.tsx +0 -24
  53. package/src/react/components/index.ts +0 -8
  54. package/src/react/hooks/index.ts +0 -4
  55. package/src/react/hooks/useAdSlot.ts +0 -83
  56. package/src/react/hooks/useAdStage.ts +0 -14
  57. package/src/react/hooks/useAdTracking.ts +0 -61
  58. package/src/react/index.ts +0 -4
  59. package/src/react/providers/AdStageProvider.tsx +0 -86
  60. package/src/react/providers/index.ts +0 -2
  61. 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>