Merge branch 'dev'

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,14 +215,8 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <!-- PC(Electron): textarea 기반 마크다운 에디터 (툴바 + 미리보기) — 한글 IME 정상 -->
+  <!-- PC(Electron): textarea 기반 마크다운 에디터 (툴바 + 이미지 썸네일) — 한글 IME 정상 -->
   <div v-if="isElectron" class="mde">
-    <div class="mde-tabs">
-      <button type="button" :class="{ active: mode === 'write' }" @click="mode = 'write'">Write</button>
-      <button type="button" :class="{ active: mode === 'preview' }" @click="mode = 'preview'">Preview</button>
-    </div>
-
-    <div v-show="mode === 'write'">
     <div class="mde-toolbar">
       <button type="button" title="제목" @click="linePrefix('## ')"><span class="t-h">H</span></button>
       <button type="button" title="굵게" @click="surround('**', '**', '굵게')"><b>B</b></button>
@@ -236,6 +236,10 @@ onBeforeUnmount(() => {
       <input ref="imgInput" type="file" accept="image/*" hidden @change="onImagePick" />
     </div>
     <p v-if="imgMsg" class="mde-imgmsg">{{ imgMsg }}</p>
+    <!-- 본문에 들어간 이미지 썸네일 — 편집창 안에서 바로 확인 -->
+    <div v-if="images.length" class="mde-thumbs">
+      <img v-for="(src, i) in images" :key="i" :src="src" class="mde-thumb" alt="" :title="src" />
+    </div>
     <textarea
       ref="taRef"
       v-model="text"
@@ -245,12 +249,6 @@ onBeforeUnmount(() => {
     ></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>
-  </div>
-
   <!-- 웹/APK: Toast UI 위지윅 -->
   <div v-else ref="el"></div>
 </template>
@@ -262,28 +260,21 @@ onBeforeUnmount(() => {
   overflow: hidden;
   background: var(--color-background-soft);
 }
-.mde-tabs {
+.mde-thumbs {
   display: flex;
-  gap: 0.25rem;
-  padding: 0.35rem 0.5rem 0;
+  gap: 0.45rem;
+  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;
-  font-weight: 600;
+}
+.mde-thumb {
+  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>