v1.2.1: 블록 설정 패널·이미지 alt 토글 및 포커스 수정

게시물 설정 사이드바 오버레이로 이미지·갤러리·임베드를 편집하고, 파일명 alt 토글과 패널 입력 중 닫힘 문제를 해결했다.

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

components/admin/AdminPostForm.vue

@@ -54,6 +54,8 @@ const slugTouched = ref((() => {
   return Boolean(post.slug) && !isAdminPostDraftPlaceholderSlug(post.slug)
 })())
 const blockEditor = ref(null)
+/** 에디터 블록 설정 패널(게시물 설정 사이드바 오버레이) */
+const editorBlockPanel = ref({ open: false, panel: null })
 /** 본문 에디터 모드: write | preview */
 const editorMode = ref('write')
 const mediaItems = ref([])
@@ -792,6 +794,87 @@ const openDateTimePicker = (event) => {
  * @param {KeyboardEvent} event - 키보드 이벤트
  * @returns {void}
  */
+/**
+ * 에디터에서 블록 패널 상태를 수신한다.
+ * @param {{ open: boolean, panel: Object|null }} payload - 패널 상태
+ * @returns {void}
+ */
+const onEditorBlockPanel = (payload) => {
+  editorBlockPanel.value = payload
+}
+
+/**
+ * 블록 패널 포커스 진입
+ * @returns {void}
+ */
+const onBlockPanelFocusIn = () => {
+  blockEditor.value?.handleBlockPanelFocusIn?.()
+}
+
+/**
+ * 블록 패널 포커스 이탈
+ * @returns {void}
+ */
+const onBlockPanelFocusOut = () => {
+  blockEditor.value?.handleBlockPanelFocusOut?.()
+}
+
+/**
+ * 블록 패널에서 미디어 이미지를 수정한다.
+ * @param {number} imageIndex - 이미지 인덱스
+ * @param {Object} patch - 변경 값
+ * @returns {void}
+ */
+const onBlockPanelUpdateMediaImage = (imageIndex, patch) => {
+  blockEditor.value?.updateActiveMediaImage?.(imageIndex, patch)
+}
+
+/**
+ * 블록 패널에서 대체 텍스트 사용 여부를 바꾼다.
+ * @param {number} imageIndex - 이미지 인덱스
+ * @param {boolean} enabled - 사용 여부
+ * @returns {void}
+ */
+const onBlockPanelSetMediaUseAlt = (imageIndex, enabled) => {
+  blockEditor.value?.setActiveMediaUseAlt?.(imageIndex, enabled)
+}
+
+/**
+ * 블록 패널에서 갤러리 이미지 순서를 바꾼다.
+ * @param {number} imageIndex - 이미지 인덱스
+ * @param {-1|1} direction - 이동 방향
+ * @returns {void}
+ */
+const onBlockPanelMoveGalleryImage = (imageIndex, direction) => {
+  blockEditor.value?.moveActiveGalleryImage?.(imageIndex, direction)
+}
+
+/**
+ * 블록 패널에서 미디어 이미지를 삭제한다.
+ * @param {number} imageIndex - 이미지 인덱스
+ * @returns {void}
+ */
+const onBlockPanelRemoveMediaImage = (imageIndex) => {
+  blockEditor.value?.removeActiveMediaImage?.(imageIndex)
+}
+
+/**
+ * 블록 패널에서 갤러리에 이미지를 추가한다.
+ * @returns {void}
+ */
+const onBlockPanelAddGalleryImages = () => {
+  blockEditor.value?.openMediaPicker?.('active-gallery')
+}
+
+/**
+ * 블록 패널에서 임베드 URL을 수정한다.
+ * @param {string} url - 임베드 URL
+ * @returns {void}
+ */
+const onBlockPanelUpdateEmbedUrl = (url) => {
+  blockEditor.value?.updateActiveEmbedUrl?.(url)
+}
+
 const focusContentEditor = (event) => {
   if (event?.isComposing || isTitleInputComposing.value || event?.keyCode === 229) {
     return
@@ -1299,6 +1382,7 @@ defineExpose({
             v-model="form.content"
             v-model:editor-mode="editorMode"
             mode-toggle-teleport-to="#admin-post-form-mode-toggle-host"
+            @block-panel="onEditorBlockPanel"
           />
         </div>
         </section>
@@ -1310,7 +1394,7 @@ defineExpose({
       :class="isSettingsOpen ? 'w-[420px] border-l' : 'w-0 border-l-0'"
       :aria-hidden="!isSettingsOpen"
     >
-      <div class="admin-post-form__settings-inner flex h-full w-[420px] flex-col">
+      <div class="admin-post-form__settings-inner relative flex h-full w-[420px] flex-col">
         <div class="admin-post-form__settings-header flex h-[56px] shrink-0 items-center justify-between px-6">
           <h2 class="admin-post-form__settings-title text-xl font-bold text-black">
             게시물 설정
@@ -1527,6 +1611,19 @@ defineExpose({
             <span>{{ deleting ? '삭제 중' : 'Delete post' }}</span>
           </button>
         </div>
+
+        <AdminEditorBlockPanel
+          :open="editorBlockPanel.open"
+          :panel="editorBlockPanel.panel"
+          @panel-focus-in="onBlockPanelFocusIn"
+          @panel-focus-out="onBlockPanelFocusOut"
+          @update-media-image="onBlockPanelUpdateMediaImage"
+          @set-media-use-alt="onBlockPanelSetMediaUseAlt"
+          @move-gallery-image="onBlockPanelMoveGalleryImage"
+          @remove-media-image="onBlockPanelRemoveMediaImage"
+          @add-gallery-images="onBlockPanelAddGalleryImages"
+          @update-embed-url="onBlockPanelUpdateEmbedUrl"
+        />
       </div>
       </aside>