글쓰기 확장 블록 추가

components/content/ProseEmbed.vue

@@ -1,5 +1,57 @@
+<script setup>
+const props = defineProps({
+  url: {
+    type: String,
+    default: ''
+  }
+})
+
+/**
+ * YouTube 영상 ID를 추출
+ * @param {string} value - 임베드 URL
+ * @returns {string} YouTube 영상 ID
+ */
+const getYouTubeId = (value) => {
+  try {
+    const parsedUrl = new URL(value)
+
+    if (parsedUrl.hostname.includes('youtu.be')) {
+      return parsedUrl.pathname.replace('/', '')
+    }
+
+    if (parsedUrl.hostname.includes('youtube.com')) {
+      return parsedUrl.searchParams.get('v') || parsedUrl.pathname.split('/').pop() || ''
+    }
+  } catch {
+    return ''
+  }
+
+  return ''
+}
+
+const youtubeId = computed(() => getYouTubeId(props.url))
+const youtubeEmbedUrl = computed(() => youtubeId.value ? `https://www.youtube.com/embed/${youtubeId.value}` : '')
+</script>
+
 <template>
-  <div class="prose-embed my-8 border border-line bg-paper p-5">
-    <slot />
+  <div class="prose-embed my-8 overflow-hidden border border-line bg-paper">
+    <iframe
+      v-if="youtubeEmbedUrl"
+      class="prose-embed__frame aspect-video w-full"
+      :src="youtubeEmbedUrl"
+      title="Embedded video"
+      loading="lazy"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowfullscreen
+    />
+    <a
+      v-else
+      class="prose-embed__link block p-5 text-sm font-semibold text-ink hover:opacity-70"
+      :href="url"
+      target="_blank"
+      rel="noreferrer"
+    >
+      {{ url }}
+    </a>
   </div>
 </template>