From 151349edc28ee2185e44158d22b8009dce1f0e91 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 23 Jul 2026 16:23:01 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B5=AC=ED=98=95=20=EC=97=90=EB=94=94?=
 =?UTF-8?q?=ED=84=B0=20=EC=A0=9C=EA=B1=B0=EC=99=80=20=ED=86=A0=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B3=B5=ED=86=B5=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/admin/AdminBlockEditor.vue | 2561 -------------------------
 docs/history.md                       |    4 +
 docs/map.md                           |    3 +-
 docs/todo.md                          |   24 +-
 docs/update.md                        |    8 +
 package-lock.json                     |    4 +-
 package.json                          |    2 +-
 pages/admin/pages/[id].vue            |   23 +-
 pages/admin/pages/new.vue             |   23 +-
 pages/admin/posts/[id].vue            |   29 +-
 pages/admin/posts/new.vue             |   28 +-
 pages/admin/settings/index.vue        |   20 +-
 pages/admin/tags/index.vue            |   23 +-
 13 files changed, 55 insertions(+), 2697 deletions(-)
 delete mode 100644 components/admin/AdminBlockEditor.vue

diff --git a/components/admin/AdminBlockEditor.vue b/components/admin/AdminBlockEditor.vue
deleted file mode 100644
index 72b721f..0000000
--- a/components/admin/AdminBlockEditor.vue
+++ /dev/null
@@ -1,2561 +0,0 @@
-<script setup>
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: ''
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const editorBlocks = ref([])
-const blockRefs = ref([])
-const activeBlockId = ref('')
-const selectedBlockId = ref('')
-const draggingBlockId = ref('')
-const dragTargetIndex = ref(-1)
-const dragTargetPosition = ref('')
-const slashQuery = ref('')
-const slashMenuDirection = ref('down')
-const highlightedCommandIndex = ref(0)
-const isApplyingExternalValue = ref(false)
-const uploadingBlockIds = ref([])
-const mediaItems = ref([])
-const mediaPickerTarget = ref(null)
-const selectedGalleryMediaUrls = ref([])
-const isMediaPickerOpen = ref(false)
-const isLoadingMedia = ref(false)
-const isComposingText = ref(false)
-const isNormalizingTrailingBlock = ref(false)
-const pendingSoftLineBreakIndex = ref(-1)
-const pendingSlashCommandIndex = ref(-1)
-const draggingGalleryImage = ref(null)
-const galleryDragTarget = ref(null)
-const isKeyboardPriorityMode = ref(false)
-const calloutEmojiPickerBlockId = ref('')
-const calloutColorPopoverBlockId = ref('')
-const calloutEmojiComposingBlockId = ref('')
-let blockIdSeed = 0
-
-const imageWidthOptions = [
-  { value: 'regular', label: '기본' },
-  { value: 'wide', label: '와이드' },
-  { value: 'full', label: '풀사이즈' }
-]
-
-const calloutBackgroundOptions = [
-  { value: 'gray', label: '회색' },
-  { value: 'blue', label: '파랑' },
-  { value: 'green', label: '초록' },
-  { value: 'yellow', label: '노랑' },
-  { value: 'red', label: '빨강' },
-  { value: 'purple', label: '보라' }
-]
-
-/**
- * 콜아웃 배경 스와치 색상을 반환한다.
- * @param {string} background - 배경 키
- * @returns {string} CSS 배경색
- */
-const getCalloutBackgroundSwatch = (background) => {
-  if (background === 'gray') {
-    return 'color-mix(in srgb, #050505 10%, #ffffff)'
-  }
-
-  if (background === 'blue') {
-    return 'color-mix(in srgb, #0055ff 10%, #ffffff)'
-  }
-
-  if (background === 'green') {
-    return 'color-mix(in srgb, #16ae68 10%, #ffffff)'
-  }
-
-  if (background === 'yellow') {
-    return 'color-mix(in srgb, #ffff00 10%, #ffffff)'
-  }
-
-  if (background === 'red') {
-    return 'color-mix(in srgb, #ff0000 10%, #ffffff)'
-  }
-
-  if (background === 'purple') {
-    return 'color-mix(in srgb, #8800ff 10%, #ffffff)'
-  }
-
-  return 'color-mix(in srgb, #0055ff 10%, #ffffff)'
-}
-
-const blockCommands = [
-  {
-    type: 'paragraph',
-    label: '문단',
-    description: '기본 본문 블록',
-    keywords: ['p', 'text', 'paragraph', '문단']
-  },
-  {
-    type: 'heading',
-    level: 2,
-    label: '제목 2',
-    description: '섹션 제목',
-    keywords: ['h2', 'heading', 'title', '제목']
-  },
-  {
-    type: 'heading',
-    level: 3,
-    label: '제목 3',
-    description: '작은 섹션 제목',
-    keywords: ['h3', 'heading', 'subtitle', '제목']
-  },
-  {
-    type: 'image',
-    label: '이미지',
-    description: '단일 이미지 업로드',
-    keywords: ['image', 'photo', '이미지', '사진']
-  },
-  {
-    type: 'gallery',
-    label: '갤러리',
-    description: '여러 이미지 업로드',
-    keywords: ['gallery', 'images', '갤러리', '사진']
-  },
-  {
-    type: 'callout',
-    label: '콜아웃',
-    description: '강조 안내 블록',
-    keywords: ['callout', 'notice', 'info', '콜아웃', '안내']
-  },
-  {
-    type: 'toggle',
-    label: '토글',
-    description: '접고 펼치는 본문 블록',
-    keywords: ['toggle', 'details', '토글', '접기']
-  },
-  {
-    type: 'embed',
-    label: 'HTML',
-    description: 'URL 또는 iframe HTML 삽입',
-    keywords: ['html', 'iframe', 'embed', 'youtube', 'link', '임베드', '유튜브']
-  },
-  {
-    type: 'quote',
-    label: '인용',
-    description: '강조 인용문',
-    keywords: ['quote', 'blockquote', '인용']
-  },
-  {
-    type: 'list',
-    label: '목록',
-    description: '불릿 목록',
-    keywords: ['list', 'bullet', '목록']
-  },
-  {
-    type: 'code',
-    label: '코드',
-    description: '코드 블록',
-    keywords: ['code', 'pre', '코드']
-  },
-  {
-    type: 'divider',
-    label: '구분선',
-    description: '본문 구간 분리',
-    keywords: ['divider', 'hr', 'line', '구분선']
-  }
-]
-
-const BLANK_PARAGRAPH_MARKER = '<!--sori:blank-paragraph-->'
-
-/**
- * 에디터 블록 생성
- * @param {string} type - 블록 타입
- * @param {string} text - 블록 텍스트
- * @param {number|null} level - 제목 레벨
- * @param {string} id - 블록 ID
- * @param {Object} options - 추가 블록 옵션
- * @returns {Object} 에디터 블록
- */
-const createEditorBlock = (type = 'paragraph', text = '', level = null, id = '', options = {}) => ({
-  id: id || `editor-block-new-${blockIdSeed += 1}`,
-  type,
-  text,
-  level,
-  url: options.url || '',
-  alt: options.alt || '',
-  title: options.title || '',
-  width: options.width || 'regular',
-  images: options.images || [],
-  calloutEmojiEnabled: options.calloutEmojiEnabled === true,
-  calloutEmoji: options.calloutEmoji || '💡',
-  calloutBackground: options.calloutBackground || 'blue'
-})
-
-/**
- * 콜아웃 선언부 옵션을 파싱
- * @param {string} line - 콜아웃 선언 라인
- * @returns {{calloutEmojiEnabled: boolean, calloutEmoji: string, calloutBackground: string}} 콜아웃 옵션
- */
-const parseCalloutOptions = (line) => {
-  const options = {
-    calloutEmojiEnabled: false,
-    calloutEmoji: '💡',
-    calloutBackground: 'blue'
-  }
-  const tokens = line.trim().split(/\s+/).slice(1)
-
-  tokens.forEach((token) => {
-    const [rawKey, ...rawValueParts] = token.split('=')
-    if (!rawKey || !rawValueParts.length) {
-      return
-    }
-    const key = rawKey.toLowerCase()
-    const value = rawValueParts.join('=').trim()
-
-    if (key === 'emoji') {
-      if (!value || value === 'none') {
-        options.calloutEmojiEnabled = false
-        options.calloutEmoji = '💡'
-      } else {
-        options.calloutEmojiEnabled = true
-        options.calloutEmoji = value
-      }
-      return
-    }
-
-    if (key === 'bg' && calloutBackgroundOptions.some((item) => item.value === value)) {
-      options.calloutBackground = value
-    }
-  })
-
-  return options
-}
-
-/**
- * 이미지 마크다운 행을 블록 옵션으로 변환
- * @param {string} line - 마크다운 행
- * @returns {Object|null} 이미지 블록 옵션
- */
-const parseImageLine = (line) => {
-  const match = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)(?:\{width=(regular|wide|full)\})?$/)
-
-  if (!match) {
-    return null
-  }
-
-  return {
-    alt: match[1],
-    url: match[2],
-    width: match[3] || 'regular'
-  }
-}
-
-/**
- * 닫힘 표식까지의 행 목록을 반환
- * @param {Array<string>} lines - 전체 마크다운 행
- * @param {number} startIndex - 본문 시작 인덱스
- * @returns {{contentLines: Array<string>, nextIndex: number}} 블록 본문과 다음 인덱스
- */
-const collectFencedLines = (lines, startIndex) => {
-  const contentLines = []
-  let index = startIndex
-
-  while (index < lines.length && lines[index].trim() !== ':::') {
-    contentLines.push(lines[index])
-    index += 1
-  }
-
-  return {
-    contentLines,
-    nextIndex: index + 1
-  }
-}
-
-/**
- * 저장된 마크다운 문자열을 에디터 블록으로 변환
- * @param {string} markdown - 마크다운 문자열
- * @returns {Array<Object>} 에디터 블록 목록
- */
-const parseMarkdownToBlocks = (markdown) => {
-  const lines = markdown.split('\n')
-  const blocks = []
-  let index = 0
-
-  while (index < lines.length) {
-    const line = lines[index]
-    const trimmedLine = line.trim()
-
-    if (trimmedLine === BLANK_PARAGRAPH_MARKER) {
-      blocks.push(createEditorBlock('paragraph', '', null, `editor-block-${blocks.length}`))
-      index += 1
-      continue
-    }
-
-    if (!trimmedLine) {
-      index += 1
-      continue
-    }
-
-    if (trimmedLine === ':::gallery') {
-      const { contentLines, nextIndex } = collectFencedLines(lines, index + 1)
-      const images = []
-
-      contentLines.forEach((contentLine) => {
-        const image = parseImageLine(contentLine)
-        if (image) {
-          images.push(image)
-        }
-      })
-
-      blocks.push(createEditorBlock('gallery', '', null, `editor-block-${blocks.length}`, { images }))
-      index = nextIndex
-      continue
-    }
-
-    if (trimmedLine.startsWith(':::callout')) {
-      const { contentLines, nextIndex } = collectFencedLines(lines, index + 1)
-      blocks.push(createEditorBlock('callout', contentLines.join('\n'), null, `editor-block-${blocks.length}`, parseCalloutOptions(trimmedLine)))
-      index = nextIndex
-      continue
-    }
-
-    if (trimmedLine.startsWith(':::toggle')) {
-      const { contentLines, nextIndex } = collectFencedLines(lines, index + 1)
-      const title = trimmedLine.replace(/^:::toggle\s*/, '').trim()
-      blocks.push(createEditorBlock('toggle', contentLines.join('\n'), null, `editor-block-${blocks.length}`, { title }))
-      index = nextIndex
-      continue
-    }
-
-    if (trimmedLine === ':::embed') {
-      const { contentLines, nextIndex } = collectFencedLines(lines, index + 1)
-      blocks.push(createEditorBlock('embed', '', null, `editor-block-${blocks.length}`, { url: contentLines.join('\n').trim() }))
-      index = nextIndex
-      continue
-    }
-
-    const image = parseImageLine(trimmedLine)
-
-    if (image) {
-      blocks.push(createEditorBlock('image', '', null, `editor-block-${blocks.length}`, image))
-      index += 1
-      continue
-    }
-
-    if (trimmedLine.startsWith('```')) {
-      const codeLines = []
-      index += 1
-
-      while (index < lines.length && !lines[index].trim().startsWith('```')) {
-        codeLines.push(lines[index])
-        index += 1
-      }
-
-      blocks.push(createEditorBlock('code', codeLines.join('\n'), null, `editor-block-${blocks.length}`))
-      index += 1
-      continue
-    }
-
-    if (trimmedLine === '---') {
-      blocks.push(createEditorBlock('divider', '', null, `editor-block-${blocks.length}`))
-      index += 1
-      continue
-    }
-
-    const headingMatch = trimmedLine.match(/^(#{1,3})\s+(.+)$/)
-
-    if (headingMatch) {
-      blocks.push(createEditorBlock('heading', headingMatch[2], headingMatch[1].length, `editor-block-${blocks.length}`))
-      index += 1
-      continue
-    }
-
-    if (trimmedLine.startsWith('> ')) {
-      blocks.push(createEditorBlock('quote', trimmedLine.replace(/^>\s?/, ''), null, `editor-block-${blocks.length}`))
-      index += 1
-      continue
-    }
-
-    if (/^- /.test(trimmedLine)) {
-      blocks.push(createEditorBlock('list', trimmedLine.replace(/^- /, ''), null, `editor-block-${blocks.length}`))
-      index += 1
-      continue
-    }
-
-    blocks.push(createEditorBlock('paragraph', trimmedLine, null, `editor-block-${blocks.length}`))
-    index += 1
-  }
-
-  return blocks.length ? blocks : [createEditorBlock('paragraph', '', null, 'editor-block-0')]
-}
-
-/**
- * 이미지 블록을 마크다운 문자열로 변환
- * @param {Object} image - 이미지 데이터
- * @returns {string} 이미지 마크다운
- */
-const serializeImage = (image) => {
-  const width = image.width && image.width !== 'regular'
-    ? `{width=${image.width}}`
-    : ''
-
-  return `![${image.alt || ''}](${image.url})${width}`
-}
-
-/**
- * 에디터 블록 목록을 저장용 마크다운으로 변환
- * @returns {string} 마크다운 문자열
- */
-const serializeBlocks = () => {
-  const lines = editorBlocks.value
-    .map((block, index) => {
-      const rawText = block.text || ''
-      const text = rawText.trim()
-
-      if (block.type === 'divider') {
-        return { type: block.type, value: '---' }
-      }
-
-      if (block.type === 'image') {
-        return block.url
-          ? { type: block.type, value: serializeImage(block) }
-          : null
-      }
-
-      if (block.type === 'gallery') {
-        const images = block.images.filter((image) => image.url)
-
-        if (!images.length) {
-          return null
-        }
-
-        return {
-          type: block.type,
-          value: [':::gallery', ...images.map((image) => serializeImage(image)), ':::'].join('\n')
-        }
-      }
-
-      if (block.type === 'callout') {
-        const emoji = block.calloutEmojiEnabled
-          ? (block.calloutEmoji || '💡')
-          : 'none'
-        const bg = calloutBackgroundOptions.some((item) => item.value === block.calloutBackground)
-          ? block.calloutBackground
-          : 'blue'
-        return text
-          ? { type: block.type, value: `:::callout emoji=${emoji} bg=${bg}\n${text}\n:::` }
-          : null
-      }
-
-      if (block.type === 'toggle') {
-        const title = block.title.trim()
-        return title || text
-          ? { type: block.type, value: `:::toggle ${title || '더 보기'}\n${text}\n:::` }
-          : null
-      }
-
-      if (block.type === 'embed') {
-        return block.url.trim()
-          ? { type: block.type, value: block.url.trim() }
-          : null
-      }
-
-      if (!text && block.type === 'paragraph') {
-        if (index === editorBlocks.value.length - 1) {
-          return null
-        }
-
-        return { type: block.type, value: BLANK_PARAGRAPH_MARKER }
-      }
-
-      if (!text) {
-        return null
-      }
-
-      if (block.type === 'heading') {
-        return { type: block.type, value: `${'#'.repeat(block.level || 2)} ${text}` }
-      }
-
-      if (block.type === 'quote') {
-        return { type: block.type, value: `> ${text}` }
-      }
-
-      if (block.type === 'list') {
-        return { type: block.type, value: `- ${text}` }
-      }
-
-      if (block.type === 'code') {
-        return { type: block.type, value: `\`\`\`\n${block.text}\n\`\`\`` }
-      }
-
-      return { type: block.type, value: text }
-    })
-    .filter(Boolean)
-
-  return lines.reduce((markdown, line, index) => {
-    if (index === 0) {
-      return line.value
-    }
-
-    const previousLine = lines[index - 1]
-    const joiner = previousLine.type === 'list' && line.type === 'list'
-      ? '\n'
-      : '\n\n'
-
-    return `${markdown}${joiner}${line.value}`
-  }, '')
-}
-
-/**
- * 부모 폼으로 콘텐츠 변경 전달
- * @returns {void}
- */
-const emitContent = () => {
-  emit('update:modelValue', serializeBlocks())
-}
-
-/**
- * 키보드 입력 우선 모드 활성화
- * @returns {void}
- */
-const enableKeyboardPriorityMode = () => {
-  isKeyboardPriorityMode.value = true
-}
-
-/**
- * 마우스 상호작용 시 hover 복귀
- * @param {MouseEvent} event - 마우스 이동 이벤트
- * @returns {void}
- */
-const handleEditorMouseMove = (event) => {
-  if (event.buttons !== 0) {
-    return
-  }
-
-  isKeyboardPriorityMode.value = false
-}
-
-/**
- * 텍스트 입력 블록 여부 반환
- * @param {Object} block - 에디터 블록
- * @returns {boolean} 텍스트 입력 블록 여부
- */
-const isTextBlock = (block) => !['divider', 'image', 'gallery', 'toggle', 'embed'].includes(block.type)
-
-/**
- * 갤러리 열 개수 반환
- * @param {Object} block - 갤러리 블록
- * @returns {number} 열 개수
- */
-const getGalleryColumnCount = (block) => Math.min(Math.max(block.images.length, 1), 3)
-
-/**
- * 갤러리 미디어 선택 여부 확인
- * @param {Object} mediaItem - 미디어 항목
- * @returns {boolean} 선택 여부
- */
-const isGalleryMediaSelected = (mediaItem) => selectedGalleryMediaUrls.value.includes(mediaItem.url)
-
-/**
- * 비어 있는 문단 블록 여부 반환
- * @param {Object|undefined} block - 에디터 블록
- * @returns {boolean} 비어 있는 문단 블록 여부
- */
-const isBlankParagraphBlock = (block) => block?.type === 'paragraph' && !block.text
-
-/**
- * 마지막 클릭 가능 문단 블록 유지
- * @returns {void}
- */
-const normalizeTrailingTextBlock = () => {
-  if (isNormalizingTrailingBlock.value) {
-    return
-  }
-
-  isNormalizingTrailingBlock.value = true
-
-  if (!isBlankParagraphBlock(editorBlocks.value.at(-1))) {
-    editorBlocks.value.push(createEditorBlock('paragraph'))
-  }
-
-  nextTick(() => {
-    isNormalizingTrailingBlock.value = false
-  })
-}
-
-/**
- * 블록 DOM 요소를 저장
- * @param {Element|null} element - 블록 DOM 요소
- * @param {number} index - 블록 인덱스
- * @returns {void}
- */
-const setBlockRef = (element, index) => {
-  if (element) {
-    blockRefs.value[index] = element
-
-    if (
-      !isComposingText.value
-      && isTextBlock(editorBlocks.value[index])
-      && element.textContent !== editorBlocks.value[index]?.text
-    ) {
-      element.textContent = editorBlocks.value[index]?.text || ''
-    }
-  }
-}
-
-/**
- * 지정 블록으로 커서 이동
- * @param {number} index - 블록 인덱스
- * @returns {void}
- */
-const focusBlock = (index, position = 'end') => {
-  nextTick(() => {
-    const element = blockRefs.value[index]
-
-    if (!element) {
-      return
-    }
-
-    element.focus()
-    const selection = window.getSelection()
-    const range = document.createRange()
-    range.selectNodeContents(element)
-    range.collapse(position === 'start')
-    selection.removeAllRanges()
-    selection.addRange(range)
-  })
-}
-
-/**
- * 현재 커서가 블록 시작/끝 경계에 있는지 확인
- * @param {Element} element - 블록 요소
- * @param {'start'|'end'} boundary - 경계 방향
- * @returns {boolean} 경계 위치 여부
- */
-const isCaretOnBoundary = (element, boundary) => {
-  const selection = window.getSelection()
-  if (!selection?.rangeCount) {
-    return false
-  }
-
-  const range = selection.getRangeAt(0)
-  if (!range.collapsed || !element.contains(range.commonAncestorContainer)) {
-    return false
-  }
-
-  const probeRange = range.cloneRange()
-  probeRange.selectNodeContents(element)
-
-  if (boundary === 'start') {
-    probeRange.setEnd(range.startContainer, range.startOffset)
-    return probeRange.toString().length === 0
-  }
-
-  probeRange.setStart(range.startContainer, range.startOffset)
-  return probeRange.toString().length === 0
-}
-
-/**
- * 구조형 블록의 첫 입력 필드로 커서 이동
- * @param {number} index - 블록 인덱스
- * @returns {void}
- */
-const focusStructuredBlock = (index) => {
-  nextTick(() => {
-    const blockId = editorBlocks.value[index]?.id
-    const row = document.querySelector(`[data-editor-block-id="${blockId}"]`)
-    const field = row?.querySelector('input, textarea, button')
-
-    if (field) {
-      field.focus()
-    }
-  })
-}
-
-/**
- * 슬래시 메뉴 표시 방향 갱신
- * @param {number} index - 블록 인덱스
- * @returns {void}
- */
-const updateSlashMenuDirection = (index) => {
-  nextTick(() => {
-    const element = blockRefs.value[index]
-
-    if (!element) {
-      slashMenuDirection.value = 'down'
-      return
-    }
-
-    const rect = element.getBoundingClientRect()
-    const menuHeight = 280
-    slashMenuDirection.value = window.innerHeight - rect.bottom < menuHeight && rect.top > menuHeight
-      ? 'up'
-      : 'down'
-  })
-}
-
-/**
- * 텍스트 블록 DOM의 현재 텍스트 반환
- * @param {number} index - 블록 인덱스
- * @returns {string} 현재 텍스트
- */
-const getTextBlockDomText = (index) => {
-  const element = blockRefs.value[index]
-
-  return element?.textContent || ''
-}
-
-/**
- * 현재 선택 영역에 문단 내부 줄바꿈을 삽입
- * @param {number} index - 블록 인덱스
- * @returns {void}
- */
-const insertSoftLineBreak = (index) => {
-  const block = editorBlocks.value[index]
-  const element = blockRefs.value[index]
-
-  if (!block || !element) {
-    return
-  }
-
-  element.focus()
-  const selection = window.getSelection()
-
-  if (!selection) {
-    return
-  }
-
-  const range = selection?.rangeCount ? selection.getRangeAt(0) : document.createRange()
-
-  if (!selection.rangeCount || !element.contains(range.commonAncestorContainer)) {
-    range.selectNodeContents(element)
-    range.collapse(false)
-  }
-
-  range.deleteContents()
-  const lineBreak = document.createTextNode('\n')
-  range.insertNode(lineBreak)
-  range.setStartAfter(lineBreak)
-  range.collapse(true)
-  selection.removeAllRanges()
-  selection.addRange(range)
-
-  block.text = getTextBlockDomText(index)
-  activeBlockId.value = block.id
-  slashQuery.value = ''
-  updateSlashMenuDirection(index)
-  emitContent()
-}
-
-/**
- * 텍스트 블록 DOM 값을 상태에 즉시 반영
- * @param {number} index - 블록 인덱스
- * @returns {Object|undefined} 갱신한 블록
- */
-const syncTextBlockFromDom = (index) => {
-  const block = editorBlocks.value[index]
-
-  if (!block || !isTextBlock(block)) {
-    return block
-  }
-
-  block.text = getTextBlockDomText(index)
-  activeBlockId.value = block.id
-  updateSlashQuery(block)
-  updateSlashMenuDirection(index)
-
-  return block
-}
-
-/**
- * 블록 타입에 맞는 태그명 반환
- * @param {Object} block - 에디터 블록
- * @returns {string} HTML 태그명
- */
-const getBlockTag = (block) => {
-  if (block.type === 'heading') {
-    return `h${block.level || 2}`
-  }
-
-  if (block.type === 'quote') {
-    return 'blockquote'
-  }
-
-  if (block.type === 'code') {
-    return 'pre'
-  }
-
-  return 'div'
-}
-
-/**
- * 블록 타입에 맞는 클래스 반환
- * @param {Object} block - 에디터 블록
- * @returns {Array<string|Object>} 클래스 목록
- */
-const getBlockClass = (block) => [
-  'admin-block-editor__block outline-none transition-colors',
-  {
-    'admin-block-editor__paragraph min-h-8 whitespace-pre-wrap text-[17px] leading-8': block.type === 'paragraph',
-    'admin-block-editor__heading min-h-10 font-semibold leading-tight': block.type === 'heading',
-    'admin-block-editor__heading--h1 text-5xl': block.type === 'heading' && block.level === 1,
-    'admin-block-editor__heading--h2 text-4xl': block.type === 'heading' && block.level === 2,
-    'admin-block-editor__heading--h3 text-3xl': block.type === 'heading' && block.level === 3,
-    'admin-block-editor__quote border-l-4 border-ink bg-surface px-5 py-3 text-xl font-medium leading-8': block.type === 'quote',
-    'admin-block-editor__list relative min-h-8 pl-7 text-[17px] leading-8 before:absolute before:left-2 before:top-3 before:h-2 before:w-2 before:rounded-full before:bg-current': block.type === 'list',
-    'admin-block-editor__code min-h-14 whitespace-pre-wrap rounded bg-[#15171a] px-4 py-3 font-mono text-sm leading-6 text-white': block.type === 'code'
-  }
-]
-
-/**
- * 이미지 너비 클래스 반환
- * @param {string} width - 이미지 너비 옵션
- * @returns {string} 클래스 문자열
- */
-const getImageWidthClass = (width) => {
-  if (width === 'full') {
-    return 'admin-block-editor__image--full lg:-mx-20'
-  }
-
-  if (width === 'wide') {
-    return 'admin-block-editor__image--wide lg:-mx-10'
-  }
-
-  return 'admin-block-editor__image--regular'
-}
-
-/**
- * 블록 텍스트 입력 처리
- * @param {InputEvent} event - 입력 이벤트
- * @param {number} index - 블록 인덱스
- * @returns {void}
- */
-const updateBlockText = (event, index) => {
-  enableKeyboardPriorityMode()
-
-  const block = editorBlocks.value[index]
-  const text = getTextBlockDomText(index)
-
-  block.text = text
-  activeBlockId.value = block.id
-
-  if (isComposingText.value || event.isComposing) {
-    return
-  }
-
-  applyMarkdownShortcut(block, index)
-  updateSlashQuery(block)
-  updateSlashMenuDirection(index)
-  emitContent()
-}
-
-/**
- * 한글 등 조합형 텍스트 입력 시작 처리
- * @returns {void}
- */
-const startTextComposition = () => {
-  isComposingText.value = true
-}
-
-/**
- * 한글 등 조합형 텍스트 입력 종료 처리
- * @param {CompositionEvent} event - 조합 종료 이벤트
- * @param {number} index - 블록 인덱스
- * @returns {void}
- */
-const finishTextComposition = (event, index) => {
-  isComposingText.value = false
-
-  const syncAfterComposition = () => {
-    const block = syncTextBlockFromDom(index)
-
-    if (!block) {
-      pendingSoftLineBreakIndex.value = -1
-      pendingSlashCommandIndex.value = -1
-      return
-    }
-
-    applyMarkdownShortcut(block, index)
-
-    const trimmedText = (block.text || '').trim()
-    const canApplyPendingSlashCommand = pendingSlashCommandIndex.value === index
-      && block.text.startsWith('/')
-      && visibleCommands.value.length > 0
-      && trimmedText !== '/'
-      && trimmedText !== '//'
-
-    if (canApplyPendingSlashCommand) {
-      pendingSlashCommandIndex.value = -1
-      const command = highlightedCommand.value || visibleCommands.value[0]
-
-      if (command) {
-        applyCommand(command)
-        return
-      }
-    }
-
-    if (pendingSoftLineBreakIndex.value === index && isTextBlock(block) && block.type !== 'code') {
-      pendingSoftLineBreakIndex.value = -1
-      pendingSlashCommandIndex.value = -1
-      insertSoftLineBreak(index)
-      return
-    }
-
-    pendingSoftLineBreakIndex.value = -1
-    pendingSlashCommandIndex.value = -1
-    emitContent()
-  }
-
-  nextTick(() => {
-    syncAfterComposition()
-    window.setTimeout(syncAfterComposition, 0)
-  })
-}
-
-/**
- * 마크다운 입력 단축 문법 적용
- * @param {Object} block - 에디터 블록
- * @param {number} index - 블록 인덱스
- * @returns {void}
- */
-const applyMarkdownShortcut = (block, index) => {
-  const shortcutMap = [
-    { marker: '# ', type: 'heading', level: 1 },
-    { marker: '## ', type: 'heading', level: 2 },
-    { marker: '### ', type: 'heading', level: 3 },
-    { marker: '> ', type: 'quote' },
-    { marker: '- ', type: 'list' },
-    { marker: '```', type: 'code', exact: true },
-    { marker: '``` ', type: 'code' }
-  ].sort((a, b) => b.marker.length - a.marker.length)
-
-  const shortcut = shortcutMap.find((item) => item.exact
-    ? block.text === item.marker
-    : block.text.startsWith(item.marker))
-
-  if (!shortcut) {
-    return
-  }
-
-  block.type = shortcut.type
-  block.level = shortcut.level || null
-  block.text = block.text.slice(shortcut.marker.length)
-  slashQuery.value = ''
-
-  nextTick(() => {
-    const element = blockRefs.value[index]
-
-    if (element) {
-      element.textContent = block.text
-      focusBlock(index)
-    }
-  })
-}
-
-/**
- * 슬래시 메뉴 검색어 갱신
- * @param {Object} block - 에디터 블록
- * @returns {void}
- */
-const updateSlashQuery = (block) => {
-  const nextSlashQuery = block.text.startsWith('/')
-    ? block.text.slice(1).trim().toLowerCase()
-    : ''
-  const hasQueryChanged = slashQuery.value !== nextSlashQuery
-  slashQuery.value = nextSlashQuery
-
-  if (hasQueryChanged) {
-    highlightedCommandIndex.value = 0
-    return
-  }
-
-  if (!visibleCommands.value.length) {
-    highlightedCommandIndex.value = 0
-    return
-  }
-
-  if (highlightedCommandIndex.value >= visibleCommands.value.length) {
-    highlightedCommandIndex.value = visibleCommands.value.length - 1
-  }
-}
-
-const activeBlockIndex = computed(() => editorBlocks.value.findIndex((block) => block.id === activeBlockId.value))
-
-const visibleCommands = computed(() => {
-  if (activeBlockIndex.value < 0) {
-    return []
-  }
-
-  const block = editorBlocks.value[activeBlockIndex.value]
-
-  if (!block?.text.startsWith('/')) {
-    return []
-  }
-
-  return blockCommands.filter((command) => [
-    command.label,
-    command.description,
-    ...command.keywords
-  ].some((keyword) => keyword.toLowerCase().includes(slashQuery.value)))
-})
-
-const highlightedCommand = computed(() => visibleCommands.value[highlightedCommandIndex.value])
-const activeCalloutBlock = computed(() => {
-  const activeBlock = editorBlocks.value.find((block) => block.id === activeBlockId.value)
-
-  if (activeBlock?.type === 'callout') {
-    return activeBlock
-  }
-
-  const selectedBlock = editorBlocks.value.find((block) => block.id === selectedBlockId.value)
-
-  if (selectedBlock?.type === 'callout') {
-    return selectedBlock
-  }
-
-  return null
-})
-
-/**
- * 슬래시 메뉴 명령 적용
- * @param {Object} command - 블록 명령
- * @returns {void}
- */
-const applyCommand = (command) => {
-  const index = activeBlockIndex.value
-
-  if (index < 0) {
-    return
-  }
-
-  const block = editorBlocks.value[index]
-  block.type = command.type
-  block.level = command.level || null
-  block.text = ''
-  block.url = ''
-  block.alt = ''
-  block.title = ''
-  block.width = 'regular'
-  block.images = []
-  const element = blockRefs.value[index]
-
-  if (element) {
-    element.textContent = ''
-  }
-
-  slashQuery.value = ''
-
-  if (command.type === 'divider') {
-    editorBlocks.value.splice(index + 1, 0, createEditorBlock())
-    normalizeTrailingTextBlock()
-    emitContent()
-    focusBlock(index + 1)
-    return
-  }
-
-  normalizeTrailingTextBlock()
-  emitContent()
-
-  if (isTextBlock(block)) {
-    focusBlock(index)
-    return
-  }
-
-  if (['toggle', 'embed'].includes(block.type)) {
-    focusStructuredBlock(index)
-  }
-}
-
-/**
- * 블록 업로드 진행 상태 설정
- * @param {string} blockId - 블록 ID
- * @param {boolean} isUploading - 업로드 진행 여부
- * @returns {void}
- */
-const setUploading = (blockId, isUploading) => {
-  uploadingBlockIds.value = isUploading
-    ? [...new Set([...uploadingBlockIds.value, blockId])]
-    : uploadingBlockIds.value.filter((id) => id !== blockId)
-}
-
-/**
- * 블록 업로드 진행 상태 반환
- * @param {string} blockId - 블록 ID
- * @returns {boolean} 업로드 진행 여부
- */
-const isUploading = (blockId) => uploadingBlockIds.value.includes(blockId)
-
-/**
- * 이미지 파일 업로드
- * @param {FileList|Array<File>} files - 업로드 파일 목록
- * @returns {Promise<Array<Object>>} 업로드된 파일 목록
- */
-const uploadImages = async (files) => {
-  const formData = new FormData()
-
-  Array.from(files).forEach((file) => {
-    formData.append('files', file)
-  })
-
-  const result = await $fetch('/admin/api/uploads', {
-    method: 'POST',
-    body: formData
-  })
-
-  return result.files || []
-}
-
-/**
- * 미디어 라이브러리 목록 조회
- * @returns {Promise<void>}
- */
-const fetchMediaItems = async () => {
-  isLoadingMedia.value = true
-
-  try {
-    mediaItems.value = await $fetch('/admin/api/media')
-  } finally {
-    isLoadingMedia.value = false
-  }
-}
-
-/**
- * 미디어 선택 창 열기
- * @param {Object} block - 대상 블록
- * @returns {Promise<void>}
- */
-const openMediaPicker = async (block) => {
-  mediaPickerTarget.value = {
-    blockId: block.id,
-    type: block.type
-  }
-  selectedGalleryMediaUrls.value = block.type === 'gallery'
-    ? block.images.map((image) => image.url).filter(Boolean)
-    : []
-  isMediaPickerOpen.value = true
-  await fetchMediaItems()
-}
-
-/**
- * 미디어 선택 창 닫기
- * @returns {void}
- */
-const closeMediaPicker = () => {
-  isMediaPickerOpen.value = false
-  mediaPickerTarget.value = null
-  selectedGalleryMediaUrls.value = []
-}
-
-/**
- * 갤러리 미디어 선택 상태 전환
- * @param {Object} mediaItem - 미디어 항목
- * @returns {void}
- */
-const toggleGalleryMediaSelection = (mediaItem) => {
-  if (selectedGalleryMediaUrls.value.includes(mediaItem.url)) {
-    selectedGalleryMediaUrls.value = selectedGalleryMediaUrls.value.filter((url) => url !== mediaItem.url)
-    return
-  }
-
-  selectedGalleryMediaUrls.value = [...selectedGalleryMediaUrls.value, mediaItem.url]
-}
-
-/**
- * 갤러리 미디어 선택을 블록에 적용
- * @returns {void}
- */
-const applyGalleryMediaSelection = () => {
-  const block = editorBlocks.value.find((item) => item.id === mediaPickerTarget.value?.blockId)
-
-  if (!block || mediaPickerTarget.value?.type !== 'gallery') {
-    return
-  }
-
-  const existingImages = new Map(block.images.map((image) => [image.url, image]))
-  block.images = selectedGalleryMediaUrls.value.map((url) => existingImages.get(url) || {
-    url,
-    alt: '',
-    width: 'regular'
-  })
-
-  normalizeTrailingTextBlock()
-  emitContent()
-  closeMediaPicker()
-}
-
-/**
- * 선택한 미디어를 블록에 적용
- * @param {Object} mediaItem - 미디어 항목
- * @returns {void}
- */
-const selectMediaItem = (mediaItem) => {
-  if (mediaPickerTarget.value?.type === 'gallery') {
-    toggleGalleryMediaSelection(mediaItem)
-    return
-  }
-
-  const block = editorBlocks.value.find((item) => item.id === mediaPickerTarget.value?.blockId)
-
-  if (!block) {
-    return
-  }
-
-  block.url = mediaItem.url
-  block.alt = ''
-  normalizeTrailingTextBlock()
-  emitContent()
-  closeMediaPicker()
-}
-
-/**
- * 단일 이미지 파일 선택 처리
- * @param {Event} event - 파일 입력 이벤트
- * @param {Object} block - 이미지 블록
- * @returns {Promise<void>}
- */
-const handleImageUpload = async (event, block) => {
-  const files = event.target.files
-
-  if (!files?.length) {
-    return
-  }
-
-  setUploading(block.id, true)
-
-  try {
-    const [file] = await uploadImages(files)
-
-    if (file) {
-      block.url = file.url
-      block.alt = ''
-      normalizeTrailingTextBlock()
-      emitContent()
-    }
-  } finally {
-    event.target.value = ''
-    setUploading(block.id, false)
-  }
-}
-
-/**
- * 갤러리 이미지 파일 선택 처리
- * @param {Event} event - 파일 입력 이벤트
- * @param {Object} block - 갤러리 블록
- * @returns {Promise<void>}
- */
-const handleGalleryUpload = async (event, block) => {
-  const files = event.target.files
-
-  if (!files?.length) {
-    return
-  }
-
-  setUploading(block.id, true)
-
-  try {
-    const uploadedFiles = await uploadImages(files)
-    block.images = [
-      ...block.images,
-      ...uploadedFiles.map((file) => ({
-        url: file.url,
-        alt: '',
-        width: 'regular'
-      }))
-    ]
-    normalizeTrailingTextBlock()
-    emitContent()
-  } finally {
-    event.target.value = ''
-    setUploading(block.id, false)
-  }
-}
-
-/**
- * 이미지 너비 옵션 변경
- * @param {Object} block - 이미지 블록
- * @param {string} width - 너비 옵션
- * @returns {void}
- */
-const updateImageWidth = (block, width) => {
-  block.width = width
-  normalizeTrailingTextBlock()
-  emitContent()
-}
-
-/**
- * 갤러리 이미지 삭제
- * @param {Object} block - 갤러리 블록
- * @param {number} imageIndex - 이미지 인덱스
- * @returns {void}
- */
-const removeGalleryImage = (block, imageIndex) => {
-  block.images.splice(imageIndex, 1)
-  normalizeTrailingTextBlock()
-  emitContent()
-}
-
-/**
- * 갤러리 이미지 드래그 시작
- * @param {DragEvent} event - 드래그 이벤트
- * @param {Object} block - 갤러리 블록
- * @param {number} imageIndex - 이미지 인덱스
- * @returns {void}
- */
-const startGalleryImageDrag = (event, block, imageIndex) => {
-  draggingGalleryImage.value = {
-    blockId: block.id,
-    imageIndex
-  }
-  event.dataTransfer.effectAllowed = 'move'
-  event.dataTransfer.setData('text/plain', `${block.id}:${imageIndex}`)
-}
-
-/**
- * 갤러리 이미지 드래그 종료
- * @returns {void}
- */
-const finishGalleryImageDrag = () => {
-  draggingGalleryImage.value = null
-  galleryDragTarget.value = null
-}
-
-/**
- * 갤러리 이미지 삽입 위치 표시
- * @param {DragEvent} event - 드래그 이벤트
- * @param {Object} block - 갤러리 블록
- * @param {number} imageIndex - 이미지 인덱스
- * @returns {void}
- */
-const updateGalleryImageDropTarget = (event, block, imageIndex) => {
-  const source = draggingGalleryImage.value
-
-  if (!source || source.blockId !== block.id) {
-    return
-  }
-
-  const rect = event.currentTarget.getBoundingClientRect()
-  galleryDragTarget.value = {
-    blockId: block.id,
-    imageIndex,
-    position: event.clientX < rect.left + rect.width / 2 ? 'before' : 'after'
-  }
-}
-
-/**
- * 갤러리 이미지 순서 변경
- * @param {DragEvent} event - 드롭 이벤트
- * @param {Object} block - 갤러리 블록
- * @param {number} targetIndex - 대상 인덱스
- * @returns {void}
- */
-const dropGalleryImage = (event, block, targetIndex) => {
-  const source = draggingGalleryImage.value
-  const target = galleryDragTarget.value
-
-  if (!source || source.blockId !== block.id || source.imageIndex === targetIndex) {
-    return
-  }
-
-  let nextTargetIndex = target?.blockId === block.id && target.position === 'after'
-    ? targetIndex + 1
-    : targetIndex
-
-  if (source.imageIndex < nextTargetIndex) {
-    nextTargetIndex -= 1
-  }
-
-  if (source.imageIndex === nextTargetIndex) {
-    finishGalleryImageDrag()
-    return
-  }
-
-  const [image] = block.images.splice(source.imageIndex, 1)
-  block.images.splice(nextTargetIndex, 0, image)
-  finishGalleryImageDrag()
-  normalizeTrailingTextBlock()
-  emitContent()
-}
-
-/**
- * 슬래시 메뉴 선택을 아래로 이동
- * @param {KeyboardEvent} event - 키보드 이벤트
- * @returns {void}
- */
-const highlightNextCommand = (event) => {
-  const block = editorBlocks.value[activeBlockIndex.value]
-
-  if (!block?.text?.startsWith('/')) {
-    return
-  }
-
-  syncTextBlockFromDom(activeBlockIndex.value)
-
-  if (!visibleCommands.value.length) {
-    return
-  }
-
-  event.preventDefault()
-  highlightedCommandIndex.value = (highlightedCommandIndex.value + 1) % visibleCommands.value.length
-}
-
-/**
- * 슬래시 메뉴 선택을 위로 이동
- * @param {KeyboardEvent} event - 키보드 이벤트
- * @returns {void}
- */
-const highlightPreviousCommand = (event) => {
-  const block = editorBlocks.value[activeBlockIndex.value]
-
-  if (!block?.text?.startsWith('/')) {
-    return
-  }
-
-  syncTextBlockFromDom(activeBlockIndex.value)
-
-  if (!visibleCommands.value.length) {
-    return
-  }
-
-  event.preventDefault()
-  highlightedCommandIndex.value = highlightedCommandIndex.value === 0
-    ? visibleCommands.value.length - 1
-    : highlightedCommandIndex.value - 1
-}
-
-/**
- * 현재 하이라이트된 슬래시 메뉴 항목을 스크롤 영역에 맞춘다.
- * @returns {void}
- */
-const scrollHighlightedCommandIntoView = () => {
-  nextTick(() => {
-    if (!activeBlockId.value || !visibleCommands.value.length) {
-      return
-    }
-
-    const row = document.querySelector(`[data-editor-block-id="${activeBlockId.value}"]`)
-    const menu = row?.querySelector('.admin-block-editor__slash-menu')
-    const highlightedItem = row?.querySelector('.admin-block-editor__slash-item--active')
-
-    if (!menu || !highlightedItem) {
-      return
-    }
-
-    highlightedItem.scrollIntoView({
-      block: 'nearest'
-    })
-  })
-}
-
-/**
- * 일반 본문 블록 방향키 이동 처리
- * @param {KeyboardEvent} event - 키보드 이벤트
- * @param {number} index - 현재 블록 인덱스
- * @param {'up'|'down'} direction - 이동 방향
- * @returns {void}
- */
-const navigateAcrossBlocks = (event, index, direction) => {
-  const currentBlock = editorBlocks.value[index]
-
-  if (!currentBlock || currentBlock.text.startsWith('/')) {
-    return
-  }
-
-  const currentElement = blockRefs.value[index]
-  if (!currentElement) {
-    return
-  }
-
-  const isBoundary = direction === 'up'
-    ? isCaretOnBoundary(currentElement, 'start')
-    : isCaretOnBoundary(currentElement, 'end')
-
-  if (!isBoundary) {
-    return
-  }
-
-  const nextIndex = direction === 'up' ? index - 1 : index + 1
-  if (nextIndex < 0 || nextIndex >= editorBlocks.value.length) {
-    return
-  }
-
-  event.preventDefault()
-  const targetBlock = editorBlocks.value[nextIndex]
-  if (isTextBlock(targetBlock)) {
-    focusBlock(nextIndex, direction === 'up' ? 'end' : 'start')
-    return
-  }
-
-  focusStructuredBlock(nextIndex)
-}
-
-/**
- * 엔터 키로 다음 블록 생성
- * @param {KeyboardEvent} event - 키보드 이벤트
- * @param {number} index - 블록 인덱스
- * @returns {void}
- */
-const handleEnter = (event, index) => {
-  enableKeyboardPriorityMode()
-
-  const currentBlock = syncTextBlockFromDom(index)
-
-  if (isComposingText.value || event.isComposing || event.keyCode === 229) {
-    event.preventDefault()
-
-    if (event.shiftKey && isTextBlock(currentBlock) && currentBlock.type !== 'code') {
-      pendingSoftLineBreakIndex.value = index
-    }
-
-    if (!event.shiftKey && (currentBlock.text || '').startsWith('/')) {
-      pendingSlashCommandIndex.value = index
-    } else {
-      pendingSlashCommandIndex.value = -1
-    }
-
-    return
-  }
-
-  if (currentBlock.type === 'code') {
-    return
-  }
-
-  if (event.shiftKey && isTextBlock(currentBlock) && currentBlock.type !== 'code') {
-    event.preventDefault()
-    insertSoftLineBreak(index)
-    return
-  }
-
-  const trimmedText = (currentBlock.text || '').trim()
-  const canApplySlashCommand = currentBlock.text.startsWith('/')
-    && visibleCommands.value.length > 0
-    && trimmedText !== '/'
-    && trimmedText !== '//'
-
-  if (canApplySlashCommand) {
-    event.preventDefault()
-    const command = highlightedCommand.value || visibleCommands.value[0]
-
-    if (command) {
-      applyCommand(command)
-    }
-
-    return
-  }
-
-  event.preventDefault()
-
-  if (['divider', 'image', 'gallery', 'toggle', 'embed'].includes(currentBlock.type)) {
-    editorBlocks.value.splice(index + 1, 0, createEditorBlock())
-    normalizeTrailingTextBlock()
-    emitContent()
-    focusBlock(index + 1)
-    return
-  }
-
-  if (!currentBlock.text.trim() && !['paragraph', 'callout'].includes(currentBlock.type)) {
-    currentBlock.type = 'paragraph'
-    currentBlock.level = null
-    normalizeTrailingTextBlock()
-    emitContent()
-    focusBlock(index)
-    return
-  }
-
-  const nextType = currentBlock.type === 'list' ? 'list' : 'paragraph'
-  editorBlocks.value.splice(index + 1, 0, createEditorBlock(nextType))
-  normalizeTrailingTextBlock()
-  emitContent()
-  focusBlock(index + 1)
-}
-
-/**
- * 백스페이스 키로 빈 블록 삭제
- * @param {KeyboardEvent} event - 키보드 이벤트
- * @param {number} index - 블록 인덱스
- * @returns {void}
- */
-const handleBackspace = (event, index) => {
-  const block = editorBlocks.value[index]
-
-  if ((isTextBlock(block) && block.text) || editorBlocks.value.length <= 1) {
-    return
-  }
-
-  if (!isTextBlock(block) && (block.url || block.images.length || block.title || block.text)) {
-    return
-  }
-
-  event.preventDefault()
-  editorBlocks.value.splice(index, 1)
-  normalizeTrailingTextBlock()
-  emitContent()
-  focusBlock(Math.max(index - 1, 0))
-}
-
-/**
- * 블록 인덱스 반환
- * @param {string} blockId - 블록 ID
- * @returns {number} 블록 인덱스
- */
-const getBlockIndex = (blockId) => editorBlocks.value.findIndex((block) => block.id === blockId)
-
-/**
- * 포커스 이탈 시 자동 정리할 구조형 블록인지 확인
- * @param {Object|undefined} block - 에디터 블록
- * @returns {boolean} 자동 정리 대상 여부
- */
-const isDiscardableStructuredBlock = (block) => {
-  if (!block) {
-    return false
-  }
-
-  if (block.type === 'image') {
-    return !block.url
-  }
-
-  if (block.type === 'gallery') {
-    return !block.images.length
-  }
-
-  return false
-}
-
-/**
- * 다른 블록으로 이동할 때 미사용 구조형 블록을 정리
- * @param {string} nextBlockId - 다음 활성 블록 ID
- * @returns {void}
- */
-const cleanupUnusedStructuredBlockOnActivate = (nextBlockId) => {
-  const previousActiveBlockId = activeBlockId.value
-
-  if (!previousActiveBlockId || previousActiveBlockId === nextBlockId) {
-    return
-  }
-
-  const previousBlockIndex = getBlockIndex(previousActiveBlockId)
-  const previousBlock = editorBlocks.value[previousBlockIndex]
-
-  if (!isDiscardableStructuredBlock(previousBlock) || editorBlocks.value.length <= 1) {
-    return
-  }
-
-  editorBlocks.value.splice(previousBlockIndex, 1)
-  normalizeTrailingTextBlock()
-  emitContent()
-}
-
-/**
- * 블록 선택 상태 적용
- * @param {Object} block - 선택할 블록
- * @returns {void}
- */
-const selectBlock = (block) => {
-  selectedBlockId.value = block.id
-  activeBlockId.value = block.id
-  slashQuery.value = ''
-}
-
-/**
- * 지정 블록 삭제
- * @param {number} index - 삭제할 블록 인덱스
- * @returns {void}
- */
-const deleteBlock = (index) => {
-  if (index < 0) {
-    return
-  }
-
-  if (editorBlocks.value.length <= 1) {
-    editorBlocks.value.splice(0, 1, createEditorBlock())
-    selectedBlockId.value = ''
-    activeBlockId.value = editorBlocks.value[0].id
-    emitContent()
-    focusBlock(0)
-    return
-  }
-
-  editorBlocks.value.splice(index, 1)
-  selectedBlockId.value = ''
-  normalizeTrailingTextBlock()
-  emitContent()
-  focusBlock(Math.min(index, editorBlocks.value.length - 1))
-}
-
-/**
- * 선택한 블록 삭제 키 처리
- * @param {KeyboardEvent} event - 키보드 이벤트
- * @param {number} index - 삭제할 블록 인덱스
- * @returns {void}
- */
-const deleteSelectedBlock = (event, index) => {
-  event.preventDefault()
-  deleteBlock(index)
-}
-
-/**
- * 블록 드래그 시작 처리
- * @param {DragEvent} event - 드래그 이벤트
- * @param {Object} block - 드래그할 블록
- * @returns {void}
- */
-const startBlockDrag = (event, block) => {
-  draggingBlockId.value = block.id
-  selectedBlockId.value = block.id
-  dragTargetIndex.value = -1
-  dragTargetPosition.value = ''
-  event.dataTransfer.effectAllowed = 'move'
-  event.dataTransfer.setData('text/plain', block.id)
-}
-
-/**
- * 블록 드래그 중 드롭 위치 표시 갱신
- * @param {DragEvent} event - 드래그 이벤트
- * @param {number} targetIndex - 드래그 중인 대상 인덱스
- * @returns {void}
- */
-const updateBlockDropTarget = (event, targetIndex) => {
-  if (!draggingBlockId.value) {
-    return
-  }
-
-  event.preventDefault()
-  event.dataTransfer.dropEffect = 'move'
-  const rect = event.currentTarget.getBoundingClientRect()
-  dragTargetIndex.value = targetIndex
-  dragTargetPosition.value = event.clientY < rect.top + rect.height / 2 ? 'before' : 'after'
-}
-
-/**
- * 블록 드래그 상태 초기화
- * @returns {void}
- */
-const clearBlockDragState = () => {
-  draggingBlockId.value = ''
-  dragTargetIndex.value = -1
-  dragTargetPosition.value = ''
-}
-
-/**
- * 현재 드롭 위치 기준으로 블록 이동
- * @param {string} draggedId - 이동할 블록 ID
- * @param {number} targetIndex - 이동 대상 인덱스
- * @param {string} targetPosition - 이동 위치
- * @returns {boolean} 이동 여부
- */
-const moveDraggedBlock = (draggedId, targetIndex, targetPosition) => {
-  const sourceIndex = getBlockIndex(draggedId)
-  const insertionIndex = targetPosition === 'after' ? targetIndex + 1 : targetIndex
-
-  if (sourceIndex < 0 || targetIndex < 0) {
-    return false
-  }
-
-  const nextTargetIndex = sourceIndex < insertionIndex ? insertionIndex - 1 : insertionIndex
-
-  if (sourceIndex === nextTargetIndex) {
-    return false
-  }
-
-  const [draggedBlock] = editorBlocks.value.splice(sourceIndex, 1)
-  editorBlocks.value.splice(nextTargetIndex, 0, draggedBlock)
-  selectedBlockId.value = draggedBlock.id
-  normalizeTrailingTextBlock()
-  emitContent()
-
-  return true
-}
-
-/**
- * 블록 드롭 이동 처리
- * @param {DragEvent} event - 드롭 이벤트
- * @param {number} targetIndex - 이동 대상 인덱스
- * @returns {void}
- */
-const dropBlock = (event, targetIndex) => {
-  event.preventDefault()
-  const draggedId = event.dataTransfer.getData('text/plain') || draggingBlockId.value
-  const targetPosition = dragTargetIndex.value === targetIndex ? dragTargetPosition.value : 'after'
-
-  moveDraggedBlock(draggedId, targetIndex, targetPosition)
-  clearBlockDragState()
-}
-
-/**
- * 블록 드래그 종료 처리
- * @returns {void}
- */
-const finishBlockDrag = () => {
-  if (draggingBlockId.value && dragTargetIndex.value >= 0 && dragTargetPosition.value) {
-    moveDraggedBlock(draggingBlockId.value, dragTargetIndex.value, dragTargetPosition.value)
-  }
-
-  clearBlockDragState()
-}
-
-/**
- * 현재 블록 활성화
- * @param {Object} block - 에디터 블록
- * @returns {void}
- */
-const activateBlock = (block) => {
-  cleanupUnusedStructuredBlockOnActivate(block.id)
-
-  const index = editorBlocks.value.findIndex((item) => item.id === block.id)
-  activeBlockId.value = block.id
-  selectedBlockId.value = ''
-  updateSlashQuery(block)
-  updateSlashMenuDirection(index)
-}
-
-/**
- * 블록 placeholder 표시 여부 반환
- * @param {Object} block - 에디터 블록
- * @param {number} index - 블록 인덱스
- * @returns {boolean} placeholder 표시 여부
- */
-const shouldShowPlaceholder = (block, index) => !block.text && (
-  (index === 0 && editorBlocks.value.length === 1) ||
-  index === editorBlocks.value.length - 1
-)
-
-/**
- * 텍스트 필드 변경 내용을 저장용 콘텐츠에 반영
- * @returns {void}
- */
-const updateStructuredBlock = () => {
-  normalizeTrailingTextBlock()
-  emitContent()
-}
-
-/**
- * 콜아웃 이모지 표시 상태를 전환
- * @param {Object} block - 콜아웃 블록
- * @returns {void}
- */
-const toggleCalloutEmoji = (block) => {
-  block.calloutEmojiEnabled = !block.calloutEmojiEnabled
-  if (!block.calloutEmojiEnabled) {
-    calloutEmojiPickerBlockId.value = ''
-  }
-  updateStructuredBlock()
-}
-
-/**
- * 콜아웃 이모지를 변경
- * @param {Object} block - 콜아웃 블록
- * @param {string} emoji - 이모지 문자열
- * @returns {void}
- */
-const updateCalloutEmoji = (block, emoji) => {
-  block.calloutEmoji = emoji || ''
-  block.calloutEmojiEnabled = true
-  updateStructuredBlock()
-}
-
-/**
- * 콜아웃 배경 프리셋을 변경
- * @param {Object} block - 콜아웃 블록
- * @param {string} background - 배경 프리셋 값
- * @returns {void}
- */
-const updateCalloutBackground = (block, background) => {
-  block.calloutBackground = background
-  calloutColorPopoverBlockId.value = ''
-  updateStructuredBlock()
-}
-
-/**
- * 콜아웃 이모지 팝업 토글
- * @param {Object} block - 콜아웃 블록
- * @returns {void}
- */
-const toggleCalloutEmojiPicker = (block) => {
-  calloutEmojiPickerBlockId.value = calloutEmojiPickerBlockId.value === block.id
-    ? ''
-    : block.id
-}
-
-/**
- * 콜아웃 배경색 팝오버 토글
- * @param {Object} block - 콜아웃 블록
- * @returns {void}
- */
-const toggleCalloutColorPopover = (block) => {
-  calloutColorPopoverBlockId.value = calloutColorPopoverBlockId.value === block.id
-    ? ''
-    : block.id
-}
-
-/**
- * 콜아웃 이모지 입력값 적용
- * @param {Object} block - 콜아웃 블록
- * @param {Event} event - 입력 이벤트
- * @returns {void}
- */
-const updateCalloutEmojiFromInput = (block, event) => {
-  if (calloutEmojiComposingBlockId.value === block.id || event?.isComposing) {
-    return
-  }
-
-  const rawValue = String(event.target?.value || event.target?.textContent || '')
-  block.calloutEmoji = rawValue
-  block.calloutEmojiEnabled = true
-  updateStructuredBlock()
-}
-
-/**
- * 콜아웃 이모지 입력 조합 시작 처리
- * @param {Object} block - 콜아웃 블록
- * @returns {void}
- */
-const startCalloutEmojiComposition = (block) => {
-  calloutEmojiComposingBlockId.value = block.id
-}
-
-/**
- * 콜아웃 이모지 입력 조합 종료 처리
- * @param {Object} block - 콜아웃 블록
- * @param {CompositionEvent} event - 조합 종료 이벤트
- * @returns {void}
- */
-const finishCalloutEmojiComposition = (block, event) => {
-  calloutEmojiComposingBlockId.value = ''
-  updateCalloutEmojiFromInput(block, event)
-}
-
-/**
- * 콜아웃 이모지 입력을 1문자 슬롯으로 정규화
- * @param {Object} block - 콜아웃 블록
- * @param {FocusEvent} event - blur 이벤트
- * @returns {void}
- */
-const normalizeCalloutEmojiInput = (block, event) => {
-  const rawValue = String(block.calloutEmoji || '').trim()
-  const graphemes = typeof Intl !== 'undefined' && Intl.Segmenter
-    ? Array.from(new Intl.Segmenter('ko', { granularity: 'grapheme' }).segment(rawValue), (segment) => segment.segment)
-    : Array.from(rawValue)
-  const nextValue = graphemes.length ? graphemes[graphemes.length - 1] : ''
-
-  block.calloutEmoji = nextValue
-  updateStructuredBlock()
-
-  if (event?.target && 'value' in event.target) {
-    event.target.value = nextValue
-  }
-}
-
-watch(() => props.modelValue, (value) => {
-  if (isApplyingExternalValue.value) {
-    return
-  }
-
-  const currentValue = serializeBlocks()
-
-  if (value === currentValue && editorBlocks.value.length) {
-    return
-  }
-
-  editorBlocks.value = parseMarkdownToBlocks(value)
-  normalizeTrailingTextBlock()
-}, { immediate: true })
-
-watch(editorBlocks, () => {
-  normalizeTrailingTextBlock()
-  isApplyingExternalValue.value = true
-  nextTick(() => {
-    isApplyingExternalValue.value = false
-  })
-}, { deep: true })
-
-watch(
-  [highlightedCommandIndex, () => visibleCommands.value.length, activeBlockId],
-  () => {
-    scrollHighlightedCommandIntoView()
-  }
-)
-
-watch(activeCalloutBlock, (nextBlock) => {
-  if (!nextBlock) {
-    calloutEmojiPickerBlockId.value = ''
-    calloutColorPopoverBlockId.value = ''
-  }
-})
-
-defineExpose({
-  focusFirstBlock: () => focusBlock(0)
-})
-</script>
-
-<template>
-  <div
-    class="admin-block-editor bg-transparent py-4 text-ink"
-    :class="{ 'admin-block-editor--keyboard-priority': isKeyboardPriorityMode }"
-    @mousemove="handleEditorMouseMove"
-  >
-    <div class="admin-block-editor__surface post-prose">
-      <div
-        v-for="(block, index) in editorBlocks"
-        :key="block.id"
-        class="admin-block-editor__row group/block relative isolate rounded"
-        :class="{
-          'admin-block-editor__row--selected': selectedBlockId === block.id,
-          'admin-block-editor__row--dragging opacity-50': draggingBlockId === block.id,
-          'admin-block-editor__row--drop-before': dragTargetIndex === index && dragTargetPosition === 'before',
-          'admin-block-editor__row--drop-after': dragTargetIndex === index && dragTargetPosition === 'after',
-          'admin-block-editor__row--callout': block.type === 'callout',
-          'admin-block-editor__row--menu-open z-30': visibleCommands.length && activeBlockId === block.id,
-          'admin-block-editor__row--text': isTextBlock(block),
-          'admin-block-editor__row--structure': !isTextBlock(block)
-        }"
-        :data-editor-block-id="block.id"
-        @dragover="updateBlockDropTarget($event, index)"
-        @drop="dropBlock($event, index)"
-      >
-        <button
-          class="admin-block-editor__handle absolute -left-9 bottom-0 top-0 z-10 flex w-5 cursor-grab items-stretch justify-center rounded opacity-0 outline-none transition-opacity duration-150 focus:opacity-100 active:cursor-grabbing"
-          type="button"
-          draggable="true"
-          aria-label="블록 이동 및 선택"
-          @click.stop="selectBlock(block)"
-          @keydown.delete="deleteSelectedBlock($event, index)"
-          @keydown.backspace="deleteSelectedBlock($event, index)"
-          @dragstart="startBlockDrag($event, block)"
-          @dragend="finishBlockDrag"
-        >
-          <span class="admin-block-editor__handle-container" aria-hidden="true">
-            <span class="admin-block-editor__handle-grabber"></span>
-          </span>
-        </button>
-
-        <hr v-if="block.type === 'divider'" class="admin-block-editor__divider border-line">
-
-        <figure
-          v-else-if="block.type === 'image'"
-          class="admin-block-editor__media group"
-          :class="getImageWidthClass(block.width)"
-          tabindex="0"
-          @focus="activateBlock(block)"
-          @click="activateBlock(block)"
-          @keydown.enter="handleEnter($event, index)"
-          @keydown.backspace="handleBackspace($event, index)"
-        >
-          <div v-if="block.url" class="admin-block-editor__image-frame relative overflow-hidden rounded bg-surface">
-            <img class="admin-block-editor__image w-full object-cover" :src="block.url" :alt="block.alt">
-            <div class="admin-block-editor__media-toolbar absolute inset-x-3 top-3 flex flex-wrap items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100 group-focus:opacity-100">
-              <button
-                class="admin-block-editor__media-option rounded bg-white/95 px-3 py-1 text-xs font-semibold text-ink shadow"
-                type="button"
-                @click="openMediaPicker(block)"
-              >
-                미디어 선택
-              </button>
-              <button
-                v-for="option in imageWidthOptions"
-                :key="option.value"
-                class="admin-block-editor__media-option rounded bg-white/95 px-3 py-1 text-xs font-semibold shadow"
-                :class="block.width === option.value ? 'text-ink ring-1 ring-ink' : 'text-muted'"
-                type="button"
-                @click="updateImageWidth(block, option.value)"
-              >
-                {{ option.label }}
-              </button>
-            </div>
-          </div>
-          <div v-else class="admin-block-editor__upload grid gap-3 rounded border border-dashed border-line bg-surface px-6 py-14 text-center text-sm font-semibold text-muted">
-            <button class="admin-block-editor__media-select rounded border border-line bg-white px-3 py-2 text-ink" type="button" @click="openMediaPicker(block)">
-              미디어 선택
-            </button>
-            <label class="admin-block-editor__upload-label cursor-pointer rounded bg-[#15171a] px-3 py-2 text-white">
-              {{ isUploading(block.id) ? '업로드 중' : '새 이미지 업로드' }}
-              <input class="sr-only" type="file" accept="image/*" @change="handleImageUpload($event, block)">
-            </label>
-          </div>
-          <input
-            v-if="block.url"
-            v-model="block.alt"
-            class="admin-block-editor__caption mt-3 hidden w-full border-0 bg-transparent text-center text-sm text-muted outline-none placeholder:text-soft group-hover:block group-focus-within:block"
-            type="text"
-            placeholder="이미지 설명"
-            @input="emitContent"
-          >
-        </figure>
-
-        <figure
-          v-else-if="block.type === 'gallery'"
-          class="admin-block-editor__gallery group"
-          tabindex="0"
-          @focus="activateBlock(block)"
-          @click="activateBlock(block)"
-          @keydown.enter="handleEnter($event, index)"
-          @keydown.backspace="handleBackspace($event, index)"
-        >
-          <div
-            v-if="block.images.length"
-            class="admin-block-editor__gallery-grid grid gap-2"
-            :style="{ gridTemplateColumns: `repeat(${getGalleryColumnCount(block)}, minmax(0, 1fr))` }"
-          >
-            <div
-              v-for="(image, imageIndex) in block.images"
-              :key="`${block.id}-${image.url}`"
-              class="admin-block-editor__gallery-item group/item relative overflow-hidden rounded bg-surface"
-              :class="{
-                'opacity-50': draggingGalleryImage?.blockId === block.id && draggingGalleryImage?.imageIndex === imageIndex,
-                'admin-block-editor__gallery-item--drop-before': galleryDragTarget?.blockId === block.id && galleryDragTarget?.imageIndex === imageIndex && galleryDragTarget?.position === 'before',
-                'admin-block-editor__gallery-item--drop-after': galleryDragTarget?.blockId === block.id && galleryDragTarget?.imageIndex === imageIndex && galleryDragTarget?.position === 'after'
-              }"
-              draggable="true"
-              @dragstart.stop="startGalleryImageDrag($event, block, imageIndex)"
-              @dragover.prevent.stop="updateGalleryImageDropTarget($event, block, imageIndex)"
-              @drop.prevent.stop="dropGalleryImage($event, block, imageIndex)"
-              @dragend="finishGalleryImageDrag"
-            >
-              <img class="admin-block-editor__gallery-image aspect-[4/3] w-full object-cover" :src="image.url" :alt="image.alt">
-              <span class="admin-block-editor__gallery-drag-hint pointer-events-none absolute left-2 top-2 rounded bg-black/70 px-2 py-1 text-xs font-semibold text-white opacity-0 transition-opacity group-hover/item:opacity-100">
-                드래그
-              </span>
-              <button
-                class="admin-block-editor__gallery-remove absolute right-2 top-2 rounded bg-white/95 px-2 py-1 text-xs font-semibold text-ink opacity-0 shadow transition-opacity group-hover/item:opacity-100"
-                type="button"
-                @click="removeGalleryImage(block, imageIndex)"
-              >
-                삭제
-              </button>
-            </div>
-          </div>
-          <div class="admin-block-editor__gallery-actions mt-3 flex flex-wrap gap-2">
-            <button class="admin-block-editor__gallery-select rounded border border-line bg-white px-3 py-2 text-sm font-semibold text-ink" type="button" @click="openMediaPicker(block)">
-              미디어 선택
-            </button>
-            <label class="admin-block-editor__gallery-upload inline-flex cursor-pointer rounded bg-[#15171a] px-3 py-2 text-sm font-semibold text-white">
-              {{ isUploading(block.id) ? '업로드 중' : block.images.length ? '새 이미지 추가' : '갤러리 이미지 업로드' }}
-              <input class="sr-only" type="file" accept="image/*" multiple @change="handleGalleryUpload($event, block)">
-            </label>
-          </div>
-        </figure>
-
-        <section
-          v-else-if="block.type === 'callout'"
-          class="admin-block-editor__callout-editor relative"
-          @focusin="activateBlock(block)"
-          @click="activateBlock(block)"
-          @keydown.enter="handleEnter($event, index)"
-          @keydown.backspace="handleBackspace($event, index)"
-        >
-          <ProseCallout
-            :emoji-enabled="false"
-            :background="block.calloutBackground"
-          >
-            <div class="flex items-start gap-2">
-              <button
-                v-if="block.calloutEmojiEnabled"
-                class="inline-flex size-9 shrink-0 items-center justify-center cursor-pointer rounded-md text-xl text-[#1f2328] hover:bg-[#7f8da1]/20"
-                type="button"
-                @click.stop="toggleCalloutEmojiPicker(block)"
-              >
-                {{ block.calloutEmoji || '💡' }}
-              </button>
-              <div
-                :ref="(element) => setBlockRef(element, index)"
-                class="admin-block-editor__callout-input w-full bg-transparent text-[15px] leading-8 text-[#1f2328] outline-none"
-                contenteditable="true"
-                spellcheck="true"
-                data-placeholder="콜아웃 텍스트 입력은 이렇게"
-                :data-show-placeholder="!block.text"
-                @focus="activateBlock(block)"
-                @input="updateBlockText($event, index)"
-                @compositionstart="startTextComposition"
-                @compositionend="finishTextComposition($event, index)"
-                @keydown.enter="handleEnter($event, index)"
-                @keydown.down="block.text.startsWith('/') ? highlightNextCommand($event) : navigateAcrossBlocks($event, index, 'down')"
-                @keydown.up="block.text.startsWith('/') ? highlightPreviousCommand($event) : navigateAcrossBlocks($event, index, 'up')"
-                @keydown.backspace="handleBackspace($event, index)"
-              />
-            </div>
-          </ProseCallout>
-
-          <div
-            v-if="activeCalloutBlock?.id === block.id"
-            class="admin-block-editor__callout-settings absolute left-full top-0 z-[70] ml-4 flex w-[320px] flex-col gap-3 rounded-lg bg-white p-6 shadow-lg"
-          >
-            <label class="flex w-full items-center justify-between">
-              <div class="text-sm font-medium text-ink">Emoji</div>
-              <button
-                class="relative inline-flex h-4 w-7 items-center rounded-full transition-colors"
-                :class="block.calloutEmojiEnabled ? 'bg-black' : 'bg-[#d0d7de]'"
-                type="button"
-                @click="toggleCalloutEmoji(block)"
-              >
-                <span
-                  class="absolute size-3 rounded-full bg-white transition-transform"
-                  :class="block.calloutEmojiEnabled ? 'translate-x-[12px]' : 'translate-x-[2px]'"
-                ></span>
-              </button>
-            </label>
-
-            <div class="relative flex w-full items-center justify-between">
-              <div class="text-sm font-medium text-ink">Background</div>
-                <button
-                class="relative size-6 shrink-0 cursor-pointer rounded-full p-[2px]"
-                type="button"
-                @click="toggleCalloutColorPopover(block)"
-              >
-                <span
-                  class="absolute inset-0 rounded-full"
-                  style="background: conic-gradient(rgb(255,0,0), rgb(255,0,191), rgb(128,0,255), rgb(0,64,255), rgb(0,255,255), rgb(0,255,64), rgb(128,255,0), rgb(255,191,0), rgb(255,0,0)); mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0); padding:3px;"
-                ></span>
-                <span
-                  class="relative block size-full rounded-full border-2 border-white ring-1 ring-black/10"
-                  :style="{ background: getCalloutBackgroundSwatch(block.calloutBackground) }"
-                ></span>
-              </button>
-
-              <div
-                v-if="calloutColorPopoverBlockId === block.id"
-                class="absolute -right-2 bottom-full mb-2 z-[90] rounded-lg bg-white px-3 py-2 shadow"
-              >
-                <ul class="flex items-center gap-1">
-                  <li v-for="backgroundOption in calloutBackgroundOptions" :key="`color-pop-${block.id}-${backgroundOption.value}`">
-                    <button
-                      class="group relative flex size-6 cursor-pointer items-center justify-center rounded-full border-2"
-                      :class="block.calloutBackground === backgroundOption.value ? 'border-[#22c55e]' : 'border-transparent'"
-                      type="button"
-                      :aria-label="backgroundOption.label"
-                      @click="updateCalloutBackground(block, backgroundOption.value)"
-                    >
-                      <span
-                        class="size-[1.4rem] rounded-full border border-black/10"
-                        :style="{ background: getCalloutBackgroundSwatch(backgroundOption.value) }"
-                      ></span>
-                    </button>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-            <div v-if="block.calloutEmojiEnabled && calloutEmojiPickerBlockId === block.id" class="rounded-lg border border-line bg-white p-3">
-              <p class="mb-2 text-xs text-muted">이모지를 붙여넣거나 시스템 이모지 입력을 사용하세요</p>
-              <input
-                class="w-16 rounded-lg border border-line px-2 py-2 text-center text-2xl text-[#1f2328] outline-none"
-                type="text"
-                :value="block.calloutEmoji || ''"
-                maxlength="8"
-                spellcheck="false"
-                @input="updateCalloutEmojiFromInput(block, $event)"
-                @compositionstart="startCalloutEmojiComposition(block)"
-                @compositionend="finishCalloutEmojiComposition(block, $event)"
-                @blur="normalizeCalloutEmojiInput(block, $event)"
-              >
-            </div>
-          </div>
-        </section>
-
-        <section
-          v-else-if="block.type === 'toggle'"
-          class="admin-block-editor__toggle rounded border border-line bg-paper p-5"
-          @focusin="activateBlock(block)"
-          @click="activateBlock(block)"
-          @keydown.enter="handleEnter($event, index)"
-          @keydown.backspace="handleBackspace($event, index)"
-        >
-          <input
-            v-model="block.title"
-            class="admin-block-editor__toggle-title w-full border-0 bg-transparent text-base font-semibold text-ink outline-none placeholder:text-soft"
-            type="text"
-            placeholder="토글 제목"
-            @input="updateStructuredBlock"
-          >
-          <textarea
-            v-model="block.text"
-            class="admin-block-editor__toggle-body mt-3 min-h-24 w-full resize-y border-0 bg-transparent text-sm leading-7 text-ink outline-none placeholder:text-soft"
-            placeholder="펼쳤을 때 보일 내용을 입력하세요"
-            @input="updateStructuredBlock"
-            @keydown.enter.stop
-          />
-        </section>
-
-        <section
-          v-else-if="block.type === 'embed'"
-          class="admin-block-editor__embed rounded border border-dashed border-line bg-surface p-5"
-          @focusin="activateBlock(block)"
-          @click="activateBlock(block)"
-          @keydown.enter="handleEnter($event, index)"
-          @keydown.backspace="handleBackspace($event, index)"
-        >
-          <input
-            v-model="block.url"
-            class="admin-block-editor__embed-url w-full border-0 bg-transparent text-base font-semibold text-ink outline-none placeholder:text-soft"
-            type="text"
-            placeholder="https://www.youtube.com/watch?v=... 또는 iframe HTML"
-            @input="updateStructuredBlock"
-          >
-          <p class="admin-block-editor__embed-help mt-2 text-xs text-muted">
-            URL 또는 iframe HTML은 공개 화면에서 HTML 블록으로 표시됩니다.
-          </p>
-        </section>
-
-        <component
-          :is="getBlockTag(block)"
-          v-else
-          :ref="(element) => setBlockRef(element, index)"
-          :class="getBlockClass(block)"
-          contenteditable="true"
-          spellcheck="true"
-          :data-placeholder="index === 0 ? '본문을 입력하세요...' : '/ 를 눌러 블록 선택'"
-          :data-show-placeholder="shouldShowPlaceholder(block, index)"
-          @focus="activateBlock(block)"
-          @input="updateBlockText($event, index)"
-          @compositionstart="startTextComposition"
-          @compositionend="finishTextComposition($event, index)"
-          @keydown.enter="handleEnter($event, index)"
-          @keydown.down="block.text.startsWith('/') ? highlightNextCommand($event) : navigateAcrossBlocks($event, index, 'down')"
-          @keydown.up="block.text.startsWith('/') ? highlightPreviousCommand($event) : navigateAcrossBlocks($event, index, 'up')"
-          @keydown.backspace="handleBackspace($event, index)"
-        />
-
-        <button
-          v-if="block.type === 'divider'"
-          class="admin-block-editor__divider-button w-full rounded py-2 text-left text-xs font-semibold text-muted"
-          type="button"
-          @click="activateBlock(block)"
-          @keydown.enter="handleEnter($event, index)"
-          @keydown.backspace="handleBackspace($event, index)"
-        >
-          구분선
-        </button>
-
-        <div
-          v-if="visibleCommands.length && activeBlockId === block.id"
-          class="admin-block-editor__slash-menu absolute left-0 z-20 w-72 max-h-[min(52vh,360px)] overflow-y-auto rounded border border-line bg-white shadow-lg"
-          :class="slashMenuDirection === 'up' ? 'bottom-full mb-2' : 'top-full mt-2'"
-        >
-          <button
-            v-for="(command, commandIndex) in visibleCommands"
-            :key="`${command.type}-${command.level || 'default'}`"
-            class="admin-block-editor__slash-item grid w-full gap-0.5 px-4 py-3 text-left hover:bg-surface"
-            :class="commandIndex === highlightedCommandIndex ? 'admin-block-editor__slash-item--active bg-surface' : ''"
-            type="button"
-            @mousedown.prevent="applyCommand(command)"
-          >
-            <span class="admin-block-editor__slash-label text-sm font-semibold text-ink">{{ command.label }}</span>
-            <span class="admin-block-editor__slash-description text-xs text-muted">{{ command.description }}</span>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div
-      v-if="isMediaPickerOpen"
-      class="admin-block-editor__media-picker fixed inset-0 z-50 grid place-items-center bg-black/40 px-5 py-8"
-      role="dialog"
-      aria-modal="true"
-      @click.self="closeMediaPicker"
-    >
-      <section class="admin-block-editor__media-picker-panel max-h-[80vh] w-full max-w-4xl overflow-hidden bg-white text-ink shadow-xl">
-        <div class="admin-block-editor__media-picker-header flex items-center justify-between border-b border-line px-5 py-4">
-          <h2 class="admin-block-editor__media-picker-title text-lg font-semibold">
-            미디어 선택
-          </h2>
-          <button class="admin-block-editor__media-picker-close rounded border border-line px-3 py-1.5 text-sm font-semibold" type="button" @click="closeMediaPicker">
-            닫기
-          </button>
-        </div>
-        <div class="admin-block-editor__media-picker-body max-h-[62vh] overflow-y-auto p-5">
-          <p v-if="isLoadingMedia" class="admin-block-editor__media-picker-loading text-sm text-muted">
-            미디어를 불러오는 중입니다.
-          </p>
-          <div v-else-if="mediaItems.length" class="admin-block-editor__media-picker-grid grid grid-cols-2 gap-3 md:grid-cols-4">
-            <button
-              v-for="item in mediaItems"
-              :key="item.url"
-              class="admin-block-editor__media-picker-item relative overflow-hidden border bg-white text-left transition-colors"
-              :class="mediaPickerTarget?.type === 'gallery' && isGalleryMediaSelected(item) ? 'border-[#15171a] ring-2 ring-[#15171a]/20' : 'border-line hover:border-[#8e9cac]'"
-              type="button"
-              @click="selectMediaItem(item)"
-            >
-              <img class="admin-block-editor__media-picker-image aspect-[4/3] w-full bg-surface object-cover" :src="item.url" :alt="item.title">
-              <span
-                v-if="mediaPickerTarget?.type === 'gallery' && isGalleryMediaSelected(item)"
-                class="admin-block-editor__media-picker-selected absolute right-2 top-2 grid size-6 place-items-center rounded-full bg-[#15171a] text-xs font-bold text-white"
-                aria-hidden="true"
-              >
-                ✓
-              </span>
-              <span class="admin-block-editor__media-picker-name block truncate px-3 py-2 text-xs font-semibold text-ink">{{ item.name }}</span>
-            </button>
-          </div>
-          <p v-else class="admin-block-editor__media-picker-empty border border-dashed border-line p-8 text-center text-sm text-muted">
-            선택할 미디어가 없습니다.
-          </p>
-        </div>
-        <div
-          v-if="mediaPickerTarget?.type === 'gallery'"
-          class="admin-block-editor__media-picker-footer flex items-center justify-between gap-3 border-t border-line px-5 py-4"
-        >
-          <p class="admin-block-editor__media-picker-count text-sm text-muted">
-            {{ selectedGalleryMediaUrls.length }}개 선택됨
-          </p>
-          <div class="admin-block-editor__media-picker-actions flex gap-2">
-            <button class="admin-block-editor__media-picker-cancel rounded border border-line px-3 py-2 text-sm font-semibold text-ink" type="button" @click="closeMediaPicker">
-              취소
-            </button>
-            <button class="admin-block-editor__media-picker-apply rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white" type="button" @click="applyGalleryMediaSelection">
-              갤러리에 적용
-            </button>
-          </div>
-        </div>
-      </section>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.admin-block-editor__block:empty[data-show-placeholder="true"]::before {
-  color: var(--site-soft);
-  content: attr(data-placeholder);
-}
-
-.admin-block-editor__block {
-  color: #1f2328;
-}
-
-.admin-block-editor__row::before {
-  position: absolute;
-  inset: -4px -10px;
-  z-index: -1;
-  border-radius: 8px;
-  background: transparent;
-  content: "";
-  opacity: 0;
-  transform: scaleX(0.995);
-  transition:
-    background-color 160ms ease,
-    opacity 160ms ease,
-    transform 160ms ease;
-}
-
-.admin-block-editor__row::after {
-  position: absolute;
-  left: 0;
-  right: 0;
-  z-index: 20;
-  height: 3px;
-  border-radius: 999px;
-  background: #2eb6ea;
-  box-shadow: 0 0 0 1px rgba(46, 182, 234, 0.18);
-  content: "";
-  opacity: 0;
-  pointer-events: none;
-  transform: scaleX(0.98);
-  transition:
-    opacity 120ms ease,
-    transform 120ms ease;
-}
-
-.admin-block-editor:not(.admin-block-editor--keyboard-priority) .admin-block-editor__row:hover::before,
-.admin-block-editor__row--selected::before {
-  background: #eff1f2;
-  opacity: 1;
-  transform: scaleX(1);
-}
-
-.admin-block-editor__row--callout:hover::before,
-.admin-block-editor__row--callout.admin-block-editor__row--selected::before {
-  opacity: 0;
-}
-
-.admin-block-editor__row--drop-before::after {
-  top: -18px;
-  opacity: 1;
-  transform: scaleX(1);
-}
-
-.admin-block-editor__row--drop-after::after {
-  bottom: -18px;
-  opacity: 1;
-  transform: scaleX(1);
-}
-
-.admin-block-editor__handle {
-  min-height: 32px;
-}
-
-.admin-block-editor:not(.admin-block-editor--keyboard-priority) .admin-block-editor__row:hover .admin-block-editor__handle {
-  opacity: 1;
-}
-
-.admin-block-editor__handle-container {
-  display: flex;
-  width: 16px;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  padding: 6px 0;
-}
-
-.admin-block-editor__handle-grabber {
-  display: block;
-  width: 4px;
-  height: 20px;
-  border-radius: 999px;
-  background: #8d969f;
-  opacity: 0.72;
-  transition:
-    height 160ms ease,
-    background-color 160ms ease,
-    opacity 160ms ease;
-}
-
-.admin-block-editor:not(.admin-block-editor--keyboard-priority) .admin-block-editor__row:hover .admin-block-editor__handle-grabber,
-.admin-block-editor__row--selected .admin-block-editor__handle-grabber,
-.admin-block-editor__handle:focus .admin-block-editor__handle-grabber {
-  height: 100%;
-  background: #5d6670;
-  opacity: 1;
-}
-
-.admin-block-editor__row + .admin-block-editor__row--text {
-  margin-top: 32px;
-}
-
-.admin-block-editor__row + .admin-block-editor__row--structure {
-  margin-top: 32px;
-}
-
-.admin-block-editor__row--structure + .admin-block-editor__row--structure {
-  margin-top: 32px;
-}
-
-.admin-block-editor__code {
-  background: #15171a;
-  color: #f8fafc;
-  caret-color: #f8fafc;
-}
-
-.admin-block-editor__callout-input:empty[data-show-placeholder="true"]::before {
-  color: var(--site-soft);
-  content: attr(data-placeholder);
-}
-
-.admin-block-editor__gallery-item--drop-before::before,
-.admin-block-editor__gallery-item--drop-after::before {
-  position: absolute;
-  top: 8px;
-  bottom: 8px;
-  z-index: 20;
-  width: 4px;
-  border-radius: 999px;
-  background: #2eb6ea;
-  box-shadow:
-    0 0 0 3px rgba(46, 182, 234, 0.16),
-    0 6px 18px rgba(46, 182, 234, 0.35);
-  content: "";
-  pointer-events: none;
-}
-
-.admin-block-editor__gallery-item--drop-before::before {
-  left: 0;
-  transform: translateX(-50%);
-}
-
-.admin-block-editor__gallery-item--drop-after::before {
-  right: 0;
-  transform: translateX(50%);
-}
-</style>
diff --git a/docs/history.md b/docs/history.md
index 684e060..3013773 100644
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,3 +1,7 @@
+## 2026-07-23 v1.11.3 — 구형 블록 에디터 파일을 제거한다
+
+Markdown-first 에디터가 현재 게시물 작성 흐름을 담당하고 있고, `AdminBlockEditor.vue`는 실제 코드에서 더 이상 참조되지 않는다. 이전 동작을 되돌리기 위한 맥락은 Git 이력과 문서에 남아 있으므로, 실행 경로에 연결되지 않은 큰 컴포넌트 파일을 계속 보관하기보다 제거해 관리자 에디터 구조를 단순하게 유지한다.
+
 ## 2026-07-22 v1.11.0 — v1.10 구간을 minor로 마감하고 패치 기준을 다시 잡는다
 
 v1.10.0부터 v1.10.88까지 이어진 보안·백업·미디어 카탈로그·검증 보강을 공개 기록 `v1.11`로 묶고 관리 버전을 `1.11.0`으로 올린다. 이후 일상 수정은 `1.11.1`부터 패치로 쌓아, minor 단위 공지와 개발 버전 번호를 다시 맞춘다.
