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

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

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

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