설정 섹션 저장 흐름 정리

docs/map.md

@@ -258,7 +258,7 @@
 | 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/AdminSettingsNavigation.vue | 관리자 설정 좌측 내비게이션(설정 검색 입력·검색 결과 목록·모바일 구역 선택·구역 이동 이벤트) |
 | components/admin/AdminHomeCoverSettingsCard.vue | 관리자 설정 메인 화면 카드(라이트·다크 커버 미리보기·드롭존·파일 선택·오버레이 문구·저장 이벤트) |
 | components/admin/AdminBrandSettingsCard.vue | 관리자 설정 브랜드 컬러 카드(읽기 미리보기·색상 입력·텍스트 입력·예시 배지·저장 이벤트) |

docs/todo.md

@@ -4,7 +4,7 @@
 
 - 거대 컴포넌트 책임 분리 진행.
   - `components/admin/AdminMarkdownEditor.vue`: 미디어 모달, 슬래시 명령, 히스토리·선택 복원, 라이브/소스 전환 로직을 단계적으로 composable 또는 하위 컴포넌트로 분리.
-  - `pages/admin/settings/index.vue`: 설정 카드별 편집 상태·스냅샷·저장 요청 로직을 composable 단위로 추가 분리.
+  - `pages/admin/settings/index.vue`: 정규화가 필요한 설정 섹션(SNS·POST 설정·브랜드·어나운스 바·스팸 필터)의 편집 상태·스냅샷·저장 요청 로직을 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.32
+
+- 관리자 설정의 단순 섹션 저장 흐름을 `saveSimpleSettingsSection` 헬퍼로 정리.
+- 제목·사이트 정보·메인 화면·사이트 코드·광고 슬롯의 스냅샷 복사·복원·저장 후 편집 종료 반복 로직을 필드 목록 기반으로 통합.
+- 설정 화면의 카드 상태 로직을 이후 composable로 분리하기 쉽도록 공통 저장 경로를 정리.
+
 ## v1.11.31
 
 - 관리자 설정 좌측 내비게이션을 `AdminSettingsNavigation` 컴포넌트로 분리.

package-lock.json

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

package.json

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

pages/admin/settings/index.vue

@@ -111,6 +111,19 @@ const postExportDateRangeModeOptions = [
   { value: 'month', label: '특정월' },
   { value: 'custom', label: '직접 지정' }
 ]
+const titleDescFields = ['title', 'description']
+const miscFields = ['siteUrl', 'logoText', 'logoUrl', 'faviconUrl', 'copyrightText']
+const homeCoverFields = ['homeCoverImageUrl', 'homeCoverDarkImageUrl', 'homeCoverTitle', 'homeCoverText']
+const siteCodeFields = ['adsTxt', 'customHeadCode', 'customFooterCode']
+const adsFields = [
+  'adHomeFeedCode',
+  'adHomeInfeedCode',
+  'adSidebarCode',
+  'adPostSidebarCode',
+  'adPostTopCode',
+  'adPostInArticleCode',
+  'adPostBottomCode'
+]
 
 /** 블로그 제목·설명 카드 편집 모드 여부 */
 const editTitleDesc = ref(false)
@@ -1279,13 +1292,56 @@ const persistSiteSettings = async (options) => {
   }
 }
 
