sori.studio/pages/admin/settings/index.vue

<script setup>
definePageMeta({
  layout: 'admin'
})

const router = useRouter()

const saving = ref(false)
const uploadingLogo = ref(false)
const errorMessage = ref('')
const toast = ref(null)
const logoInputRef = ref(null)
const mainScrollRef = ref(null)
const navSearchQuery = ref('')
const activeSectionId = ref('admin-settings-section-title')
const scrollSpySuspended = ref(false)
/** 블로그 제목·설명 카드 편집 모드 여부 */
const editTitleDesc = ref(false)
/** 편집 시작 시점의 제목·설명(취소 시 복원용) */
const titleDescSnapshot = reactive({
  title: '',
  description: ''
})
let toastTimer = null
let scrollSpyFrame = null

const { data: settings } = await useFetch('/admin/api/settings')

const form = reactive({
  title: settings.value?.title || 'sori.studio',
  description: settings.value?.description || '',
  siteUrl: settings.value?.siteUrl || 'https://sori.studio',
  logoText: settings.value?.logoText || '井',
  logoUrl: settings.value?.logoUrl || '',
  faviconUrl: settings.value?.faviconUrl || '',
  copyrightText: settings.value?.copyrightText || '©2026 sori.studio'
})

/**
 * 설정 화면 좌측 내비 구역 정의
 * @type {ReadonlyArray<{ heading: string, items: ReadonlyArray<{ id: string, label: string, keywords: string }> }>}
 */
const settingsNavGroups = [
  {
    heading: '일반',
    items: [
      { id: 'admin-settings-section-title', label: '블로그 제목·설명', keywords: 'title description site name' },
      { id: 'admin-settings-section-timezone', label: '타임존', keywords: 'timezone seoul gmt' },
      { id: 'admin-settings-section-misc', label: '기타 설정', keywords: 'logo url copyright favicon' }
    ]
  },
  {
    heading: '사이트',
    items: [
      { id: 'admin-settings-section-announcement', label: '어나운스 바', keywords: 'announcement banner notice' }
    ]
  },
  {
    heading: '콘텐츠·안전',
    items: [
      { id: 'admin-settings-section-import-export', label: '게시물 Import/Export', keywords: 'import export backup' },
      { id: 'admin-settings-section-spam', label: '스팸 필터', keywords: 'spam moderation comments' }
    ]
  }
]

/**
 * 검색어에 맞춰 내비 그룹을 필터링한다.
 * @returns {typeof settingsNavGroups} 표시할 그룹 목록
 */
const filteredSettingsNavGroups = computed(() => {
  const q = navSearchQuery.value.trim().toLowerCase()
  if (!q) {
    return settingsNavGroups
  }

  return settingsNavGroups
    .map((group) => {
      const items = group.items.filter((item) => {
        const hay = `${item.label} ${item.keywords}`.toLowerCase()
        return hay.includes(q)
      })
      return { ...group, items }
    })
    .filter((group) => group.items.length > 0)
})

/**
 * 스크롤 스파이: 본문 스크롤 위치에 맞춰 활성 섹션 id를 갱신한다.
 * @returns {void}
 */
const updateActiveSectionFromScroll = () => {
  const root = mainScrollRef.value
  if (!root || scrollSpySuspended.value) {
    return
  }

  const marker = root.getBoundingClientRect().top + 56
  let nextId = settingsNavGroups[0].items[0].id
  const flatIds = settingsNavGroups.flatMap((g) => g.items.map((i) => i.id))

  for (const id of flatIds) {
    const el = document.getElementById(id)
    if (!el) {
      continue
    }
    const top = el.getBoundingClientRect().top
    if (top <= marker) {
      nextId = id
    }
  }

  activeSectionId.value = nextId
}

/**
 * 스크롤 스파이 핸들러 (rAF 디바운스)
 * @returns {void}
 */
const onMainScroll = () => {
  if (scrollSpyFrame) {
    cancelAnimationFrame(scrollSpyFrame)
  }
  scrollSpyFrame = requestAnimationFrame(() => {
    scrollSpyFrame = null
    updateActiveSectionFromScroll()
  })
}

