zenn
797a6dd5a0
head 인라인 스크립트로 data-theme 선적용, 로고 캐시 스플래시 추가. 메인 커버는 업로드 후 저장 버튼에서 이미지·텍스트 일괄 반영. Co-authored-by: Cursor <cursoragent@cursor.com>
1331 lines
51 KiB
Vue
1331 lines
51 KiB
Vue
<script setup>
|
|
definePageMeta({
|
|
layout: 'admin'
|
|
})
|
|
|
|
const router = useRouter()
|
|
|
|
const savingTitleDesc = ref(false)
|
|
const savingMisc = ref(false)
|
|
const savingPost = ref(false)
|
|
const savingHomeCover = ref(false)
|
|
const uploadingLogo = ref(false)
|
|
const uploadingHomeCover = ref(false)
|
|
const errorMessage = ref('')
|
|
const toast = ref(null)
|
|
const logoInputRef = ref(null)
|
|
const homeCoverInputRef = 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 editMisc = ref(false)
|
|
/** POST 설정 카드 편집 모드 여부 */
|
|
const editPost = ref(false)
|
|
/** 메인 화면 커버 카드 편집 모드 여부 */
|
|
const editHomeCover = ref(false)
|
|
/** 편집 시작 시점의 제목·설명(취소 시 복원용) */
|
|
const titleDescSnapshot = reactive({
|
|
title: '',
|
|
description: ''
|
|
})
|
|
/** 편집 시작 시점의 기타 설정(취소 시 복원용) */
|
|
const miscSnapshot = reactive({
|
|
siteUrl: '',
|
|
logoText: '',
|
|
logoUrl: '',
|
|
faviconUrl: '',
|
|
copyrightText: ''
|
|
})
|
|
/** 편집 시작 시점의 POST 설정(취소 시 복원용) */
|
|
const postSnapshot = reactive({
|
|
showPostUpdatedAt: false
|
|
})
|
|
/** 편집 시작 시점의 메인 화면 커버(취소 시 복원용) */
|
|
const homeCoverSnapshot = reactive({
|
|
homeCoverImageUrl: '',
|
|
homeCoverTitle: '',
|
|
homeCoverText: ''
|
|
})
|
|
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',
|
|
showPostUpdatedAt: Boolean(settings.value?.showPostUpdatedAt),
|
|
homeCoverImageUrl: settings.value?.homeCoverImageUrl || '',
|
|
homeCoverTitle: settings.value?.homeCoverTitle || '',
|
|
homeCoverText: settings.value?.homeCoverText || ''
|
|
})
|
|
|
|
/**
|
|
* 블로그 제목·설명 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasTitleDescChanges = computed(() => editTitleDesc.value && (
|
|
form.title !== titleDescSnapshot.title
|
|
|| form.description !== titleDescSnapshot.description
|
|
))
|
|
|
|
/**
|
|
* 기타 설정 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasMiscChanges = computed(() => editMisc.value && (
|
|
form.siteUrl !== miscSnapshot.siteUrl
|
|
|| form.logoText !== miscSnapshot.logoText
|
|
|| form.logoUrl !== miscSnapshot.logoUrl
|
|
|| form.faviconUrl !== miscSnapshot.faviconUrl
|
|
|| form.copyrightText !== miscSnapshot.copyrightText
|
|
))
|
|
|
|
/**
|
|
* POST 설정 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasPostChanges = computed(() => editPost.value
|
|
&& form.showPostUpdatedAt !== postSnapshot.showPostUpdatedAt)
|
|
|
|
/**
|
|
* 메인 화면 커버 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasHomeCoverChanges = computed(() => editHomeCover.value && (
|
|
form.homeCoverImageUrl !== homeCoverSnapshot.homeCoverImageUrl
|
|
|| form.homeCoverTitle !== homeCoverSnapshot.homeCoverTitle
|
|
|| form.homeCoverText !== homeCoverSnapshot.homeCoverText
|
|
))
|
|
|
|
/**
|
|
* 수정일 표시 라벨
|
|
* @returns {string} 표시 문구
|
|
*/
|
|
const showPostUpdatedAtLabel = computed(() => (form.showPostUpdatedAt ? '켜짐' : '꺼짐'))
|
|
|
|
/**
|
|
* 설정 화면 좌측 내비 구역 정의
|
|
* @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-post', label: 'POST 설정', keywords: 'post updated date display 수정일' }
|
|
]
|
|
},
|
|
{
|
|
heading: '사이트',
|
|
items: [
|
|
{ id: 'admin-settings-section-home-cover', label: '메인 화면', keywords: 'home cover hero banner image' },
|
|
{ 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 = () => {
|
|
if (!editMisc.value) {
|
|
beginEditMisc()
|
|
}
|
|
|
|
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)
|
|
miscSnapshot.logoUrl = form.logoUrl
|
|
miscSnapshot.faviconUrl = form.faviconUrl
|
|
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,
|
|
showPostUpdatedAt: Boolean(form.showPostUpdatedAt),
|
|
homeCoverImageUrl: form.homeCoverImageUrl || '',
|
|
homeCoverTitle: form.homeCoverTitle || '',
|
|
homeCoverText: form.homeCoverText || ''
|
|
})
|
|
|
|
/**
|
|
* 현재 폼 값으로 사이트 설정을 서버에 저장한다.
|
|
* @param {{ successToast?: string, savingFlag: import('vue').Ref<boolean> }} options - 저장 옵션
|
|
* @returns {Promise<boolean>} 성공 여부
|
|
*/
|
|
const persistSiteSettings = async (options) => {
|
|
const successToast = options.successToast || '사이트 설정이 저장되었습니다.'
|
|
options.savingFlag.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 {
|
|
options.savingFlag.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 블로그 제목·설명 편집 모드 진입
|
|
* @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 () => {
|
|
if (!hasTitleDescChanges.value) {
|
|
return
|
|
}
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: '블로그 제목·설명이 저장되었습니다.',
|
|
savingFlag: savingTitleDesc
|
|
})
|
|
|
|
if (ok) {
|
|
editTitleDesc.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 기타 설정 편집 모드 진입
|
|
* @returns {void}
|
|
*/
|
|
const beginEditMisc = () => {
|
|
miscSnapshot.siteUrl = form.siteUrl
|
|
miscSnapshot.logoText = form.logoText
|
|
miscSnapshot.logoUrl = form.logoUrl
|
|
miscSnapshot.faviconUrl = form.faviconUrl
|
|
miscSnapshot.copyrightText = form.copyrightText
|
|
editMisc.value = true
|
|
}
|
|
|
|
/**
|
|
* 기타 설정 편집 취소
|
|
* @returns {void}
|
|
*/
|
|
const cancelEditMisc = () => {
|
|
form.siteUrl = miscSnapshot.siteUrl
|
|
form.logoText = miscSnapshot.logoText
|
|
form.logoUrl = miscSnapshot.logoUrl
|
|
form.faviconUrl = miscSnapshot.faviconUrl
|
|
form.copyrightText = miscSnapshot.copyrightText
|
|
editMisc.value = false
|
|
}
|
|
|
|
/**
|
|
* 기타 설정 저장
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const saveMiscSection = async () => {
|
|
if (!hasMiscChanges.value) {
|
|
return
|
|
}
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: '기타 설정이 저장되었습니다.',
|
|
savingFlag: savingMisc
|
|
})
|
|
|
|
if (ok) {
|
|
miscSnapshot.siteUrl = form.siteUrl
|
|
miscSnapshot.logoText = form.logoText
|
|
miscSnapshot.logoUrl = form.logoUrl
|
|
miscSnapshot.faviconUrl = form.faviconUrl
|
|
miscSnapshot.copyrightText = form.copyrightText
|
|
editMisc.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* POST 설정 편집 모드 진입
|
|
* @returns {void}
|
|
*/
|
|
const beginEditPost = () => {
|
|
postSnapshot.showPostUpdatedAt = form.showPostUpdatedAt
|
|
editPost.value = true
|
|
}
|
|
|
|
/**
|
|
* POST 설정 편집 취소
|
|
* @returns {void}
|
|
*/
|
|
const cancelEditPost = () => {
|
|
form.showPostUpdatedAt = postSnapshot.showPostUpdatedAt
|
|
editPost.value = false
|
|
}
|
|
|
|
/**
|
|
* POST 설정 저장
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const savePostSection = async () => {
|
|
if (!hasPostChanges.value) {
|
|
return
|
|
}
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: 'POST 설정이 저장되었습니다.',
|
|
savingFlag: savingPost
|
|
})
|
|
|
|
if (ok) {
|
|
postSnapshot.showPostUpdatedAt = form.showPostUpdatedAt
|
|
editPost.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 커버 파일 선택 창을 연다.
|
|
* @returns {void}
|
|
*/
|
|
const openHomeCoverFilePicker = () => {
|
|
if (uploadingHomeCover.value) {
|
|
return
|
|
}
|
|
|
|
homeCoverInputRef.value?.click()
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 커버 이미지를 업로드한다.
|
|
* @param {Event} event - 파일 선택 이벤트
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const uploadHomeCover = async (event) => {
|
|
const target = /** @type {HTMLInputElement | null} */ (event.target instanceof HTMLInputElement ? event.target : null)
|
|
const file = target?.files?.[0]
|
|
|
|
if (!file || uploadingHomeCover.value) {
|
|
return
|
|
}
|
|
|
|
uploadingHomeCover.value = true
|
|
errorMessage.value = ''
|
|
showToast('info', '커버 이미지를 업로드하는 중입니다.')
|
|
|
|
try {
|
|
const formData = new FormData()
|
|
formData.append('file', file)
|
|
const { homeCoverImageUrl } = await $fetch('/admin/api/settings/home-cover', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
form.homeCoverImageUrl = homeCoverImageUrl || ''
|
|
showToast('success', '커버 이미지를 불러왔습니다. 저장 버튼을 눌러 적용하세요.')
|
|
} catch (error) {
|
|
errorMessage.value = error?.data?.message || '커버 이미지 업로드에 실패했습니다.'
|
|
showToast('error', errorMessage.value)
|
|
} finally {
|
|
uploadingHomeCover.value = false
|
|
if (target) {
|
|
target.value = ''
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 커버 이미지를 제거한다.
|
|
* @returns {void}
|
|
*/
|
|
const clearHomeCoverImage = () => {
|
|
form.homeCoverImageUrl = ''
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 커버 편집 모드 진입
|
|
* @returns {void}
|
|
*/
|
|
const beginEditHomeCover = () => {
|
|
homeCoverSnapshot.homeCoverImageUrl = form.homeCoverImageUrl
|
|
homeCoverSnapshot.homeCoverTitle = form.homeCoverTitle
|
|
homeCoverSnapshot.homeCoverText = form.homeCoverText
|
|
editHomeCover.value = true
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 커버 편집 취소
|
|
* @returns {void}
|
|
*/
|
|
const cancelEditHomeCover = () => {
|
|
form.homeCoverImageUrl = homeCoverSnapshot.homeCoverImageUrl
|
|
form.homeCoverTitle = homeCoverSnapshot.homeCoverTitle
|
|
form.homeCoverText = homeCoverSnapshot.homeCoverText
|
|
editHomeCover.value = false
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 커버 저장
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const saveHomeCoverSection = async () => {
|
|
if (!hasHomeCoverChanges.value) {
|
|
return
|
|
}
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: '메인 화면 설정이 저장되었습니다.',
|
|
savingFlag: savingHomeCover
|
|
})
|
|
|
|
if (ok) {
|
|
homeCoverSnapshot.homeCoverImageUrl = form.homeCoverImageUrl
|
|
homeCoverSnapshot.homeCoverTitle = form.homeCoverTitle
|
|
homeCoverSnapshot.homeCoverText = form.homeCoverText
|
|
editHomeCover.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Escape 키: 제목·설명 편집 중이면 취소, 아니면 설정 화면 닫기
|
|
* @param {KeyboardEvent} event - 키보드 이벤트
|
|
* @returns {void}
|
|
*/
|
|
const onGlobalKeydown = (event) => {
|
|
if (event.key !== 'Escape') {
|
|
return
|
|
}
|
|
if (editTitleDesc.value) {
|
|
event.preventDefault()
|
|
cancelEditTitleDesc()
|
|
return
|
|
}
|
|
if (editMisc.value) {
|
|
event.preventDefault()
|
|
cancelEditMisc()
|
|
return
|
|
}
|
|
if (editPost.value) {
|
|
event.preventDefault()
|
|
cancelEditPost()
|
|
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>
|
|
<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="savingTitleDesc"
|
|
@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="savingTitleDesc || !hasTitleDescChanges"
|
|
@click="saveTitleDescSection"
|
|
>
|
|
{{ savingTitleDesc ? '저장 중' : '저장' }}
|
|
</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="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">
|
|
기타 설정
|
|
</h2>
|
|
<p
|
|
v-if="!editMisc"
|
|
class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
|
|
>
|
|
로고, 공개 URL, 푸터 저작권 문구를 관리합니다.
|
|
</p>
|
|
</div>
|
|
<div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
|
|
<template v-if="!editMisc">
|
|
<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="beginEditMisc"
|
|
>
|
|
편집
|
|
</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="savingMisc"
|
|
@click="cancelEditMisc"
|
|
>
|
|
취소
|
|
</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="savingMisc || !hasMiscChanges"
|
|
@click="saveMiscSection"
|
|
>
|
|
{{ savingMisc ? '저장 중' : '저장' }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!editMisc"
|
|
class="admin-settings-screen__misc-readonly grid gap-6"
|
|
>
|
|
<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-sm font-medium text-[#3f4650]">
|
|
로고
|
|
</h3>
|
|
<p class="mt-1 text-sm text-[#15171a]">
|
|
{{ form.logoUrl ? '등록됨' : '미등록' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div>
|
|
<h3 class="text-sm font-medium text-[#3f4650]">
|
|
사이트 URL
|
|
</h3>
|
|
<p class="mt-1 break-all text-sm text-[#15171a]">
|
|
{{ form.siteUrl || '—' }}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium text-[#3f4650]">
|
|
저작권 문구
|
|
</h3>
|
|
<p class="mt-1 text-sm text-[#15171a]">
|
|
{{ form.copyrightText || '—' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else 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>
|
|
|
|
</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-post"
|
|
class="admin-settings-screen__card admin-settings-screen__card--post 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">
|
|
POST 설정
|
|
</h2>
|
|
<p
|
|
v-if="!editPost"
|
|
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="!editPost">
|
|
<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="beginEditPost"
|
|
>
|
|
편집
|
|
</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="savingPost"
|
|
@click="cancelEditPost"
|
|
>
|
|
취소
|
|
</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="savingPost || !hasPostChanges"
|
|
@click="savePostSection"
|
|
>
|
|
{{ savingPost ? '저장 중' : '저장' }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!editPost"
|
|
class="admin-settings-screen__post-readonly grid gap-2 text-sm"
|
|
>
|
|
<div class="flex items-center justify-between gap-4 border-t border-[#eceff2] pt-5">
|
|
<span class="font-bold text-[#15171a]">수정일 표시</span>
|
|
<span class="text-[#657080]">{{ showPostUpdatedAtLabel }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<label
|
|
v-else
|
|
class="admin-settings-screen__post-toggle flex items-center justify-between gap-4 border-t border-[#eceff2] pt-5 text-sm"
|
|
>
|
|
<span class="font-bold text-[#15171a]">수정일 표시</span>
|
|
<span class="admin-settings-screen__post-toggle-control relative inline-flex h-7 w-12 shrink-0 items-center">
|
|
<input
|
|
v-model="form.showPostUpdatedAt"
|
|
class="peer sr-only"
|
|
type="checkbox"
|
|
aria-label="수정일 표시"
|
|
>
|
|
<span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#15171a]" aria-hidden="true" />
|
|
<span class="relative ml-1 size-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
|
|
</span>
|
|
</label>
|
|
</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-home-cover"
|
|
class="admin-settings-screen__card admin-settings-screen__card--home-cover 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">
|
|
메인 화면
|
|
</h2>
|
|
<p
|
|
v-if="!editHomeCover"
|
|
class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
|
|
>
|
|
홈 상단에 720px 너비 커버 이미지를 표시합니다. 제목·짧은 문구는 이미지 왼쪽 하단에 겹쳐 보이며, 이미지·텍스트는 저장 버튼으로 함께 반영합니다.
|
|
</p>
|
|
</div>
|
|
<div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
|
|
<template v-if="!editHomeCover">
|
|
<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="beginEditHomeCover"
|
|
>
|
|
편집
|
|
</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="savingHomeCover"
|
|
@click="cancelEditHomeCover"
|
|
>
|
|
취소
|
|
</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="savingHomeCover || !hasHomeCoverChanges"
|
|
@click="saveHomeCoverSection"
|
|
>
|
|
{{ savingHomeCover ? '저장 중' : '저장' }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!editHomeCover"
|
|
class="admin-settings-screen__home-cover-readonly grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
|
|
>
|
|
<div v-if="form.homeCoverImageUrl" class="overflow-hidden rounded-lg border border-[#e6e8eb]">
|
|
<img
|
|
class="aspect-[720/215] w-full max-w-[360px] object-cover"
|
|
:src="form.homeCoverImageUrl"
|
|
alt="메인 화면 커버 미리보기"
|
|
>
|
|
</div>
|
|
<p v-else class="text-[#657080]">
|
|
등록된 커버 이미지가 없습니다. 홈 상단 배너는 표시되지 않습니다.
|
|
</p>
|
|
<div v-if="form.homeCoverTitle || form.homeCoverText" class="grid gap-1">
|
|
<p v-if="form.homeCoverTitle" class="font-semibold text-[#15171a]">
|
|
{{ form.homeCoverTitle }}
|
|
</p>
|
|
<p v-if="form.homeCoverText" class="text-[#657080]">
|
|
{{ form.homeCoverText }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="admin-settings-screen__home-cover-edit grid gap-6 border-t border-[#eceff2] pt-5">
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
<div class="min-w-0 flex-1">
|
|
<h3 class="text-sm font-medium text-[#3f4650]">
|
|
커버 이미지
|
|
</h3>
|
|
<p class="mt-1 max-w-md text-sm leading-relaxed text-[#657080]">
|
|
가로 720px WebP로 변환해 미리 불러옵니다. 제목·본문과 함께 저장 버튼을 눌러야 사이트에 반영됩니다.
|
|
</p>
|
|
<div
|
|
v-if="form.homeCoverImageUrl"
|
|
class="mt-3 overflow-hidden rounded-lg border border-[#e6e8eb]"
|
|
>
|
|
<img
|
|
class="aspect-[720/215] w-full max-w-[360px] object-cover"
|
|
:src="form.homeCoverImageUrl"
|
|
alt="커버 미리보기"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="flex shrink-0 flex-wrap gap-2">
|
|
<button
|
|
class="h-10 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="uploadingHomeCover"
|
|
@click="openHomeCoverFilePicker"
|
|
>
|
|
{{ uploadingHomeCover ? '업로드 중' : form.homeCoverImageUrl ? '이미지 변경' : '이미지 등록' }}
|
|
</button>
|
|
<button
|
|
v-if="form.homeCoverImageUrl"
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#657080] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
|
|
type="button"
|
|
:disabled="uploadingHomeCover"
|
|
@click="clearHomeCoverImage"
|
|
>
|
|
이미지 제거
|
|
</button>
|
|
</div>
|
|
<input
|
|
ref="homeCoverInputRef"
|
|
class="hidden"
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
:disabled="uploadingHomeCover"
|
|
@change="uploadHomeCover"
|
|
>
|
|
</div>
|
|
|
|
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">오버레이 제목</span>
|
|
<input
|
|
v-model="form.homeCoverTitle"
|
|
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"
|
|
maxlength="120"
|
|
placeholder="선택 사항"
|
|
>
|
|
</label>
|
|
|
|
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">오버레이 본문</span>
|
|
<textarea
|
|
v-model="form.homeCoverText"
|
|
class="min-h-[4.5rem] 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]"
|
|
maxlength="280"
|
|
rows="3"
|
|
placeholder="짧은 소개 문구 (선택 사항)"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<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>
|