feat: PC 에디터 이미지 썸네일 — 편집창 안에서 올린 이미지 확인

- 본문의 ![](url) 이미지를 파싱해 툴바 아래 썸네일 줄로 표시(서버URL·데이터URI 모두)
- 미리보기 탭/패널 제거(한글 IME 위해 textarea 유지), 썸네일로 업로드 확인

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/editor/MarkdownEditor.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
 import Editor from '@toast-ui/editor'
 import '@toast-ui/editor/dist/toastui-editor.css'
 import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all'
 import 'prismjs/themes/prism-tomorrow.css'
 import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css'
-import MarkdownViewer from '@/components/editor/MarkdownViewer.vue'
 import { imageToBlob } from '@/utils/receiptOcr'
 import { boardApi } from '@/api/boardApi'
 
@@ -25,7 +24,14 @@ const isElectron = typeof navigator !== 'undefined' && /electron/i.test(navigato
 /* ===================== PC: textarea 기반 마크다운 에디터 ===================== */
 const text = ref(props.modelValue || '')
 const taRef = ref(null)
-const mode = ref('write') // 'write' | 'preview'
+// 본문의 ![](url) 이미지 URL 목록 → 편집창 안 썸네일로 확인(데이터URI/서버URL 모두)
+const images = computed(() => {
+  const re = /!\[[^\]]*\]\(\s*([^)\s]+)[^)]*\)/g
+  const out = []
+  let m
+  while ((m = re.exec(text.value)) !== null) out.push(m[1])
+  return out
+})
 
 if (isElectron) {
   watch(text, (v) => emit('update:modelValue', v))
@@ -209,46 +215,38 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <!-- PC(Electron): textarea 기반 마크다운 에디터 (툴바 + 미리보기) — 한글 IME 정상 -->
+  <!-- PC(Electron): textarea 기반 마크다운 에디터 (툴바 + 이미지 썸네일) — 한글 IME 정상 -->
   <div v-if="isElectron" class="mde">
-    <div class="mde-tabs">
+    <div class="mde-toolbar">
-      <button type="button" :class="{ active: mode === 'write' }" @click="mode = 'write'">Write</button>
+      <button type="button" title="제목" @click="linePrefix('## ')"><span class="t-h">H</span></button>
-      <button type="button" :class="{ active: mode === 'preview' }" @click="mode = 'preview'">Preview</button>
+      <button type="button" title="굵게" @click="surround('**', '**', '굵게')"><b>B</b></button>
+      <button type="button" title="기울임" @click="surround('*', '*', '기울임')"><i>I</i></button>
+      <button type="button" title="취소선" @click="surround('~~', '~~', '취소선')"><s>S</s></button>
+      <span class="mde-div"></span>
+      <button type="button" title="인용" @click="linePrefix('&gt; ')">❝</button>
+      <button type="button" title="목록" @click="linePrefix('- ')">•</button>
+      <button type="button" title="번호 목록" @click="linePrefix('1. ')">1.</button>
+      <button type="button" title="체크리스트" @click="linePrefix('- [ ] ')">☑</button>
+      <span class="mde-div"></span>
+      <button type="button" title="링크" @click="insertLink()">🔗</button>
+      <button type="button" :title="imgBusy ? '이미지 처리 중…' : '이미지'" :disabled="imgBusy" @click="pickImage()">🖼</button>
+      <button type="button" title="인라인 코드" @click="surround('`', '`', '코드')">&lt;/&gt;</button>
+      <button type="button" title="코드 블록" @click="insertBlock('```\n코드\n```')">{ }</button>
+      <button type="button" title="구분선" @click="insertBlock('---')">―</button>
+      <input ref="imgInput" type="file" accept="image/*" hidden @change="onImagePick" />
     </div>
-
+    <p v-if="imgMsg" class="mde-imgmsg">{{ imgMsg }}</p>
-    <div v-show="mode === 'write'">
+    <!-- 본문에 들어간 이미지 썸네일 — 편집창 안에서 바로 확인 -->
-      <div class="mde-toolbar">
+    <div v-if="images.length" class="mde-thumbs">
-        <button type="button" title="제목" @click="linePrefix('## ')"><span class="t-h">H</span></button>
+      <img v-for="(src, i) in images" :key="i" :src="src" class="mde-thumb" alt="" :title="src" />
-        <button type="button" title="굵게" @click="surround('**', '**', '굵게')"><b>B</b></button>
-        <button type="button" title="기울임" @click="surround('*', '*', '기울임')"><i>I</i></button>
-        <button type="button" title="취소선" @click="surround('~~', '~~', '취소선')"><s>S</s></button>
-        <span class="mde-div"></span>
-        <button type="button" title="인용" @click="linePrefix('&gt; ')">❝</button>
-        <button type="button" title="목록" @click="linePrefix('- ')">•</button>
-        <button type="button" title="번호 목록" @click="linePrefix('1. ')">1.</button>
-        <button type="button" title="체크리스트" @click="linePrefix('- [ ] ')">☑</button>
-        <span class="mde-div"></span>
-        <button type="button" title="링크" @click="insertLink()">🔗</button>
-        <button type="button" :title="imgBusy ? '이미지 처리 중…' : '이미지'" :disabled="imgBusy" @click="pickImage()">🖼</button>
-        <button type="button" title="인라인 코드" @click="surround('`', '`', '코드')">&lt;/&gt;</button>
-        <button type="button" title="코드 블록" @click="insertBlock('```\n코드\n```')">{ }</button>
-        <button type="button" title="구분선" @click="insertBlock('---')">―</button>
-        <input ref="imgInput" type="file" accept="image/*" hidden @change="onImagePick" />
-      </div>
-      <p v-if="imgMsg" class="mde-imgmsg">{{ imgMsg }}</p>
-      <textarea
-        ref="taRef"
-        v-model="text"
-        class="mde-textarea"
-        :placeholder="placeholder"
-        :style="{ height }"
-      ></textarea>
-    </div>
-
-    <div v-show="mode === 'preview'" class="mde-preview" :style="{ minHeight: height }">
-      <MarkdownViewer v-if="text.trim()" :content="text" />
-      <p v-else class="mde-empty">미리볼 내용이 없습니다.</p>
     </div>
+    <textarea
+      ref="taRef"
+      v-model="text"
+      class="mde-textarea"
+      :placeholder="placeholder"
+      :style="{ height }"
+    ></textarea>
   </div>
 
   <!-- 웹/APK: Toast UI 위지윅 -->
@@ -262,28 +260,21 @@ onBeforeUnmount(() => {
   overflow: hidden;
   background: var(--color-background-soft);
 }
-.mde-tabs {
+.mde-thumbs {
   display: flex;
-  gap: 0.25rem;
+  gap: 0.45rem;
-  padding: 0.35rem 0.5rem 0;
+  padding: 0.5rem 0.6rem;
+  overflow-x: auto;
   border-bottom: 1px solid var(--color-border);
-}
-.mde-tabs button {
-  padding: 0.35rem 0.9rem;
-  border: 1px solid transparent;
-  border-bottom: 0;
-  border-radius: 6px 6px 0 0;
-  background: transparent;
-  color: var(--color-text);
-  font-size: 0.85rem;
-  cursor: pointer;
-  opacity: 0.6;
-}
-.mde-tabs button.active {
   background: var(--color-background);
-  border-color: var(--color-border);
+}
-  opacity: 1;
+.mde-thumb {
-  font-weight: 600;
+  height: 56px;
+  max-width: 96px;
+  object-fit: cover;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  flex: 0 0 auto;
 }
 .mde-toolbar {
   display: flex;
@@ -342,14 +333,4 @@ onBeforeUnmount(() => {
 .mde-textarea:focus {
   outline: none;
 }
-.mde-preview {
-  padding: 0.8rem 0.9rem;
-  background: var(--color-background);
-  overflow: auto;
-}
-.mde-empty {
-  opacity: 0.5;
-  font-size: 0.9rem;
-  margin: 0;
-}
 </style>