267 lines
8.7 KiB
Vue
267 lines
8.7 KiB
Vue
<script setup>
|
|
definePageMeta({
|
|
layout: 'admin'
|
|
})
|
|
|
|
const saving = ref(false)
|
|
const uploadingLogo = ref(false)
|
|
const errorMessage = ref('')
|
|
const toast = ref(null)
|
|
const logoInputRef = ref(null)
|
|
let toastTimer = 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'
|
|
})
|
|
|
|
/**
|
|
* 저장 상태 토스트 표시
|
|
* @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 = ''
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 사이트 설정 저장
|
|
* @returns {Promise<void>} 저장 결과
|
|
*/
|
|
const saveSettings = async () => {
|
|
saving.value = true
|
|
errorMessage.value = ''
|
|
showToast('info', '사이트 설정을 저장하는 중입니다.')
|
|
|
|
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
|
|
}
|
|
})
|
|
|
|
Object.assign(form, updatedSettings)
|
|
showToast('success', '사이트 설정이 저장되었습니다.')
|
|
} catch (error) {
|
|
errorMessage.value = error?.data?.message || '사이트 설정을 저장하지 못했습니다.'
|
|
showToast('error', errorMessage.value)
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
window.clearTimeout(toastTimer)
|
|
})
|
|
</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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</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 비율 이미지로 등록합니다. 같은 이미지가 공개 로고와 파비콘으로 함께 사용됩니다.
|
|
</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"
|
|
>
|
|
{{ uploadingLogo ? '업로드 중' : form.logoUrl ? '로고 변경' : '로고 등록' }}
|
|
</button>
|
|
<input
|
|
ref="logoInputRef"
|
|
class="hidden"
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
:disabled="uploadingLogo"
|
|
@change="uploadLogo"
|
|
>
|
|
</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>
|
|
|
|
<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="{
|
|
'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'
|
|
}"
|
|
role="status"
|
|
>
|
|
{{ toast.message }}
|
|
</div>
|
|
</section>
|
|
</template>
|