메인 화면 설정 카드 분리

components/admin/AdminHomeCoverSettingsCard.vue

@@ -0,0 +1,331 @@
+<script setup>
+const homeCoverInputRef = ref(null)
+const homeCoverDarkInputRef = ref(null)
+
+/**
+ * 메인 화면 커버 설정 카드
+ * @property {Object} form - 사이트 설정 폼 객체
+ * @property {boolean} editing - 편집 모드 여부
+ * @property {boolean} saving - 저장 중 여부
+ * @property {boolean} uploadingLight - 라이트 커버 업로드 중 여부
+ * @property {boolean} uploadingDark - 다크 커버 업로드 중 여부
+ * @property {boolean} hasChanges - 변경 여부
+ */
+defineProps({
+  form: {
+    type: Object,
+    required: true
+  },
+  editing: {
+    type: Boolean,
+    default: false
+  },
+  saving: {
+    type: Boolean,
+    default: false
+  },
+  uploadingLight: {
+    type: Boolean,
+    default: false
+  },
+  uploadingDark: {
+    type: Boolean,
+    default: false
+  },
+  hasChanges: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['begin', 'cancel', 'save', 'upload-cover', 'drop-cover', 'clear-cover'])
+
+/**
+ * 메인 화면 커버 파일 선택 창을 연다.
+ * @param {'light'|'dark'} variant - 커버 이미지 종류
+ * @returns {void}
+ */
+const openHomeCoverFilePicker = (variant = 'light') => {
+  if (variant === 'dark') {
+    homeCoverDarkInputRef.value?.click()
+    return
+  }
+
+  homeCoverInputRef.value?.click()
+}
+</script>
+
+<template>
+  <section
+    id="admin-settings-section-home-cover"
+    class="admin-home-cover-settings-card 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="!editing"
+          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="!editing">
+          <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="$emit('begin')"
+          >
+            편집
+          </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="saving"
+            @click="$emit('cancel')"
+          >
+            취소
+          </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="saving || !hasChanges"
+            @click="$emit('save')"
+          >
+            {{ saving ? '저장 중' : '저장' }}
+          </button>
+        </template>
+      </div>
+    </div>
+
+    <div
+      v-if="!editing"
+      class="admin-home-cover-settings-card__readonly admin-settings-screen__home-cover-readonly grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
+    >
+      <div class="grid min-w-0 gap-6">
+        <div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
+          <div class="flex items-center justify-between gap-3">
+            <h3 class="text-sm font-bold text-[#15171a]">
+              라이트모드
+            </h3>
+          </div>
+          <div
+            v-if="form.homeCoverImageUrl"
+            class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
+          >
+            <HomeHero
+              class="!max-w-full"
+              :image-url="form.homeCoverImageUrl"
+              :dark-image-url="''"
+              :title="form.homeCoverTitle"
+              :text="form.homeCoverText"
+            />
+          </div>
+          <div
+            v-else
+            class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-full place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
+          >
+            라이트모드 이미지가 없습니다.
+          </div>
+        </div>
+
+        <div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
+          <div class="flex items-center justify-between gap-3">
+            <h3 class="text-sm font-bold text-[#15171a]">
+              다크모드
+            </h3>
+          </div>
+          <div
+            v-if="form.homeCoverDarkImageUrl"
+            class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
+          >
+            <HomeHero
+              class="!max-w-full"
+              :image-url="form.homeCoverDarkImageUrl"
+              :dark-image-url="''"
+              :title="form.homeCoverTitle"
+              :text="form.homeCoverText"
+            />
+          </div>
+          <div
+            v-else
+            class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-full place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
+          >
+            다크모드 전용 이미지가 없습니다. 공개 화면에서는 라이트모드 이미지를 대신 사용합니다.
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="admin-home-cover-settings-card__edit admin-settings-screen__home-cover-edit grid min-w-0 gap-6 border-t border-[#eceff2] pt-5">
+      <div class="grid min-w-0 gap-6">
+        <div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div class="min-w-0">
+              <h3 class="text-sm font-bold text-[#15171a]">
+                라이트모드
+              </h3>
+              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
+                기본 헤더 이미지입니다.
+              </p>
+            </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="uploadingLight"
+                @click="openHomeCoverFilePicker('light')"
+              >
+                {{ uploadingLight ? '업로드 중' : '이미지 변경' }}
+              </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="uploadingLight"
+                @click="$emit('clear-cover', 'light')"
+              >
+                삭제
+              </button>
+            </div>
+          </div>
+          <div
+            v-if="form.homeCoverImageUrl"
+            class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
+          >
+            <HomeHero
+              class="!max-w-full"
+              :image-url="form.homeCoverImageUrl"
+              :dark-image-url="''"
+              :title="form.homeCoverTitle"
+              :text="form.homeCoverText"
+            />
+          </div>
+          <button
+            v-else
+            class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-full cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
+            type="button"
+            :disabled="uploadingLight"
+            @click="openHomeCoverFilePicker('light')"
+            @dragover.prevent
+            @drop.prevent="$emit('drop-cover', $event, 'light')"
+          >
+            <span class="grid place-items-center gap-2 text-sm font-semibold text-[#657080]">
+              <svg class="size-6 text-[#8a94a3]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M12 16V4" />
+                <path d="m7 9 5-5 5 5" />
+                <path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
+              </svg>
+              <span>라이트모드 이미지를 드롭하거나 선택하세요.</span>
+            </span>
+          </button>
+          <input
+            ref="homeCoverInputRef"
+            class="hidden"
+            type="file"
+            accept="image/jpeg,image/png,image/webp"
+            :disabled="uploadingLight"
+            @change="$emit('upload-cover', $event, 'light')"
+          >
+        </div>
+
+        <div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div class="min-w-0">
+              <h3 class="text-sm font-bold text-[#15171a]">
+                다크모드
+              </h3>
+              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
+                다크모드에서 교체되는 이미지입니다.
+              </p>
+            </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="uploadingDark"
+                @click="openHomeCoverFilePicker('dark')"
+              >
+                {{ uploadingDark ? '업로드 중' : '이미지 변경' }}
+              </button>
+              <button
+                v-if="form.homeCoverDarkImageUrl"
+                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="uploadingDark"
+                @click="$emit('clear-cover', 'dark')"
+              >
+                삭제
+              </button>
+            </div>
+          </div>
+          <div
+            v-if="form.homeCoverDarkImageUrl"
+            class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
+          >
+            <HomeHero
+              class="!max-w-full"
+              :image-url="form.homeCoverDarkImageUrl"
+              :dark-image-url="''"
+              :title="form.homeCoverTitle"
+              :text="form.homeCoverText"
+            />
+          </div>
+          <button
+            v-else
+            class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-full cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
+            type="button"
+            :disabled="uploadingDark"
+            @click="openHomeCoverFilePicker('dark')"
+            @dragover.prevent
+            @drop.prevent="$emit('drop-cover', $event, 'dark')"
+          >
+            <span class="grid place-items-center gap-2 text-sm font-semibold text-[#657080]">
+              <svg class="size-6 text-[#8a94a3]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M12 16V4" />
+                <path d="m7 9 5-5 5 5" />
+                <path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
+              </svg>
+              <span>다크모드 이미지를 드롭하거나 선택하세요.</span>
+            </span>
+          </button>
+          <input
+            ref="homeCoverDarkInputRef"
+            class="hidden"
+            type="file"
+            accept="image/jpeg,image/png,image/webp"
+            :disabled="uploadingDark"
+            @change="$emit('upload-cover', $event, 'dark')"
+          >
+        </div>
+      </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>
+</template>

docs/map.md

@@ -258,7 +258,8 @@
 | pages/admin/tags/index.vue | 태그 관리(메인 태그 드래그 정렬 자동 저장·more vert 메뉴, 일반 태그 배지 more vert 메뉴·검색/정렬, 태그 추가 버튼), 액션 피드백 토스트 |
 | pages/admin/tags/new.vue | 태그 생성 |
 | pages/admin/tags/[id].vue | 태그 수정 |
-| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **블로그 제목·설명** 편집 상태·저장 요청·스냅샷 복원 연결, **사이트 정보** 편집 상태·저장 요청·로고 업로드 처리 연결, **SNS 정보** 편집 상태·저장 요청 연결, **POST 설정** 편집 상태·저장 요청·스냅샷 복원 연결, **메인 화면**(라이트·다크 커버 상하 개별 프리뷰·드롭존 업로드·오버레이 텍스트), **브랜드** 컬러 정규화·편집 상태·저장 요청 연결, **어나운스 바** 편집 상태·저장 요청 연결, **스팸 필터** 편집 상태·저장 요청·값 정규화 연결, **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신·작업 액션 연결, **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
+| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **블로그 제목·설명** 편집 상태·저장 요청·스냅샷 복원 연결, **사이트 정보** 편집 상태·저장 요청·로고 업로드 처리 연결, **SNS 정보** 편집 상태·저장 요청 연결, **POST 설정** 편집 상태·저장 요청·스냅샷 복원 연결, **메인 화면** 편집 상태·저장 요청·커버 업로드 처리 연결, **브랜드** 컬러 정규화·편집 상태·저장 요청 연결, **어나운스 바** 편집 상태·저장 요청 연결, **스팸 필터** 편집 상태·저장 요청·값 정규화 연결, **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신·작업 액션 연결, **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
+| components/admin/AdminHomeCoverSettingsCard.vue | 관리자 설정 메인 화면 카드(라이트·다크 커버 미리보기·드롭존·파일 선택·오버레이 문구·저장 이벤트) |
 | components/admin/AdminBrandSettingsCard.vue | 관리자 설정 브랜드 컬러 카드(읽기 미리보기·색상 입력·텍스트 입력·예시 배지·저장 이벤트) |
 | components/admin/AdminTitleDescriptionSettingsCard.vue | 관리자 설정 블로그 제목·설명 카드(읽기 행·편집 입력·공개 화면 미리보기·저장 이벤트) |
 | components/admin/AdminSiteInfoSettingsCard.vue | 관리자 설정 사이트 정보 카드(로고 미리보기·로고 파일 선택·사이트 URL·저작권 문구·저장 이벤트) |

docs/todo.md

@@ -4,7 +4,7 @@
 
 - 거대 컴포넌트 책임 분리 진행.
   - `components/admin/AdminMarkdownEditor.vue`: 미디어 모달, 슬래시 명령, 히스토리·선택 복원, 라이브/소스 전환 로직을 단계적으로 composable 또는 하위 컴포넌트로 분리.
-  - `pages/admin/settings/index.vue`: Import 작업 센터·사이트 용량·게시물 가져오기·게시물 내보내기 요청·최근 내보내기 작업 목록·스팸 필터·브랜드·POST 설정·블로그 제목/설명·사이트 정보·SNS 정보·어나운스 바처럼 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 composable 단위로 추가 분리.
+  - `pages/admin/settings/index.vue`: Import 작업 센터·사이트 용량·게시물 가져오기·게시물 내보내기 요청·최근 내보내기 작업 목록·스팸 필터·브랜드·POST 설정·블로그 제목/설명·사이트 정보·SNS 정보·어나운스 바·메인 화면처럼 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 composable 단위로 추가 분리.
   - `pages/admin/settings/index.vue`: 업로드 제한 셀렉트가 블로그 제목·설명 읽기 카드 안에 있으나 저장 필드는 POST 설정에 묶여 있어, 별도 업로드 제한 카드 또는 POST 설정 편집 영역으로 위치와 저장 흐름을 정리.
   - `components/content/ContentMarkdownRenderer.vue`: 파싱·블록 렌더링·라이브 편집 중개·라이트박스·광고 삽입 책임을 분리.
   - `components/admin/AdminPostForm.vue`: 태그 입력, 대표 이미지 선택, 발행/초안 저장 상태, 우측 설정 패널 책임을 분리.

docs/update.md

@@ -1,5 +1,11 @@
 # 업데이트 이력
 
+## v1.11.30
+
+- 관리자 설정의 메인 화면 카드를 `AdminHomeCoverSettingsCard` 컴포넌트로 분리.
+- 라이트·다크 커버 미리보기·드롭존·파일 선택·오버레이 문구 입력 렌더링 책임을 설정 화면에서 하위 컴포넌트로 이동.
+- 설정 화면은 메인 화면 편집 상태·저장 요청·커버 업로드 처리만 담당하도록 정리.
+
 ## v1.11.29
 
 - 관리자 설정의 SNS 정보 카드를 `AdminSocialSettingsCard` 컴포넌트로 분리.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.11.29",
+  "version": "1.11.30",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.11.29",
+      "version": "1.11.30",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.11.29",
+  "version": "1.11.30",
   "private": true,
   "type": "module",
   "imports": {

pages/admin/settings/index.vue

@@ -79,8 +79,6 @@ const postExportMaxFileSizeMb = ref(500)
 const postImportExportPanel = ref('')
 const errorMessage = ref('')
 const { toast, showToast } = useAdminToast()
-const homeCoverInputRef = ref(null)
-const homeCoverDarkInputRef = ref(null)
 const mainScrollRef = ref(null)
 const navSearchQuery = ref('')
 const {
@@ -1516,30 +1514,6 @@ const savePostSection = async () => {
   }
 }
 
-/**
- * 메인 화면 커버 파일 선택 창을 연다.
- * @returns {void}
- */
-const openHomeCoverFilePicker = () => {
-  if (uploadingHomeCover.value) {
-    return
-  }
-
-  homeCoverInputRef.value?.click()
-}
-
-/**
- * 메인 화면 다크 커버 파일 선택 창을 연다.
- * @returns {void}
- */
-const openHomeCoverDarkFilePicker = () => {
-  if (uploadingHomeCoverDark.value) {
-    return
-  }
-
-  homeCoverDarkInputRef.value?.click()
-}
-
 /**
  * 메인 화면 커버 이미지 파일을 업로드한다.
  * @param {File} file - 업로드 파일
@@ -2182,278 +2156,20 @@ 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 class="grid min-w-0 gap-6">
-                <div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
-                  <div class="flex items-center justify-between gap-3">
-                    <h3 class="text-sm font-bold text-[#15171a]">
-                      라이트모드
-                    </h3>
-                  </div>
-                  <div
-                    v-if="form.homeCoverImageUrl"
-                    class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
-                  >
-                    <HomeHero
-                      class="!max-w-full"
-                      :image-url="form.homeCoverImageUrl"
-                      :dark-image-url="''"
-                      :title="form.homeCoverTitle"
-                      :text="form.homeCoverText"
-                    />
-                  </div>
-                  <div
-                    v-else
-                    class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-full place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
-                  >
-                    라이트모드 이미지가 없습니다.
-                  </div>
-                </div>
-
-                <div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
-                  <div class="flex items-center justify-between gap-3">
-                    <h3 class="text-sm font-bold text-[#15171a]">
-                      다크모드
-                    </h3>
-                  </div>
-                  <div
-                    v-if="form.homeCoverDarkImageUrl"
-                    class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
-                  >
-                    <HomeHero
-                      class="!max-w-full"
-                      :image-url="form.homeCoverDarkImageUrl"
-                      :dark-image-url="''"
-                      :title="form.homeCoverTitle"
-                      :text="form.homeCoverText"
-                    />
-                  </div>
-                  <div
-                    v-else
-                    class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-full place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
-                  >
-                    다크모드 전용 이미지가 없습니다. 공개 화면에서는 라이트모드 이미지를 대신 사용합니다.
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div v-else class="admin-settings-screen__home-cover-edit grid min-w-0 gap-6 border-t border-[#eceff2] pt-5">
-              <div class="grid min-w-0 gap-6">
-                <div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
-                  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                    <div class="min-w-0">
-                      <h3 class="text-sm font-bold text-[#15171a]">
-                        라이트모드
-                      </h3>
-                      <p class="mt-1 text-sm leading-relaxed text-[#657080]">
-                        기본 헤더 이미지입니다.
-                      </p>
-                    </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 ? '업로드 중' : '이미지 변경' }}
-                      </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('light')"
-                      >
-                        삭제
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    v-if="form.homeCoverImageUrl"
-                    class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
-                  >
-                    <HomeHero
-                      class="!max-w-full"
-                      :image-url="form.homeCoverImageUrl"
-                      :dark-image-url="''"
-                      :title="form.homeCoverTitle"
-                      :text="form.homeCoverText"
-                    />
-                  </div>
-                  <button
-                    v-else
-                    class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-full cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
-                    type="button"
-                    :disabled="uploadingHomeCover"
-                    @click="openHomeCoverFilePicker"
-                    @dragover.prevent
-                    @drop.prevent="dropHomeCover($event, 'light')"
-                  >
-                    <span class="grid place-items-center gap-2 text-sm font-semibold text-[#657080]">
-                      <svg class="size-6 text-[#8a94a3]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                        <path d="M12 16V4" />
-                        <path d="m7 9 5-5 5 5" />
-                        <path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
-                      </svg>
-                      <span>라이트모드 이미지를 드롭하거나 선택하세요.</span>
-                    </span>
-                  </button>
-                  <input
-                    ref="homeCoverInputRef"
-                    class="hidden"
-                    type="file"
-                    accept="image/jpeg,image/png,image/webp"
-                    :disabled="uploadingHomeCover"
-                    @change="uploadHomeCover($event, 'light')"
-                  >
-                </div>
-
-                <div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
-                  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                    <div class="min-w-0">
-                      <h3 class="text-sm font-bold text-[#15171a]">
-                        다크모드
-                      </h3>
-                      <p class="mt-1 text-sm leading-relaxed text-[#657080]">
-                        다크모드에서 교체되는 이미지입니다.
-                      </p>
-                    </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="uploadingHomeCoverDark"
-                        @click="openHomeCoverDarkFilePicker"
-                      >
-                        {{ uploadingHomeCoverDark ? '업로드 중' : '이미지 변경' }}
-                      </button>
-                      <button
-                        v-if="form.homeCoverDarkImageUrl"
-                        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="uploadingHomeCoverDark"
-                        @click="clearHomeCoverImage('dark')"
-                      >
-                        삭제
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    v-if="form.homeCoverDarkImageUrl"
-                    class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
-                  >
-                    <HomeHero
-                      class="!max-w-full"
-                      :image-url="form.homeCoverDarkImageUrl"
-                      :dark-image-url="''"
-                      :title="form.homeCoverTitle"
-                      :text="form.homeCoverText"
-                    />
-                  </div>
-                  <button
-                    v-else
-                    class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-full cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
-                    type="button"
-                    :disabled="uploadingHomeCoverDark"
-                    @click="openHomeCoverDarkFilePicker"
-                    @dragover.prevent
-                    @drop.prevent="dropHomeCover($event, 'dark')"
-                  >
-                    <span class="grid place-items-center gap-2 text-sm font-semibold text-[#657080]">
-                      <svg class="size-6 text-[#8a94a3]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                        <path d="M12 16V4" />
-                        <path d="m7 9 5-5 5 5" />
-                        <path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
-                      </svg>
-                      <span>다크모드 이미지를 드롭하거나 선택하세요.</span>
-                    </span>
-                  </button>
-                  <input
-                    ref="homeCoverDarkInputRef"
-                    class="hidden"
-                    type="file"
-                    accept="image/jpeg,image/png,image/webp"
-                    :disabled="uploadingHomeCoverDark"
-                    @change="uploadHomeCover($event, 'dark')"
-                  >
-                </div>
-              </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>
+          <AdminHomeCoverSettingsCard
+            :form="form"
+            :editing="editHomeCover"
+            :saving="savingHomeCover"
+            :uploading-light="uploadingHomeCover"
+            :uploading-dark="uploadingHomeCoverDark"
+            :has-changes="hasHomeCoverChanges"
+            @begin="beginEditHomeCover"
+            @cancel="cancelEditHomeCover"
+            @save="saveHomeCoverSection"
+            @upload-cover="uploadHomeCover"
+            @drop-cover="dropHomeCover"
+            @clear-cover="clearHomeCoverImage"
+          />
 
           <AdminBrandSettingsCard
             v-model:brand-color="form.brandColor"