sb-front/src/components/AdBanner.vue

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { ADS_ENABLED } from '@/config/features'

// 카카오 애드핏 배너. 광고 기능이 켜져 있고 유료(PREMIUM) 회원이 아닐 때만 표시한다.
const props = defineProps({
  unit: { type: String, default: 'DAN-n0I5XRBOwAdSFbEX' },
  width: { type: Number, default: 728 },
  height: { type: Number, default: 90 },
})

const auth = useAuthStore()
const showAd = computed(() => ADS_ENABLED && !auth.isPremium)

const host = ref(null)
const ADFIT_SRC = '//t1.kakaocdn.net/kas/static/ba.min.js'

onMounted(() => {
  if (!showAd.value || !host.value) return
  // SPA 에서 동적 삽입 시 애드핏이 인식하도록 ins 를 직접 만들고 로더를 다시 실행한다.
  const ins = document.createElement('ins')
  ins.className = 'kakao_ad_area'
  ins.style.display = 'none'
  ins.setAttribute('data-ad-unit', props.unit)
  ins.setAttribute('data-ad-width', String(props.width))
  ins.setAttribute('data-ad-height', String(props.height))
  host.value.appendChild(ins)

  const s = document.createElement('script')
  s.type = 'text/javascript'
  s.src = ADFIT_SRC
  s.async = true
  host.value.appendChild(s)
})
</script>

<template>
  <div v-if="showAd" ref="host" class="ad-banner" :style="{ minHeight: height + 'px' }"></div>
</template>

<style scoped>
.ad-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden; /* 좁은 화면에서 가로 넘침 방지 */
}
</style>