콜아웃 제목과 기본 아이콘 정리

components/content/ContentMarkdownCalloutEditor.vue

@@ -17,6 +17,10 @@ const props = defineProps({
     type: String,
     default: '💡'
   },
+  calloutTitle: {
+    type: String,
+    default: ''
+  },
   calloutBackground: {
     type: String,
     default: 'blue'
@@ -50,7 +54,8 @@ const commitCalloutLines = (contentLines) => {
     buildCalloutOpenerLine({
       calloutEmojiEnabled: props.calloutEmojiEnabled,
       calloutEmoji: props.calloutEmoji,
-      calloutBackground: props.calloutBackground
+      calloutBackground: props.calloutBackground,
+      title: props.calloutTitle
     }),
     ...contentLines,
     ':::'
@@ -87,31 +92,24 @@ const onBodyCommit = (payload) => {
     :data-source-line="blockSourceLine"
   >
     <ProseCallout
-      :emoji-enabled="false"
+      :emoji-enabled="calloutEmojiEnabled"
+      :emoji="calloutEmoji"
       :background="calloutBackground"
+      :title="calloutTitle"
     >
-      <div class="content-markdown-callout-editor__inner flex items-start gap-2">
-        <span
-          v-if="calloutEmojiEnabled"
-          class="content-markdown-callout-editor__emoji inline-flex size-9 shrink-0 items-center justify-center rounded-md text-xl text-[var(--site-text)]"
-          aria-hidden="true"
-        >
-          {{ calloutEmoji || '💡' }}
-        </span>
-        <ContentMarkdownEditableInline
-          block-class="content-markdown-callout-editor__body min-w-0 flex-1 text-[15px] leading-8 text-[var(--site-text)]"
-          enter-mode="multiline"
-          plain-text
-          :source-line="bodySourceLine"
-          :source-line-count="bodyLines.length"
-          :model-value="modelValue"
-          @commit="onBodyCommit"
-          @delete-line="emit('delete-line', $event)"
-          @insert-below="emit('insert-below', $event)"
-          @merge-with-previous="emit('merge-with-previous', bodySourceLine, $event)"
-          @leave-block="emit('leave-block', $event)"
-        />
-      </div>
+      <ContentMarkdownEditableInline
+        block-class="content-markdown-callout-editor__body min-w-0 text-[15px] leading-8 text-[var(--site-text)]"
+        enter-mode="multiline"
+        plain-text
+        :source-line="bodySourceLine"
+        :source-line-count="bodyLines.length"
+        :model-value="modelValue"
+        @commit="onBodyCommit"
+        @delete-line="emit('delete-line', $event)"
+        @insert-below="emit('insert-below', $event)"
+        @merge-with-previous="emit('merge-with-previous', bodySourceLine, $event)"
+        @leave-block="emit('leave-block', $event)"
+      />
     </ProseCallout>
   </div>
 </template>

components/content/ContentMarkdownRenderer.vue

@@ -139,7 +139,7 @@ const createBlock = (type = 'paragraph', text = '', level = null, id = '', optio
   width: options.width || 'regular',
   images: options.images || [],
   meta: options.meta && typeof options.meta === 'object' ? { ...options.meta } : {},
-  calloutEmojiEnabled: options.calloutEmojiEnabled ?? true,
+  calloutEmojiEnabled: options.calloutEmojiEnabled === true,
   calloutEmoji: options.calloutEmoji || '💡',
   calloutBackground: options.calloutBackground || 'blue',
   quoteBackground: options.quoteBackground || 'gray',
@@ -2642,6 +2642,7 @@ onBeforeUnmount(() => {
         v-else-if="block.type === 'callout' && interactive"
         :callout-emoji-enabled="block.calloutEmojiEnabled"
         :callout-emoji="block.calloutEmoji"
+        :callout-title="block.title"
         :callout-background="block.calloutBackground"
         :block-source-line="block.meta.startLine"
         :body-source-line="block.meta.startLine + 1"
@@ -2656,6 +2657,7 @@ onBeforeUnmount(() => {
         v-else-if="block.type === 'callout'"
         :emoji-enabled="block.calloutEmojiEnabled"
         :emoji="block.calloutEmoji"
+        :title="block.title"
         :background="block.calloutBackground"
       >
         <template v-for="(segment, segmentIndex) in parseInlineSegments(block.text)" :key="`${block.id}-callout-${segmentIndex}`">

components/content/ProseCallout.vue

@@ -8,6 +8,10 @@ const props = defineProps({
     type: String,
     default: '💡'
   },
+  title: {
+    type: String,
+    default: ''
+  },
   background: {
     type: String,
     default: 'blue'
@@ -44,11 +48,14 @@ const backgroundClass = computed(() => {
     class="prose-callout prose-callout-card mb-2.5 rounded-[10px] p-5 text-[15px] leading-8 text-[var(--site-text)]"
     :class="backgroundClass"
   >
-    <div class="flex items-start gap-2">
-      <span v-if="emojiEnabled" class="inline-flex shrink-0 text-[20px] leading-none">{{ emoji || '💡' }}</span>
-      <div class="min-w-0 flex-1 whitespace-pre-line">
-        <slot />
-      </div>
+    <div v-if="emojiEnabled || title" class="prose-callout-card__header mb-4 flex items-start gap-2">
+      <span v-if="emojiEnabled" class="prose-callout-card__emoji inline-flex shrink-0 pt-0.5 text-[20px] leading-none">{{ emoji || '💡' }}</span>
+      <strong v-if="title" class="prose-callout-card__title min-w-0 text-[18px] leading-[1.35] font-bold text-[#050505]">
+        {{ title }}
+      </strong>
+    </div>
+    <div class="prose-callout-card__body min-w-0 whitespace-pre-line">
+      <slot />
     </div>
   </aside>
 </template>