/**
 * 해당 섹션으로 부드럽게 스크롤한다.
 * @param {string} sectionId - 섹션 요소 id
 * @returns {void}
 */
const scrollToSection = (sectionId) => {
  const el = document.getElementById(sectionId)
  if (!el) {
    return
  }

  scrollSpySuspended.value = true
  activeSectionId.value = sectionId
  el.scrollIntoView({ behavior: 'smooth', block: 'start' })
  window.setTimeout(() => {
    scrollSpySuspended.value = false
    updateActiveSectionFromScroll()
  }, 520)
}

/**
 * 모바일 구역 선택 변경
 * @param {Event} event - change 이벤트
 * @returns {void}
 */
const onMobileNavChange = (event) => {
  const target = event.target
  if (!(target instanceof HTMLSelectElement) || !target.value) {
    return
  }
  scrollToSection(target.value)
}

/**
 * 설정 화면을 닫고 이전 관리 화면으로 돌아간다.
 * @returns {Promise<void>}
 */
const closeSettings = async () => {
  if (import.meta.client && window.history.length > 1) {
    await router.back()
    return
  }
  await navigateTo('/admin')
}

/**
 * 저장 상태 토스트 표시
 * @param {'success'|'error'|'info'} type - 토스트 타입
 * @param {string} message - 표시 메시지
 * @returns {void}
 */
const showToast = (type, message) => {
  window.clearTimeout(toastTimer)
  toast.value = { type, message }
  toastTimer = window.setTimeout(() => {
    toast.value = null
  }, 3200)
}

/**
 * 로고 파일 선택창을 연다.
 * @returns {void}
 */
const openLogoFilePicker = () => {
  logoInputRef.value?.click()
}

/**
 * 사이트 로고를 업로드한다.
 * @param {Event} event - 파일 선택 이벤트
 * @returns {Promise<void>}
 */
const uploadLogo = async (event) => {
  const target = /** @type {HTMLInputElement | null} */ (event.target instanceof HTMLInputElement ? event.target : null)
  const file = target?.files?.[0]

  if (!file || uploadingLogo.value) {
    return
  }

  uploadingLogo.value = true
  errorMessage.value = ''
  showToast('info', '로고를 업로드하는 중입니다.')

  try {
    const formData = new FormData()
    formData.append('file', file)
    const updatedSettings = await $fetch('/admin/api/settings/logo', {
      method: 'POST',
      body: formData
    })
    Object.assign(form, updatedSettings)
    showToast('success', '로고가 등록되었습니다.')
  } catch (error) {
    errorMessage.value = error?.data?.message || '로고 업로드에 실패했습니다.'
    showToast('error', errorMessage.value)
  } finally {
    uploadingLogo.value = false
    if (target) {
      target.value = ''
    }
  }
}

/**
 * 사이트 설정 PUT 요청 본문을 구성한다.
 * @returns {Object} API 본문
 */
const buildSiteSettingsPayload = () => ({
  title: form.title,
  description: form.description,
  siteUrl: form.siteUrl,
  logoText: form.logoText || '井',
  logoUrl: form.logoUrl,
  faviconUrl: form.faviconUrl,
  copyrightText: form.copyrightText
})

/**
 * 현재 폼 값으로 사이트 설정을 서버에 저장한다.
 * @param {{ successToast?: string }} [options] - 성공 토스트 문구
 * @returns {Promise<boolean>} 성공 여부
 */
const persistSiteSettings = async (options = {}) => {
  const successToast = options.successToast || '사이트 설정이 저장되었습니다.'
  saving.value = true
  errorMessage.value = ''
  showToast('info', '사이트 설정을 저장하는 중입니다.')

  try {
    const updatedSettings = await $fetch('/admin/api/settings', {
      method: 'PUT',
      body: buildSiteSettingsPayload()
    })
    Object.assign(form, updatedSettings)
    showToast('success', successToast)
    return true
  } catch (error) {
    errorMessage.value = error?.data?.message || '사이트 설정을 저장하지 못했습니다.'
    showToast('error', errorMessage.value)
    return false
  } finally {
    saving.value = false
  }
}

