@adstage/web-sdk 2.1.3 → 2.1.5

package/dist/index.cjs.js

@@ -795,11 +795,12 @@ class CarouselSliderManager {
                 width = `${slot.width}px`;
             }
             containerStyles.width = width;
-            containerStyles.display = 'inline-block'; // 지정된 크기에 맞춤 (좌측 정렬)
+            containerStyles.display = 'block'; // ✅ 하단 공백 제거를 위해 block 사용
         }
         else {
-            // 컨텐츠 크기에 맞춤
-            containerStyles.display = 'inline-block';
+            // 컨텐츠 크기에 맞춤 - fit-content로 컨텐츠에 맞는 크기 설정
+            containerStyles.display = 'block';
+            containerStyles.width = 'fit-content'; // 컨텐츠 크기에 맞춤
         }
         if (slot.height && slot.height !== 0) {
             const height = typeof slot.height === 'string' ? slot.height : `${slot.height}px`;
@@ -1119,7 +1120,8 @@ class TextTransitionManager {
         const containerStyles = {
             position: 'relative',
             overflow: 'hidden',
-            display: 'inline-block',
+            display: 'block', // ✅ 하단 공백 제거를 위해 block 사용
+            width: 'fit-content', // 컨텐츠 크기에 맞춤
         };
         // 사용자가 크기를 지정한 경우
         if (slot.width && slot.width !== 0) {
@@ -2054,7 +2056,7 @@ class AdsModule {
         this.ensureReady();
         const adstageOptions = {
             width: options?.width || '100%',
-            height: options?.height || 250,
+            height: options?.height || 'auto', // 🔧 동적 크기 조정 활용
             autoSlide: options?.autoSlide || false,
             slideInterval: options?.slideInterval || 5000,
             onClick: options?.onClick,
@@ -2260,11 +2262,12 @@ class AdsModule {
         if (typeof explicitHeight === 'number') {
             height = `${explicitHeight}px`;
         }
-        else if (typeof explicitHeight === 'string' && explicitHeight !== '100%') {
+        else if (typeof explicitHeight === 'string' && explicitHeight !== '100%' && explicitHeight !== 'auto') {
+            // 명시적인 크기 문자열 (예: '200px', '50vh' 등)
             height = explicitHeight;
         }
         else {
-            // 100%이거나 높이가 지정되지 않은 경우 스마트 계산
+            // 100%, auto이거나 높이가 지정되지 않은 경우 스마트 계산
             const containerHeight = this.getContainerHeight(container);
             if (containerHeight > 0) {
                 // 컨테이너에 높이가 있으면 100% 사용
@@ -2274,10 +2277,10 @@ class AdsModule {
                 }
             }
             else {
-                // 컨테이너에 높이가 없으면 타입별 기본값 사용
+                // 컨테이너에 높이가 없으면 타입별 기본값 사용 (나중에 동적 조정됨)
                 height = this.getDefaultHeightForAdType(type);
                 if (this._config?.debug) {
-                    console.log(`📏 Using default height ${height} (no container height)`);
+                    console.log(`📏 Using default height ${height} (will be optimized for ${type})`);
                 }
             }
         }

package/dist/index.esm.js

@@ -793,11 +793,12 @@ class CarouselSliderManager {
                 width = `${slot.width}px`;
             }
             containerStyles.width = width;
-            containerStyles.display = 'inline-block'; // 지정된 크기에 맞춤 (좌측 정렬)
+            containerStyles.display = 'block'; // ✅ 하단 공백 제거를 위해 block 사용
         }
         else {
-            // 컨텐츠 크기에 맞춤
-            containerStyles.display = 'inline-block';
+            // 컨텐츠 크기에 맞춤 - fit-content로 컨텐츠에 맞는 크기 설정
+            containerStyles.display = 'block';
+            containerStyles.width = 'fit-content'; // 컨텐츠 크기에 맞춤
         }
         if (slot.height && slot.height !== 0) {
             const height = typeof slot.height === 'string' ? slot.height : `${slot.height}px`;
@@ -1117,7 +1118,8 @@ class TextTransitionManager {
         const containerStyles = {
             position: 'relative',
             overflow: 'hidden',
-            display: 'inline-block',
+            display: 'block', // ✅ 하단 공백 제거를 위해 block 사용
+            width: 'fit-content', // 컨텐츠 크기에 맞춤
         };
         // 사용자가 크기를 지정한 경우
         if (slot.width && slot.width !== 0) {
@@ -2052,7 +2054,7 @@ class AdsModule {
         this.ensureReady();
         const adstageOptions = {
             width: options?.width || '100%',
-            height: options?.height || 250,
+            height: options?.height || 'auto', // 🔧 동적 크기 조정 활용
             autoSlide: options?.autoSlide || false,
             slideInterval: options?.slideInterval || 5000,
             onClick: options?.onClick,
@@ -2258,11 +2260,12 @@ class AdsModule {
         if (typeof explicitHeight === 'number') {
             height = `${explicitHeight}px`;
         }
-        else if (typeof explicitHeight === 'string' && explicitHeight !== '100%') {
+        else if (typeof explicitHeight === 'string' && explicitHeight !== '100%' && explicitHeight !== 'auto') {
+            // 명시적인 크기 문자열 (예: '200px', '50vh' 등)
             height = explicitHeight;
         }
         else {
-            // 100%이거나 높이가 지정되지 않은 경우 스마트 계산
+            // 100%, auto이거나 높이가 지정되지 않은 경우 스마트 계산
             const containerHeight = this.getContainerHeight(container);
             if (containerHeight > 0) {
                 // 컨테이너에 높이가 있으면 100% 사용
@@ -2272,10 +2275,10 @@ class AdsModule {
                 }
             }
             else {
-                // 컨테이너에 높이가 없으면 타입별 기본값 사용
+                // 컨테이너에 높이가 없으면 타입별 기본값 사용 (나중에 동적 조정됨)
                 height = this.getDefaultHeightForAdType(type);
                 if (this._config?.debug) {
-                    console.log(`📏 Using default height ${height} (no container height)`);
+                    console.log(`📏 Using default height ${height} (will be optimized for ${type})`);
                 }
             }
         }

package/dist/index.standalone.js

@@ -793,11 +793,12 @@ class CarouselSliderManager {
                 width = `${slot.width}px`;
             }
             containerStyles.width = width;
-            containerStyles.display = 'inline-block'; // 지정된 크기에 맞춤 (좌측 정렬)
+            containerStyles.display = 'block'; // ✅ 하단 공백 제거를 위해 block 사용
         }
         else {
-            // 컨텐츠 크기에 맞춤
-            containerStyles.display = 'inline-block';
+            // 컨텐츠 크기에 맞춤 - fit-content로 컨텐츠에 맞는 크기 설정
+            containerStyles.display = 'block';
+            containerStyles.width = 'fit-content'; // 컨텐츠 크기에 맞춤
         }
         if (slot.height && slot.height !== 0) {
             const height = typeof slot.height === 'string' ? slot.height : `${slot.height}px`;
@@ -1117,7 +1118,8 @@ class TextTransitionManager {
         const containerStyles = {
             position: 'relative',
             overflow: 'hidden',
-            display: 'inline-block',
+            display: 'block', // ✅ 하단 공백 제거를 위해 block 사용
+            width: 'fit-content', // 컨텐츠 크기에 맞춤
         };
         // 사용자가 크기를 지정한 경우
         if (slot.width && slot.width !== 0) {
@@ -2052,7 +2054,7 @@ class AdsModule {
         this.ensureReady();
         const adstageOptions = {
             width: options?.width || '100%',
-            height: options?.height || 250,
+            height: options?.height || 'auto', // 🔧 동적 크기 조정 활용
             autoSlide: options?.autoSlide || false,
             slideInterval: options?.slideInterval || 5000,
             onClick: options?.onClick,
@@ -2258,11 +2260,12 @@ class AdsModule {
         if (typeof explicitHeight === 'number') {
             height = `${explicitHeight}px`;
         }
-        else if (typeof explicitHeight === 'string' && explicitHeight !== '100%') {
+        else if (typeof explicitHeight === 'string' && explicitHeight !== '100%' && explicitHeight !== 'auto') {
+            // 명시적인 크기 문자열 (예: '200px', '50vh' 등)
             height = explicitHeight;
         }
         else {
-            // 100%이거나 높이가 지정되지 않은 경우 스마트 계산
+            // 100%, auto이거나 높이가 지정되지 않은 경우 스마트 계산
             const containerHeight = this.getContainerHeight(container);
             if (containerHeight > 0) {
                 // 컨테이너에 높이가 있으면 100% 사용
@@ -2272,10 +2275,10 @@ class AdsModule {
                 }
             }
             else {
-                // 컨테이너에 높이가 없으면 타입별 기본값 사용
+                // 컨테이너에 높이가 없으면 타입별 기본값 사용 (나중에 동적 조정됨)
                 height = this.getDefaultHeightForAdType(type);
                 if (this._config?.debug) {
-                    console.log(`📏 Using default height ${height} (no container height)`);
+                    console.log(`📏 Using default height ${height} (will be optimized for ${type})`);
                 }
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adstage/web-sdk",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "AdStage Web SDK - Production-ready marketing platform SDK with namespace architecture for ads, events, and config management",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/managers/ads/carousel-slider-manager.ts

@@ -39,10 +39,11 @@ export class CarouselSliderManager {
         width = `${slot.width}px`;
       }
       containerStyles.width = width;
-      containerStyles.display = 'inline-block'; // 지정된 크기에 맞춤 (좌측 정렬)
+      containerStyles.display = 'block'; // ✅ 하단 공백 제거를 위해 block 사용
     } else {
-      // 컨텐츠 크기에 맞춤
-      containerStyles.display = 'inline-block';
+      // 컨텐츠 크기에 맞춤 - fit-content로 컨텐츠에 맞는 크기 설정
+      containerStyles.display = 'block';
+      containerStyles.width = 'fit-content'; // 컨텐츠 크기에 맞춤
     }
     
     if (slot.height && slot.height !== 0) {

package/src/managers/ads/text-transition-manager.ts

@@ -25,7 +25,8 @@ export class TextTransitionManager {
     const containerStyles: Record<string, string> = {
       position: 'relative',
       overflow: 'hidden',
-      display: 'inline-block',
+      display: 'block', // ✅ 하단 공백 제거를 위해 block 사용
+      width: 'fit-content', // 컨텐츠 크기에 맞춤
     };
     
     // 사용자가 크기를 지정한 경우

package/src/modules/ads/AdsModule.ts

@@ -82,7 +82,7 @@ export class AdsModule implements BaseModule {
     
     const adstageOptions = {
       width: options?.width || '100%',
-      height: options?.height || 250,
+      height: options?.height || 'auto', // 🔧 동적 크기 조정 활용
       autoSlide: options?.autoSlide || false,
       slideInterval: options?.slideInterval || 5000,
       onClick: options?.onClick,
@@ -325,10 +325,11 @@ export class AdsModule implements BaseModule {
     let height: string;
     if (typeof explicitHeight === 'number') {
       height = `${explicitHeight}px`;
-    } else if (typeof explicitHeight === 'string' && explicitHeight !== '100%') {
+    } else if (typeof explicitHeight === 'string' && explicitHeight !== '100%' && explicitHeight !== 'auto') {
+      // 명시적인 크기 문자열 (예: '200px', '50vh' 등)
       height = explicitHeight;
     } else {
-      // 100%이거나 높이가 지정되지 않은 경우 스마트 계산
+      // 100%, auto이거나 높이가 지정되지 않은 경우 스마트 계산
       const containerHeight = this.getContainerHeight(container);
       
       if (containerHeight > 0) {
@@ -338,10 +339,10 @@ export class AdsModule implements BaseModule {
           console.log(`📏 Using 100% height (container: ${containerHeight}px)`);
         }
       } else {
-        // 컨테이너에 높이가 없으면 타입별 기본값 사용
+        // 컨테이너에 높이가 없으면 타입별 기본값 사용 (나중에 동적 조정됨)
         height = this.getDefaultHeightForAdType(type);
         if (this._config?.debug) {
-          console.log(`📏 Using default height ${height} (no container height)`);
+          console.log(`📏 Using default height ${height} (will be optimized for ${type})`);
         }
       }
     }