From eb140128f5d4e91bc5099e7fe45473c7e311a734 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Fri, 24 Jul 2026 10:38:54 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B8=94=EB=A1=9C=EA=B7=B8=20=EC=A0=9C?=
 =?UTF-8?q?=EB=AA=A9=20=EC=84=A4=EB=AA=85=20=EC=B9=B4=EB=93=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AdminTitleDescriptionSettingsCard.vue     | 186 ++++++++++++++++++
 docs/map.md                                   |   3 +-
 docs/todo.md                                  |   3 +-
 docs/update.md                                |   6 +
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 pages/admin/settings/index.vue                | 155 ++-------------
 7 files changed, 210 insertions(+), 149 deletions(-)
 create mode 100644 components/admin/AdminTitleDescriptionSettingsCard.vue

diff --git a/components/admin/AdminTitleDescriptionSettingsCard.vue b/components/admin/AdminTitleDescriptionSettingsCard.vue
new file mode 100644
index 0000000..5bfcd20
--- /dev/null
+++ b/components/admin/AdminTitleDescriptionSettingsCard.vue
@@ -0,0 +1,186 @@
+<script setup>
+/**
+ * 블로그 제목·설명 설정 카드
+ * @property {Object} form - 사이트 설정 폼 객체
+ * @property {boolean} editing - 편집 모드 여부
+ * @property {boolean} saving - 저장 중 여부
+ * @property {boolean} hasChanges - 변경 여부
+ * @property {Array<{ value: number, label: string }>} uploadFileCountOptions - 업로드 파일 수 선택지
+ * @property {Array<{ value: number, label: string }>} uploadTotalSizeOptions - 업로드 전체 용량 선택지
+ */
+defineProps({
+  form: {
+    type: Object,
+    required: true
+  },
+  editing: {
+    type: Boolean,
+    default: false
+  },
+  saving: {
+    type: Boolean,
+    default: false
+  },
+  hasChanges: {
+    type: Boolean,
+    default: false
+  },
+  uploadFileCountOptions: {
+    type: Array,
+    default: () => []
+  },
+  uploadTotalSizeOptions: {
+    type: Array,
+    default: () => []
+  }
+})
+
+defineEmits(['begin', 'cancel', 'save'])
+</script>
+
+<template>
+  <section
+    id="admin-settings-section-title"
+    data-testid="title-and-description"
+    class="admin-title-description-settings-card admin-settings-screen__card admin-settings-screen__card--title-desc 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">
+        <h5 class="text-base font-semibold text-[#15171a] md:text-lg">
+          블로그 제목·설명
+        </h5>
+        <p
+          v-if="!editing"
+          class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080] md:block"
+        >
+          공개 사이트에서 사이트 이름과 소개로 사용되는 값입니다.
+        </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-title-description-settings-card__readonly admin-settings-screen__readonly-list grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
+    >
+      <div class="admin-settings-screen__readonly-row grid gap-1 md:grid-cols-[7.5rem_minmax(0,1fr)] md:items-center md:gap-5">
+        <h6 class="text-sm font-normal tracking-normal text-[#3f4650]">
+          사이트 이름
+        </h6>
+        <div class="min-w-0 text-sm font-normal leading-relaxed text-[#15171a]">
+          {{ form.title?.trim() ? form.title : '—' }}
+        </div>
+      </div>
+      <div class="admin-settings-screen__readonly-row grid gap-1 md:grid-cols-[7.5rem_minmax(0,1fr)] md:items-center md:gap-5">
+        <h6 class="text-sm font-normal tracking-normal text-[#3f4650]">
+          사이트 설명
+        </h6>
+        <div class="min-w-0 whitespace-pre-wrap text-sm font-normal leading-relaxed text-[#15171a]">
+          {{ form.description?.trim() ? form.description : '—' }}
+        </div>
+      </div>
+      <div class="admin-settings-screen__field grid gap-3 border-t border-[#eceff2] pt-5">
+        <div>
+          <span class="font-bold text-[#15171a]">업로드 제한</span>
+          <p class="mt-1 text-xs leading-relaxed text-[#657080]">
+            파일 추가나 글쓰기 미디어 업로드에서 한 번에 처리할 수 있는 최대치를 선택합니다.
+          </p>
+        </div>
+        <div class="grid gap-3 sm:grid-cols-2">
+          <div class="grid gap-1.5">
+            <span class="text-xs font-semibold text-[#657080]">파일 수</span>
+            <AdminSelectInput
+              v-model="form.uploadMaxFileCount"
+              :options="uploadFileCountOptions"
+              label="업로드 파일 수"
+              select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+              width-class="w-full"
+            />
+          </div>
+          <div class="grid gap-1.5">
+            <span class="text-xs font-semibold text-[#657080]">전체 용량</span>
+            <AdminSelectInput
+              v-model="form.uploadMaxTotalSize"
+              :options="uploadTotalSizeOptions"
+              label="업로드 전체 용량"
+              select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+              width-class="w-full"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="admin-title-description-settings-card__edit admin-settings-screen__card-body grid gap-5">
+      <label class="admin-settings-screen__field grid gap-2 text-sm">
+        <span class="font-medium text-[#3f4650]">사이트 이름</span>
+        <input
+          v-model="form.title"
+          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"
+          required
+        >
+      </label>
+      <label class="admin-settings-screen__field grid gap-2 text-sm">
+        <span class="font-medium text-[#3f4650]">사이트 설명</span>
+        <textarea
+          v-model="form.description"
+          class="min-h-28 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]"
+          required
+        />
+      </label>
+      <div class="rounded-lg border border-[#eceff2] bg-[#f7f8fa] p-4">
+        <p class="text-xs font-semibold tracking-wide text-[#657080] uppercase">
+          공개 화면 미리보기
+        </p>
+        <div class="mt-3 flex items-center gap-3">
+          <div class="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-xl bg-[#15171a] text-lg 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 class="min-w-0">
+            <p class="truncate font-semibold text-[#15171a]">
+              {{ form.title || 'sori.studio' }}
+            </p>
+            <p class="truncate text-sm text-[#657080]">
+              {{ form.description || '사이트 설명이 공개 화면에 표시됩니다.' }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/docs/map.md b/docs/map.md
index 9f918b7..897ac6e 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -258,8 +258,9 @@
 | 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하고 성공 필드만 폼에 반영하는 독립 저장, **POST 설정** 편집 상태·저장 요청·스냅샷 복원 연결, 블로그 제목·설명 읽기 행, **사이트 정보**(로고 미등록 점선 박스·URL·저작권 읽기 행), **SNS 정보**(아이콘 프리셋+주소 목록형 관리), **메인 화면**(라이트·다크 커버 상하 개별 프리뷰·드롭존 업로드·오버레이 텍스트), **브랜드** 컬러 정규화·편집 상태·저장 요청 연결, **어나운스 바**(사용 토글·맞춤 설정·hex 배경색·텍스트 정렬·읽기 모드 비활성 톤), **스팸 필터** 편집 상태·저장 요청·값 정규화 연결, **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신·작업 액션 연결, **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
+| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **블로그 제목·설명** 편집 상태·저장 요청·스냅샷 복원 연결, **POST 설정** 편집 상태·저장 요청·스냅샷 복원 연결, **사이트 정보**(로고 미등록 점선 박스·URL·저작권 읽기 행), **SNS 정보**(아이콘 프리셋+주소 목록형 관리), **메인 화면**(라이트·다크 커버 상하 개별 프리뷰·드롭존 업로드·오버레이 텍스트), **브랜드** 컬러 정규화·편집 상태·저장 요청 연결, **어나운스 바**(사용 토글·맞춤 설정·hex 배경색·텍스트 정렬·읽기 모드 비활성 톤), **스팸 필터** 편집 상태·저장 요청·값 정규화 연결, **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신·작업 액션 연결, **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
 | components/admin/AdminBrandSettingsCard.vue | 관리자 설정 브랜드 컬러 카드(읽기 미리보기·색상 입력·텍스트 입력·예시 배지·저장 이벤트) |
+| components/admin/AdminTitleDescriptionSettingsCard.vue | 관리자 설정 블로그 제목·설명 카드(읽기 행·편집 입력·공개 화면 미리보기·저장 이벤트) |
 | components/admin/AdminPostSettingsCard.vue | 관리자 설정 POST 설정 카드(수정일 표시·태그 최대 개수·공개 목록 표시개수·업로드 제한·저장 이벤트) |
 | components/admin/AdminBackupSummaryCard.vue | 관리자 설정 사이트 용량 카드(콘텐츠 수량·미디어 용량·자동 생성 이미지·내보내기 파일·큰 파일·새로고침 이벤트) |
 | components/admin/AdminPostExportJobList.vue | 관리자 설정 최근 내보내기 작업 목록 카드(상태·진행도·실패 상세·파일 선택·선택 다운로드 이벤트) |
diff --git a/docs/todo.md b/docs/todo.md
index 8ee0ca9..3a8c1f7 100644
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -4,7 +4,8 @@
 
 - 거대 컴포넌트 책임 분리 진행.
   - `components/admin/AdminMarkdownEditor.vue`: 미디어 모달, 슬래시 명령, 히스토리·선택 복원, 라이브/소스 전환 로직을 단계적으로 composable 또는 하위 컴포넌트로 분리.
-  - `pages/admin/settings/index.vue`: Import 작업 센터·사이트 용량·게시물 가져오기·게시물 내보내기 요청·최근 내보내기 작업 목록·스팸 필터·브랜드·POST 설정처럼 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 composable 단위로 추가 분리.
+  - `pages/admin/settings/index.vue`: Import 작업 센터·사이트 용량·게시물 가져오기·게시물 내보내기 요청·최근 내보내기 작업 목록·스팸 필터·브랜드·POST 설정·블로그 제목/설명처럼 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 composable 단위로 추가 분리.
+  - `pages/admin/settings/index.vue`: 업로드 제한 셀렉트가 블로그 제목·설명 읽기 카드 안에 있으나 저장 필드는 POST 설정에 묶여 있어, 별도 업로드 제한 카드 또는 POST 설정 편집 영역으로 위치와 저장 흐름을 정리.
   - `components/content/ContentMarkdownRenderer.vue`: 파싱·블록 렌더링·라이브 편집 중개·라이트박스·광고 삽입 책임을 분리.
   - `components/admin/AdminPostForm.vue`: 태그 입력, 대표 이미지 선택, 발행/초안 저장 상태, 우측 설정 패널 책임을 분리.
   - `pages/admin/media/index.vue`: 미디어 목록, 폴더 트리, 상세 모달, 재생성 액션을 작은 단위로 분리.
diff --git a/docs/update.md b/docs/update.md
index 401ef62..e3bd16d 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,11 @@
 # 업데이트 이력
 
+## v1.11.27
+
+- 관리자 설정의 블로그 제목·설명 카드를 `AdminTitleDescriptionSettingsCard` 컴포넌트로 분리.
+- 제목·설명 읽기 행, 편집 입력, 공개 화면 미리보기 렌더링 책임을 설정 화면에서 하위 컴포넌트로 이동.
+- 설정 화면은 제목·설명 편집 상태·저장 요청·스냅샷 복원만 담당하도록 정리.
+
 ## v1.11.26
 
 - 관리자 설정의 POST 설정 카드를 `AdminPostSettingsCard` 컴포넌트로 분리.
diff --git a/package-lock.json b/package-lock.json
index 974539c..4a6325a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.11.26",
+  "version": "1.11.27",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.11.26",
+      "version": "1.11.27",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/package.json b/package.json
index c584d3e..6b8a477 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.11.26",
+  "version": "1.11.27",
   "private": true,
   "type": "module",
   "imports": {
diff --git a/pages/admin/settings/index.vue b/pages/admin/settings/index.vue
index 029a2ef..09ef9aa 100644
--- a/pages/admin/settings/index.vue
+++ b/pages/admin/settings/index.vue
@@ -2193,150 +2193,17 @@ onBeforeUnmount(() => {
             <h2 class="admin-settings-screen__section-heading z-20 -mt-[5px] mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
               일반 설정
             </h2>
-          <section
-            id="admin-settings-section-title"
-            data-testid="title-and-description"
-            class="admin-settings-screen__card admin-settings-screen__card--title-desc 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">
-                <h5 class="text-base font-semibold text-[#15171a] md:text-lg">
-                  블로그 제목·설명
-                </h5>
-                <p
-                  v-if="!editTitleDesc"
-                  class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080] md:block"
-                >
-                  공개 사이트에서 사이트 이름과 소개로 사용되는 값입니다.
-                </p>
-              </div>
-              <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
-                <template v-if="!editTitleDesc">
-                  <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="beginEditTitleDesc"
-                  >
-                    편집
-                  </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="savingTitleDesc"
-                    @click="cancelEditTitleDesc"
-                  >
-                    취소
-                  </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="savingTitleDesc || !hasTitleDescChanges"
-                    @click="saveTitleDescSection"
-                  >
-                    {{ savingTitleDesc ? '저장 중' : '저장' }}
-                  </button>
-                </template>
-              </div>
-            </div>
-
-            <div
-              v-if="!editTitleDesc"
-              class="admin-settings-screen__readonly-list grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
-            >
-              <div class="admin-settings-screen__readonly-row grid gap-1 md:grid-cols-[7.5rem_minmax(0,1fr)] md:items-center md:gap-5">
-                <h6 class="text-sm font-normal tracking-normal text-[#3f4650]">
-                  사이트 이름
-                </h6>
-                <div class="min-w-0 text-sm font-normal leading-relaxed text-[#15171a]">
-                  {{ form.title?.trim() ? form.title : '—' }}
-                </div>
-              </div>
-              <div class="admin-settings-screen__readonly-row grid gap-1 md:grid-cols-[7.5rem_minmax(0,1fr)] md:items-center md:gap-5">
-                <h6 class="text-sm font-normal tracking-normal text-[#3f4650]">
-                  사이트 설명
-                </h6>
-                <div class="min-w-0 whitespace-pre-wrap text-sm font-normal leading-relaxed text-[#15171a]">
-                  {{ form.description?.trim() ? form.description : '—' }}
-                </div>
-              </div>
-              <div class="admin-settings-screen__field grid gap-3 border-t border-[#eceff2] pt-5">
-                <div>
-                  <span class="font-bold text-[#15171a]">업로드 제한</span>
-                  <p class="mt-1 text-xs leading-relaxed text-[#657080]">
-                    파일 추가나 글쓰기 미디어 업로드에서 한 번에 처리할 수 있는 최대치를 선택합니다.
-                  </p>
-                </div>
-                <div class="grid gap-3 sm:grid-cols-2">
-                  <div class="grid gap-1.5">
-                    <span class="text-xs font-semibold text-[#657080]">파일 수</span>
-                    <AdminSelectInput
-                      v-model="form.uploadMaxFileCount"
-                      :options="uploadFileCountSelectOptions"
-                      label="업로드 파일 수"
-                      select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
-                      width-class="w-full"
-                    />
-                  </div>
-                  <div class="grid gap-1.5">
-                    <span class="text-xs font-semibold text-[#657080]">전체 용량</span>
-                    <AdminSelectInput
-                      v-model="form.uploadMaxTotalSize"
-                      :options="uploadTotalSizeSelectOptions"
-                      label="업로드 전체 용량"
-                      select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
-                      width-class="w-full"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div v-else class="admin-settings-screen__card-body grid gap-5">
-              <label class="admin-settings-screen__field grid gap-2 text-sm">
-                <span class="font-medium text-[#3f4650]">사이트 이름</span>
-                <input
-                  v-model="form.title"
-                  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"
-                  required
-                >
-              </label>
-              <label class="admin-settings-screen__field grid gap-2 text-sm">
-                <span class="font-medium text-[#3f4650]">사이트 설명</span>
-                <textarea
-                  v-model="form.description"
-                  class="min-h-28 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]"
-                  required
-                />
-              </label>
-              <div class="rounded-lg border border-[#eceff2] bg-[#f7f8fa] p-4">
-                <p class="text-xs font-semibold tracking-wide text-[#657080] uppercase">
-                  공개 화면 미리보기
-                </p>
-                <div class="mt-3 flex items-center gap-3">
-                  <div class="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-xl bg-[#15171a] text-lg 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 class="min-w-0">
-                    <p class="truncate font-semibold text-[#15171a]">
-                      {{ form.title || 'sori.studio' }}
-                    </p>
-                    <p class="truncate text-sm text-[#657080]">
-                      {{ form.description || '사이트 설명이 공개 화면에 표시됩니다.' }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </section>
+          <AdminTitleDescriptionSettingsCard
+            :form="form"
+            :editing="editTitleDesc"
+            :saving="savingTitleDesc"
+            :has-changes="hasTitleDescChanges"
+            :upload-file-count-options="uploadFileCountSelectOptions"
+            :upload-total-size-options="uploadTotalSizeSelectOptions"
+            @begin="beginEditTitleDesc"
+            @cancel="cancelEditTitleDesc"
+            @save="saveTitleDescSection"
+          />
 
           <section
             id="admin-settings-section-misc"