/**
 * 기타 설정 영역에서 전체 사이트 설정 저장
 * @returns {Promise<void>}
 */
const saveSettings = async () => {
  await persistSiteSettings()
}

/**
 * 블로그 제목·설명 편집 모드 진입
 * @returns {void}
 */
const beginEditTitleDesc = () => {
  titleDescSnapshot.title = form.title
  titleDescSnapshot.description = form.description
  editTitleDesc.value = true
}

/**
 * 블로그 제목·설명 편집 취소
 * @returns {void}
 */
const cancelEditTitleDesc = () => {
  form.title = titleDescSnapshot.title
  form.description = titleDescSnapshot.description
  editTitleDesc.value = false
}

/**
 * 블로그 제목·설명만 저장하고 읽기 모드로 돌아간다.
 * @returns {Promise<void>}
 */
const saveTitleDescSection = async () => {
  const ok = await persistSiteSettings({ successToast: '블로그 제목·설명이 저장되었습니다.' })
  if (ok) {
    editTitleDesc.value = false
  }
}

/**
 * Escape 키: 제목·설명 편집 중이면 취소, 아니면 설정 화면 닫기
 * @param {KeyboardEvent} event - 키보드 이벤트
 * @returns {void}
 */
const onGlobalKeydown = (event) => {
  if (event.key !== 'Escape') {
    return
  }
  if (editTitleDesc.value) {
    event.preventDefault()
    cancelEditTitleDesc()
    return
  }
  closeSettings()
}

onMounted(() => {
  if (import.meta.client) {
    window.addEventListener('keydown', onGlobalKeydown)
    nextTick(() => {
      updateActiveSectionFromScroll()
    })
  }
})

onBeforeUnmount(() => {
  window.clearTimeout(toastTimer)
  if (scrollSpyFrame) {
    cancelAnimationFrame(scrollSpyFrame)
  }
  if (import.meta.client) {
    window.removeEventListener('keydown', onGlobalKeydown)
  }
})
</script>