+/**
+ * 지정한 필드를 원본 객체에서 대상 객체로 복사한다.
+ * @param {Object} target - 값을 받을 객체
+ * @param {Object} source - 값을 제공할 객체
+ * @param {Array<string>} fields - 복사할 필드 목록
+ * @returns {void}
+ */
+const copySettingsFields = (target, source, fields) => {
+  fields.forEach((field) => {
+    target[field] = source[field]
+  })
+}
+
+/**
+ * 단순 설정 섹션 저장 후 스냅샷 갱신과 편집 종료를 처리한다.
+ * @param {{ hasChanges: import('vue').ComputedRef<boolean>, savingFlag: import('vue').Ref<boolean>, editingFlag: import('vue').Ref<boolean>, snapshot: Object, fields: Array<string>, successToast: string, beforeSave?: Function, afterSnapshot?: Function }} options - 섹션 저장 옵션
+ * @returns {Promise<void>}
+ */
+const saveSimpleSettingsSection = async (options) => {
+  if (typeof options.beforeSave === 'function') {
+    options.beforeSave()
+  }
+
+  if (!options.hasChanges.value) {
+    return
+  }
+
+  const ok = await persistSiteSettings({
+    successToast: options.successToast,
+    savingFlag: options.savingFlag,
+    fields: options.fields
+  })
+
+  if (!ok) {
+    return
+  }
+
+  copySettingsFields(options.snapshot, form, options.fields)
+  if (typeof options.afterSnapshot === 'function') {
+    options.afterSnapshot()
+  }
+  options.editingFlag.value = false
+}
+
 /**
  * 블로그 제목·설명 편집 모드 진입
  * @returns {void}
  */
 const beginEditTitleDesc = () => {
-  titleDescSnapshot.title = form.title
+  copySettingsFields(titleDescSnapshot, form, titleDescFields)
-  titleDescSnapshot.description = form.description
   editTitleDesc.value = true
 }
 
