관리자 UX·본문 스타일 개선 및 발행일 보존(v1.1.19)

글쓰기 헤더 모드 전환·미디어 검색, Update 시 발행일 유지, 설정 카드 편집/저장 분리, 인용·인라인 코드 스타일 반영.

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

pages/admin/settings/index.vue

@@ -5,7 +5,9 @@ definePageMeta({
 
 const router = useRouter()
 
-const saving = ref(false)
+const savingTitleDesc = ref(false)
+const savingMisc = ref(false)
+const savingPost = ref(false)
 const uploadingLogo = ref(false)
 const errorMessage = ref('')
 const toast = ref(null)
@@ -16,11 +18,27 @@ const activeSectionId = ref('admin-settings-section-title')
 const scrollSpySuspended = ref(false)
 /** 블로그 제목·설명 카드 편집 모드 여부 */
 const editTitleDesc = ref(false)
+/** 기타 설정 카드 편집 모드 여부 */
+const editMisc = ref(false)
+/** POST 설정 카드 편집 모드 여부 */
+const editPost = ref(false)
 /** 편집 시작 시점의 제목·설명(취소 시 복원용) */
 const titleDescSnapshot = reactive({
   title: '',
   description: ''
 })
+/** 편집 시작 시점의 기타 설정(취소 시 복원용) */
+const miscSnapshot = reactive({
+  siteUrl: '',
+  logoText: '',
+  logoUrl: '',
+  faviconUrl: '',
+  copyrightText: ''
+})
+/** 편집 시작 시점의 POST 설정(취소 시 복원용) */
+const postSnapshot = reactive({
+  showPostUpdatedAt: false
+})
 let toastTimer = null
 let scrollSpyFrame = null
 
@@ -37,6 +55,40 @@ const form = reactive({
   showPostUpdatedAt: Boolean(settings.value?.showPostUpdatedAt)
 })
 
+/**
+ * 블로그 제목·설명 변경 여부
+ * @returns {boolean} 변경 여부
+ */
+const hasTitleDescChanges = computed(() => editTitleDesc.value && (
+  form.title !== titleDescSnapshot.title
+  || form.description !== titleDescSnapshot.description
+))
+
+/**
+ * 기타 설정 변경 여부
+ * @returns {boolean} 변경 여부
+ */
+const hasMiscChanges = computed(() => editMisc.value && (
+  form.siteUrl !== miscSnapshot.siteUrl
+  || form.logoText !== miscSnapshot.logoText
+  || form.logoUrl !== miscSnapshot.logoUrl
+  || form.faviconUrl !== miscSnapshot.faviconUrl
+  || form.copyrightText !== miscSnapshot.copyrightText
+))
+
+/**
+ * POST 설정 변경 여부
+ * @returns {boolean} 변경 여부
+ */
+const hasPostChanges = computed(() => editPost.value
+  && form.showPostUpdatedAt !== postSnapshot.showPostUpdatedAt)
+
+/**
+ * 수정일 표시 라벨
+ * @returns {string} 표시 문구
+ */
+const showPostUpdatedAtLabel = computed(() => (form.showPostUpdatedAt ? '켜짐' : '꺼짐'))
+
 /**
  * 설정 화면 좌측 내비 구역 정의
  * @type {ReadonlyArray<{ heading: string, items: ReadonlyArray<{ id: string, label: string, keywords: string }> }>}
@@ -198,6 +250,10 @@ const showToast = (type, message) => {
  * @returns {void}
  */
 const openLogoFilePicker = () => {
+  if (!editMisc.value) {
+    beginEditMisc()
+  }
+
   logoInputRef.value?.click()
 }
 
@@ -226,6 +282,8 @@ const uploadLogo = async (event) => {
       body: formData
     })
     Object.assign(form, updatedSettings)
+    miscSnapshot.logoUrl = form.logoUrl
+    miscSnapshot.faviconUrl = form.faviconUrl
     showToast('success', '로고가 등록되었습니다.')
   } catch (error) {
     errorMessage.value = error?.data?.message || '로고 업로드에 실패했습니다.'
@@ -255,14 +313,14 @@ const buildSiteSettingsPayload = () => ({
 
 /**
  * 현재 폼 값으로 사이트 설정을 서버에 저장한다.
- * @param {{ successToast?: string }} [options] - 성공 토스트 문구
+ * @param {{ successToast?: string, savingFlag: import('vue').Ref<boolean> }} options - 저장 옵션
  * @returns {Promise<boolean>} 성공 여부
  */
-const persistSiteSettings = async (options = {}) => {
+const persistSiteSettings = async (options) => {
   const successToast = options.successToast || '사이트 설정이 저장되었습니다.'
-  saving.value = true
+  options.savingFlag.value = true
   errorMessage.value = ''
-  showToast('info', '사이트 설정을 저장하는 중입니다.')
+  showToast('info', '설정을 저장하는 중입니다.')
 
   try {
     const updatedSettings = await $fetch('/admin/api/settings', {
@@ -277,18 +335,10 @@ const persistSiteSettings = async (options = {}) => {
     showToast('error', errorMessage.value)
     return false
   } finally {
-    saving.value = false
+    options.savingFlag.value = false
   }
 }
 
-/**
- * 기타 설정 영역에서 전체 사이트 설정 저장
- * @returns {Promise<void>}
- */
-const saveSettings = async () => {
-  await persistSiteSettings()
-}
-
 /**
  * 블로그 제목·설명 편집 모드 진입
  * @returns {void}
@@ -314,12 +364,108 @@ const cancelEditTitleDesc = () => {
  * @returns {Promise<void>}
  */
 const saveTitleDescSection = async () => {
-  const ok = await persistSiteSettings({ successToast: '블로그 제목·설명이 저장되었습니다.' })
+  if (!hasTitleDescChanges.value) {
+    return
+  }
+
+  const ok = await persistSiteSettings({
+    successToast: '블로그 제목·설명이 저장되었습니다.',
+    savingFlag: savingTitleDesc
+  })
+
   if (ok) {
     editTitleDesc.value = false
   }
 }
 
+/**
+ * 기타 설정 편집 모드 진입
+ * @returns {void}
+ */
+const beginEditMisc = () => {
+  miscSnapshot.siteUrl = form.siteUrl
+  miscSnapshot.logoText = form.logoText
+  miscSnapshot.logoUrl = form.logoUrl
+  miscSnapshot.faviconUrl = form.faviconUrl
+  miscSnapshot.copyrightText = form.copyrightText
+  editMisc.value = true
+}
+
+/**
+ * 기타 설정 편집 취소
+ * @returns {void}
+ */
+const cancelEditMisc = () => {
+  form.siteUrl = miscSnapshot.siteUrl
+  form.logoText = miscSnapshot.logoText
+  form.logoUrl = miscSnapshot.logoUrl
+  form.faviconUrl = miscSnapshot.faviconUrl
+  form.copyrightText = miscSnapshot.copyrightText
+  editMisc.value = false
+}
+
+/**
+ * 기타 설정 저장
+ * @returns {Promise<void>}
+ */
+const saveMiscSection = async () => {
+  if (!hasMiscChanges.value) {
+    return
+  }
+
+  const ok = await persistSiteSettings({
+    successToast: '기타 설정이 저장되었습니다.',
+    savingFlag: savingMisc
+  })
+
+  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
+  }
+}
+
+/**
+ * POST 설정 편집 모드 진입
+ * @returns {void}
+ */
+const beginEditPost = () => {
+  postSnapshot.showPostUpdatedAt = form.showPostUpdatedAt
+  editPost.value = true
+}
+
+/**
+ * POST 설정 편집 취소
+ * @returns {void}
+ */
+const cancelEditPost = () => {
+  form.showPostUpdatedAt = postSnapshot.showPostUpdatedAt
+  editPost.value = false
+}
+
+/**
+ * POST 설정 저장
+ * @returns {Promise<void>}
+ */
+const savePostSection = async () => {
+  if (!hasPostChanges.value) {
+    return
+  }
+
+  const ok = await persistSiteSettings({
+    successToast: 'POST 설정이 저장되었습니다.',
+    savingFlag: savingPost
+  })
+
+  if (ok) {
+    postSnapshot.showPostUpdatedAt = form.showPostUpdatedAt
+    editPost.value = false
+  }
+}
+
 /**
  * Escape 키: 제목·설명 편집 중이면 취소, 아니면 설정 화면 닫기
  * @param {KeyboardEvent} event - 키보드 이벤트
@@ -334,6 +480,16 @@ const onGlobalKeydown = (event) => {
     cancelEditTitleDesc()
     return
   }
+  if (editMisc.value) {
+    event.preventDefault()
+    cancelEditMisc()
+    return
+  }
+  if (editPost.value) {
+    event.preventDefault()
+    cancelEditPost()
+    return
+  }
   closeSettings()
 }
 
@@ -453,7 +609,7 @@ onBeforeUnmount(() => {
             {{ errorMessage }}
           </p>
 
-          <form class="admin-settings-screen__form w-full space-y-8" @submit.prevent="saveSettings">
+          <form class="admin-settings-screen__form w-full space-y-8" @submit.prevent>
             <h2 class="admin-settings-screen__section-heading z-20 -mt-[5px] mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
               일반 설정
             </h2>
@@ -488,7 +644,7 @@ onBeforeUnmount(() => {
                   <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"
+                    :disabled="savingTitleDesc"
                     @click="cancelEditTitleDesc"
                   >
                     취소
@@ -496,10 +652,10 @@ onBeforeUnmount(() => {
                   <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"
+                    :disabled="savingTitleDesc || !hasTitleDescChanges"
                     @click="saveTitleDescSection"
                   >
-                    {{ saving ? '저장 중' : '저장' }}
+                    {{ savingTitleDesc ? '저장 중' : '저장' }}
                   </button>
                 </template>
               </div>
@@ -593,16 +749,95 @@ onBeforeUnmount(() => {
             id="admin-settings-section-misc"
             class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
           >
-            <div class="admin-settings-screen__card-head mb-6">
-              <h2 class="text-lg font-semibold text-[#15171a]">
-                기타 설정
-              </h2>
-              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
-                로고, 공개 URL, 푸터 저작권 문구를 관리합니다.
-              </p>
+            <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="!editMisc"
+                  class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
+                >
+                  로고, 공개 URL, 푸터 저작권 문구를 관리합니다.
+                </p>
+              </div>
+              <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
+                <template v-if="!editMisc">
+                  <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="beginEditMisc"
+                  >
+                    편집
+                  </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="savingMisc"
+                    @click="cancelEditMisc"
+                  >
+                    취소
+                  </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="savingMisc || !hasMiscChanges"
+                    @click="saveMiscSection"
+                  >
+                    {{ savingMisc ? '저장 중' : '저장' }}
+                  </button>
+                </template>
+              </div>
             </div>
 
-            <div class="admin-settings-screen__card-body grid gap-6">
+            <div
+              v-if="!editMisc"
+              class="admin-settings-screen__misc-readonly grid gap-6"
+            >
+              <div class="flex items-center gap-4">
+                <div class="grid h-20 w-20 shrink-0 place-items-center overflow-hidden rounded-2xl border border-[#e6e8eb] bg-[#f7f8fa]">
+                  <img
+                    v-if="form.logoUrl"
+                    class="h-full w-full object-cover"
+                    :src="form.logoUrl"
+                    alt="사이트 로고"
+                  >
+                  <span v-else class="text-2xl font-semibold text-[#9aa3ad]">
+                    {{ form.logoText || '井' }}
+                  </span>
+                </div>
+                <div>
+                  <h3 class="text-sm font-medium text-[#3f4650]">
+                    로고
+                  </h3>
+                  <p class="mt-1 text-sm text-[#15171a]">
+                    {{ form.logoUrl ? '등록됨' : '미등록' }}
+                  </p>
+                </div>
+              </div>
+              <div class="grid gap-6 md:grid-cols-2">
+                <div>
+                  <h3 class="text-sm font-medium text-[#3f4650]">
+                    사이트 URL
+                  </h3>
+                  <p class="mt-1 break-all text-sm text-[#15171a]">
+                    {{ form.siteUrl || '—' }}
+                  </p>
+                </div>
+                <div>
+                  <h3 class="text-sm font-medium text-[#3f4650]">
+                    저작권 문구
+                  </h3>
+                  <p class="mt-1 text-sm text-[#15171a]">
+                    {{ form.copyrightText || '—' }}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div v-else class="admin-settings-screen__card-body grid gap-6">
               <div class="flex flex-col gap-5 md:flex-row md:items-center md:justify-between">
                 <div class="flex items-center gap-4">
                   <div class="grid h-20 w-20 shrink-0 place-items-center overflow-hidden rounded-2xl border border-[#e6e8eb] bg-[#f7f8fa]">
@@ -664,15 +899,6 @@ onBeforeUnmount(() => {
               </label>
             </div>
 
-            <div class="admin-settings-screen__actions mt-8 flex justify-end border-t border-[#eceff2] pt-6">
-              <button
-                class="rounded-md bg-[#15171a] px-5 py-2.5 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
-                type="submit"
-                :disabled="saving"
-              >
-                {{ saving ? '저장 중' : '설정 저장' }}
-              </button>
-            </div>
           </section>
 
           <h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
@@ -680,37 +906,77 @@ onBeforeUnmount(() => {
           </h2>
           <section
             id="admin-settings-section-post"
-            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
+            class="admin-settings-screen__card admin-settings-screen__card--post 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="admin-settings-screen__card-head mb-4">
-              <h2 class="text-lg font-semibold text-[#15171a]">
-                POST 설정
-              </h2>
-              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
-                공개 글 상세·관리자 글 목록에서 발행 후 수정이 있었을 때 수정일을 함께 표시합니다.
-              </p>
+            <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">
+                  POST 설정
+                </h2>
+                <p
+                  v-if="!editPost"
+                  class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
+                >
+                  공개 글 상세·관리자 글 목록에서 발행 후 수정이 있었을 때 수정일을 함께 표시합니다.
+                </p>
+              </div>
+              <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
+                <template v-if="!editPost">
+                  <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="beginEditPost"
+                  >
+                    편집
+                  </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="savingPost"
+                    @click="cancelEditPost"
+                  >
+                    취소
+                  </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="savingPost || !hasPostChanges"
+                    @click="savePostSection"
+                  >
+                    {{ savingPost ? '저장 중' : '저장' }}
+                  </button>
+                </template>
+              </div>
             </div>
-            <label class="admin-settings-screen__toggle flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-[#e6e8eb] bg-[#f7f8fa] px-4 py-4">
-              <span class="grid gap-1">
-                <span class="text-sm font-semibold text-[#15171a]">수정일 표시</span>
-                <span class="text-xs text-[#657080]">발행일 아래에 「수정: YYYY.MM.DD 오전/오후 HH:MM」 형식으로 노출</span>
+
+            <div
+              v-if="!editPost"
+              class="admin-settings-screen__post-readonly grid gap-2 text-sm"
+            >
+              <div class="flex items-center justify-between gap-4 border-t border-[#eceff2] pt-5">
+                <span class="font-bold text-[#15171a]">수정일 표시</span>
+                <span class="text-[#657080]">{{ showPostUpdatedAtLabel }}</span>
+              </div>
+            </div>
+
+            <label
+              v-else
+              class="admin-settings-screen__post-toggle flex items-center justify-between gap-4 border-t border-[#eceff2] pt-5 text-sm"
+            >
+              <span class="font-bold text-[#15171a]">수정일 표시</span>
+              <span class="admin-settings-screen__post-toggle-control relative inline-flex h-7 w-12 shrink-0 items-center">
+                <input
+                  v-model="form.showPostUpdatedAt"
+                  class="peer sr-only"
+                  type="checkbox"
+                  aria-label="수정일 표시"
+                >
+                <span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#15171a]" aria-hidden="true" />
+                <span class="relative ml-1 size-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
               </span>
-              <input
-                v-model="form.showPostUpdatedAt"
-                class="admin-settings-screen__toggle-input size-5 shrink-0 accent-[#15171a]"
-                type="checkbox"
-              >
             </label>
-            <div class="admin-settings-screen__actions mt-6 flex justify-end border-t border-[#eceff2] pt-6">
-              <button
-                class="rounded-md bg-[#15171a] px-5 py-2.5 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
-                type="button"
-                :disabled="saving"
-                @click="persistSiteSettings({ successToast: 'POST 설정이 저장되었습니다.' })"
-              >
-                {{ saving ? '저장 중' : 'POST 설정 저장' }}
-              </button>
-            </div>
           </section>
 
           <h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">