v1.4.1: 관리자 미디어 업로드 한도·라이브 에디터 UX 개선

종류별 업로드 크기 한도와 413 안내를 추가하고, 임베드·미디어 라이브 프리뷰·제목 Enter 포커스·스크롤 동작을 보정한다.

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

components/content/ContentMarkdownRenderer.vue

@@ -168,11 +168,15 @@ const isMarkdownBlockStart = (line) => {
     trimmedLine === ':::bookmark' ||
     trimmedLine === ':::signup' ||
     trimmedLine === ':::gallery' ||
+    trimmedLine === ':::video' ||
+    trimmedLine === ':::audio' ||
+    trimmedLine === ':::file' ||
     trimmedLine === ':::embed' ||
     trimmedLine.startsWith(':::callout') ||
     trimmedLine.startsWith(':::toggle') ||
     trimmedLine.startsWith('```') ||
     trimmedLine === '---' ||
+    isStandaloneUrlLine(trimmedLine) ||
     /^(#{1,6})\s+(.+)$/.test(trimmedLine) ||
     trimmedLine.startsWith('> ') ||
     /^- /.test(trimmedLine) ||
@@ -187,6 +191,13 @@ const isMarkdownBlockStart = (line) => {
  */
 const cleanParagraphLine = (line) => line.replace(/( {2,}|\\)$/, '').trim()
 
+/**
+ * 단독 URL 행인지 확인한다.
+ * @param {string} line - 마크다운 행
+ * @returns {boolean} 단독 URL 여부
+ */
+const isStandaloneUrlLine = (line) => /^https?:\/\/\S+$/i.test(String(line || '').trim())
+
 /**
  * 빈 줄 공백 블록 높이를 반환한다.
  * @param {Object} block - 렌더링 블록
@@ -305,6 +316,67 @@ const parseSignupMeta = (raw) => {
   return meta
 }
 
+/**
+ * 미디어 fenced 블록 본문에서 URL과 표시 메타를 파싱한다.
+ * @param {string} raw - fenced 내부 텍스트
+ * @returns {{url: string, title: string, description: string, poster: string, caption: string, fileName: string, size: string}} 미디어 메타
+ */
+const parseMediaMeta = (raw) => {
+  const meta = {
+    url: '',
+    title: '',
+    description: '',
+    poster: '',
+    caption: '',
+    fileName: '',
+    size: ''
+  }
+  const lines = raw.split('\n').map((l) => l.trim()).filter(Boolean)
+
+  for (const line of lines) {
+    const kv = line.match(/^(\w+)=(.*)$/)
+
+    if (kv) {
+      const key = kv[1].toLowerCase()
+      const val = kv[2].trim()
+
+      if (key === 'url' || key === 'src') {
+        meta.url = val
+      } else if (key === 'title') {
+        meta.title = val
+      } else if (key === 'description' || key === 'desc') {
+        meta.description = val
+      } else if (key === 'poster' || key === 'thumbnail') {
+        meta.poster = val
+      } else if (key === 'caption') {
+        meta.caption = val
+      } else if (key === 'name' || key === 'filename' || key === 'file') {
+        meta.fileName = val
+      } else if (key === 'size') {
+        meta.size = val
+      }
+
+      continue
+    }
+
+    if (!meta.url && (/^https?:\/\//i.test(line) || line.startsWith('/'))) {
+      meta.url = line
+      continue
+    }
+
+    if (meta.url && !meta.title) {
+      meta.title = line
+      continue
+    }
+
+    if (meta.url && meta.title && !meta.description) {
+      meta.description = line
+    }
+  }
+
+  return meta
+}
+
 /**
  * 마크다운 문자열을 렌더링용 블록 목록으로 변환
  * @param {string} markdown - 마크다운 문자열
@@ -401,6 +473,22 @@ const parseMarkdownBlocks = (markdown) => {
       continue
     }
 
+    if ([':::video', ':::audio', ':::file'].includes(trimmedLine)) {
+      const startLine = index
+      const blockType = trimmedLine.replace(':::', '')
+      const { contentLines, nextIndex } = collectFencedLines(lines, index + 1)
+      const mediaMeta = parseMediaMeta(contentLines.join('\n'))
+
+      blocks.push(attachSourceRange(
+        createBlock(blockType, '', null, `block-${blocks.length}`, { meta: mediaMeta }),
+        startLine,
+        nextIndex
+      ))
+
+      index = nextIndex
+      continue
+    }
+
     if (trimmedLine.startsWith(':::callout')) {
       const startLine = index
       const { contentLines, nextIndex } = collectFencedLines(lines, index + 1)
@@ -438,6 +526,17 @@ const parseMarkdownBlocks = (markdown) => {
       continue
     }
 
+    if (isStandaloneUrlLine(trimmedLine)) {
+      const startLine = index
+      blocks.push(attachSourceRange(
+        createBlock('embed', '', null, `block-${blocks.length}`, { url: trimmedLine }),
+        startLine,
+        startLine
+      ))
+      index += 1
+      continue
+    }
+
     const image = parseImageLine(trimmedLine)
 
     if (image) {
@@ -586,7 +685,13 @@ const focusEditableAtLine = (lineIndex, attempt = 0, cursorPosition = 'auto', ca
     return
   }
 
-  const element = rendererRootRef.value?.querySelector(`[data-source-line="${lineIndex}"]`)
+  const matches = rendererRootRef.value
+    ? [...rendererRootRef.value.querySelectorAll(`[data-source-line="${lineIndex}"]`)]
+    : []
+
+  const element = matches.find((node) => node.getAttribute('contenteditable') === 'true')
+    || matches[0]
+    || null
 
   if (!element) {
     if (attempt < 8) {
@@ -602,12 +707,19 @@ const focusEditableAtLine = (lineIndex, attempt = 0, cursorPosition = 'auto', ca
   const isBlankMarker = /^>\s*$/.test(line) || /^[-*+]\s*$/.test(line) || /^\d+\.\s*$/.test(line.trim())
 
   if (isBlankMarker || !line.trim()) {
-    element.textContent = ''
-    element.innerHTML = ''
+    if (element.getAttribute('contenteditable') === 'true') {
+      element.textContent = ''
+      element.innerHTML = ''
+    }
   }
 
   element.focus({ preventScroll: true })
 
+  if (element.getAttribute('contenteditable') !== 'true') {
+    element.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    return
+  }
+
   if (typeof caretOffset === 'number' && caretOffset >= 0) {
     setEditableCaretOffset(/** @type {HTMLElement} */ (element), caretOffset)
     return
@@ -625,6 +737,7 @@ const focusEditableAtLine = (lineIndex, attempt = 0, cursorPosition = 'auto', ca
   }
 
   setEditableCaretOffset(/** @type {HTMLElement} */ (element), 0)
+  element.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }
 
 defineExpose({
@@ -683,6 +796,18 @@ const getHeadingEditableClass = (level) => {
   return `${base} text-[clamp(0.9rem,0.875rem+0.1vw,1rem)]`
 }
 
+/**
+ * 제목 블록 마크다운 줄을 만든다.
+ * @param {number} level - 제목 레벨
+ * @param {string} value - 제목 텍스트
+ * @returns {string} 제목 마크다운 줄
+ */
+const buildHeadingLine = (level, value) => {
+  const headingPrefix = `${'#'.repeat(Math.min(Math.max(level, 1), 6))} `
+  const cleanText = String(value ?? '').replace(/\s+/g, ' ').trim()
+  return `${headingPrefix}${cleanText}`.trimEnd() || headingPrefix.trim()
+}
+
 /**
  * commit 이벤트 페이로드를 정규화한다.
  * @param {string|{ value: string, raw?: boolean }} payload - 페이로드
@@ -1029,6 +1154,120 @@ const onInsertBelowBlock = (block, options = {}) => {
   })
 }
 
+/**
+ * 선택형 프리뷰 카드 블록에 포커스를 준다.
+ * @param {Event} event - 포커스 유도 이벤트
+ * @returns {void}
+ */
+const focusPreviewCardBlock = (event) => {
+  const target = event.currentTarget
+  const element = target instanceof HTMLElement
+    ? target.closest('[data-preview-card-block="true"]') || target
+    : null
+
+  if (element instanceof HTMLElement) {
+    element.focus({ preventScroll: true })
+  }
+}
+
+/**
+ * 선택형 프리뷰 카드에서 이전/다음 줄로 이동한다.
+ * @param {Object} block - 프리뷰 카드 블록
+ * @param {1|-1} direction - 이동 방향
+ * @returns {void}
+ */
+const moveFromPreviewCardBlock = (block, direction) => {
+  const startLine = block.meta?.startLine
+  const endLine = block.meta?.endLine ?? startLine
+
+  if (typeof startLine !== 'number' || typeof endLine !== 'number') {
+    return
+  }
+
+  if (direction > 0) {
+    const lines = String(props.content || '').split('\n')
+    const nextLine = endLine + 1
+
+    if (nextLine >= lines.length) {
+      onInsertBelowBlock(block)
+      return
+    }
+
+    focusEditableAtLine(nextLine, 0, 'start')
+    return
+  }
+
+  if (startLine <= 0) {
+    return
+  }
+
+  focusEditableAtLine(startLine - 1, 0, 'end')
+}
+
+/**
+ * 선택형 프리뷰 카드 블록 전체를 삭제한다.
+ * @param {Object} block - 프리뷰 카드 블록
+ * @returns {void}
+ */
+const deletePreviewCardBlock = (block) => {
+  if (!props.interactive || typeof block.meta?.startLine !== 'number') {
+    return
+  }
+
+  const startLine = block.meta.startLine
+  const endLine = block.meta.endLine ?? startLine
+  pendingFocusLine.value = startLine > 0 ? startLine - 1 : 0
+  pendingFocusPosition.value = startLine > 0 ? 'end' : 'start'
+  emit('block-content-change', {
+    startLine,
+    endLine,
+    replacementLines: []
+  })
+}
+
+/**
+ * 선택형 프리뷰 카드 블록 키보드 조작을 처리한다.
+ * @param {KeyboardEvent} event - 키보드 이벤트
+ * @param {Object} block - 프리뷰 카드 블록
+ * @returns {void}
+ */
+const onPreviewCardKeydown = (event, block) => {
+  const isDeleteShortcut = (event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === 'k'
+  const isActionButton = event.target instanceof HTMLElement
+    && Boolean(event.target.closest('.content-markdown-renderer__preview-card-action'))
+
+  if (isActionButton && (event.key === 'Enter' || event.key === ' ')) {
+    return
+  }
+
+  if (event.key === 'Backspace' || event.key === 'Delete' || isDeleteShortcut) {
+    event.preventDefault()
+    event.stopPropagation()
+    deletePreviewCardBlock(block)
+    return
+  }
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    event.stopPropagation()
+    moveFromPreviewCardBlock(block, 1)
+    return
+  }
+
+  if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    event.stopPropagation()
+    moveFromPreviewCardBlock(block, -1)
+    return
+  }
+
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    event.stopPropagation()
+    onInsertBelowBlock(block)
+  }
+}
+
 /**
  * 목록 항목 Enter — 빈 마커 줄이면 문단으로 탈출, 내용이 있으면 아래에 빈 줄만 삽입한다.
  * @param {Object} block - 목록 블록
@@ -1118,9 +1357,20 @@ const onHeadingInlineCommit = (block, payload) => {
     return
   }
 
-  const headingPrefix = `${'#'.repeat(Math.min(Math.max(block.level, 1), 6))} `
-  const cleanText = String(value ?? '').replace(/\s+/g, ' ').trim()
-  commitInlineBlockLines(block, [`${headingPrefix}${cleanText}`.trimEnd() || headingPrefix.trim()])
+  commitInlineBlockLines(block, [buildHeadingLine(block.level, value)])
+}
+
+/**
+ * 제목 Enter — 현재 제목 값을 저장하고 아래에 빈 줄을 만든다.
+ * @param {Object} block - 제목 블록
+ * @param {string|Object} payload - insert-below 페이로드
+ * @returns {void}
+ */
+const onHeadingInsertBelow = (block, payload) => {
+  const { value } = normalizeInsertBelowPayload(payload)
+  pendingFocusLine.value = block.meta.startLine + 1
+  pendingFocusPosition.value = 'start'
+  commitInlineBlockLines(block, [buildHeadingLine(block.level, value), ''])
 }
 
 /**
@@ -1490,12 +1740,10 @@ onBeforeUnmount(() => {
         :tag="`h${Math.min(Math.max(block.level, 1), 6)}`"
         :block-class="getHeadingEditableClass(block.level)"
         enter-mode="insert-below"
-        allow-raw-toggle
-        :raw-line="getMarkdownLine(block.meta.startLine)"
         :source-line="block.meta.startLine"
         :model-value="block.text"
         @commit="onHeadingInlineCommit(block, $event)"
-        @insert-below="onInsertBelowBlock(block)"
+        @insert-below="onHeadingInsertBelow(block, $event)"
         @delete-line="onDeleteLine"
         @merge-with-previous="onMergeWithPreviousLine(block.meta.startLine, $event)"
       />
@@ -1658,6 +1906,89 @@ onBeforeUnmount(() => {
         :button-label="block.meta.button"
         :placeholder="block.meta.placeholder"
       />
+      <section
+        v-else-if="['video', 'audio', 'file'].includes(block.type) && interactive"
+        class="content-markdown-renderer__preview-card group relative my-8 rounded-[12px] outline-none transition-shadow focus-within:ring-2 focus-within:ring-[var(--site-accent)] focus-within:ring-offset-2 focus-visible:ring-2 focus-visible:ring-[var(--site-accent)] focus-visible:ring-offset-2"
+        :data-source-line="block.meta.startLine"
+        data-preview-card-block="true"
+        tabindex="0"
+        role="group"
+        :aria-label="`${block.type} 블록`"
+        @mousedown.capture="focusPreviewCardBlock"
+        @keydown="onPreviewCardKeydown($event, block)"
+      >
+        <button
+          class="content-markdown-renderer__preview-card-delete content-markdown-renderer__preview-card-action absolute right-2 top-2 z-10 rounded bg-[#15171a]/85 px-2.5 py-1 text-xs font-semibold text-white opacity-0 shadow transition-opacity hover:bg-[#15171a] focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--site-accent)] group-hover:opacity-100 group-focus-within:opacity-100"
+          type="button"
+          :aria-label="`${block.type} 삭제`"
+          @click.stop="deletePreviewCardBlock(block)"
+        >
+          삭제
+        </button>
+        <ProseVideo
+          v-if="block.type === 'video'"
+          :src="block.meta.url"
+          :title="block.meta.title"
+          :poster="block.meta.poster"
+          :caption="block.meta.caption"
+        />
+        <ProseAudio
+          v-else-if="block.type === 'audio'"
+          :src="block.meta.url"
+          :title="block.meta.title"
+          :description="block.meta.description"
+        />
+        <ProseFile
+          v-else
+          :href="block.meta.url"
+          :title="block.meta.title"
+          :description="block.meta.description"
+          :file-name="block.meta.fileName"
+          :size="block.meta.size"
+        />
+      </section>
+      <ProseVideo
+        v-else-if="block.type === 'video'"
+        :src="block.meta.url"
+        :title="block.meta.title"
+        :poster="block.meta.poster"
+        :caption="block.meta.caption"
+      />
+      <ProseAudio
+        v-else-if="block.type === 'audio'"
+        :src="block.meta.url"
+        :title="block.meta.title"
+        :description="block.meta.description"
+      />
+      <ProseFile
+        v-else-if="block.type === 'file'"
+        :href="block.meta.url"
+        :title="block.meta.title"
+        :description="block.meta.description"
+        :file-name="block.meta.fileName"
+        :size="block.meta.size"
+      />
+      <section
+        v-else-if="block.type === 'embed' && interactive"
+        class="content-markdown-renderer__embed-live group relative my-8 rounded-[12px] outline-none transition-shadow focus-within:ring-2 focus-within:ring-[var(--site-accent)] focus-within:ring-offset-2 focus-visible:ring-2 focus-visible:ring-[var(--site-accent)] focus-visible:ring-offset-2"
+        :data-source-line="block.meta.startLine"
+        data-preview-card-block="true"
+        tabindex="0"
+        role="group"
+        aria-label="임베드 블록"
+        @mousedown.capture="focusPreviewCardBlock"
+        @keydown="onPreviewCardKeydown($event, block)"
+      >
+        <button
+          class="content-markdown-renderer__embed-delete content-markdown-renderer__preview-card-action absolute right-2 top-2 z-10 rounded bg-[#15171a]/85 px-2.5 py-1 text-xs font-semibold text-white opacity-0 shadow transition-opacity hover:bg-[#15171a] focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--site-accent)] group-hover:opacity-100 group-focus-within:opacity-100"
+          type="button"
+          aria-label="임베드 삭제"
+          @click.stop="deletePreviewCardBlock(block)"
+        >
+          삭제
+        </button>
+        <ProseEmbed :url="block.url" />
+      </section>
       <ProseEmbed v-else-if="block.type === 'embed'" :url="block.url" />
       <div
         v-else-if="block.type === 'gallery'"

components/content/ProseAudio.vue

@@ -1,5 +1,60 @@
+<script setup>
+const props = defineProps({
+  src: {
+    type: String,
+    default: ''
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  }
+})
+
+/**
+ * 표시용 오디오 제목을 반환한다.
+ * @returns {string} 오디오 제목
+ */
+const displayTitle = computed(() => props.title || 'Audio')
+
+/**
+ * 재생 가능한 오디오 URL인지 확인한다.
+ * @returns {boolean} 오디오 URL 여부
+ */
+const hasAudioSource = computed(() => Boolean(props.src && (props.src.startsWith('/') || /^https?:\/\//i.test(props.src))))
+</script>
+
 <template>
-  <div class="prose-audio my-8 rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] p-5">
-    <slot />
-  </div>
+  <section class="prose-audio my-8 rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] p-4 shadow-[0_14px_36px_rgba(15,23,42,0.06)] sm:p-5">
+    <div class="prose-audio__inner flex flex-col gap-4 sm:flex-row sm:items-center">
+      <div class="prose-audio__icon flex h-20 w-20 shrink-0 items-center justify-center rounded-[6px] bg-[var(--site-accent)] text-white sm:h-[86px] sm:w-[86px]">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-9 w-9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M9 18V5l10-2v13" />
+          <circle cx="6" cy="18" r="3" />
+          <circle cx="16" cy="16" r="3" />
+        </svg>
+      </div>
+      <div class="prose-audio__body min-w-0 flex-1">
+        <p class="prose-audio__title mb-2 text-base font-semibold leading-snug text-[var(--site-text)] sm:text-lg">
+          {{ displayTitle }}
+        </p>
+        <p v-if="description" class="prose-audio__description mb-3 text-sm leading-relaxed text-[var(--site-muted)]">
+          {{ description }}
+        </p>
+        <audio
+          v-if="hasAudioSource"
+          class="prose-audio__player w-full accent-[var(--site-accent)]"
+          :src="src"
+          controls
+          preload="metadata"
+        />
+        <p v-else class="prose-audio__empty text-sm font-semibold text-[var(--site-muted)]">
+          오디오 URL이 없습니다.
+        </p>
+      </div>
+    </div>
+  </section>
 </template>

components/content/ProseEmbed.vue

@@ -59,9 +59,48 @@ const getTweetId = (value) => {
   return ''
 }
 
+/**
+ * Mastodon 공개 게시물 URL인지 확인하고 embed URL을 반환한다.
+ * @param {string} value - Mastodon 게시물 URL
+ * @returns {string} Mastodon embed URL
+ */
+const getMastodonEmbedUrl = (value) => {
+  try {
+    const parsedUrl = new URL(value.trim())
+    const path = parsedUrl.pathname.replace(/\/$/, '')
+    const isKnownNonMastodonHost = [
+      'twitter.com',
+      'x.com',
+      'mobile.twitter.com',
+      'youtube.com',
+      'www.youtube.com',
+      'youtu.be'
+    ].includes(parsedUrl.hostname.replace(/^www\./, ''))
+
+    if (
+      isKnownNonMastodonHost ||
+      !['http:', 'https:'].includes(parsedUrl.protocol)
+    ) {
+      return ''
+    }
+
+    if (/^\/@[^/]+\/\d+$/.test(path) || /^\/users\/[^/]+\/statuses\/\d+$/.test(path)) {
+      return `${parsedUrl.origin}${path}/embed`
+    }
+  } catch {
+    return ''
+  }
+
+  return ''
+}
+
 const youtubeId = computed(() => getYouTubeId(props.url))
 const youtubeEmbedUrl = computed(() => youtubeId.value ? `https://www.youtube.com/embed/${youtubeId.value}` : '')
 const tweetId = computed(() => getTweetId(props.url))
+const mastodonEmbedUrl = computed(() => getMastodonEmbedUrl(props.url))
+const mastodonIframeRef = ref(null)
+const mastodonEmbedHeight = ref(640)
+const mastodonEmbedId = ref(0)
 
 /**
  * 외부 링크로 열어도 되는 URL인지 확인한다.
@@ -92,10 +131,74 @@ const tweetEmbedUrl = computed(() => {
 
   return `https://platform.twitter.com/embed/Tweet.html?id=${encodeURIComponent(tweetId.value)}&theme=${twitterTheme}&dnt=true`
 })
+
+/**
+ * Mastodon embed iframe에 실제 콘텐츠 높이 계산을 요청한다.
+ * @returns {void}
+ */
+const requestMastodonEmbedHeight = () => {
+  if (!mastodonIframeRef.value?.contentWindow || !mastodonEmbedId.value) {
+    return
+  }
+
+  mastodonIframeRef.value.contentWindow.postMessage({
+    type: 'setHeight',
+    id: mastodonEmbedId.value
+  }, '*')
+}
+
+/**
+ * Mastodon embed 높이 응답을 반영한다.
+ * @param {MessageEvent} event - iframe 메시지 이벤트
+ * @returns {void}
+ */
+const handleMastodonEmbedMessage = (event) => {
+  const data = event.data || {}
+
+  if (
+    !mastodonIframeRef.value ||
+    event.source !== mastodonIframeRef.value.contentWindow ||
+    typeof data !== 'object' ||
+    data.type !== 'setHeight' ||
+    data.id !== mastodonEmbedId.value ||
+    typeof data.height !== 'number'
+  ) {
+    return
+  }
+
+  try {
+    const expectedOrigin = new URL(mastodonEmbedUrl.value).origin
+
+    if (event.origin !== expectedOrigin) {
+      return
+    }
+  } catch {
+    return
+  }
+
+  mastodonEmbedHeight.value = Math.max(320, Math.ceil(data.height))
+}
+
+onMounted(() => {
+  mastodonEmbedId.value = Math.floor(Math.random() * 1000000000) + 1
+  window.addEventListener('message', handleMastodonEmbedMessage)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('message', handleMastodonEmbedMessage)
+})
+
+watch(mastodonEmbedUrl, () => {
+  mastodonEmbedHeight.value = 640
+  requestMastodonEmbedHeight()
+})
 </script>
 
 <template>
-  <div class="prose-embed prose-embed-card my-8 overflow-hidden rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)]">
+  <div
+    class="prose-embed prose-embed-card my-8 overflow-hidden rounded-[10px]"
+    :class="tweetEmbedUrl ? 'mx-auto max-w-[550px]' : mastodonEmbedUrl ? 'mx-auto max-w-[560px] border border-[var(--site-line)] bg-[var(--site-panel)]' : 'border border-[var(--site-line)] bg-[var(--site-panel)]'"
+  >
     <iframe
       v-if="youtubeEmbedUrl"
       class="prose-embed__frame aspect-video w-full"
@@ -108,11 +211,25 @@ const tweetEmbedUrl = computed(() => {
     <iframe
       v-else-if="tweetEmbedUrl"
       :key="tweetEmbedUrl"
-      class="prose-embed__tweet min-h-[420px] w-full border-0 sm:min-h-[458px]"
+      class="prose-embed__tweet block min-h-[560px] w-full border-0 sm:min-h-[620px]"
       :src="tweetEmbedUrl"
       title="Embedded post"
       loading="lazy"
     />
+    <iframe
+      v-else-if="mastodonEmbedUrl"
+      :key="mastodonEmbedUrl"
+      ref="mastodonIframeRef"
+      class="prose-embed__mastodon block w-full border-0"
+      :src="mastodonEmbedUrl"
+      :height="mastodonEmbedHeight"
+      title="Embedded Mastodon post"
+      allow="fullscreen"
+      loading="lazy"
+      sandbox="allow-scripts allow-same-origin allow-popups"
+      scrolling="no"
+      @load="requestMastodonEmbedHeight"
+    />
     <a
       v-else-if="safeExternalUrl"
       class="prose-embed__link block p-5 text-sm font-semibold text-[var(--site-text)] hover:opacity-70"

components/content/ProseFile.vue

@@ -1,5 +1,85 @@
+<script setup>
+const props = defineProps({
+  href: {
+    type: String,
+    default: ''
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  fileName: {
+    type: String,
+    default: ''
+  },
+  size: {
+    type: String,
+    default: ''
+  }
+})
+
+/**
+ * 다운로드 가능한 파일 URL인지 확인한다.
+ * @returns {boolean} 파일 URL 여부
+ */
+const isSafeFileUrl = computed(() => Boolean(props.href && (props.href.startsWith('/') || /^https?:\/\//i.test(props.href))))
+
+/**
+ * 카드 제목을 반환한다.
+ * @returns {string} 제목
+ */
+const displayTitle = computed(() => props.title || props.fileName || 'File')
+
+/**
+ * 표시 파일명을 반환한다.
+ * @returns {string} 파일명
+ */
+const displayFileName = computed(() => {
+  if (props.fileName) {
+    return props.fileName
+  }
+
+  try {
+    const parsedUrl = props.href.startsWith('/') ? new URL(props.href, 'https://local.invalid') : new URL(props.href)
+    const lastSegment = parsedUrl.pathname.split('/').filter(Boolean).pop()
+    return lastSegment ? decodeURIComponent(lastSegment) : ''
+  } catch {
+    return ''
+  }
+})
+</script>
+
 <template>
-  <div class="prose-file my-8 rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] p-5">
-    <slot />
-  </div>
+  <a
+    v-if="isSafeFileUrl"
+    class="prose-file group my-8 flex items-center gap-4 rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] p-4 no-underline shadow-[0_14px_36px_rgba(15,23,42,0.06)] transition-[background-color,box-shadow] hover:bg-[color-mix(in_srgb,var(--site-panel)_86%,var(--site-text)_14%)] sm:p-5"
+    :href="href"
+    download
+  >
+    <span class="prose-file__body min-w-0 flex-1">
+      <span class="prose-file__title block text-base font-semibold leading-snug text-[var(--site-text)] sm:text-lg">
+        {{ displayTitle }}
+      </span>
+      <span v-if="description" class="prose-file__description mt-1 block text-sm leading-relaxed text-[var(--site-muted)]">
+        {{ description }}
+      </span>
+      <span class="prose-file__meta mt-3 block truncate text-sm font-semibold text-[var(--site-text)]">
+        {{ displayFileName || href }}<template v-if="size"> · {{ size }}</template>
+      </span>
+    </span>
+    <span class="prose-file__download flex h-20 w-20 shrink-0 items-center justify-center rounded-[6px] bg-[color-mix(in_srgb,var(--site-line)_36%,var(--site-panel))] text-[var(--site-accent)] transition-transform group-hover:scale-[1.02] sm:h-[86px] sm:w-[86px]">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 4v11" />
+        <path d="m8 11 4 4 4-4" />
+        <path d="M5 20h14" />
+      </svg>
+    </span>
+  </a>
+  <p v-else class="prose-file prose-file-invalid my-8 rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] p-5 text-sm font-semibold text-[var(--site-muted)]">
+    파일 URL이 없습니다.
+  </p>
 </template>

components/content/ProseVideo.vue

@@ -1,5 +1,54 @@
+<script setup>
+const props = defineProps({
+  src: {
+    type: String,
+    default: ''
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  poster: {
+    type: String,
+    default: ''
+  },
+  caption: {
+    type: String,
+    default: ''
+  }
+})
+
+/**
+ * 재생 가능한 비디오 URL인지 확인한다.
+ * @returns {boolean} 비디오 URL 여부
+ */
+const hasVideoSource = computed(() => Boolean(props.src && (props.src.startsWith('/') || /^https?:\/\//i.test(props.src))))
+</script>
+
 <template>
-  <div class="prose-video my-8 aspect-video overflow-hidden rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)]">
-    <slot />
-  </div>
+  <figure class="prose-video my-8">
+    <div class="prose-video__shell overflow-hidden rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] shadow-[0_16px_40px_rgba(15,23,42,0.08)]">
+      <video
+        v-if="hasVideoSource"
+        class="prose-video__media aspect-video w-full bg-black object-cover"
+        :src="src"
+        :poster="poster || undefined"
+        :title="title || 'Video'"
+        controls
+        preload="metadata"
+      />
+      <div
+        v-else
+        class="prose-video__empty flex aspect-video w-full items-center justify-center bg-[color-mix(in_srgb,var(--site-line)_45%,var(--site-panel))] text-sm font-semibold text-[var(--site-muted)]"
+      >
+        비디오 URL이 없습니다.
+      </div>
+    </div>
+    <figcaption
+      v-if="caption || title"
+      class="prose-video__caption mt-3 text-center text-sm leading-relaxed text-[var(--site-muted)]"
+    >
+      {{ caption || title }}
+    </figcaption>
+  </figure>
 </template>