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

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

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

components/admin/AdminMarkdownEditor.vue

@@ -10,16 +10,24 @@ const props = defineProps({
   toolbarTeleportTo: {
     type: String,
     default: '#admin-post-form-editor-toolbar-host'
+  },
+  /** 작성/미리보기 토글 버튼 Teleport 대상(AdminPostForm 헤더) */
+  modeToggleTeleportTo: {
+    type: String,
+    default: ''
   }
 })
 
 const emit = defineEmits(['update:modelValue'])
+const activeMode = defineModel('editorMode', {
+  type: String,
+  default: 'write'
+})
 
 const editorRootRef = ref(null)
 const textareaRef = ref(null)
 const previewRef = ref(null)
 const gutterRef = ref(null)
-const activeMode = ref('write')
 /** 커서가 있는 논리 줄(0-based, `\\n` 기준) */
 const activeLogicalLineIndex = ref(0)
 const mediaItems = ref([])
@@ -28,6 +36,7 @@ const isLoadingMedia = ref(false)
 const isUploading = ref(false)
 const mediaPickerTarget = ref('image')
 const activeMediaPickerTab = ref('library')
+const mediaSearchQuery = ref('')
 const selectedMediaUrls = ref([])
 const lastSelectionState = ref({
   start: 0,
@@ -323,6 +332,10 @@ onMounted(() => {
  * @returns {void}
  */
 const focusFirstBlock = () => {
+  if (activeMode.value !== 'write') {
+    activeMode.value = 'write'
+  }
+
   nextTick(() => {
     textareaRef.value?.focus()
     refreshCaretLogicalLine()
@@ -330,7 +343,9 @@ const focusFirstBlock = () => {
 }
 
 defineExpose({
-  focusFirstBlock
+  focusFirstBlock,
+  toggleEditorMode,
+  activeMode
 })
 
 /**
@@ -675,6 +690,7 @@ const fetchMediaItems = async () => {
 const openMediaPicker = async (target) => {
   mediaPickerTarget.value = target
   activeMediaPickerTab.value = 'library'
+  mediaSearchQuery.value = ''
   selectedMediaUrls.value = []
   isMediaPickerOpen.value = true
   await fetchMediaItems()
@@ -688,8 +704,38 @@ const closeMediaPicker = () => {
   isMediaPickerOpen.value = false
   selectedMediaUrls.value = []
   activeMediaPickerTab.value = 'library'
+  mediaSearchQuery.value = ''
 }
 
+/**
+ * 미디어 항목이 검색어와 일치하는지 확인한다.
+ * @param {Object} item - 미디어 항목
+ * @param {string} query - 소문자 검색어
+ * @returns {boolean} 일치 여부
+ */
+const mediaItemMatchesQuery = (item, query) => {
+  if (!query) {
+    return true
+  }
+
+  return [item.name, item.title, item.url]
+    .some((value) => String(value || '').toLowerCase().includes(query))
+}
+
+/**
+ * 검색어로 필터링된 미디어 목록
+ * @returns {Array<Object>} 필터링된 미디어 목록
+ */
+const filteredMediaItems = computed(() => {
+  const query = mediaSearchQuery.value.trim().toLowerCase()
+
+  if (!query) {
+    return mediaItems.value
+  }
+
+  return mediaItems.value.filter((item) => mediaItemMatchesQuery(item, query))
+})
+
 /**
  * 미디어 선택 상태를 토글한다.
  * @param {Object} mediaItem - 미디어 항목
@@ -1049,12 +1095,9 @@ const handleKeydown = (event) => {
 
 <template>
   <div ref="editorRootRef" class="admin-markdown-editor grid gap-3">
-    <Teleport :to="toolbarTeleportTo">
+    <Teleport v-if="activeMode === 'write'" :to="toolbarTeleportTo">
       <div class="admin-markdown-editor__toolbar flex w-full min-h-[40px] items-center gap-1.5 border-b border-[#e3e6e8] bg-white px-8 py-1.5">
-        <div
-          v-show="activeMode === 'write'"
-          class="admin-markdown-editor__toolbar-tools flex min-w-0 flex-1 flex-wrap items-center gap-1.5"
-        >
+        <div class="admin-markdown-editor__toolbar-tools flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
       <button class="admin-markdown-editor__tool rounded px-2.5 py-1.5 text-sm font-semibold text-[#394047] hover:bg-[#eff1f2]" type="button" @click="applyHeading(1)">
         H1
       </button>
@@ -1093,50 +1136,53 @@ const handleKeydown = (event) => {
         갤러리
       </button>
         </div>
-        <button
-          class="admin-markdown-editor__mode-toggle ml-auto inline-flex size-8 shrink-0 items-center justify-center rounded text-[#394047] transition-colors hover:bg-[#f1f3f4] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#8e9cac]"
-          type="button"
-          :aria-label="activeMode === 'write' ? '미리보기로 전환' : '작성 모드로 전환'"
-          @click="toggleEditorMode"
-        >
-          <svg
-            v-if="activeMode === 'write'"
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="admin-markdown-editor__mode-icon lucide-book-open"
-            aria-hidden="true"
-          >
-            <path d="M12 7v14" />
-            <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
-          </svg>
-          <svg
-            v-else
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="admin-markdown-editor__mode-icon lucide-edit-3"
-            aria-hidden="true"
-          >
-            <path d="M13 21h8" />
-            <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
-          </svg>
-        </button>
       </div>
     </Teleport>
 
+    <Teleport v-if="modeToggleTeleportTo" :to="modeToggleTeleportTo">
+      <button
+        class="admin-markdown-editor__mode-toggle inline-flex size-8 shrink-0 items-center justify-center rounded text-[#394047] transition-colors hover:bg-[#f1f3f4] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#8e9cac]"
+        type="button"
+        :aria-label="activeMode === 'write' ? '미리보기로 전환' : '작성 모드로 전환'"
+        @click="toggleEditorMode"
+      >
+        <svg
+          v-if="activeMode === 'write'"
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="admin-markdown-editor__mode-icon lucide-book-open"
+          aria-hidden="true"
+        >
+          <path d="M12 7v14" />
+          <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
+        </svg>
+        <svg
+          v-else
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="admin-markdown-editor__mode-icon lucide-edit-3"
+          aria-hidden="true"
+        >
+          <path d="M13 21h8" />
+          <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+        </svg>
+      </button>
+    </Teleport>
+
     <div v-if="activeMode === 'write'" class="admin-markdown-editor__write relative">
       <div class="admin-markdown-editor__editor-surface min-h-[620px]">
         <div
@@ -1289,23 +1335,35 @@ const handleKeydown = (event) => {
           </button>
         </header>
 
-        <div class="admin-markdown-editor__media-tabs flex border-b border-[#e3e6e8] px-5">
-          <button
-            class="admin-markdown-editor__media-tab border-b-2 px-3 py-3 text-sm font-semibold transition-colors"
-            :class="activeMediaPickerTab === 'library' ? 'border-[#15171a] text-[#15171a]' : 'border-transparent text-[#6b7280] hover:text-[#15171a]'"
-            type="button"
-            @click="activeMediaPickerTab = 'library'"
-          >
-            미디어 라이브러리
-          </button>
-          <button
-            class="admin-markdown-editor__media-tab border-b-2 px-3 py-3 text-sm font-semibold transition-colors"
-            :class="activeMediaPickerTab === 'upload' ? 'border-[#15171a] text-[#15171a]' : 'border-transparent text-[#6b7280] hover:text-[#15171a]'"
-            type="button"
-            @click="activeMediaPickerTab = 'upload'"
-          >
-            업로드
-          </button>
+        <div class="admin-markdown-editor__media-tabs flex items-center gap-3 border-b border-[#e3e6e8] px-5">
+          <div class="flex min-w-0 flex-1 items-center">
+            <button
+              class="admin-markdown-editor__media-tab border-b-2 px-3 py-3 text-sm font-semibold transition-colors"
+              :class="activeMediaPickerTab === 'library' ? 'border-[#15171a] text-[#15171a]' : 'border-transparent text-[#6b7280] hover:text-[#15171a]'"
+              type="button"
+              @click="activeMediaPickerTab = 'library'"
+            >
+              미디어 라이브러리
+            </button>
+            <button
+              class="admin-markdown-editor__media-tab border-b-2 px-3 py-3 text-sm font-semibold transition-colors"
+              :class="activeMediaPickerTab === 'upload' ? 'border-[#15171a] text-[#15171a]' : 'border-transparent text-[#6b7280] hover:text-[#15171a]'"
+              type="button"
+              @click="activeMediaPickerTab = 'upload'"
+            >
+              업로드
+            </button>
+          </div>
+          <label class="admin-markdown-editor__media-search mb-px flex w-full max-w-xs shrink-0 items-center py-2">
+            <span class="sr-only">파일명 검색</span>
+            <input
+              v-model="mediaSearchQuery"
+              class="admin-markdown-editor__media-search-input w-full rounded border border-[#d7dde2] bg-white px-3 py-1.5 text-sm text-[#394047] outline-none transition-colors placeholder:text-[#8e9cac] focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]/20"
+              type="search"
+              placeholder="파일명 검색"
+              autocomplete="off"
+            >
+          </label>
         </div>
 
         <div class="admin-markdown-editor__media-body flex-1 overflow-y-auto p-5">
@@ -1313,9 +1371,9 @@ const handleKeydown = (event) => {
           <div v-if="isLoadingMedia" class="admin-markdown-editor__media-loading py-12 text-center text-sm text-[#8e9cac]">
             불러오는 중
           </div>
-          <div v-else-if="mediaItems.length" class="admin-markdown-editor__media-grid grid grid-cols-2 gap-3 md:grid-cols-4">
+          <div v-else-if="filteredMediaItems.length" class="admin-markdown-editor__media-grid grid grid-cols-2 gap-3 md:grid-cols-4">
             <button
-              v-for="item in mediaItems"
+              v-for="item in filteredMediaItems"
               :key="item.url"
               class="admin-markdown-editor__media-item group overflow-hidden rounded border bg-white text-left transition"
               :class="selectedMediaUrls.includes(item.url) ? 'border-[#15171a] ring-2 ring-[#15171a]/20' : 'border-[#e3e6e8] hover:border-[#8e9cac]'"
@@ -1329,7 +1387,12 @@ const handleKeydown = (event) => {
             </button>
           </div>
             <div v-else class="admin-markdown-editor__media-empty py-12 text-center text-sm text-[#8e9cac]">
-              선택할 미디어가 없습니다. 업로드 탭에서 이미지를 추가할 수 있습니다.
+              <template v-if="mediaSearchQuery.trim()">
+                「{{ mediaSearchQuery.trim() }}」에 맞는 미디어가 없습니다.
+              </template>
+              <template v-else>
+                선택할 미디어가 없습니다. 업로드 탭에서 이미지를 추가할 수 있습니다.
+              </template>
             </div>
           </template>
           <div

components/admin/AdminPostForm.vue

@@ -47,6 +47,8 @@ const slugTouched = ref(
   && !isAdminPostDraftPlaceholderSlug(props.initialPost.slug)
 )
 const blockEditor = ref(null)
+/** 본문 에디터 모드: write | preview */
+const editorMode = ref('write')
 const mediaItems = ref([])
 const isMediaPickerOpen = ref(false)
 const mediaPickerTarget = ref('featuredImage')
@@ -139,7 +141,7 @@ const form = reactive({
   content: normalizeMarkdownContent(props.initialPost.content),
   featuredImage: props.initialPost.featuredImage || '',
   isFeatured: Boolean(props.initialPost.isFeatured),
-  noindex: Boolean(props.initialPost.noindex),
+  noindex: props.initialPost.noindex === true,
   status: props.initialPost.status === 'private' ? 'draft' : (props.initialPost.status || 'draft'),
   publishedAt: toDateTimeLocalValue(props.initialPost.publishedAt),
   tagsText: props.initialPost.tags?.join(', ') || ''
@@ -149,6 +151,16 @@ const autosaveKey = computed(() => `${autosaveStoragePrefix}:${props.initialPost
 const postUrlLabel = computed(() => form.slug || toSlug(form.title) || '')
 const postUrlHint = computed(() => props.publicUrl || (postUrlLabel.value ? `/post/${postUrlLabel.value}/` : '/post/'))
 
+/**
+ * 검색엔진 노출 여부(`noindex` 반전, 기본 노출)
+ */
+const searchEngineVisible = computed({
+  get: () => !form.noindex,
+  set: (value) => {
+    form.noindex = !value
+  }
+})
+
 /**
  * 한글 음절 1자를 영문 표기로 변환
  * @param {string} char - 변환할 문자
@@ -293,10 +305,16 @@ const getPersistedPublishKind = (post) => {
 /** 마지막으로 서버와 맞춘 게시 형태 */
 const persistedPublishKind = ref(getPersistedPublishKind(props.initialPost))
 
+/** 서버에 반영된 발행 시각(본문 Update 시 유지) */
+const persistedPublishedAtIso = ref(props.initialPost.publishedAt || null)
+
 watch(
   () => props.initialPost,
   (post) => {
     persistedPublishKind.value = getPersistedPublishKind(post)
+    if (post?.publishedAt) {
+      persistedPublishedAtIso.value = post.publishedAt
+    }
   },
   { deep: true }
 )
@@ -350,14 +368,44 @@ const publishTimingSummaryLabel = computed(() => {
   }).format(date)
 })
 
+/**
+ * 저장 요청용 발행 시각을 결정한다.
+ * @param {{ allowNewPublishTimestamp?: boolean }} [options] - 신규 발행 시각 허용 여부
+ * @returns {string|null} ISO 발행 시각 또는 null
+ */
+const resolvePayloadPublishedAt = (options = {}) => {
+  if (form.status !== 'published') {
+    return null
+  }
+
+  const fromForm = toIsoDateTime(form.publishedAt)
+
+  if (fromForm) {
+    return fromForm
+  }
+
+  if (persistedPublishedAtIso.value) {
+    return persistedPublishedAtIso.value
+  }
+
+  if (props.initialPost.publishedAt) {
+    return props.initialPost.publishedAt
+  }
+
+  if (options.allowNewPublishTimestamp) {
+    return new Date().toISOString()
+  }
+
+  return null
+}
+
 /**
  * 게시물 입력값 생성
+ * @param {{ allowNewPublishTimestamp?: boolean }} [options] - 신규 발행 시각 허용 여부
  * @returns {Object} 게시물 입력값
  */
-const createPostPayload = () => {
-  const publishedAt = form.status === 'published'
-    ? toIsoDateTime(form.publishedAt) || props.initialPost.publishedAt || new Date().toISOString()
-    : null
+const createPostPayload = (options = {}) => {
+  const publishedAt = resolvePayloadPublishedAt(options)
 
   return {
     title: toAdminPostStoredTitle(form.title),
@@ -671,7 +719,7 @@ const focusContentEditor = (event) => {
 const submitPost = () => {
   isPublishModalOpen.value = false
   isUnpublishModalOpen.value = false
-  emit('submit', createPostPayload())
+  emit('submit', createPostPayload({ allowNewPublishTimestamp: true }))
 }
 
 /**
@@ -900,6 +948,11 @@ const unpublishModalKind = computed(() => (
  */
 const markSaved = () => {
   savedPostSnapshot.value = serializePostPayload()
+  const publishedAt = resolvePayloadPublishedAt()
+
+  if (publishedAt) {
+    persistedPublishedAtIso.value = publishedAt
+  }
 }
 
 /**
@@ -1035,6 +1088,10 @@ defineExpose({
             </div>
           </div>
           <div class="admin-post-form__toolbar-actions flex h-full shrink-0 items-center gap-2">
+            <div
+              id="admin-post-form-mode-toggle-host"
+              class="admin-post-form__mode-toggle-host flex shrink-0 items-center"
+            />
             <template v-if="persistedPublishKind === 'draft'">
               <template v-if="isDraftLike">
                 <button
@@ -1110,6 +1167,7 @@ defineExpose({
       </header>
 
       <div
+        v-show="editorMode === 'write'"
         id="admin-post-form-editor-toolbar-host"
         class="admin-post-form__editor-toolbar-host min-h-[40px] shrink-0 bg-white"
       />
@@ -1147,7 +1205,12 @@ defineExpose({
         >
 
         <div class="admin-post-form__field admin-post-form__content-editor text-sm">
-          <AdminMarkdownEditor ref="blockEditor" v-model="form.content" />
+          <AdminMarkdownEditor
+            ref="blockEditor"
+            v-model="form.content"
+            v-model:editor-mode="editorMode"
+            mode-toggle-teleport-to="#admin-post-form-mode-toggle-host"
+          />
         </div>
         </section>
       </main>
@@ -1302,28 +1365,26 @@ defineExpose({
           </span>
         </label>
 
-        <div class="admin-post-form__search-visibility grid gap-3 border-t border-[#e3e6e8] pt-5 text-sm">
-          <div>
-            <h2 class="admin-post-form__section-title text-sm font-semibold text-ink">
-              검색 노출
-            </h2>
-            <p class="admin-post-form__section-description mt-1 text-xs text-muted">
-              메타 제목·설명은 저장 시 글 제목과 요약을 그대로 사용합니다.
-            </p>
-          </div>
-
-          <label class="admin-post-form__checkbox flex items-start gap-2 text-sm">
-            <input
-              v-model="form.noindex"
-              class="admin-post-form__checkbox-input mt-1"
-              type="checkbox"
-            >
-            <span>
-              <span class="admin-post-form__label block font-medium">검색엔진 노출 제외</span>
-              <span class="admin-post-form__hint mt-1 block text-xs text-muted">공개 글이어도 robots noindex 메타를 추가합니다.</span>
+        <label class="admin-post-form__search-toggle flex items-center justify-between gap-4 border-t border-[#e3e6e8] pt-5 text-sm">
+          <span class="admin-post-form__search-toggle-copy flex min-w-0 items-center gap-3">
+            <span class="admin-post-form__search-toggle-icon flex size-7 shrink-0 items-center justify-center text-[#15171a]" aria-hidden="true">
+              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M480-100q-78.77 0-148.11-29.96-69.35-29.96-120.66-81.27-51.31-51.31-81.27-120.66Q100-401.23 100-480q0-78.77 29.96-148.11 29.96-69.35 81.27-120.66 51.31-51.31 120.66-81.27Q401.23-860 480-860q142.92 0 248.38 91.89 105.47 91.88 126.31 228.73h-61.23q-14.77-79.93-65.61-143.2Q677-745.85 600-776.77V-760q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h76.92v120H360L168-552q-3 18-5.5 36t-2.5 36q0 131 92 225t228 95v60Zm362.46-15.39-133-132.23q-19.46 12.39-41.92 20Q645.08-220 620-220q-66.92 0-113.46-46.54Q460-313.08 460-380q0-66.92 46.54-113.46Q553.08-540 620-540q66.92 0 113.46 46.54Q780-446.92 780-380q0 25.46-7.81 48.12-7.81 22.65-20.58 42.11l133 132.23-42.15 42.15ZM691-309q29-29 29-71t-29-71q-29-29-71-29t-71 29q-29 29-29 71t29 71q29 29 71 29t71-29Z"/></svg>
             </span>
-          </label>
-        </div>
+            <span class="admin-post-form__search-toggle-label font-bold text-[#15171a]">
+              검색엔진 노출
+            </span>
+          </span>
+          <span class="admin-post-form__search-toggle-control relative inline-flex h-7 w-12 shrink-0 items-center">
+            <input
+              v-model="searchEngineVisible"
+              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>
+        </label>
         </div>
         <div v-if="showDelete" class="admin-post-form__settings-bottom shrink-0 border-t border-[#e3e6e8] px-8 py-6">
           <button

components/content/ContentMarkdownRenderer.vue

@@ -565,7 +565,7 @@ const showNextImage = () => {
         <template v-for="(segment, segmentIndex) in parseInlineSegments(block.text)" :key="`${block.id}-heading-${segmentIndex}`">
           <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
           <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-          <code v-else-if="segment.type === 'code'" class="rounded bg-[var(--site-panel)] px-1 py-0.5 text-[0.9em]">{{ segment.text }}</code>
+          <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
           <a v-else-if="segment.type === 'link'" class="text-[var(--site-accent)] underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
           <template v-else>{{ segment.text }}</template>
         </template>
@@ -574,7 +574,7 @@ const showNextImage = () => {
         <template v-for="(segment, segmentIndex) in parseInlineSegments(block.text)" :key="`${block.id}-quote-${segmentIndex}`">
           <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
           <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-          <code v-else-if="segment.type === 'code'" class="rounded bg-[var(--site-panel)] px-1 py-0.5 text-[0.9em]">{{ segment.text }}</code>
+          <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
           <a v-else-if="segment.type === 'link'" class="text-[var(--site-accent)] underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
           <template v-else>{{ segment.text }}</template>
         </template>
@@ -584,7 +584,7 @@ const showNextImage = () => {
           <template v-for="(segment, segmentIndex) in parseInlineSegments(item)" :key="`${block.id}-${itemIndex}-${segmentIndex}`">
             <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
             <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-            <code v-else-if="segment.type === 'code'" class="rounded bg-[var(--site-panel)] px-1 py-0.5 text-[0.9em]">{{ segment.text }}</code>
+            <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
             <a v-else-if="segment.type === 'link'" class="text-[var(--site-accent)] underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
             <template v-else>{{ segment.text }}</template>
           </template>
@@ -602,7 +602,7 @@ const showNextImage = () => {
         <template v-for="(segment, segmentIndex) in parseInlineSegments(block.text)" :key="`${block.id}-callout-${segmentIndex}`">
           <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
           <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-          <code v-else-if="segment.type === 'code'" class="rounded bg-black/5 px-1 py-0.5 text-[0.9em]">{{ segment.text }}</code>
+          <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
           <a v-else-if="segment.type === 'link'" class="underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
           <template v-else>{{ segment.text }}</template>
         </template>
@@ -611,7 +611,7 @@ const showNextImage = () => {
         <template v-for="(segment, segmentIndex) in parseInlineSegments(block.text)" :key="`${block.id}-toggle-${segmentIndex}`">
           <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
           <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-          <code v-else-if="segment.type === 'code'" class="rounded bg-[var(--site-panel)] px-1 py-0.5 text-[0.9em]">{{ segment.text }}</code>
+          <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
           <a v-else-if="segment.type === 'link'" class="text-[var(--site-accent)] underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
           <template v-else>{{ segment.text }}</template>
         </template>
@@ -644,16 +644,16 @@ const showNextImage = () => {
       </div>
       <pre
         v-else-if="block.type === 'code'"
-        class="content-markdown-renderer__code my-6 overflow-x-auto rounded bg-[#15171a] px-4 py-3 text-sm leading-6 text-white"
+        class="content-markdown-renderer__code overflow-x-auto rounded bg-[#15171a] px-4 py-3 mb-2.5 text-sm leading-6 text-white"
       ><code>{{ block.text }}</code></pre>
-      <hr v-else-if="block.type === 'divider'" class="content-markdown-renderer__divider my-10 border-line">
+      <hr v-else-if="block.type === 'divider'" class="content-markdown-renderer__divider my-5 border-line">
       <p v-else class="content-markdown-renderer__paragraph mb-2.5 text-base text-[var(--site-text)] last:mb-0">
         <template v-for="(lineSegments, lineIndex) in parseInlineSegmentLines(block.text)" :key="`${block.id}-paragraph-line-${lineIndex}`">
           <br v-if="lineIndex > 0">
           <template v-for="(segment, segmentIndex) in lineSegments" :key="`${block.id}-paragraph-${lineIndex}-${segmentIndex}`">
             <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
             <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-            <code v-else-if="segment.type === 'code'" class="rounded bg-[var(--site-panel)] px-1 py-0.5 text-[0.9em]">{{ segment.text }}</code>
+            <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
             <a v-else-if="segment.type === 'link'" class="text-[var(--site-accent)] underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
             <template v-else>{{ segment.text }}</template>
           </template>

components/content/ProseBlockquote.vue

@@ -9,10 +9,10 @@ defineProps({
 
 <template>
   <blockquote
-    class="prose-blockquote my-8 text-[15px] leading-8 text-[var(--site-text)]"
+    class="prose-blockquote mb-2.5 text-[15px] leading-8 text-[var(--site-text)]"
     :class="variant === 'alt'
       ? 'rounded-[14px] border border-[var(--site-line)] bg-[var(--site-panel)] px-6 py-5 italic'
-      : 'rounded-[10px] border-l-2 border-[var(--site-text)] bg-[var(--site-panel)] px-5 py-4 font-medium'"
+      : 'rounded-[10px] border-l-2 border-[#FF1A75] bg-[color-mix(in_srgb,#FF1A75_10%,#ffffff)] px-5 py-4 font-medium'"
   >
     <span class="whitespace-pre-line">
       <slot />

components/content/ProseList.vue

@@ -10,7 +10,7 @@ defineProps({
 <template>
   <component
     :is="ordered ? 'ol' : 'ul'"
-    class="prose-list my-6 space-y-2 pl-5 text-[15px] leading-8 text-[var(--site-text)] marker:text-[var(--site-muted)]"
+    class="prose-list mb-2.5 space-y-2 pl-5 text-[15px] leading-8 text-[var(--site-text)] marker:text-[var(--site-muted)]"
     :class="ordered ? 'list-decimal' : 'list-disc'"
   >
     <slot />

docs/changelog.md

@@ -1,5 +1,11 @@
 # 업데이트 요약
 
+## v1.1.19
+
+- 관리자 글쓰기 헤더에 작성/미리보기 전환, Update 시 발행일 유지, 미디어 검색.
+- 사이트 설정 기타·POST 카드를 섹션별 편집·저장으로 분리.
+- 본문 인용·인라인 코드 스타일과 블록 여백을 조정했다.
+
 ## v1.1.18
 
 - 마크다운 에디터 이미지·갤러리 삽입을 단일 모달(미디어 라이브러리·업로드 탭)로 통합하고, 이미지 너비 툴바를 제거했다.

docs/update.md

@@ -1,5 +1,14 @@
 # 업데이트 이력
 
+## v1.1.19
+
+- 관리자 글쓰기: 작성/미리보기 토글을 툴바에서 헤더(Update 왼쪽)로 이동, 미리보기 시 툴바 숨김, 미디어 모달 파일명 검색.
+- 발행 글 Update 시 `publishedAt`이 현재 시각으로 덮이지 않도록 보존 로직 추가.
+- 관리자 글 설정: 검색엔진 노출 iOS형 토글(`noindex` 반전).
+- 사이트 설정: 기타·POST 카드 편집/저장/취소 분리, 변경 시에만 저장 활성, POST 설정 토글 UI.
+- 본문: 인용문 핑크 보더·배경, 인라인 코드 `#252525`, 목록·구분선 여백 정리.
+- 패키지 버전 `1.1.19`로 갱신.
+
 ## v1.1.18
 
 - 마크다운 에디터: 이미지 너비 선택 제거, 툴바 `이미지`·`갤러리` 단일 버튼 + 미디어 모달(라이브러리 기본·업로드 탭).

package.json

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

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]">