사이트 광고 슬롯 설정 추가

components/admin/AdminAdsSettingsCard.vue

@@ -0,0 +1,155 @@
+<script setup>
+const adSlots = [
+  {
+    key: 'adHomeFeedCode',
+    label: '메인 피드',
+    description: '메인 화면 Featured와 Latest 목록 사이에 표시됩니다.',
+    placeholder: '<ins class="adsbygoogle" ...></ins>'
+  },
+  {
+    key: 'adSidebarCode',
+    label: '오른쪽 사이드',
+    description: '오른쪽 사이드바 하단 영역에 표시됩니다.',
+    placeholder: '<ins class="adsbygoogle" ...></ins>'
+  },
+  {
+    key: 'adPostTopCode',
+    label: '게시물 본문 상단',
+    description: '게시물 상세 본문 렌더링 직전에 표시됩니다.',
+    placeholder: '<script async src="..."><' + '/script>\n<ins class="adsbygoogle" ...></ins>'
+  },
+  {
+    key: 'adPostBottomCode',
+    label: '게시물 본문 하단',
+    description: '게시물 상세 본문 렌더링 직후에 표시됩니다.',
+    placeholder: '<ins class="adsbygoogle" ...></ins>\n<script>(adsbygoogle = window.adsbygoogle || []).push({})<' + '/script>'
+  }
+]
+
+/**
+ * 광고 슬롯 코드 등록 여부를 반환한다.
+ * @param {Object} form - 사이트 설정 폼
+ * @param {string} key - 슬롯 키
+ * @returns {boolean} 등록 여부
+ */
+const hasSlotCode = (form, key) => Boolean(String(form?.[key] || '').trim())
+
+/**
+ * 광고 설정 카드
+ * @property {Object} form - 사이트 설정 폼 객체
+ * @property {boolean} editing - 편집 모드 여부
+ * @property {boolean} saving - 저장 중 여부
+ * @property {boolean} hasChanges - 변경 여부
+ */
+defineProps({
+  form: {
+    type: Object,
+    required: true
+  },
+  editing: {
+    type: Boolean,
+    default: false
+  },
+  saving: {
+    type: Boolean,
+    default: false
+  },
+  hasChanges: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['begin', 'cancel', 'save'])
+</script>
+
+<template>
+  <section
+    id="admin-settings-section-ads"
+    class="admin-ads-settings-card admin-settings-screen__card admin-settings-screen__card--ads relative flex flex-col gap-6 rounded-xl border border-[#d8dce1] bg-white p-5 transition-all hover:border-[#c5cbd3] hover:shadow-sm md:p-7"
+  >
+    <div class="flex items-start justify-between gap-4">
+      <div class="min-w-0 flex-1">
+        <h2 class="text-base font-semibold text-[#15171a] md:text-lg">
+          Ads
+        </h2>
+        <p
+          v-if="!editing"
+          class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
+        >
+          위치별 광고 코드를 관리합니다. 비어 있는 슬롯은 공개 화면에 표시되지 않습니다.
+        </p>
+      </div>
+      <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
+        <template v-if="!editing">
+          <button
+            class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black"
+            type="button"
+            @click="$emit('begin')"
+          >
+            편집
+          </button>
+        </template>
+        <template v-else>
+          <button
+            class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
+            type="button"
+            :disabled="saving"
+            @click="$emit('cancel')"
+          >
+            취소
+          </button>
+          <button
+            class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black disabled:opacity-50"
+            type="button"
+            :disabled="saving || !hasChanges"
+            @click="$emit('save')"
+          >
+            {{ saving ? '저장 중' : '저장' }}
+          </button>
+        </template>
+      </div>
+    </div>
+
+    <div
+      v-if="!editing"
+      class="admin-ads-settings-card__readonly grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
+    >
+      <div
+        v-for="slot in adSlots"
+        :key="slot.key"
+        class="admin-settings-screen__readonly-row grid gap-1 md:grid-cols-[9rem_minmax(0,1fr)] md:items-center md:gap-5"
+      >
+        <p class="font-normal text-[#3f4650]">
+          {{ slot.label }}
+        </p>
+        <p class="min-w-0 text-sm font-normal leading-relaxed text-[#15171a]">
+          {{ hasSlotCode(form, slot.key) ? '등록됨' : '미등록' }}
+        </p>
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="admin-ads-settings-card__edit grid gap-5 border-t border-[#eceff2] pt-5"
+    >
+      <label
+        v-for="slot in adSlots"
+        :key="slot.key"
+        class="admin-settings-screen__field grid gap-2 text-sm"
+      >
+        <span class="font-medium text-[#3f4650]">{{ slot.label }}</span>
+        <p class="text-xs leading-relaxed text-[#657080]">
+          {{ slot.description }} 애드센스에서 제공한 반응형 또는 고정 크기 HTML 코드를 그대로 붙여 넣습니다.
+        </p>
+        <textarea
+          v-model="form[slot.key]"
+          class="min-h-[9rem] resize-y rounded-md border border-[#dce0e5] bg-white px-3 py-2 font-mono text-[13px] text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+          rows="7"
+          spellcheck="false"
+          :placeholder="slot.placeholder"
+        />
+      </label>
+    </div>
+  </section>
+</template>

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>