diff --git a/docs/map.md b/docs/map.md
index ea7dd0c..cf2665c 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -1,6 +1,6 @@
 # 파일-화면 매핑
 
-> 현재 문서는 구현 예정 파일 기준 매핑이다. 실제 파일이 생성되면 경로와 화면 연결을 즉시 갱신한다.
+> 현재 구현 기준으로 주요 파일과 화면·기능 연결을 정리한다.
 
 ## 레이아웃
 
@@ -183,7 +183,6 @@
 | components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, 게시글 작성과 같은 전체 화면 에디터·상단 저장 툴바·접이식 오른쪽 설정 패널, 저장 payload 기준 미저장 비교·라우트/브라우저 이탈 확인, 페이지 공개 상태 선택, HTML 문서 기본 모드, 홈 Pages 진열장 노출 메타와 등록된 페이지 섹션 검색형 선택, 빈 본문/`!`+Tab HTML 골격 자동 완성, 항상 보이는 일반 텍스트/HTML 모드 선택, 한글 제목 영문 슬러그 자동 변환, HTML textarea 커서 위치 파일 URL 삽입, HTML 태그 내부 스마트 따옴표 정규화 |
 | components/admin/AdminMarkdownEditor.vue | 관리자 글 Markdown-first 에디터, 라이브·소스 모드 `/` 슬래시 명령(`/표` 기본 표 템플릿 포함)·미디어 모달(이미지·갤러리·비디오·오디오·파일, 업로드 탭 기본·첫 순서, 업로드 완료 파일 자동 선택, 라이브러리 탭은 `/admin/api/media?paged=1` 서버 페이지 응답·파일명/사용처 제목 검색·번호형 페이지 이동, 카드·본문·라이트박스·Pages 커버 자동 생성 이미지 숨김, 원본 URL 선택 유지·갤러리 선택 순서 배지·목록 미리보기는 720px 본문 파생 이미지 또는 카드 썸네일 우선, 검색 결과 수와 무관한 고정 높이 패널, 업로드 중 중복 업로드·닫기 차단·로딩 표시), 코드 블록 본문 슬래시 명령 비활성화, 커서 블록 컨텍스트·선택 텍스트 색상 컨텍스트 `block-panel` emit, 에디터 본문 `Cmd/Ctrl+Z` 히스토리와 선택 위치 복원, 라이브 이미지 설정 패널·이미지↔갤러리 드래그 변환(`merge-images-to-gallery`·`insert-image-to-gallery`·`extract-gallery-image`), 소스·라이브 `Cmd+Shift+K` 줄 삭제, 소스·라이브 `Cmd/Ctrl+K` 링크 삽입, 코드·콜아웃·토글 내부 줄 삭제, 라이브 fenced 블록 현재 닫는 줄 기준 교체, 블록 패널 바깥 클릭·지원 블록 밖 커서 이동 시 닫기·미디어 모달 중 유지, 인용 마지막 줄 아래 방향키 외부 문단 포커스 이동, 인용·콜아웃·코드·토글 선언 줄 옵션 수정, IME 조합 중 블록 패널 유지, 소스 모드 wrap 라인 번호 보정·라이브↔소스 위치 복원(코드·콜아웃·토글 선언 줄은 본문 줄로 보정), 라이브 슬래시 명령 후 포커스 복원 지연 |
 | components/admin/AdminEditorBlockPanel.vue | 게시물 설정 사이드바 오버레이 블록 설정(선택 텍스트 색상, 단일 이미지 대표 너비 셀렉트(전체·갤러리 2장 1칸·갤러리 3장 1칸·갤러리 3장 2칸·직접 입력)·직접 너비·이미지·갤러리·링크·iframe·HTML·인용 배경색·콜아웃 제목·아이콘·배경색·코드·토글), 갤러리 선택 이미지 강조 |
