@adstage/web-sdk 1.1.0

package/src/managers/fade-slider-manager.ts

@@ -0,0 +1,276 @@
+import { AdType, AdEventType } from '../types/advertisement';
+import type { AdSlot, Advertisement } from '../types/advertisement';
+import { AdRendererFactory } from '../renderers';
+
+/**
+ * 페이드 슬라이더 관리 클래스
+ * - 텍스트 광고 전용 페이드 인/아웃 슬라이더
+ * - 상하 교차 효과 (위에서 아래로, 아래서 위로)
+ * - 무한 루프 지원
+ */
+export class FadeSliderManager {
+  /**
+   * 페이드 슬라이더 컨테이너 생성
+   */
+  static createFadeSliderContainer(
+    slot: AdSlot,
+    advertisements: Advertisement[],
+    options: any,
+    trackEventCallback: (adId: string, slotId: string, eventType: AdEventType) => void
+  ): HTMLElement {
+    const sliderWrapper = document.createElement('div');
+    sliderWrapper.className = 'adstage-fade-slider-wrapper';
+    
+    // 래퍼 스타일 설정
+    const containerStyles: Record<string, string> = {
+      position: 'relative',
+      overflow: 'hidden',
+      display: 'inline-block',
+    };
+    
+    // 사용자가 크기를 지정한 경우
+    if (slot.width && slot.width !== 0) {
+      let width: string;
+      if (typeof slot.width === 'string') {
+        width = slot.width.includes('px') || slot.width.includes('%') ? slot.width : `${slot.width}px`;
+      } else {
+        width = `${slot.width}px`;
+      }
+      containerStyles.width = width;
+    }
+    
+    if (slot.height && slot.height !== 0) {
+      let height: string;
+      if (typeof slot.height === 'string') {
+        height = slot.height.includes('px') || slot.height.includes('%') ? slot.height : `${slot.height}px`;
+      } else {
+        height = `${slot.height}px`;
+      }
+      containerStyles.height = height;
+    }
+    
+    // 스타일 적용
+    Object.entries(containerStyles).forEach(([key, value]) => {
+      sliderWrapper.style.setProperty(key, value);
+    });
+
+    // 슬라이드 컨테이너
+    const slideContainer = document.createElement('div');
+    slideContainer.className = 'adstage-fade-slide-container';
+    slideContainer.style.cssText = `
+      position: relative;
+      width: 100%;
+      height: 100%;
+    `;
+
+    // 크기 측정을 위한 임시 컨테이너 (자동 크기 계산이 필요한 경우)
+    let measureContainer: HTMLElement | null = null;
+    const needsWidthMeasurement = !slot.width || slot.width === 0;
+    const needsHeightMeasurement = !slot.height || slot.height === 0;
+    
+    if (needsWidthMeasurement || needsHeightMeasurement) {
+      measureContainer = document.createElement('div');
+      measureContainer.style.cssText = `
+        position: absolute;
+        visibility: hidden;
+        white-space: nowrap;
+        top: -9999px;
+        left: -9999px;
+      `;
+      
+      // width가 설정되어 있으면 측정 컨테이너에도 적용
+      if (!needsWidthMeasurement && slot.width) {
+        let width: string;
+        if (typeof slot.width === 'string') {
+          width = slot.width.includes('px') || slot.width.includes('%') ? slot.width : `${slot.width}px`;
+        } else {
+          width = `${slot.width}px`;
+        }
+        measureContainer.style.width = width;
+        measureContainer.style.whiteSpace = 'normal'; // width가 있으면 줄바꿈 허용
+      }
+      
+      document.body.appendChild(measureContainer);
+      
+      let maxWidth = 0;
+      let maxHeight = 0;
+      
+      // 모든 광고의 크기를 측정하여 최대 크기 찾기
+      advertisements.forEach(ad => {
+        const measureAdElement = AdRendererFactory.render(
+          ad,
+          slot,
+          trackEventCallback
+        );
+        measureContainer!.appendChild(measureAdElement);
+        
+        const rect = measureAdElement.getBoundingClientRect();
+        if (rect.width > maxWidth) maxWidth = rect.width;
+        if (rect.height > maxHeight) maxHeight = rect.height;
+        
+        // 측정 후 요소 제거
+        measureContainer!.removeChild(measureAdElement);
+      });
+      
+      // 측정된 최대 크기로 래퍼 크기 설정
+      if (needsWidthMeasurement && maxWidth > 0) {
+        sliderWrapper.style.width = `${maxWidth}px`;
+      }
+      
+      if (needsHeightMeasurement && maxHeight > 0) {
+        sliderWrapper.style.height = `${maxHeight}px`;
+      }
+      
+      // 측정 컨테이너 제거
+      document.body.removeChild(measureContainer);
+    }
+
+    // 각 광고를 슬라이드로 생성
+    const slideElements: HTMLElement[] = [];
+    advertisements.forEach((ad, index) => {
+      const slideElement = document.createElement('div');
+      slideElement.className = 'adstage-fade-slide';
+      slideElement.style.cssText = `
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: ${index === 0 ? '1' : '0'};
+        transform: translateY(${index === 0 ? '0' : '20px'});
+        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        z-index: ${index === 0 ? '2' : '1'};
+      `;
+
+      // 광고 렌더링
+      const adElement = AdRendererFactory.render(
+        ad,
+        slot,
+        trackEventCallback
+      );
+      
+      slideElement.appendChild(adElement);
+      slideContainer.appendChild(slideElement);
+      slideElements.push(slideElement);
+    });
+
+    // 슬라이더 상태 관리
+    let currentSlide = 0;
+    const totalSlides = advertisements.length;
+    const autoSlideInterval = (options?.autoSlideInterval || 4) * 1000; // 기본 4초 (페이드는 조금 더 길게)
+
+    // 슬라이드 이동 함수 (페이드 효과)
+    const moveToSlide = (index: number) => {
+      if (index >= totalSlides) {
+        index = 0; // 무한 루프
+      } else if (index < 0) {
+        index = totalSlides - 1;
+      }
+
+      const previousSlide = slideElements[currentSlide];
+      const nextSlide = slideElements[index];
+      
+      // 이전 슬라이드 페이드 아웃 (아래로)
+      previousSlide.style.opacity = '0';
+      previousSlide.style.transform = 'translateY(-20px)';
+      previousSlide.style.zIndex = '1';
+      
+      // 다음 슬라이드 페이드 인 (위에서)
+      nextSlide.style.opacity = '1';
+      nextSlide.style.transform = 'translateY(0)';
+      nextSlide.style.zIndex = '2';
+      
+      // 다른 슬라이드들은 숨김
+      slideElements.forEach((slide, i) => {
+        if (i !== index && i !== currentSlide) {
+          slide.style.opacity = '0';
+          slide.style.transform = 'translateY(20px)';
+          slide.style.zIndex = '1';
+        }
+      });
+
+      currentSlide = index;
+
+      // 현재 슬라이드의 광고에 대해 노출 이벤트 추적
+      if (currentSlide > 0) { // 첫 번째는 이미 loadSlot에서 추적됨
+        trackEventCallback(advertisements[currentSlide]._id, slot.id, AdEventType.IMPRESSION);
+      }
+    };
+
+    // 자동 슬라이드
+    let autoSlideTimer = setInterval(() => {
+      const nextIndex = currentSlide + 1;
+      moveToSlide(nextIndex);
+    }, autoSlideInterval);
+
+    // 마우스 호버 시 자동 슬라이드 일시정지
+    sliderWrapper.addEventListener('mouseenter', () => {
+      clearInterval(autoSlideTimer);
+    });
+
+    sliderWrapper.addEventListener('mouseleave', () => {
+      autoSlideTimer = setInterval(() => {
+        const nextIndex = currentSlide + 1;
+        moveToSlide(nextIndex);
+      }, autoSlideInterval);
+    });
+
+    // 터치 제스처 지원
+    FadeSliderManager.addTouchSupport(sliderWrapper, moveToSlide, () => currentSlide, totalSlides);
+
+    // 요소들 조립
+    sliderWrapper.appendChild(slideContainer);
+
+    return sliderWrapper;
+  }
+
+  /**
+   * 터치 제스처 지원 추가
+   */
+  private static addTouchSupport(
+    container: HTMLElement, 
+    moveToSlide: (index: number) => void, 
+    getCurrentSlide: () => number,
+    totalSlides: number
+  ): void {
+    let startX = 0;
+    let startY = 0;
+    let isDragging = false;
+
+    container.addEventListener('touchstart', (e) => {
+      startX = e.touches[0].clientX;
+      startY = e.touches[0].clientY;
+      isDragging = true;
+    });
+
+    container.addEventListener('touchmove', (e) => {
+      if (!isDragging) return;
+      e.preventDefault();
+    });
+
+    container.addEventListener('touchend', (e) => {
+      if (!isDragging) return;
+      isDragging = false;
+
+      const endX = e.changedTouches[0].clientX;
+      const endY = e.changedTouches[0].clientY;
+      const diffX = startX - endX;
+      const diffY = startY - endY;
+
+      // 가로 스와이프가 세로 스와이프보다 클 때만 처리
+      if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
+        const currentSlide = getCurrentSlide();
+        if (diffX > 0) {
+          // 왼쪽으로 스와이프 (다음 슬라이드)
+          moveToSlide(currentSlide + 1);
+        } else {
+          // 오른쪽으로 스와이프 (이전 슬라이드)
+          moveToSlide(currentSlide - 1);
+        }
+      }
+    });
+  }
+}

