v1.2.9: 라이브 에디터·홈 피드·메인 커버 개선

라이브 모드 코드/콜아웃/토글 편집, 슬래시 명령, 홈 Latest List·Compact·Cards 보기,
사이트 설정 메인 화면 커버(720px) 및 HomeHero 반영.

Co-authored-by: Cursor <cursoragent@cursor.com>

pages/admin/settings/index.vue

@@ -8,10 +8,13 @@ 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')
@@ -22,6 +25,8 @@ const editTitleDesc = ref(false)
 const editMisc = ref(false)
 /** POST 설정 카드 편집 모드 여부 */
 const editPost = ref(false)
+/** 메인 화면 커버 카드 편집 모드 여부 */
+const editHomeCover = ref(false)
 /** 편집 시작 시점의 제목·설명(취소 시 복원용) */
 const titleDescSnapshot = reactive({
   title: '',
@@ -39,6 +44,12 @@ const miscSnapshot = reactive({
 const postSnapshot = reactive({
   showPostUpdatedAt: false
 })
+/** 편집 시작 시점의 메인 화면 커버(취소 시 복원용) */
+const homeCoverSnapshot = reactive({
+  homeCoverImageUrl: '',
+  homeCoverTitle: '',
+  homeCoverText: ''
+})
 let toastTimer = null
 let scrollSpyFrame = null
 
@@ -52,7 +63,10 @@ const form = reactive({
   logoUrl: settings.value?.logoUrl || '',
   faviconUrl: settings.value?.faviconUrl || '',
   copyrightText: settings.value?.copyrightText || '©2026 sori.studio',
-  showPostUpdatedAt: Boolean(settings.value?.showPostUpdatedAt)
+  showPostUpdatedAt: Boolean(settings.value?.showPostUpdatedAt),
+  homeCoverImageUrl: settings.value?.homeCoverImageUrl || '',
+  homeCoverTitle: settings.value?.homeCoverTitle || '',
+  homeCoverText: settings.value?.homeCoverText || ''
 })
 
 /**
@@ -83,6 +97,16 @@ const hasMiscChanges = computed(() => editMisc.value && (
 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} 표시 문구
@@ -111,6 +135,7 @@ const settingsNavGroups = [
   {
     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' }
     ]
   },
@@ -308,7 +333,10 @@ const buildSiteSettingsPayload = () => ({
   logoUrl: form.logoUrl,
   faviconUrl: form.faviconUrl,
   copyrightText: form.copyrightText,
-  showPostUpdatedAt: Boolean(form.showPostUpdatedAt)
+  showPostUpdatedAt: Boolean(form.showPostUpdatedAt),
+  homeCoverImageUrl: form.homeCoverImageUrl || '',
+  homeCoverTitle: form.homeCoverTitle || '',
+  homeCoverText: form.homeCoverText || ''
 })
 
 /**
@@ -466,6 +494,108 @@ const savePostSection = async () => {
   }
 }
 
+/**
+ * 메인 화면 커버 파일 선택 창을 연다.
+ * @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 updatedSettings = await $fetch('/admin/api/settings/home-cover', {
+      method: 'POST',
+      body: formData
+    })
+    Object.assign(form, updatedSettings)
+    homeCoverSnapshot.homeCoverImageUrl = form.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 - 키보드 이벤트
@@ -982,6 +1112,150 @@ onBeforeUnmount(() => {
           <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 기준으로 저장됩니다. JPG·PNG·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)]"