관리자 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