-| components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/HTML 블록, 콜아웃 Emoji on/off·이모지 프리셋·인용과 같은 배경 프리셋 선택(우측 고정 설정 패널), 갤러리 복수 미디어 선택·이미지 수별 열 배치·삽입 위치 표시 드래그 순서 변경, 한글 조합 입력 처리, Shift+Enter 줄바꿈, 코드 블록 단축 변환, AFFiNE 참고 세로 막대형 블록 핸들 선택/삭제/드래그 이동과 삽입선 표시, 하단 빈 입력 블록 유지, 본문 placeholder 표시 |
 | components/admin/AdminTagForm.vue | 관리자 태그 생성/수정 폼(이름/슬러그/설명/색상, 태그 헤더 이미지 업로드·삭제, 오버레이 제목·본문 편집, 수정 화면 변경 저장 버튼 변경사항 기준 활성화) |
 | components/admin/AdminMemberForm.vue | 관리자 멤버 추가/수정 폼(Ghost형 3분할, 기존 회원 보기/수정 모드 분리, 요약 1fr·입력 2fr, 원형 썸네일 hover 등록·변경·삭제, 기본 정보·레이블·관리자 노트·활동 요약, 설정 메뉴의 비밀번호 변경·멤버 삭제 모달, 저장 토스트, 미저장 변경사항 이탈 확인) |
 | components/admin/AdminUnsavedChangesModal.vue | 관리자 편집 화면 공통 미저장 변경사항 이탈 확인 모달(상단 40px 위치) |
