사이트 설정 로고와 사용자 설정 레이아웃 정리

2026-05-13 15:42:03 +09:00
parent bebf7ee1c9
commit 52f22b4ff1
17 changed files with 372 additions and 395 deletions
--- a/pages/admin/settings/index.vue
+++ b/pages/admin/settings/index.vue
@@ -4,17 +4,11 @@ definePageMeta({
 })

 const saving = ref(false)
-const loadingProfile = ref(true)
-const savingProfile = ref(false)
-const savingPassword = ref(false)
-const uploadingAvatar = ref(false)
-const removingAvatar = ref(false)
+const uploadingLogo = ref(false)
 const errorMessage = ref('')
-const profileMessage = ref('')
-const passwordMessage = ref('')
 const toast = ref(null)
+const logoInputRef = ref(null)
 let toastTimer = null
-const avatarInputRef = ref(null)

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

@@ -23,207 +17,11 @@ const form = reactive({
  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'
 })

-const profileForm = reactive({
-  email: '',
-  username: '',
-  avatarUrl: ''
-})
-
-const passwordForm = reactive({
-  currentPassword: '',
-  nextPassword: '',
-  nextPasswordConfirm: ''
-})
-
-/**
- * 관리자 프로필을 조회한다.
- * @returns {Promise<void>}
- */
-const loadAdminProfile = async () => {
-  loadingProfile.value = true
-  profileMessage.value = ''
-
-  try {
-    const profile = await $fetch('/api/auth/profile')
-    profileForm.email = profile.email || ''
-    profileForm.username = profile.username || ''
-    profileForm.avatarUrl = profile.avatarUrl || ''
-  } catch {
-    profileMessage.value = '관리자 프로필을 불러오지 못했습니다. 다시 로그인해 주세요.'
-  } finally {
-    loadingProfile.value = false
-  }
-}
-
-/**
- * 닉네임 중복 여부를 확인한다.
- * @returns {Promise<boolean>} 사용 가능 여부
- */
-const checkUsernameAvailable = async () => {
-  const username = profileForm.username.trim()
-  if (!username) {
-    profileMessage.value = '관리자 이름을 입력해 주세요.'
-    return false
-  }
-
-  try {
-    const result = await $fetch('/api/auth/check-username', {
-      query: {
-        username
-      }
-    })
-
-    if (!result.available) {
-      profileMessage.value = '이미 사용 중인 이름입니다.'
-      return false
-    }
-  } catch (error) {
-    profileMessage.value = error?.data?.message || '이름 중복 확인에 실패했습니다.'
-    return false
-  }
-
-  return true
-}
-
-/**
- * 관리자 프로필을 저장한다.
- * @returns {Promise<void>}
- */
-const saveAdminProfile = async () => {
-  const available = await checkUsernameAvailable()
-  if (!available) {
-    return
-  }
-
-  savingProfile.value = true
-  profileMessage.value = ''
-
-  try {
-    await $fetch('/api/auth/profile', {
-      method: 'PUT',
-      body: {
-        username: profileForm.username.trim(),
-        avatarUrl: profileForm.avatarUrl.trim()
-      }
-    })
-    profileMessage.value = '관리자 프로필이 저장되었습니다.'
-  } catch (error) {
-    profileMessage.value = error?.data?.message || '관리자 프로필 저장에 실패했습니다.'
-  } finally {
-    savingProfile.value = false
-  }
-}
-
-/**
- * 관리자 썸네일 파일 선택창을 연다.
- * @returns {void}
- */
-const openAvatarFilePicker = () => {
-  avatarInputRef.value?.click()
-}
-
-/**
- * 관리자 썸네일을 업로드한다.
- * @param {Event} event - 파일 선택 이벤트
- * @returns {Promise<void>}
- */
-const uploadAvatar = async (event) => {
-  const target = /** @type {HTMLInputElement | null} */ (event.target instanceof HTMLInputElement ? event.target : null)
-  const file = target?.files?.[0]
-
-  if (!file || uploadingAvatar.value) {
-    return
-  }
-
-  uploadingAvatar.value = true
-  profileMessage.value = ''
-
-  try {
-    const formData = new FormData()
-    formData.append('file', file)
-    const result = await $fetch('/api/auth/avatar', {
-      method: 'POST',
-      body: formData
-    })
-    profileForm.avatarUrl = result.avatarUrl || ''
-    profileMessage.value = '관리자 썸네일이 업로드되었습니다.'
-  } catch (error) {
-    profileMessage.value = error?.data?.message || '관리자 썸네일 업로드에 실패했습니다.'
-  } finally {
-    uploadingAvatar.value = false
-    if (target) {
-      target.value = ''
-    }
-  }
-}
-
-/**
- * 관리자 썸네일을 제거한다.
- * @returns {Promise<void>}
- */
-const removeAvatar = async () => {
-  if (removingAvatar.value) {
-    return
-  }
-
-  removingAvatar.value = true
-  profileMessage.value = ''
-
-  try {
-    await $fetch('/api/auth/avatar', {
-      method: 'DELETE'
-    })
-    profileForm.avatarUrl = ''
-    profileMessage.value = '관리자 썸네일이 제거되었습니다.'
-  } catch (error) {
-    profileMessage.value = error?.data?.message || '관리자 썸네일 제거에 실패했습니다.'
-  } finally {
-    removingAvatar.value = false
-  }
-}
-
-/**
- * 관리자 비밀번호를 변경한다.
- * @returns {Promise<void>}
- */
-const saveAdminPassword = async () => {
-  passwordMessage.value = ''
-
-  if (!passwordForm.currentPassword || !passwordForm.nextPassword || !passwordForm.nextPasswordConfirm) {
-    passwordMessage.value = '모든 비밀번호 입력값을 작성해 주세요.'
-    return
-  }
-
-  if (passwordForm.nextPassword !== passwordForm.nextPasswordConfirm) {
-    passwordMessage.value = '새 비밀번호와 확인 값이 일치하지 않습니다.'
-    return
-  }
-
-  savingPassword.value = true
-
-  try {
-    await $fetch('/api/auth/password', {
-      method: 'PUT',
-      body: {
-        currentPassword: passwordForm.currentPassword,
-        nextPassword: passwordForm.nextPassword
-      }
-    })
-
-    passwordForm.currentPassword = ''
-    passwordForm.nextPassword = ''
-    passwordForm.nextPasswordConfirm = ''
-    passwordMessage.value = '관리자 비밀번호가 변경되었습니다.'
-  } catch (error) {
-    passwordMessage.value = error?.data?.message || '관리자 비밀번호 변경에 실패했습니다.'
-  } finally {
-    savingPassword.value = false
-  }
-}
-
 /**
 * 저장 상태 토스트 표시
 * @param {'success'|'error'|'info'} type - 토스트 타입
@@ -238,6 +36,51 @@ const showToast = (type, message) => {
  }, 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>} 저장 결과
@@ -254,7 +97,9 @@ const saveSettings = async () => {
        title: form.title,
        description: form.description,
        siteUrl: form.siteUrl,
-        logoText: form.logoText,
+        logoText: form.logoText || '井',
+        logoUrl: form.logoUrl,
+        faviconUrl: form.faviconUrl,
        copyrightText: form.copyrightText
      }
    })
@@ -272,8 +117,6 @@ const saveSettings = async () => {
 onBeforeUnmount(() => {
  window.clearTimeout(toastTimer)
 })
-
-onMounted(loadAdminProfile)
 </script>

 <template>
@@ -291,140 +134,47 @@ onMounted(loadAdminProfile)
      {{ errorMessage }}
    </p>

-    <section class="admin-settings__profile mb-6 max-w-3xl rounded border border-line bg-white p-5">
-      <h2 class="text-base font-semibold text-ink">관리자 프로필</h2>
-      <p class="mt-1 text-xs text-muted">
-        썸네일과 이름을 수정할 수 있습니다.
-      </p>
-
-      <div v-if="loadingProfile" class="mt-4 text-sm text-muted">
-        관리자 프로필을 불러오는 중입니다.
-      </div>
-
-      <div v-else class="mt-4 flex flex-col gap-4">
-        <div class="flex flex-col gap-3 rounded border border-line bg-paper p-3 md:flex-row md:items-center">
-          <div class="relative w-fit shrink-0">
-            <button
-              type="button"
-              class="group relative h-24 w-24 overflow-hidden rounded-full border border-line bg-white"
-              :disabled="uploadingAvatar || removingAvatar"
-              @click="openAvatarFilePicker"
-            >
+    <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="profileForm.avatarUrl"
-                :src="profileForm.avatarUrl"
-                alt="관리자 썸네일"
+                v-if="form.logoUrl"
                class="h-full w-full object-cover"
+                :src="form.logoUrl"
+                alt="사이트 로고"
              >
-              <span
-                v-else
-                class="grid h-full w-full place-items-center text-2xl font-semibold text-muted"
-              >
-                {{ (profileForm.username || profileForm.email || '@').slice(0, 1).toUpperCase() }}
+              <span v-else class="text-2xl font-semibold text-muted">
+                {{ form.logoText || '井' }}
              </span>
-              <span class="pointer-events-none absolute inset-0 grid place-items-center bg-black/45 text-[11px] font-medium text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-                {{ profileForm.avatarUrl ? '이미지 변경' : '썸네일 등록' }}
-              </span>
-            </button>
-            <button
-              v-if="profileForm.avatarUrl"
-              type="button"
-              class="absolute right-0 top-0 grid h-6 w-6 -translate-y-1/3 translate-x-1/3 place-items-center rounded-full border border-line bg-paper text-xs text-muted transition-opacity hover:opacity-80 disabled:opacity-50"
-              :disabled="removingAvatar"
-              @click.stop="removeAvatar"
-            >
-              {{ removingAvatar ? '...' : 'X' }}
-            </button>
+            </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>
-          <div class="grid min-w-0 flex-1 gap-3">
-            <label class="grid gap-1 text-sm">
-              <span class="text-xs text-muted">관리자 이름</span>
-              <input
-                v-model="profileForm.username"
-                type="text"
-                class="rounded border border-line bg-white px-3 py-2"
-              >
-            </label>
-            <label class="grid gap-1 text-sm">
-              <span class="text-xs text-muted">관리자 이메일</span>
-              <input
-                :value="profileForm.email"
-                type="text"
-                class="rounded border border-line bg-[#f7f7f5] px-3 py-2 text-muted"
-                readonly
-              >
-            </label>
-          </div>
-        </div>
-
-        <input
-          ref="avatarInputRef"
-          type="file"
-          accept="image/jpeg,image/png,image/webp,image/gif"
-          class="hidden"
-          :disabled="uploadingAvatar"
-          @change="uploadAvatar"
-        >
-
-        <div class="flex items-center gap-2">
          <button
-            class="rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
+            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="savingProfile"
-            @click="saveAdminProfile"
+            :disabled="uploadingLogo"
+            @click="openLogoFilePicker"
          >
-            {{ savingProfile ? '저장 중' : '관리자 프로필 저장' }}
+            {{ uploadingLogo ? '업로드 중' : form.logoUrl ? '로고 변경' : '로고 등록' }}
          </button>
-          <p v-if="profileMessage" class="text-xs text-muted">
-            {{ profileMessage }}
-          </p>
+          <input
+            ref="logoInputRef"
+            class="hidden"
+            type="file"
+            accept="image/jpeg,image/png,image/webp"
+            :disabled="uploadingLogo"
+            @change="uploadLogo"
+          >
        </div>
-      </div>
-    </section>
+      </section>

-    <section class="admin-settings__password mb-6 max-w-3xl rounded border border-line bg-white p-5">
-      <h2 class="text-base font-semibold text-ink">관리자 비밀번호 변경</h2>
-      <p class="mt-1 text-xs text-muted">
-        현재 비밀번호 확인 후 새 비밀번호로 변경할 수 있습니다.
-      </p>
-
-      <div class="mt-4 grid gap-3">
-        <input
-          v-model="passwordForm.currentPassword"
-          type="password"
-          class="rounded border border-line bg-white px-3 py-2 text-sm"
-          placeholder="현재 비밀번호"
-        >
-        <input
-          v-model="passwordForm.nextPassword"
-          type="password"
-          class="rounded border border-line bg-white px-3 py-2 text-sm"
-          placeholder="새 비밀번호"
-        >
-        <input
-          v-model="passwordForm.nextPasswordConfirm"
-          type="password"
-          class="rounded border border-line bg-white px-3 py-2 text-sm"
-          placeholder="새 비밀번호 확인"
-        >
-      </div>
-
-      <div class="mt-4 flex items-center gap-2">
-        <button
-          class="rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-          type="button"
-          :disabled="savingPassword"
-          @click="saveAdminPassword"
-        >
-          {{ savingPassword ? '변경 중' : '관리자 비밀번호 변경' }}
-        </button>
-        <p v-if="passwordMessage" class="text-xs text-muted">
-          {{ passwordMessage }}
-        </p>
-      </div>
-    </section>
-
-    <form class="admin-settings__form grid max-w-3xl gap-6" @submit.prevent="saveSettings">
      <label class="admin-settings__field grid gap-2 text-sm">
        <span class="admin-settings__label font-medium">사이트 이름</span>
        <input
@@ -440,6 +190,7 @@ onMounted(loadAdminProfile)
        <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>

@@ -453,36 +204,29 @@ onMounted(loadAdminProfile)
        >
      </label>

-      <div class="admin-settings__grid grid gap-4 md:grid-cols-2">
-        <label class="admin-settings__field grid gap-2 text-sm">
-          <span class="admin-settings__label font-medium">로고 텍스트</span>
-          <input
-            v-model="form.logoText"
-            class="admin-settings__input rounded border border-line bg-white px-3 py-2"
-            type="text"
-            maxlength="8"
-            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>

-        <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>
-
-      <div class="admin-settings__preview rounded border border-line bg-white p-5">
+      <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 rounded-2xl bg-[#15171a] text-2xl font-bold text-white">
-            {{ form.logoText || '井' }}
+          <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">