<template>
  <div class="admin-settings-screen flex h-full min-h-0 flex-col bg-[#f7f8fa] text-[#15171a]">
    <div
      id="admin-settings-done-button-container"
      class="pointer-events-none fixed right-0 top-2 z-50 flex justify-end bg-transparent p-8 md:top-0 md:px-8"
    >
      <button
        id="admin-settings-done-button"
        class="pointer-events-auto inline-flex cursor-pointer items-center justify-center rounded text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:text-[#15171a]"
        type="button"
        title="닫기 (ESC)"
        aria-label="설정 닫기"
        @click="closeSettings"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="pointer-events-none size-5" fill="none" aria-hidden="true">
          <line x1="0.75" y1="23.249" x2="23.25" y2="0.749" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
          <line x1="23.25" y1="23.249" x2="0.75" y2="0.749" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
        </svg>
      </button>
    </div>

    <div class="admin-settings-screen__shell flex min-h-0 flex-1 justify-center overflow-hidden px-0 sm:px-4 lg:px-6">
      <div class="admin-settings-screen__body flex min-h-0 w-full max-w-[1120px] flex-1 flex-col lg:flex-row">
        <aside class="admin-settings-screen__nav-column w-full shrink-0 border-b border-[#e6e8eb] bg-[#f7f8fa] lg:w-72 lg:max-w-[320px] lg:flex-none lg:border-b-0 lg:border-r lg:border-[#e6e8eb]">
          <div class="admin-settings-screen__nav-inner max-h-[40vh] overflow-y-auto p-4 lg:max-h-none lg:h-full lg:overflow-y-auto lg:p-5">
          <label class="admin-settings-screen__search relative mb-4 block">
            <span class="sr-only">설정 검색</span>
            <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#9aa3ad]" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <circle cx="11" cy="11" r="6.5" stroke="currentColor" stroke-width="1.5" />
              <path d="M16 16l4.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
            </svg>
            <input
              v-model="navSearchQuery"
              class="admin-settings-screen__search-input w-full rounded-md border border-[#dce0e5] bg-white py-2 pr-3 pl-9 text-sm text-[#15171a] placeholder:text-[#9aa3ad] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
              type="search"
              autocomplete="off"
              placeholder="설정 검색"
            >
          </label>

          <p
            v-if="filteredSettingsNavGroups.length === 0"
            class="admin-settings-screen__nav-empty rounded-md border border-dashed border-[#dce0e5] px-3 py-4 text-center text-xs text-[#657080]"
          >
            검색과 일치하는 설정 항목이 없습니다.
          </p>
          <nav v-else class="admin-settings-screen__nav grid gap-5 text-sm" aria-label="설정 구역">
            <template v-for="(group, gi) in filteredSettingsNavGroups" :key="group.heading">
              <div v-if="gi > 0" class="admin-settings-screen__nav-separator h-px bg-[#dce0e5]" aria-hidden="true" />
              <div class="admin-settings-screen__nav-group">
                <p class="admin-settings-screen__nav-heading mb-2 px-2 text-xs font-semibold tracking-wide text-[#9aa3ad] uppercase">
                  {{ group.heading }}
                </p>
                <ul class="admin-settings-screen__nav-list grid gap-0.5">
                  <li v-for="item in group.items" :key="item.id">
                    <button
                      class="admin-settings-screen__nav-item flex w-full items-center gap-2 rounded-md px-2 py-2 text-left font-medium text-[#5d6673] transition-colors hover:bg-[#eceff2] hover:text-[#15171a]"
                      :class="activeSectionId === item.id ? 'bg-[#e9ecef] text-[#15171a]' : ''"
                      type="button"
                      @click="scrollToSection(item.id)"
                    >
                      <span class="min-w-0 flex-1 truncate">{{ item.label }}</span>
                    </button>
                  </li>
                </ul>
              </div>
            </template>
          </nav>

          <label class="admin-settings-screen__nav-jump mt-4 lg:hidden">
            <span class="mb-1 block text-xs font-medium text-[#657080]">구역 이동</span>
            <select
              class="w-full rounded-md border border-[#dce0e5] bg-white px-2 py-2 text-sm"
              :value="activeSectionId"
              @change="onMobileNavChange"
            >
              <optgroup v-for="group in settingsNavGroups" :key="group.heading" :label="group.heading">
                <option v-for="item in group.items" :key="item.id" :value="item.id">
                  {{ item.label }}
                </option>
              </optgroup>
            </select>
          </label>
        </div>
      </aside>

      <main
        ref="mainScrollRef"
        class="admin-settings-screen__content min-h-0 min-w-0 flex-1 overflow-y-auto bg-white lg:border-l lg:border-[#e6e8eb]"
        @scroll.passive="onMainScroll"
      >
        <div class="admin-settings-screen__content-inner mx-auto mb-[60vh] w-full max-w-[760px] px-8 pt-16 pb-24 md:px-14 md:pt-10">
          <p v-if="errorMessage" class="admin-settings-screen__error mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
            {{ errorMessage }}
          </p>

          <form class="admin-settings-screen__form w-full space-y-8" @submit.prevent="saveSettings">
            <h2 class="admin-settings-screen__section-heading z-20 -mt-[5px] mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
              일반 설정
            </h2>
          <section
            id="admin-settings-section-title"
            data-testid="title-and-description"
            class="admin-settings-screen__card admin-settings-screen__card--title-desc 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">
                <h5 class="text-base font-semibold text-[#15171a] md:text-lg">
                  블로그 제목·설명
                </h5>
                <p
                  v-if="!editTitleDesc"
                  class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080] md:block"
                >
                  공개 사이트에서 사이트 이름과 소개로 사용되는 값입니다.
                </p>
              </div>
              <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
                <template v-if="!editTitleDesc">
                  <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="beginEditTitleDesc"
                  >
                    편집
                  </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="cancelEditTitleDesc"
                  >
                    취소
                  </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"
                    @click="saveTitleDescSection"
                  >
                    {{ saving ? '저장 중' : '저장' }}
                  </button>
                </template>
              </div>
            </div>

            <div
              v-if="!editTitleDesc"
              class="grid grid-cols-1 gap-x-8 gap-y-6 md:grid-cols-2 md:gap-y-7"
            >
              <div class="flex flex-col">
                <h6 class="block text-sm font-medium tracking-normal text-[#3f4650]">
                  사이트 이름
                </h6>
                <div class="mt-1 flex min-h-[1.5rem] items-center text-[#15171a]">
                  {{ form.title?.trim() ? form.title : '—' }}
                </div>
              </div>
              <div class="flex flex-col">
                <h6 class="block text-sm font-medium tracking-normal text-[#3f4650]">
                  사이트 설명
                </h6>
                <div class="mt-1 flex min-h-[1.5rem] items-start whitespace-pre-wrap text-[#15171a]">
                  {{ form.description?.trim() ? form.description : '—' }}
                </div>
              </div>
            </div>

            <div v-else class="admin-settings-screen__card-body grid gap-5">
              <label class="admin-settings-screen__field grid gap-2 text-sm">
                <span class="font-medium text-[#3f4650]">사이트 이름</span>
                <input
                  v-model="form.title"
                  class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                  type="text"
                  required
                >
              </label>
              <label class="admin-settings-screen__field grid gap-2 text-sm">
                <span class="font-medium text-[#3f4650]">사이트 설명</span>
                <textarea
                  v-model="form.description"
                  class="min-h-28 resize-y rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                  required
                />
              </label>
              <div class="rounded-lg border border-[#eceff2] bg-[#f7f8fa] p-4">
                <p class="text-xs font-semibold tracking-wide text-[#657080] uppercase">
                  공개 화면 미리보기
                </p>
                <div class="mt-3 flex items-center gap-3">
                  <div class="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-xl bg-[#15171a] text-lg font-bold text-white">
                    <img
                      v-if="form.logoUrl"
                      class="h-full w-full object-cover"
                      :src="form.logoUrl"
                      alt=""
                    >
                    <span v-else>{{ form.logoText || '井' }}</span>
                  </div>
                  <div class="min-w-0">
                    <p class="truncate font-semibold text-[#15171a]">
                      {{ form.title || 'sori.studio' }}
                    </p>
                    <p class="truncate text-sm text-[#657080]">
                      {{ form.description || '사이트 설명이 공개 화면에 표시됩니다.' }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <section
            id="admin-settings-section-timezone"
            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
          >
            <div class="admin-settings-screen__card-head mb-2">
              <h2 class="text-lg font-semibold text-[#15171a]">
                타임존
              </h2>
              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
                게시 시각·예약 발행 등에 사용할 표준 시간대입니다. (준비 중)
              </p>
            </div>
            <div class="admin-settings-screen__placeholder mt-4 rounded-lg border border-dashed border-[#dce0e5] bg-[#f7f8fa] px-4 py-8 text-center text-sm text-[#657080]">
              이후 버전에서 타임존 선택과 현지 시각 미리보기를 제공합니다.
            </div>
          </section>

          <section
            id="admin-settings-section-misc"
            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
          >
            <div class="admin-settings-screen__card-head mb-6">
              <h2 class="text-lg font-semibold text-[#15171a]">
                기타 설정
              </h2>
              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
                로고, 공개 URL, 푸터 저작권 문구를 관리합니다.
              </p>
            </div>

            <div class="admin-settings-screen__card-body grid gap-6">
              <div class="flex flex-col gap-5 md:flex-row md:items-center md:justify-between">
                <div class="flex items-center gap-4">
                  <div class="grid h-20 w-20 shrink-0 place-items-center overflow-hidden rounded-2xl border border-[#e6e8eb] bg-[#f7f8fa]">
                    <img
                      v-if="form.logoUrl"
                      class="h-full w-full object-cover"
                      :src="form.logoUrl"
                      alt="사이트 로고"
                    >
                    <span v-else class="text-2xl font-semibold text-[#9aa3ad]">
                      {{ form.logoText || '井' }}
                    </span>
                  </div>
                  <div>
                    <h3 class="text-base font-semibold text-[#15171a]">
                      로고
                    </h3>
                    <p class="mt-1 max-w-md text-sm leading-relaxed text-[#657080]">
                      1:1 비율 이미지로 등록합니다. 같은 이미지가 공개 로고와 파비콘으로 함께 사용됩니다.
                    </p>
                  </div>
                </div>
                <button
                  class="h-10 shrink-0 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
                  type="button"
                  :disabled="uploadingLogo"
                  @click="openLogoFilePicker"
                >
                  {{ uploadingLogo ? '업로드 중' : form.logoUrl ? '로고 변경' : '로고 등록' }}
                </button>
                <input
                  ref="logoInputRef"
                  class="hidden"
                  type="file"
                  accept="image/jpeg,image/png,image/webp"
                  :disabled="uploadingLogo"
                  @change="uploadLogo"
                >
              </div>

              <label class="admin-settings-screen__field grid gap-2 text-sm">
                <span class="font-medium text-[#3f4650]">사이트 URL</span>
                <input
                  v-model="form.siteUrl"
                  class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                  type="url"
                  required
                >
              </label>

              <label class="admin-settings-screen__field grid gap-2 text-sm">
                <span class="font-medium text-[#3f4650]">저작권 문구</span>
                <input
                  v-model="form.copyrightText"
                  class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                  type="text"
                  required
                >
              </label>
            </div>

            <div class="admin-settings-screen__actions mt-8 flex justify-end border-t border-[#eceff2] pt-6">
              <button
                class="rounded-md bg-[#15171a] px-5 py-2.5 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
                type="submit"
                :disabled="saving"
              >
                {{ saving ? '저장 중' : '설정 저장' }}
              </button>
            </div>
          </section>

          <h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
            사이트
          </h2>
          <section
            id="admin-settings-section-announcement"
            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
          >
            <div class="admin-settings-screen__card-head mb-2">
              <h2 class="text-lg font-semibold text-[#15171a]">
                어나운스 바
              </h2>
              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
                사이트 상단 공지 배너 문구와 링크를 설정합니다. (준비 중)
              </p>
            </div>
            <div class="admin-settings-screen__placeholder mt-4 rounded-lg border border-dashed border-[#dce0e5] bg-[#f7f8fa] px-4 py-8 text-center text-sm text-[#657080]">
              이후 버전에서 노출 조건·스타일 옵션과 함께 제공합니다.
            </div>
          </section>

          <h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
            콘텐츠·안전
          </h2>
          <section
            id="admin-settings-section-import-export"
            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
          >
            <div class="admin-settings-screen__card-head mb-2">
              <h2 class="text-lg font-semibold text-[#15171a]">
                게시물 Import/Export
              </h2>
              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
                마크다운 등 형식으로 게시물을 가져오거나 보냅니다. (준비 중)
              </p>
            </div>
            <div class="admin-settings-screen__placeholder mt-4 rounded-lg border border-dashed border-[#dce0e5] bg-[#f7f8fa] px-4 py-8 text-center text-sm text-[#657080]">
              이후 버전에서 일괄 가져오기·보내기 도구를 제공합니다.
            </div>
          </section>

          <section
            id="admin-settings-section-spam"
            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
          >
            <div class="admin-settings-screen__card-head mb-2">
              <h2 class="text-lg font-semibold text-[#15171a]">
                스팸 필터
              </h2>
              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
                댓글·가입 등에서 스팸을 줄이기 위한 규칙을 설정합니다. (준비 중)
              </p>
            </div>
            <div class="admin-settings-screen__placeholder mt-4 rounded-lg border border-dashed border-[#dce0e5] bg-[#f7f8fa] px-4 py-8 text-center text-sm text-[#657080]">
              이후 버전에서 키워드·링크 제한 등 옵션을 제공합니다.
            </div>
          </section>
        </form>
        </div>
      </main>
    </div>
    </div>

    <div
      v-if="toast"
      class="admin-settings-screen__toast fixed right-5 top-24 z-[60] rounded-md border px-4 py-3 text-sm font-semibold shadow-lg md:top-28"
      :class="{
        'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
        'border-red-200 bg-red-50 text-red-800': toast.type === 'error',
        'border-[#e6e8eb] bg-white text-[#15171a]': toast.type === 'info'
      }"
      role="status"
    >
      {{ toast.message }}
    </div>
  </div>
</template>