@@ -1294,8 +1350,7 @@ const beginEditTitleDesc = () => {
  * @returns {void}
  */
 const cancelEditTitleDesc = () => {
-  form.title = titleDescSnapshot.title
+  copySettingsFields(form, titleDescSnapshot, titleDescFields)
-  form.description = titleDescSnapshot.description
   editTitleDesc.value = false
 }
 
@@ -1304,19 +1359,14 @@ const cancelEditTitleDesc = () => {
  * @returns {Promise<void>}
  */
 const saveTitleDescSection = async () => {
-  if (!hasTitleDescChanges.value) {
+  await saveSimpleSettingsSection({
-    return
+    hasChanges: hasTitleDescChanges,
-  }
-
-  const ok = await persistSiteSettings({
     successToast: '블로그 제목·설명이 저장되었습니다.',
     savingFlag: savingTitleDesc,
-    fields: ['title', 'description']
+    editingFlag: editTitleDesc,
+    snapshot: titleDescSnapshot,
+    fields: titleDescFields
   })
-
-  if (ok) {
-    editTitleDesc.value = false
-  }
 }
 
 /**
@@ -1324,11 +1374,7 @@ const saveTitleDescSection = async () => {
  * @returns {void}
  */
 const beginEditMisc = () => {
-  miscSnapshot.siteUrl = form.siteUrl
+  copySettingsFields(miscSnapshot, form, miscFields)
-  miscSnapshot.logoText = form.logoText
-  miscSnapshot.logoUrl = form.logoUrl
-  miscSnapshot.faviconUrl = form.faviconUrl
-  miscSnapshot.copyrightText = form.copyrightText
   editMisc.value = true
 }
 
@@ -1337,11 +1383,7 @@ const beginEditMisc = () => {
  * @returns {void}
  */
 const cancelEditMisc = () => {
-  form.siteUrl = miscSnapshot.siteUrl
+  copySettingsFields(form, miscSnapshot, miscFields)
-  form.logoText = miscSnapshot.logoText
-  form.logoUrl = miscSnapshot.logoUrl
-  form.faviconUrl = miscSnapshot.faviconUrl
-  form.copyrightText = miscSnapshot.copyrightText
   editMisc.value = false
 }
 
@@ -1350,24 +1392,14 @@ const cancelEditMisc = () => {
  * @returns {Promise<void>}
  */
 const saveMiscSection = async () => {
-  if (!hasMiscChanges.value) {
+  await saveSimpleSettingsSection({
-    return
+    hasChanges: hasMiscChanges,
-  }
-
-  const ok = await persistSiteSettings({
     successToast: '사이트 정보가 저장되었습니다.',
     savingFlag: savingMisc,
-    fields: ['siteUrl', 'logoText', 'logoUrl', 'faviconUrl', 'copyrightText']
+    editingFlag: editMisc,
+    snapshot: miscSnapshot,
+    fields: miscFields
   })
-
-  if (ok) {
-    miscSnapshot.siteUrl = form.siteUrl
-    miscSnapshot.logoText = form.logoText
-    miscSnapshot.logoUrl = form.logoUrl
-    miscSnapshot.faviconUrl = form.faviconUrl
-    miscSnapshot.copyrightText = form.copyrightText
-    editMisc.value = false
-  }
 }
 
 /**
@@ -1597,10 +1629,7 @@ const clearHomeCoverImage = (variant = 'light') => {
  * @returns {void}
  */
 const beginEditHomeCover = () => {
-  homeCoverSnapshot.homeCoverImageUrl = form.homeCoverImageUrl
+  copySettingsFields(homeCoverSnapshot, form, homeCoverFields)
-  homeCoverSnapshot.homeCoverDarkImageUrl = form.homeCoverDarkImageUrl
-  homeCoverSnapshot.homeCoverTitle = form.homeCoverTitle
-  homeCoverSnapshot.homeCoverText = form.homeCoverText
   editHomeCover.value = true
 }
 
@@ -1609,10 +1638,7 @@ const beginEditHomeCover = () => {
  * @returns {void}
  */
 const cancelEditHomeCover = () => {
-  form.homeCoverImageUrl = homeCoverSnapshot.homeCoverImageUrl
+  copySettingsFields(form, homeCoverSnapshot, homeCoverFields)
-  form.homeCoverDarkImageUrl = homeCoverSnapshot.homeCoverDarkImageUrl
-  form.homeCoverTitle = homeCoverSnapshot.homeCoverTitle
-  form.homeCoverText = homeCoverSnapshot.homeCoverText
   editHomeCover.value = false
 }
 
@@ -1621,28 +1647,14 @@ const cancelEditHomeCover = () => {
  * @returns {Promise<void>}
  */
 const saveHomeCoverSection = async () => {
-  if (!hasHomeCoverChanges.value) {
+  await saveSimpleSettingsSection({
-    return
+    hasChanges: hasHomeCoverChanges,
-  }
-
-  const ok = await persistSiteSettings({
     successToast: '메인 화면 설정이 저장되었습니다.',
     savingFlag: savingHomeCover,
-    fields: [
+    editingFlag: editHomeCover,
-      'homeCoverImageUrl',
+    snapshot: homeCoverSnapshot,
-      'homeCoverDarkImageUrl',
+    fields: homeCoverFields
-      'homeCoverTitle',
-      'homeCoverText'
-    ]
   })
-
-  if (ok) {
-    homeCoverSnapshot.homeCoverImageUrl = form.homeCoverImageUrl
-    homeCoverSnapshot.homeCoverDarkImageUrl = form.homeCoverDarkImageUrl
-    homeCoverSnapshot.homeCoverTitle = form.homeCoverTitle
-    homeCoverSnapshot.homeCoverText = form.homeCoverText
-    editHomeCover.value = false
-  }
 }
 
 /**
@@ -1796,9 +1808,7 @@ const saveSpamSection = async () => {
  * @returns {void}
  */
 const beginEditSiteCode = () => {
-  siteCodeSnapshot.adsTxt = form.adsTxt
+  copySettingsFields(siteCodeSnapshot, form, siteCodeFields)
-  siteCodeSnapshot.customHeadCode = form.customHeadCode
-  siteCodeSnapshot.customFooterCode = form.customFooterCode
   editSiteCode.value = true
 }
 
@@ -1807,9 +1817,7 @@ const beginEditSiteCode = () => {
  * @returns {void}
  */
 const cancelEditSiteCode = () => {
-  form.adsTxt = siteCodeSnapshot.adsTxt
+  copySettingsFields(form, siteCodeSnapshot, siteCodeFields)
-  form.customHeadCode = siteCodeSnapshot.customHeadCode
-  form.customFooterCode = siteCodeSnapshot.customFooterCode
   editSiteCode.value = false
 }
 
@@ -1818,22 +1826,14 @@ const cancelEditSiteCode = () => {
  * @returns {Promise<void>}
  */
 const saveSiteCodeSection = async () => {
-  if (!hasSiteCodeChanges.value) {
+  await saveSimpleSettingsSection({
-    return
+    hasChanges: hasSiteCodeChanges,
-  }
-
-  const ok = await persistSiteSettings({
     successToast: '사이트 코드 설정이 저장되었습니다.',
     savingFlag: savingSiteCode,
-    fields: ['adsTxt', 'customHeadCode', 'customFooterCode']
+    editingFlag: editSiteCode,
+    snapshot: siteCodeSnapshot,
+    fields: siteCodeFields
   })
-
-  if (ok) {
-    siteCodeSnapshot.adsTxt = form.adsTxt
-    siteCodeSnapshot.customHeadCode = form.customHeadCode
-    siteCodeSnapshot.customFooterCode = form.customFooterCode
-    editSiteCode.value = false
-  }
 }
 
 /**
@@ -1841,13 +1841,7 @@ const saveSiteCodeSection = async () => {
  * @returns {void}
  */
 const beginEditAds = () => {
-  adsSnapshot.adHomeFeedCode = form.adHomeFeedCode
+  copySettingsFields(adsSnapshot, form, adsFields)
-  adsSnapshot.adHomeInfeedCode = form.adHomeInfeedCode
-  adsSnapshot.adSidebarCode = form.adSidebarCode
-  adsSnapshot.adPostSidebarCode = form.adPostSidebarCode
-  adsSnapshot.adPostTopCode = form.adPostTopCode
-  adsSnapshot.adPostInArticleCode = form.adPostInArticleCode
-  adsSnapshot.adPostBottomCode = form.adPostBottomCode
   editAds.value = true
 }
 
@@ -1856,13 +1850,7 @@ const beginEditAds = () => {
  * @returns {void}
  */
 const cancelEditAds = () => {
-  form.adHomeFeedCode = adsSnapshot.adHomeFeedCode
+  copySettingsFields(form, adsSnapshot, adsFields)
-  form.adHomeInfeedCode = adsSnapshot.adHomeInfeedCode
-  form.adSidebarCode = adsSnapshot.adSidebarCode
-  form.adPostSidebarCode = adsSnapshot.adPostSidebarCode
-  form.adPostTopCode = adsSnapshot.adPostTopCode
-  form.adPostInArticleCode = adsSnapshot.adPostInArticleCode
-  form.adPostBottomCode = adsSnapshot.adPostBottomCode
   editAds.value = false
 }
 
@@ -1871,34 +1859,14 @@ const cancelEditAds = () => {
  * @returns {Promise<void>}
  */
 const saveAdsSection = async () => {
-  if (!hasAdsChanges.value) {
+  await saveSimpleSettingsSection({
-    return
+    hasChanges: hasAdsChanges,
-  }
-
-  const ok = await persistSiteSettings({
     successToast: '광고 슬롯 설정이 저장되었습니다.',
     savingFlag: savingAds,
-    fields: [
+    editingFlag: editAds,
-      'adHomeFeedCode',
+    snapshot: adsSnapshot,
-      'adHomeInfeedCode',
+    fields: adsFields
-      'adSidebarCode',
-      'adPostSidebarCode',
-      'adPostTopCode',
-      'adPostInArticleCode',
-      'adPostBottomCode'
-    ]
   })
-
-  if (ok) {
-    adsSnapshot.adHomeFeedCode = form.adHomeFeedCode
-    adsSnapshot.adHomeInfeedCode = form.adHomeInfeedCode
-    adsSnapshot.adSidebarCode = form.adSidebarCode
-    adsSnapshot.adPostSidebarCode = form.adPostSidebarCode
-    adsSnapshot.adPostTopCode = form.adPostTopCode
-    adsSnapshot.adPostInArticleCode = form.adPostInArticleCode
-    adsSnapshot.adPostBottomCode = form.adPostBottomCode
-    editAds.value = false
-  }
 }
 
 /**