사이트 광고 슬롯 설정 추가

components/site/RightSidebar.vue

@@ -486,6 +486,12 @@ watch([postTocItems, () => route.fullPath], async () => {
           About {{ siteSettings.title }}
         </NuxtLink>
       </div>
+
+      <SiteAdSlot
+        class="right-sidebar__ad-slot site-sidebar-section py-5 pl-5 pr-0 max-lg:px-0"
+        :code="siteSettings?.adSidebarCode"
+        location="sidebar"
+      />
     </div>
 
     <footer class="right-sidebar__footer shrink-0 py-4 pl-5 pr-3 text-xs site-muted max-lg:px-0">

components/site/SiteAdSlot.vue

@@ -0,0 +1,79 @@
+<script setup>
+const props = defineProps({
+  code: {
+    type: String,
+    default: ''
+  },
+  location: {
+    type: String,
+    default: ''
+  }
+})
+
+const slotRef = ref(null)
+const mounted = ref(false)
+const normalizedCode = computed(() => String(props.code || '').trim())
+
+/**
+ * v-html로 삽입된 광고 스크립트를 브라우저에서 실행 가능한 노드로 교체한다.
+ * @returns {void}
+ */
+const executeAdScripts = () => {
+  if (!import.meta.client || !(slotRef.value instanceof HTMLElement)) {
+    return
+  }
+
+  const scripts = Array.from(slotRef.value.querySelectorAll('script'))
+
+  scripts.forEach((script) => {
+    const nextScript = document.createElement('script')
+
+    Array.from(script.attributes).forEach((attribute) => {
+      nextScript.setAttribute(attribute.name, attribute.value)
+    })
+
+    nextScript.text = script.text || script.textContent || ''
+    script.replaceWith(nextScript)
+  })
+}
+
+watch(normalizedCode, async () => {
+  await nextTick()
+  executeAdScripts()
+})
+
+onMounted(async () => {
+  mounted.value = true
+  await nextTick()
+  executeAdScripts()
+})
+</script>
+
+<template>
+  <div
+    v-if="mounted && normalizedCode"
+    ref="slotRef"
+    class="site-ad-slot"
+    role="complementary"
+    aria-label="광고"
+    :data-ad-location="location || undefined"
+    v-html="normalizedCode"
+  />
+</template>
+
+<style scoped>
+.site-ad-slot {
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.site-ad-slot :deep(ins.adsbygoogle) {
+  display: block;
+  max-width: 100%;
+}
+
+.site-ad-slot :deep(iframe) {
+  max-width: 100%;
+}
+</style>