v1.4.2: 라이브 이미지·갤러리 편집 UX와 공개 화면 색상 정리

라이브 모드 이미지·갤러리 드래그 병합·분리, 갤러리 개별 편집, 블록 패널 유지, 다크모드 인용·사이드바·리스트 마커 색상을 보정한다.

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

components/content/ProseImage.vue

@@ -1,8 +1,10 @@
 <script setup>
-defineProps({
+import { getImageDefaultAltLabel } from '../../lib/markdown-image.js'
+
+const props = defineProps({
   src: {
     type: String,
-    required: true
+    default: ''
   },
   alt: {
     type: String,
@@ -18,6 +20,42 @@ defineProps({
     default: 'regular'
   }
 })
+
+const loadFailed = ref(false)
+
+const hasRenderableSrc = computed(() => String(props.src || '').trim().length > 0)
+
+const errorLabel = computed(() => {
+  const trimmed = String(props.src || '').trim()
+
+  if (!trimmed) {
+    return '이미지 URL이 비어 있습니다'
+  }
+
+  const filename = getImageDefaultAltLabel(trimmed)
+
+  return filename ? `이미지를 불러올 수 없습니다 · ${filename}` : '이미지를 불러올 수 없습니다'
+})
+
+watch(() => props.src, () => {
+  loadFailed.value = false
+})
+
+/**
+ * 이미지 로드 실패 시 placeholder를 표시한다.
+ * @returns {void}
+ */
+const onImageError = () => {
+  loadFailed.value = true
+}
+
+/**
+ * 이미지 로드 성공 시 오류 상태를 해제한다.
+ * @returns {void}
+ */
+const onImageLoad = () => {
+  loadFailed.value = false
+}
 </script>
 
 <template>
@@ -28,8 +66,32 @@ defineProps({
       'prose-image--full lg:-mx-20 lg:max-w-none': variant === 'full'
     }"
   >
-    <div class="overflow-hidden rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)]">
-      <img class="prose-image__media w-full object-cover" :src="src" :alt="alt">
+    <div
+      class="prose-image__frame overflow-hidden rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)]"
+      :class="{
+        'prose-image__frame--empty': !hasRenderableSrc || loadFailed,
+        'prose-image__frame--broken': loadFailed
+      }"
+    >
+      <img
+        v-if="hasRenderableSrc && !loadFailed"
+        class="prose-image__media w-full object-cover"
+        :src="src"
+        :alt="alt"
+        @load="onImageLoad"
+        @error="onImageError"
+      >
+      <div
+        v-else
+        class="prose-image__placeholder flex min-h-[180px] flex-col items-center justify-center gap-2 px-4 py-6 text-center"
+        role="img"
+        :aria-label="errorLabel"
+      >
+        <span class="prose-image__placeholder-icon text-2xl text-[var(--site-muted)]" aria-hidden="true">!</span>
+        <p class="prose-image__placeholder-text max-w-full break-all text-sm text-[var(--site-muted)]">
+          {{ errorLabel }}
+        </p>
+      </div>
     </div>
     <figcaption
       v-if="caption"
@@ -39,3 +101,26 @@ defineProps({
     </figcaption>
   </figure>
 </template>
+
+<style scoped>
+.prose-image__frame--empty,
+.prose-image__frame--broken {
+  min-height: 180px;
+}
+
+.prose-image__frame:not(.prose-image__frame--empty):not(.prose-image__frame--broken) {
+  min-height: 120px;
+}
+
+.prose-image__placeholder-icon {
+  display: inline-flex;
+  height: 2.5rem;
+  width: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border: 1px dashed var(--site-line);
+  background: color-mix(in srgb, var(--site-panel) 88%, #fff 12%);
+  font-weight: 700;
+}
+</style>