@adstage/web-sdk 2.2.0 → 2.2.2

package/dist/index.cjs.js

@@ -392,16 +392,23 @@ class BaseAdRenderer {
     getImageStyles(slot) {
         const styles = {
             display: 'block',
-            'max-width': '100%',
-            height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
-        // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
+        // 사용자가 컨테이너 크기를 지정했는지 확인
         const parsedWidth = this.parseSizeValue(slot?.width);
         const parsedHeight = this.parseSizeValue(slot?.height);
-        if (parsedWidth && parsedHeight) {
+        const hasUserDefinedSize = parsedWidth || parsedHeight;
+        if (hasUserDefinedSize) {
+            // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
             styles.width = '100%';
             styles.height = '100%';
-            styles['object-fit'] = 'cover';
+            styles['object-fit'] = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+            styles['object-position'] = 'center';
+        }
+        else {
+            // 사용자가 크기를 지정하지 않은 경우: 원본 이미지 크기 유지
+            styles['max-width'] = '100%';
+            styles.height = 'auto';
         }
         return styles;
     }
@@ -2884,23 +2891,45 @@ class AdsModule {
      */
     async renderOptimizedBannerImage(adElement, ad, slot) {
         try {
-            // 이미지 크기 정보 로드
-            const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
-            const imageAspectRatio = imageDimensions.width / imageDimensions.height;
-            // 컨테이너 비율 계산
-            const containerAspectRatio = slot.aspectRatio || 16 / 9;
+            // 사용자가 크기를 지정했는지 확인
+            const configWidth = slot.config?.width;
+            const configHeight = slot.config?.height;
+            const hasUserDefinedWidth = configWidth &&
+                (typeof configWidth === 'number' || (typeof configWidth === 'string' && configWidth !== '100%'));
+            const hasUserDefinedHeight = configHeight &&
+                (typeof configHeight === 'number' || (typeof configHeight === 'string' && configHeight !== 'auto'));
+            const hasUserDefinedSize = hasUserDefinedWidth || hasUserDefinedHeight;
             // 이미지 요소 생성
             const img = document.createElement('img');
             img.src = ad.imageUrl;
             img.alt = ad.title;
-            img.style.width = '100%';
-            img.style.height = '100%';
-            // 🎨 최적화된 스타일 적용
-            this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+            if (hasUserDefinedSize) {
+                // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
+                img.style.width = '100%';
+                img.style.height = '100%';
+                img.style.objectFit = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+                img.style.objectPosition = 'center';
+                if (this._config?.debug) {
+                    console.log(`🎯 User-defined size detected: filling container completely`);
+                }
+            }
+            else {
+                // 사용자가 크기를 지정하지 않은 경우: 동적 최적화 적용
+                const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
+                const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+                const containerAspectRatio = slot.aspectRatio || 16 / 9;
+                img.style.width = '100%';
+                img.style.height = '100%';
+                // 🎨 최적화된 스타일 적용
+                this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+                if (this._config?.debug) {
+                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+                }
+            }
             // 이미지 로드 완료 처리
             img.onload = () => {
                 if (this._config?.debug) {
-                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+                    console.log(`✅ Banner image loaded successfully`);
                 }
             };
             // 에러 처리
@@ -2920,6 +2949,7 @@ class AdsModule {
             img.style.width = '100%';
             img.style.height = '100%';
             img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
             adElement.appendChild(img);
         }
     }

package/dist/index.esm.js

@@ -390,16 +390,23 @@ class BaseAdRenderer {
     getImageStyles(slot) {
         const styles = {
             display: 'block',
-            'max-width': '100%',
-            height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
-        // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
+        // 사용자가 컨테이너 크기를 지정했는지 확인
         const parsedWidth = this.parseSizeValue(slot?.width);
         const parsedHeight = this.parseSizeValue(slot?.height);
-        if (parsedWidth && parsedHeight) {
+        const hasUserDefinedSize = parsedWidth || parsedHeight;
+        if (hasUserDefinedSize) {
+            // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
             styles.width = '100%';
             styles.height = '100%';
-            styles['object-fit'] = 'cover';
+            styles['object-fit'] = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+            styles['object-position'] = 'center';
+        }
+        else {
+            // 사용자가 크기를 지정하지 않은 경우: 원본 이미지 크기 유지
+            styles['max-width'] = '100%';
+            styles.height = 'auto';
         }
         return styles;
     }
@@ -2882,23 +2889,45 @@ class AdsModule {
      */
     async renderOptimizedBannerImage(adElement, ad, slot) {
         try {
-            // 이미지 크기 정보 로드
-            const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
-            const imageAspectRatio = imageDimensions.width / imageDimensions.height;
-            // 컨테이너 비율 계산
-            const containerAspectRatio = slot.aspectRatio || 16 / 9;
+            // 사용자가 크기를 지정했는지 확인
+            const configWidth = slot.config?.width;
+            const configHeight = slot.config?.height;
+            const hasUserDefinedWidth = configWidth &&
+                (typeof configWidth === 'number' || (typeof configWidth === 'string' && configWidth !== '100%'));
+            const hasUserDefinedHeight = configHeight &&
+                (typeof configHeight === 'number' || (typeof configHeight === 'string' && configHeight !== 'auto'));
+            const hasUserDefinedSize = hasUserDefinedWidth || hasUserDefinedHeight;
             // 이미지 요소 생성
             const img = document.createElement('img');
             img.src = ad.imageUrl;
             img.alt = ad.title;
-            img.style.width = '100%';
-            img.style.height = '100%';
-            // 🎨 최적화된 스타일 적용
-            this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+            if (hasUserDefinedSize) {
+                // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
+                img.style.width = '100%';
+                img.style.height = '100%';
+                img.style.objectFit = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+                img.style.objectPosition = 'center';
+                if (this._config?.debug) {
+                    console.log(`🎯 User-defined size detected: filling container completely`);
+                }
+            }
+            else {
+                // 사용자가 크기를 지정하지 않은 경우: 동적 최적화 적용
+                const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
+                const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+                const containerAspectRatio = slot.aspectRatio || 16 / 9;
+                img.style.width = '100%';
+                img.style.height = '100%';
+                // 🎨 최적화된 스타일 적용
+                this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+                if (this._config?.debug) {
+                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+                }
+            }
             // 이미지 로드 완료 처리
             img.onload = () => {
                 if (this._config?.debug) {
-                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+                    console.log(`✅ Banner image loaded successfully`);
                 }
             };
             // 에러 처리
@@ -2918,6 +2947,7 @@ class AdsModule {
             img.style.width = '100%';
             img.style.height = '100%';
             img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
             adElement.appendChild(img);
         }
     }

package/dist/index.standalone.js

@@ -390,16 +390,23 @@ class BaseAdRenderer {
     getImageStyles(slot) {
         const styles = {
             display: 'block',
-            'max-width': '100%',
-            height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
         };
-        // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
+        // 사용자가 컨테이너 크기를 지정했는지 확인
         const parsedWidth = this.parseSizeValue(slot?.width);
         const parsedHeight = this.parseSizeValue(slot?.height);
-        if (parsedWidth && parsedHeight) {
+        const hasUserDefinedSize = parsedWidth || parsedHeight;
+        if (hasUserDefinedSize) {
+            // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
             styles.width = '100%';
             styles.height = '100%';
-            styles['object-fit'] = 'cover';
+            styles['object-fit'] = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+            styles['object-position'] = 'center';
+        }
+        else {
+            // 사용자가 크기를 지정하지 않은 경우: 원본 이미지 크기 유지
+            styles['max-width'] = '100%';
+            styles.height = 'auto';
         }
         return styles;
     }
@@ -2882,23 +2889,45 @@ class AdsModule {
      */
     async renderOptimizedBannerImage(adElement, ad, slot) {
         try {
-            // 이미지 크기 정보 로드
-            const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
-            const imageAspectRatio = imageDimensions.width / imageDimensions.height;
-            // 컨테이너 비율 계산
-            const containerAspectRatio = slot.aspectRatio || 16 / 9;
+            // 사용자가 크기를 지정했는지 확인
+            const configWidth = slot.config?.width;
+            const configHeight = slot.config?.height;
+            const hasUserDefinedWidth = configWidth &&
+                (typeof configWidth === 'number' || (typeof configWidth === 'string' && configWidth !== '100%'));
+            const hasUserDefinedHeight = configHeight &&
+                (typeof configHeight === 'number' || (typeof configHeight === 'string' && configHeight !== 'auto'));
+            const hasUserDefinedSize = hasUserDefinedWidth || hasUserDefinedHeight;
             // 이미지 요소 생성
             const img = document.createElement('img');
             img.src = ad.imageUrl;
             img.alt = ad.title;
-            img.style.width = '100%';
-            img.style.height = '100%';
-            // 🎨 최적화된 스타일 적용
-            this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+            if (hasUserDefinedSize) {
+                // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
+                img.style.width = '100%';
+                img.style.height = '100%';
+                img.style.objectFit = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+                img.style.objectPosition = 'center';
+                if (this._config?.debug) {
+                    console.log(`🎯 User-defined size detected: filling container completely`);
+                }
+            }
+            else {
+                // 사용자가 크기를 지정하지 않은 경우: 동적 최적화 적용
+                const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
+                const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+                const containerAspectRatio = slot.aspectRatio || 16 / 9;
+                img.style.width = '100%';
+                img.style.height = '100%';
+                // 🎨 최적화된 스타일 적용
+                this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+                if (this._config?.debug) {
+                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+                }
+            }
             // 이미지 로드 완료 처리
             img.onload = () => {
                 if (this._config?.debug) {
-                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+                    console.log(`✅ Banner image loaded successfully`);
                 }
             };
             // 에러 처리
@@ -2918,6 +2947,7 @@ class AdsModule {
             img.style.width = '100%';
             img.style.height = '100%';
             img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
             adElement.appendChild(img);
         }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adstage/web-sdk",
-  "version": "2.2.0",
-  "description": "AdStage Web SDK - Production-ready marketing platform SDK with auto-initialization and namespace architecture",
+  "version": "2.2.2",
+  "description": "AdStage Web SDK - Production-ready marketing platform SDK with auto-initialization, dynamic sizing, centered image positioning, and user-defined size support",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/modules/ads/AdsModule.ts

@@ -1076,27 +1076,52 @@ export class AdsModule implements BaseModule {
    */
   private async renderOptimizedBannerImage(adElement: HTMLElement, ad: Advertisement, slot: AdSlot): Promise<void> {
     try {
-      // 이미지 크기 정보 로드
-      const imageDimensions = await this.loadImageDimensions(ad.imageUrl!);
-      const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+      // 사용자가 크기를 지정했는지 확인
+      const configWidth = slot.config?.width;
+      const configHeight = slot.config?.height;
       
-      // 컨테이너 비율 계산
-      const containerAspectRatio = (slot as any).aspectRatio || 16/9;
+      const hasUserDefinedWidth = configWidth && 
+        (typeof configWidth === 'number' || (typeof configWidth === 'string' && configWidth !== '100%'));
+      const hasUserDefinedHeight = configHeight && 
+        (typeof configHeight === 'number' || (typeof configHeight === 'string' && configHeight !== 'auto'));
+      const hasUserDefinedSize = hasUserDefinedWidth || hasUserDefinedHeight;
       
       // 이미지 요소 생성
       const img = document.createElement('img');
       img.src = ad.imageUrl!;
       img.alt = ad.title;
-      img.style.width = '100%';
-      img.style.height = '100%';
       
-      // 🎨 최적화된 스타일 적용
-      this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+      if (hasUserDefinedSize) {
+        // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
+        img.style.width = '100%';
+        img.style.height = '100%';
+        img.style.objectFit = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+        img.style.objectPosition = 'center';
+        
+        if (this._config?.debug) {
+          console.log(`🎯 User-defined size detected: filling container completely`);
+        }
+      } else {
+        // 사용자가 크기를 지정하지 않은 경우: 동적 최적화 적용
+        const imageDimensions = await this.loadImageDimensions(ad.imageUrl!);
+        const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+        const containerAspectRatio = (slot as any).aspectRatio || 16/9;
+        
+        img.style.width = '100%';
+        img.style.height = '100%';
+        
+        // 🎨 최적화된 스타일 적용
+        this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+        
+        if (this._config?.debug) {
+          console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+        }
+      }
       
       // 이미지 로드 완료 처리
       img.onload = () => {
         if (this._config?.debug) {
-          console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
+          console.log(`✅ Banner image loaded successfully`);
         }
       };
       
@@ -1119,6 +1144,7 @@ export class AdsModule implements BaseModule {
       img.style.width = '100%';
       img.style.height = '100%';
       img.style.objectFit = 'cover';
+      img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
       adElement.appendChild(img);
     }
   }

package/src/renderers/base-renderer.ts

@@ -108,18 +108,24 @@ export abstract class BaseAdRenderer implements AdRenderer {
   protected getImageStyles(slot?: AdSlot): Record<string, string> {
     const styles: Record<string, string> = {
       display: 'block',
-      'max-width': '100%',
-      height: 'auto',
+      'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
     };
     
-    // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
+    // 사용자가 컨테이너 크기를 지정했는지 확인
     const parsedWidth = this.parseSizeValue(slot?.width);
     const parsedHeight = this.parseSizeValue(slot?.height);
+    const hasUserDefinedSize = parsedWidth || parsedHeight;
     
-    if (parsedWidth && parsedHeight) {
+    if (hasUserDefinedSize) {
+      // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
       styles.width = '100%';
       styles.height = '100%';
-      styles['object-fit'] = 'cover';
+      styles['object-fit'] = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
+      styles['object-position'] = 'center';
+    } else {
+      // 사용자가 크기를 지정하지 않은 경우: 원본 이미지 크기 유지
+      styles['max-width'] = '100%';
+      styles.height = 'auto';
     }
     
     return styles;