diff --git a/docs/todo.md b/docs/todo.md
index 33ce1b0..9bb0eb0 100644
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -1,5 +1,28 @@
 # sori.studio 할 일
 
+## v1.11 내부 개선
+
+- 거대 컴포넌트 책임 분리 진행.
+  - `components/admin/AdminMarkdownEditor.vue`: 미디어 모달, 슬래시 명령, 히스토리·선택 복원, 라이브/소스 전환 로직을 단계적으로 composable 또는 하위 컴포넌트로 분리.
+  - `pages/admin/settings/index.vue`: 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 composable 단위로 정리.
+  - `components/content/ContentMarkdownRenderer.vue`: 파싱·블록 렌더링·라이브 편집 중개·라이트박스·광고 삽입 책임을 분리.
+  - `components/admin/AdminPostForm.vue`: 태그 입력, 대표 이미지 선택, 발행/초안 저장 상태, 우측 설정 패널 책임을 분리.
+  - `pages/admin/media/index.vue`: 미디어 목록, 폴더 트리, 상세 모달, 재생성 액션을 작은 단위로 분리.
+- 관리자 UI 공통 컴포넌트 정리.
+  - 모달 패널, 필터 팝오버, 행 메뉴, 페이지네이션 툴바의 radius·shadow·z-index·색상 규칙을 공통화.
+  - 게시글/페이지/미디어 목록의 검색·필터·정렬 레이아웃을 같은 패턴으로 유지.
+- 최근 브라우저 회귀 테스트 추가.
+  - 태그 추천 선택 후 다음 태그 후보가 포커스 해제 없이 유지되는지 확인.
+  - 관리자 미디어 대표 이미지/본문 이미지 탭 전환 중 역할 배지가 노출되지 않는지 확인.
+  - 단일 이미지 `{size=}` 너비가 사용자 뷰어와 라이브 모드에 동일하게 반영되는지 확인.
+- 미디어 카탈로그 전환 코드 수명 정리.
+  - 운영 `MEDIA_CATALOG_MODE=database` 안정화 후 `shadow`/`filesystem` 런타임 분기 축소 가능 여부 검토.
+  - fallback은 운영 안정성에 필요하므로 제거 전 reconcile·로그·테스트 기준을 먼저 정리.
+- 운영 의존성 보안 업데이트 검토.
+  - `sharp <0.35.0` audit 경고는 breaking change 가능성이 있어 별도 검증 브랜치에서 이미지 업로드·썸네일 생성·본문 이미지 백필까지 확인 후 업데이트.
+- 문서 구조 정리.
+  - `docs/update.md` 장기 누적 이력은 최신 작업 중심으로 유지하고 오래된 상세 이력은 역할에 맞게 분리하는 방안 검토.
+
 ## 1차 관리자 개발
 
 
