โฆษณาแบบข้อความ

// HTML에 컨테이너 준비
// <div id="text-container"></div>
 
// SDK 초기화 (한 번만)
AdStage.init({
  apiKey: process.env.NEXT_PUBLIC_ADSTAGE_API_KEY
});
 
// 기본 텍스트 광고 생성
AdStage.ads.text('text-container');

AdStage.ads.text('text-container', {
  onClick: (adData) => {
    console.log('텍스트 광고 클릭됨:', adData);
    // 사용자 정의 로직 추가 가능
  }
});

// 1줄로 제한 (한 줄 텍스트 광고)
AdStage.ads.text('text-container', {
  maxLines: 1
});
 
// 5줄까지 허용
AdStage.ads.text('text-container', {
  maxLines: 5
});

// 미디어 쿼리를 활용한 반응형 구현
const getResponsiveMaxLines = () => {
  if (window.innerWidth <= 768) {
    return 2;  // 모바일: 2줄
  } else if (window.innerWidth <= 1024) {
    return 3;  // 태블릿: 3줄
  } else {
    return 4;  // 데스크톱: 4줄
  }
};
 
AdStage.ads.text('text-container', {
  maxLines: getResponsiveMaxLines(),
  deviceType: window.innerWidth <= 768 ? 'MOBILE' : 'DESKTOP'
});
 
// 윈도우 리사이즈 시 재생성
window.addEventListener('resize', () => {
  // 기존 광고 제거 후 새로 생성
  AdStage.ads.destroy(slotId);
  slotId = AdStage.ads.text('text-container', {
    maxLines: getResponsiveMaxLines(),
    deviceType: window.innerWidth <= 768 ? 'MOBILE' : 'DESKTOP'
  });
});

AdStage.ads.text('text-container', {
  maxLines: 3,
  adId: 'text-ad-456'  // 특정 광고 ID
});

// 최대 3줄로 표시 (기본값)
AdStage.ads.text('text-container', {
  maxLines: 3
});

// 즉시 슬롯 ID 반환
const slotId = AdStage.ads.text('text-container');
console.log('슬롯 생성됨:', slotId);  // 즉시 실행
 
// 실제 광고는 비동기로 로드됨

const slotId = AdStage.ads.text('text-container');
 
// DOM에서 컨테이너 제거 시 자동 정리됨
document.getElementById('text-container').remove();
// 수동으로 destroy() 호출할 필요 없음

/* 광고 컨테이너 기본 스타일 */
.adstage-text-ad {
  position: relative;
  overflow: hidden;
  font-family: inherit;
  line-height: 1.6;
}
 
/* 로딩 상태 */
.adstage-loading {
  opacity: 0.7;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}
 
@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
 
/* 로딩 완료 */
.adstage-loaded {
  opacity: 1;
  transition: opacity 0.3s ease;
}
 
/* 오류 상태 */
.adstage-error {
  border: 1px solid #ff6b6b;
  background-color: #ffe0e0;
}

// 모든 슬롯 확인
const allSlots = AdStage.ads.getAllSlots();
console.log('전체 광고 슬롯:', allSlots);
 
// 특정 슬롯 확인
const slot = AdStage.ads.getSlotById(slotId);
console.log('슬롯 정보:', slot);