sori.studio/components/admin/AdminAdsSettingsCard.vue

<script setup>
const adSlots = [
  {
    key: 'adHomeFeedCode',
    label: '메인 피드',
    description: '메인 화면 Featured와 Latest 목록 사이에 표시됩니다.',
    placeholder: '<ins class="adsbygoogle" ...></ins>'
  },
  {
    key: 'adHomeInfeedCode',
    label: '메인 인피드',
    description: '메인 화면 Latest 게시물 목록 사이 한 곳에 무작위로 표시됩니다.',
    placeholder: '<ins class="adsbygoogle" ...></ins>'
  },
  {
    key: 'adSidebarCode',
    label: '오른쪽 사이드',
    description: '게시물 상세를 제외한 공개 화면의 오른쪽 사이드바 하단에 표시됩니다.',
    placeholder: '<ins class="adsbygoogle" ...></ins>'
  },
  {
    key: 'adPostSidebarCode',
    label: '게시물 왼쪽 사이드',
    description: '게시물 상세 화면의 왼쪽 사이드바 하단에 표시됩니다.',
    placeholder: '<ins class="adsbygoogle" ...></ins>'
  },
  {
    key: 'adPostTopCode',
    label: '게시물 본문 상단',
    description: '게시물 상세 본문 렌더링 직전에 표시됩니다.',
    placeholder: '<script async src="..."><' + '/script>\n<ins class="adsbygoogle" ...></ins>'
  },
  {
    key: 'adPostInArticleCode',
    label: '게시물 인아티클',
    description: '게시물 본문이 충분히 길 때 본문 중간 문단 뒤에 표시되며, 긴 글은 최대 두 번 표시됩니다.',
    placeholder: '<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>