사이트 설정 관리 추가

pages/admin/settings/index.vue

@@ -2,15 +2,180 @@
 definePageMeta({
   layout: 'admin'
 })
+
+const saving = ref(false)
+const errorMessage = ref('')
+const toast = 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 || '井',
+  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 {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,
+        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">
-    <h1 class="admin-settings__title text-3xl font-semibold">
-      사이트 설정
-    </h1>
-    <p class="admin-settings__description mt-4 text-sm text-muted">
-      사이트 설정은 2차 관리자 개발 범위입니다.
+    <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-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
+          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"
+        />
+      </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>
+
+      <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>
+      </div>
+
+      <div class="admin-settings__preview rounded 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>
+          <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>