@@ -21,4 +44,3 @@
   - 원시 집계 단계에서도 같은 탭의 여러 게시물 이동이 스크롤 구간 계산에 섞이지 않도록 별도 콘텐츠 세션 저장 구조 검토.
 
 ## 배포
-
diff --git a/docs/update.md b/docs/update.md
index 735704c..4d409f5 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,13 @@
 # 업데이트 이력
 
+## v1.11.3
+
+- v1.11 내부 개선 TODO 추가.
+- 현재 코드에서 참조되지 않는 구형 `AdminBlockEditor.vue` 제거.
+- 파일-화면 매핑 문서를 현재 구현 기준 표현으로 정리.
+- v1.11 내부 개선 TODO에서 구형 블록 에디터 검토 항목 완료 처리.
+- 게시글 작성·수정, 페이지 작성·수정, 태그 목록, 사이트 설정 토스트를 공용 `useAdminToast` 기준으로 통일.
+
 ## v1.11.2
 
 - 관리자 미디어 `카드 썸네일` 탭 명칭을 `대표 이미지`로 변경.
diff --git a/package-lock.json b/package-lock.json
index 18c6266..e315fa9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.11.2",
+  "version": "1.11.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.11.2",
+      "version": "1.11.3",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/package.json b/package.json
index fa0cd73..b0bb2a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.11.2",
+  "version": "1.11.3",
   "private": true,
   "type": "module",
   "imports": {
diff --git a/pages/admin/pages/[id].vue b/pages/admin/pages/[id].vue
index ff6abbb..70d6a0f 100644
--- a/pages/admin/pages/[id].vue
+++ b/pages/admin/pages/[id].vue
@@ -9,8 +9,7 @@ const saving = ref(false)
 const deleting = ref(false)
 const errorMessage = ref('')
 const pageForm = ref(null)
-const toast = ref(null)
-let toastTimer = null
+const { toast, showToast } = useAdminToast()
 
 const { data: page } = await useFetch(() => `/admin/api/pages/${id.value}`)
 
@@ -23,20 +22,6 @@ if (!page.value) {
 
 const publicPageUrl = computed(() => page.value?.slug ? `/pages/${page.value.slug}` : '')
 
-/**
- * 저장 상태 토스트 표시
- * @param {'success'|'error'|'info'} type - 토스트 타입
- * @param {string} message - 표시 메시지
- * @returns {void}
- */
-const showToast = (type, message) => {
-  window.clearTimeout(toastTimer)
-  toast.value = { type, message }
-  toastTimer = window.setTimeout(() => {
-    toast.value = null
-  }, 3200)
-}
-
 /**
  * 이전 화면에서 전달한 토스트 표시
  * @returns {void}
@@ -111,10 +96,6 @@ const deletePage = async () => {
 }
 
 onMounted(showStoredToast)
-
-onBeforeUnmount(() => {
-  window.clearTimeout(toastTimer)
-})
 </script>
 
 <template>
@@ -135,7 +116,7 @@ onBeforeUnmount(() => {
     />
     <div
       v-if="toast"
-      class="admin-page-edit__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"
+      class="admin-page-edit__toast fixed right-5 top-5 z-[100] max-w-[min(24rem,calc(100vw-2.5rem))] rounded border px-4 py-3 text-sm font-semibold shadow-lg"
       :class="{
         'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
         'border-red-200 bg-red-50 text-red-800': toast.type === 'error',
diff --git a/pages/admin/pages/new.vue b/pages/admin/pages/new.vue
index c80ed05..3007989 100644
--- a/pages/admin/pages/new.vue
+++ b/pages/admin/pages/new.vue
@@ -7,22 +7,7 @@ const saving = ref(false)
 const errorMessage = ref('')
 const pageForm = ref(null)
 const createdPageId = ref('')
-const toast = ref(null)
-let toastTimer = null
-
-/**
- * 저장 상태 토스트 표시
- * @param {'success'|'error'|'info'} type - 토스트 타입
- * @param {string} message - 표시 메시지
- * @returns {void}
- */
-const showToast = (type, message) => {
-  window.clearTimeout(toastTimer)
-  toast.value = { type, message }
-  toastTimer = window.setTimeout(() => {
-    toast.value = null
-  }, 3200)
-}
+const { toast, showToast } = useAdminToast()
 
 /**
  * 새 고정 페이지 저장
@@ -54,10 +39,6 @@ const savePage = async (payload) => {
     saving.value = false
   }
 }
-
-onBeforeUnmount(() => {
-  window.clearTimeout(toastTimer)
-})
 </script>
 
 <template>
@@ -68,7 +49,7 @@ onBeforeUnmount(() => {
     <AdminPageForm ref="pageForm" :saving="saving" @submit="savePage" />
     <div
       v-if="toast"
-      class="admin-page-editor__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"
+      class="admin-page-editor__toast fixed right-5 top-5 z-[100] max-w-[min(24rem,calc(100vw-2.5rem))] rounded border px-4 py-3 text-sm font-semibold shadow-lg"
       :class="{
         'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
         'border-red-200 bg-red-50 text-red-800': toast.type === 'error',
diff --git a/pages/admin/posts/[id].vue b/pages/admin/posts/[id].vue
index 2aa146f..baa9b7d 100644
--- a/pages/admin/posts/[id].vue
+++ b/pages/admin/posts/[id].vue
@@ -10,8 +10,7 @@ const autoSaving = ref(false)
 const deleting = ref(false)
 const errorMessage = ref('')
 const postForm = ref(null)
-const toast = ref(null)
-let toastTimer = null
+const { toast, showToast, clearToast } = useAdminToast()
 
 const { data: post } = await useFetch(() => `/admin/api/posts/${id.value}`)
 
@@ -32,20 +31,6 @@ const isPublicPost = (value) => value?.status === 'published'
 
 const publicPostUrl = computed(() => post.value?.slug ? `/post/${post.value.slug}` : '')
 
-/**
- * 저장 상태 토스트 표시
- * @param {'success'|'error'|'info'} type - 토스트 타입
- * @param {string} message - 표시 메시지
- * @returns {void}
- */
-const showToast = (type, message) => {
-  window.clearTimeout(toastTimer)
-  toast.value = { type, message }
-  toastTimer = window.setTimeout(() => {
-    toast.value = null
-  }, 3200)
-}
-
 /**
  * 저장 오류가 슬러그 중복인지 확인한다.
  * @param {unknown} error - 저장 오류
@@ -109,8 +94,7 @@ const savePost = async (payload) => {
     showToast('success', '변경 내용이 저장되었습니다.')
   } catch (error) {
     if (isDuplicateSlugError(error)) {
-      window.clearTimeout(toastTimer)
-      toast.value = null
+      clearToast()
       errorMessage.value = ''
       postForm.value?.markSlugError('이미 사용 중인 슬러그입니다.')
       return
@@ -146,8 +130,7 @@ const autosaveDraftPost = async (payload) => {
     const msg = error?.data?.message || error?.message || '자동 저장에 실패했습니다.'
     postForm.value?.markAutosaveFailed(payload)
     if (isDuplicateSlugError(error)) {
-      window.clearTimeout(toastTimer)
-      toast.value = null
+      clearToast()
       errorMessage.value = ''
       postForm.value?.markSlugError('이미 사용 중인 슬러그입니다.')
       return false
@@ -196,10 +179,6 @@ const deletePost = async () => {
 }
 
 onMounted(showStoredToast)
-
-onBeforeUnmount(() => {
-  window.clearTimeout(toastTimer)
-})
 </script>
 
 <template>
@@ -223,7 +202,7 @@ onBeforeUnmount(() => {
     />
     <div
       v-if="toast"
-      class="admin-post-edit__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"
+      class="admin-post-edit__toast fixed right-5 top-5 z-[100] max-w-[min(24rem,calc(100vw-2.5rem))] rounded border px-4 py-3 text-sm font-semibold shadow-lg"
       :class="{
         'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
         'border-red-200 bg-red-50 text-red-800': toast.type === 'error',
diff --git a/pages/admin/posts/new.vue b/pages/admin/posts/new.vue
index e387998..826541b 100644
--- a/pages/admin/posts/new.vue
+++ b/pages/admin/posts/new.vue
@@ -7,8 +7,7 @@ const saving = ref(false)
 const autoSaving = ref(false)
 const errorMessage = ref('')
 const postForm = ref(null)
-const toast = ref(null)
-let toastTimer = null
+const { toast, showToast, clearToast } = useAdminToast()
 
 /**
  * 비교용 게시물 입력값을 직렬화한다.
@@ -58,20 +57,6 @@ const syncLatestDraftAfterCreate = async (postId, firstPayload) => {
   return savedPayload
 }
 
-/**
- * 저장 상태 토스트 표시
- * @param {'success'|'error'|'info'} type - 토스트 타입
- * @param {string} message - 표시 메시지
- * @returns {void}
- */
-const showToast = (type, message) => {
-  window.clearTimeout(toastTimer)
-  toast.value = { type, message }
-  toastTimer = window.setTimeout(() => {
-    toast.value = null
-  }, 3200)
-}
-
 /**
  * 저장 오류가 슬러그 중복인지 확인한다.
  * @param {unknown} error - 저장 오류
@@ -120,8 +105,7 @@ const savePost = async (payload) => {
     await navigateTo(`/admin/posts/${post.id}`)
   } catch (error) {
     if (isDuplicateSlugError(error)) {
-      window.clearTimeout(toastTimer)
-      toast.value = null
+      clearToast()
       errorMessage.value = ''
       postForm.value?.markSlugError('이미 사용 중인 슬러그입니다.')
       return
@@ -166,8 +150,7 @@ const createDraftAutosave = async (payload, options = {}) => {
     const msg = error?.data?.message || error?.message || '자동 저장에 실패했습니다.'
     postForm.value?.markAutosaveFailed(payload)
     if (isDuplicateSlugError(error)) {
-      window.clearTimeout(toastTimer)
-      toast.value = null
+      clearToast()
       errorMessage.value = ''
       postForm.value?.markSlugError('이미 사용 중인 슬러그입니다.')
       return false
@@ -189,9 +172,6 @@ onBeforeRouteLeave(async () => {
   return createDraftAutosave(payload, { skipNavigate: true })
 })
 
-onBeforeUnmount(() => {
-  window.clearTimeout(toastTimer)
-})
 </script>
 
 <template>
@@ -225,7 +205,7 @@ onBeforeUnmount(() => {
     </div>
     <div
       v-if="toast"
-      class="admin-post-editor__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"
+      class="admin-post-editor__toast fixed right-5 top-5 z-[100] max-w-[min(24rem,calc(100vw-2.5rem))] rounded border px-4 py-3 text-sm font-semibold shadow-lg"
       :class="{
         'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
         'border-red-200 bg-red-50 text-red-800': toast.type === 'error',
diff --git a/pages/admin/settings/index.vue b/pages/admin/settings/index.vue
index 43681f3..27db477 100644
--- a/pages/admin/settings/index.vue
+++ b/pages/admin/settings/index.vue
@@ -80,7 +80,7 @@ const postExportChunkSize = ref(500)
 const postExportMaxFileSizeMb = ref(500)
 const postImportExportPanel = ref('')
 const errorMessage = ref('')
-const toast = ref(null)
+const { toast, showToast } = useAdminToast()
 const logoInputRef = ref(null)
 const homeCoverInputRef = ref(null)
 const homeCoverDarkInputRef = ref(null)
@@ -182,7 +182,6 @@ const adsSnapshot = reactive({
   adPostInArticleCode: '',
   adPostBottomCode: ''
 })
-let toastTimer = null
 let scrollSpyFrame = null
 let postExportRefreshTimer = null
 
@@ -906,20 +905,6 @@ const closeSettings = async () => {
   await navigateTo('/admin')
 }
 
-/**
- * 저장 상태 토스트 표시
- * @param {'success'|'error'|'info'} type - 토스트 타입
- * @param {string} message - 표시 메시지
- * @returns {void}
- */
-const showToast = (type, message) => {
-  window.clearTimeout(toastTimer)
-  toast.value = { type, message }
-  toastTimer = window.setTimeout(() => {
-    toast.value = null
-  }, 3200)
-}
-
 /**
  * 게시물 export 작업을 요청한다.
  * @returns {Promise<void>}
@@ -2178,7 +2163,6 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  window.clearTimeout(toastTimer)
   window.clearInterval(postExportRefreshTimer)
   if (scrollSpyFrame) {
     cancelAnimationFrame(scrollSpyFrame)
@@ -4106,7 +4090,7 @@ onBeforeUnmount(() => {
 
     <div
       v-if="toast"
-      class="admin-settings-screen__toast fixed right-5 top-24 z-[60] rounded-md border px-4 py-3 text-sm font-semibold shadow-lg md:top-28"
+      class="admin-settings-screen__toast fixed right-5 top-24 z-[100] max-w-[min(24rem,calc(100vw-2.5rem))] rounded-md border px-4 py-3 text-sm font-semibold shadow-lg md:top-28"
       :class="{
         'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
         'border-red-200 bg-red-50 text-red-800': toast.type === 'error',
diff --git a/pages/admin/tags/index.vue b/pages/admin/tags/index.vue
index 39ad1e1..e4b8a38 100644
--- a/pages/admin/tags/index.vue
+++ b/pages/admin/tags/index.vue
@@ -9,11 +9,10 @@ const savingOrder = ref(false)
 const promotingTagId = ref('')
 const demotingTagId = ref('')
 const deletingGeneralTagId = ref('')
-const toast = ref(null)
+const { toast, showToast } = useAdminToast()
 const TAG_TOAST_STORAGE_KEY = 'SORI_ADMIN_TAG_TOAST'
 
 const { openMenuId, closeMenu } = useAdminRowMenu()
-let toastTimer = null
 const generalTagQuery = ref('')
 const {
   displayValue: generalTagQueryInput,
@@ -103,20 +102,6 @@ const isManagedOrderDirty = computed(() => {
   return currentIds.some((id, index) => id !== base[index])
 })
 
-/**
- * 피드백 토스트 표시
- * @param {'success'|'error'|'info'} type - 토스트 타입
- * @param {string} message - 표시 메시지
- * @returns {void}
- */
-const showToast = (type, message) => {
-  window.clearTimeout(toastTimer)
-  toast.value = { type, message }
-  toastTimer = window.setTimeout(() => {
-    toast.value = null
-  }, 3200)
-}
-
 onMounted(() => {
   const storedToast = sessionStorage.getItem(TAG_TOAST_STORAGE_KEY)
 
@@ -361,10 +346,6 @@ const deleteGeneralTag = async (tag) => {
   }
 }
 
-onBeforeUnmount(() => {
-  window.clearTimeout(toastTimer)
-})
-
 </script>
 
 <template>
@@ -573,7 +554,7 @@ onBeforeUnmount(() => {
 
     <div
       v-if="toast"
-      class="admin-tags__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"
+      class="admin-tags__toast fixed right-5 top-5 z-[100] max-w-[min(24rem,calc(100vw-2.5rem))] rounded border px-4 py-3 text-sm font-semibold shadow-lg"
       :class="{
         'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
         'border-red-200 bg-red-50 text-red-800': toast.type === 'error',