zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

메뉴 관리 개편, 추천 사이트·1뎁스 네비, 우측 Recommended 연동(v1.1.13)

Browse Source 
상단 네비는 평면 테이블·드래그로 편집하고 한 단계 하위만 허용한다.
추천 사이트 탭·location recommended·공개 API와 우측 사이드 카드·파비콘 URL 유틸을 추가한다.
문서·배포 마이그레이션 안내·관리자 레이아웃·설정 화면 등 누적 변경을 반영한다.
This commit is contained in:
zenn
2026-05-15 14:20:27 +09:00
parent 2768975752
commit ca1e17890b
24 changed files with 1509 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

753
pages/admin/settings/index.vue
View File

@@ -3,12 +3,26 @@ 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')
@@ -22,6 +36,142 @@ const form = reactive({
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 - 토스트 타입
@@ -82,10 +232,26 @@ const uploadLogo = async (event) => {
}
/**
* 사이트 설정 저장
* @returns {Promise<void>} 저장 결과
* 사이트 설정 PUT 요청 본문을 구성한다.
* @returns {Object} API 본문
*/
const saveSettings = async () => {
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', '사이트 설정을 저장하는 중입니다.')
@@ -93,174 +259,487 @@ const saveSettings = async () => {
try {
const updatedSettings = await $fetch('/admin/api/settings', {
method: 'PUT',
body: {
title: form.title,
description: form.description,
siteUrl: form.siteUrl,
logoText: form.logoText || '井',
logoUrl: form.logoUrl,
faviconUrl: form.faviconUrl,
copyrightText: form.copyrightText
}
body: buildSiteSettingsPayload()
})
Object.assign(form, updatedSettings)
showToast('success', '사이트 설정이 저장되었습니다.')
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>
<section class="admin-settings bg-paper p-6">
<div class="admin-settings__header mb-8">
<p class="admin-settings__eyebrow text-xs font-semibold uppercase text-muted">
Settings
</p>
<h1 class="admin-settings__title mt-2 text-3xl font-semibold">
사이트 설정
</h1>
<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>
<p v-if="errorMessage" class="admin-settings__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
{{ errorMessage }}
</p>
<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>
<form class="admin-settings__form grid max-w-4xl gap-6" @submit.prevent="saveSettings">
<section class="admin-settings__logo rounded-xl border border-line bg-white p-5">
<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="admin-settings__logo-preview grid h-20 w-20 shrink-0 place-items-center overflow-hidden rounded-2xl border border-line bg-paper">
<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-muted">
{{ form.logoText || '井' }}
</span>
<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>
<h2 class="text-base font-semibold text-ink">로고</h2>
<p class="mt-1 max-w-md text-sm leading-6 text-muted">
1:1 비율 이미지로 등록합니다. 같은 이미지가 공개 로고와 파비콘으로 함께 사용됩니다.
<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>
<button
class="admin-settings__logo-button h-10 rounded-md border border-line bg-white px-4 text-sm font-semibold text-[#15171a] transition hover:bg-[#f3f5f7] disabled:opacity-50"
type="button"
:disabled="uploadingLogo"
@click="openLogoFilePicker"
<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)]"
>
{{ uploadingLogo ? '업로드 중' : form.logoUrl ? '로고 변경' : '로고 등록' }}
</button>
<input
ref="logoInputRef"
class="hidden"
type="file"
accept="image/jpeg,image/png,image/webp"
:disabled="uploadingLogo"
@change="uploadLogo"
<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>
</section>
<label class="admin-settings__field grid gap-2 text-sm">
<span class="admin-settings__label font-medium">사이트 이름</span>
<input
v-model="form.title"
class="admin-settings__input rounded border border-line bg-white px-3 py-2"
type="text"
required
>
</label>
<label class="admin-settings__field grid gap-2 text-sm">
<span class="admin-settings__label font-medium">사이트 설명</span>
<textarea
v-model="form.description"
class="admin-settings__textarea min-h-28 resize-y rounded border border-line bg-white px-3 py-2"
required
/>
</label>
<label class="admin-settings__field grid gap-2 text-sm">
<span class="admin-settings__label font-medium">사이트 URL</span>
<input
v-model="form.siteUrl"
class="admin-settings__input rounded border border-line bg-white px-3 py-2"
type="url"
required
>
</label>
<label class="admin-settings__field grid gap-2 text-sm">
<span class="admin-settings__label font-medium">저작권 문구</span>
<input
v-model="form.copyrightText"
class="admin-settings__input rounded border border-line bg-white px-3 py-2"
type="text"
required
>
</label>
<div class="admin-settings__preview rounded-xl border border-line bg-white p-5">
<p class="admin-settings__preview-label text-xs font-semibold uppercase text-muted">
공개 화면 미리보기
</p>
<div class="admin-settings__preview-body mt-4 flex items-center gap-3">
<div class="admin-settings__preview-logo grid h-12 w-12 place-items-center overflow-hidden rounded-xl bg-[#15171a] text-2xl 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>
<p class="admin-settings__preview-title font-semibold">
{{ form.title || 'sori.studio' }}
</p>
<p class="admin-settings__preview-description text-sm text-muted">
{{ form.description || '사이트 설명이 공개 화면에 표시됩니다.' }}
</p>
</div>
</div>
</div>
<div class="admin-settings__actions flex justify-end border-t border-line pt-5">
<button
class="admin-settings__submit rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
type="submit"
:disabled="saving"
>
{{ saving ? '저장 중' : '설정 저장' }}
</button>
</div>
</form>
</main>
</div>
</div>
<div
v-if="toast"
class="admin-settings__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"
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-line bg-white text-ink': toast.type === 'info'
'border-[#e6e8eb] bg-white text-[#15171a]': toast.type === 'info'
}"
role="status"
>
{{ toast.message }}
</div>
</section>
</div>
</template>