package/src/managers/impression-tracker.ts

@@ -0,0 +1,88 @@
+/**
+ * 노출 추적 및 중복 방지 관리 클래스
+ * - 메모리 기반 중복 확인
+ * - 세션 스토리지 기반 영구 추적
+ * - 자동 정리 기능
+ */
+export class ImpressionTracker {
+  private static impressionTracker = new Map<string, number>();
+  private static readonly IMPRESSION_COOLDOWN = 300000; // 5분 쿨다운
+
+  /**
+   * 중복 노출 여부 확인
+   */
+  static isDuplicateImpression(adId: string, slotId: string, debug = false): boolean {
+    const key = `${adId}_${slotId}`;
+    const now = Date.now();
+    
+    // 메모리 기반 중복 확인 (새로고침 시 초기화됨)
+    const lastImpression = ImpressionTracker.impressionTracker.get(key);
+    if (lastImpression && (now - lastImpression) < ImpressionTracker.IMPRESSION_COOLDOWN) {
+      if (debug) {
+        console.log(`Duplicate impression blocked for ad ${adId} in slot ${slotId}. Cooldown: ${Math.round((ImpressionTracker.IMPRESSION_COOLDOWN - (now - lastImpression)) / 1000)}s remaining`);
+      }
+      return true;
+    }
+    
+    // 세션 스토리지 기반 중복 확인 (새로고침 시에도 유지)
+    const sessionKey = `adstage_impression_${key}`;
+    const sessionImpression = sessionStorage.getItem(sessionKey);
+    if (sessionImpression) {
+      const sessionTime = parseInt(sessionImpression, 10);
+      if (!isNaN(sessionTime) && (now - sessionTime) < ImpressionTracker.IMPRESSION_COOLDOWN) {
+        if (debug) {
+          console.log(`Session-based duplicate impression blocked for ad ${adId} in slot ${slotId}. Cooldown: ${Math.round((ImpressionTracker.IMPRESSION_COOLDOWN - (now - sessionTime)) / 1000)}s remaining`);
+        }
+        // 메모리에도 기록하여 이후 요청 최적화
+        ImpressionTracker.impressionTracker.set(key, sessionTime);
+        return true;
+      }
+    }
+    
+    // 노출 시점 기록 (메모리 + 세션 스토리지)
+    ImpressionTracker.impressionTracker.set(key, now);
+    sessionStorage.setItem(sessionKey, now.toString());
+    
+    // 오래된 세션 스토리지 데이터 정리 (선택적)
+    ImpressionTracker.cleanupOldImpressions();
+    
+    return false;
+  }
+
+  /**
+   * 오래된 노출 추적 데이터 정리
+   */
+  private static cleanupOldImpressions(): void {
+    const now = Date.now();
+    const cleanupThreshold = ImpressionTracker.IMPRESSION_COOLDOWN * 2; // 쿨다운의 2배 시간이 지난 데이터 정리
+    
+    // 세션 스토리지 정리
+    for (let i = 0; i < sessionStorage.length; i++) {
+      const key = sessionStorage.key(i);
+      if (key && key.startsWith('adstage_impression_')) {
+        const timestamp = sessionStorage.getItem(key);
+        if (timestamp) {
+          const time = parseInt(timestamp, 10);
+          if (!isNaN(time) && (now - time) > cleanupThreshold) {
+            sessionStorage.removeItem(key);
+            i--; // 인덱스 조정
+          }
+        }
+      }
+    }
+    
+    // 메모리 정리
+    for (const [key, timestamp] of ImpressionTracker.impressionTracker.entries()) {
+      if ((now - timestamp) > cleanupThreshold) {
+        ImpressionTracker.impressionTracker.delete(key);
+      }
+    }
+  }
+
+  /**
+   * 모든 추적 데이터 정리
+   */
+  static clear(): void {
+    ImpressionTracker.impressionTracker.clear();
+  }
+}