From f45014f827f6f3f2e3bf85cbc6115b0f252081d4 Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Sun, 7 Jun 2026 19:57:00 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20PC=20=EC=97=90=EB=94=94=ED=84=B0=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A5=BC=20=EC=B2=A8=EB=B6=80(?=
 =?UTF-8?q?=EC=8D=B8=EB=84=A4=EC=9D=BC)=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20?=
 =?UTF-8?q?=E2=80=94=20=EB=B3=B8=EB=AC=B8=20=ED=85=8D=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=EC=97=90=20URL=20=EB=AF=B8=EB=85=B8=EC=B6=9C=20+=20=EC=8D=B8?=
 =?UTF-8?q?=EB=84=A4=EC=9D=BC=20=ED=99=95=EB=8C=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 이미지 마크다운(![](url))을 본문 textarea 에서 분리해 별도 첨부 목록으로 관리
  · 저장 시 본문 끝에 합쳐 emit, 편집 로드 시 본문/이미지 분리
  · 썸네일 120px 확대 + 제거(×) 버튼
- 텍스트는 깨끗하게(긴 URL 미노출), 이미지는 썸네일로 확인

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/editor/MarkdownEditor.vue | 192 ++++++++++++++---------
 1 file changed, 116 insertions(+), 76 deletions(-)

diff --git a/src/components/editor/MarkdownEditor.vue b/src/components/editor/MarkdownEditor.vue
index fa3407d..c9a13f3 100644
--- a/src/components/editor/MarkdownEditor.vue
+++ b/src/components/editor/MarkdownEditor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import { ref, 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'
@@ -16,29 +16,69 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:modelValue'])
 
-// PC(Electron)는 Toast UI 에디터(위지윅·CodeMirror)가 Windows IME 와 충돌해 한글 첫 자음이 중복된다
-// (tui.editor 업스트림 버그, 일반 input/textarea 는 정상). → PC 에선 textarea 기반 마크다운 에디터를 쓴다.
-// 웹/모바일(APK)은 기존 Toast UI 위지윅 유지.
+// PC(Electron)는 Toast UI 에디터가 Windows IME 와 충돌(첫 자음 중복)하므로 textarea 기반 에디터를 쓴다.
+// 웹/모바일(APK)은 Toast UI 위지윅 유지.
 const isElectron = typeof navigator !== 'undefined' && /electron/i.test(navigator.userAgent)
 
-/* ===================== PC: textarea 기반 마크다운 에디터 ===================== */
-const text = ref(props.modelValue || '')
+// 공용: 이미지 압축 후 서버 업로드 → URL 반환
+async function uploadCompressed(fileOrBlob) {
+  const blob = await imageToBlob(fileOrBlob, 1280) // 긴 변 1280px, JPEG 0.85
+  const { url } = await boardApi.uploadImage(blob)
+  return url
+}
+
+/* ===================== PC: 본문 텍스트(textarea) + 이미지 첨부(썸네일) ===================== */
+// 이미지 마크다운은 본문 텍스트에 노출하지 않고 별도 첨부로 관리 → 저장 시 본문 끝에 합쳐 emit.
+const IMG_RE = /!\[([^\]]*)\]\(\s*([^)\s]+)[^)]*\)/g
+function splitContent(md) {
+  const imgs = []
+  const body = (md || '')
+    .replace(IMG_RE, (_, alt, url) => {
+      imgs.push({ url, alt: alt || '' })
+      return ''
+    })
+    .replace(/\n{3,}/g, '\n\n')
+    .trim()
+  return { body, imgs }
+}
+const _init = splitContent(props.modelValue)
+const bodyText = ref(_init.body)
+const images = ref(_init.imgs) // [{ url, alt }]
 const taRef = ref(null)
-// 본문의 ![](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
-})
+const imgInput = ref(null)
+const imgBusy = ref(false)
+const imgMsg = ref('')
+let imgMsgTimer = null
+function flashImgMsg(msg) {
+  imgMsg.value = msg
+  if (imgMsgTimer) clearTimeout(imgMsgTimer)
+  imgMsgTimer = setTimeout(() => (imgMsg.value = ''), 4000)
+}
+
+function combine() {
+  const imgMd = images.value.map((i) => `![${i.alt || ''}](${i.url})`).join('\n\n')
+  return [bodyText.value.trim(), imgMd].filter(Boolean).join('\n\n')
+}
+
+let lastEmitted = isElectron ? combine() : (props.modelValue || '')
 
 if (isElectron) {
-  watch(text, (v) => emit('update:modelValue', v))
+  watch(
+    [bodyText, images],
+    () => {
+      lastEmitted = combine()
+      emit('update:modelValue', lastEmitted)
+    },
+    { deep: true },
+  )
   watch(
     () => props.modelValue,
     (v) => {
-      if ((v || '') !== text.value) text.value = v || ''
+      if ((v || '') === lastEmitted) return
+      const sp = splitContent(v)
+      bodyText.value = sp.body
+      images.value = sp.imgs
+      lastEmitted = v || ''
     },
   )
 }
@@ -49,87 +89,69 @@ function surround(before, after = before, placeholder = '') {
   if (!ta) return
   const s = ta.selectionStart
   const e = ta.selectionEnd
-  const val = text.value
+  const val = bodyText.value
   const sel = val.slice(s, e) || placeholder
-  text.value = val.slice(0, s) + before + sel + after + val.slice(e)
+  bodyText.value = val.slice(0, s) + before + sel + after + val.slice(e)
   nextTick(() => {
     ta.focus()
     const start = s + before.length
     ta.setSelectionRange(start, start + sel.length)
   })
 }
-
 // 선택한 줄들 앞에 접두어 추가(제목/인용/목록 등)
 function linePrefix(prefix) {
   const ta = taRef.value
   if (!ta) return
   const s = ta.selectionStart
   const e = ta.selectionEnd
-  const val = text.value
+  const val = bodyText.value
   const lineStart = val.lastIndexOf('\n', s - 1) + 1
   const block = val.slice(lineStart, e)
   const prefixed = block
     .split('\n')
     .map((ln) => prefix + ln)
     .join('\n')
-  text.value = val.slice(0, lineStart) + prefixed + val.slice(e)
+  bodyText.value = val.slice(0, lineStart) + prefixed + val.slice(e)
   nextTick(() => {
     ta.focus()
     ta.setSelectionRange(lineStart, lineStart + prefixed.length)
   })
 }
-
 // 현재 위치에 블록 삽입(코드블록/구분선)
 function insertBlock(block) {
   const ta = taRef.value
   if (!ta) return
   const s = ta.selectionStart
-  const val = text.value
+  const val = bodyText.value
   const nl = s > 0 && val[s - 1] !== '\n' ? '\n' : ''
   const insert = nl + block + '\n'
-  text.value = val.slice(0, s) + insert + val.slice(s)
+  bodyText.value = val.slice(0, s) + insert + val.slice(s)
   nextTick(() => {
     ta.focus()
     const pos = s + insert.length
     ta.setSelectionRange(pos, pos)
   })
 }
-
 function insertLink() {
   const ta = taRef.value
   if (!ta) return
   const s = ta.selectionStart
   const e = ta.selectionEnd
-  const val = text.value
+  const val = bodyText.value
   const sel = val.slice(s, e) || '링크텍스트'
   const md = `[${sel}](url)`
-  text.value = val.slice(0, s) + md + val.slice(e)
+  bodyText.value = val.slice(0, s) + md + val.slice(e)
   nextTick(() => {
     ta.focus()
-    const urlStart = s + sel.length + 3 // "[sel]("
+    const urlStart = s + sel.length + 3
     ta.setSelectionRange(urlStart, urlStart + 3)
   })
 }
 
-// 이미지: 파일 → 리사이즈/압축(JPEG) → 서버 업로드(DB 저장) → 본문엔 /api/images/{id} URL 만 삽입
-const imgInput = ref(null)
-const imgBusy = ref(false)
-const imgMsg = ref('')
-let imgMsgTimer = null
-function flashImgMsg(msg) {
-  imgMsg.value = msg
-  if (imgMsgTimer) clearTimeout(imgMsgTimer)
-  imgMsgTimer = setTimeout(() => (imgMsg.value = ''), 4000)
-}
+// 이미지: 파일 → 압축 → 서버 업로드 → 첨부 목록에 추가(본문 텍스트엔 미노출)
 function pickImage() {
   imgInput.value?.click()
 }
-// 압축 후 업로드 → URL 반환 (PC textarea·Toast UI 공용)
-async function uploadCompressed(fileOrBlob) {
-  const blob = await imageToBlob(fileOrBlob, 1280) // 긴 변 1280px, JPEG 0.85
-  const { url } = await boardApi.uploadImage(blob)
-  return url
-}
 async function onImagePick(e) {
   const file = e.target.files?.[0]
   e.target.value = ''
@@ -138,17 +160,8 @@ async function onImagePick(e) {
   imgMsg.value = '이미지 업로드 중…'
   try {
     const url = await uploadCompressed(file)
-    const ta = taRef.value
-    const s = ta ? ta.selectionStart : text.value.length
     const alt = file.name.replace(/\.[^.]+$/, '')
-    const md = `![${alt}](${url})`
-    text.value = text.value.slice(0, s) + md + text.value.slice(s)
-    nextTick(() => {
-      if (!ta) return
-      ta.focus()
-      const pos = s + md.length
-      ta.setSelectionRange(pos, pos)
-    })
+    images.value = [...images.value, { url, alt }]
     imgMsg.value = ''
   } catch (err) {
     flashImgMsg(err?.response?.data?.message || '이미지 업로드에 실패했습니다.')
@@ -156,11 +169,13 @@ async function onImagePick(e) {
     imgBusy.value = false
   }
 }
+function removeImage(i) {
+  images.value = images.value.filter((_, idx) => idx !== i)
+}
 
 /* ===================== 웹/APK: Toast UI 위지윅 ===================== */
 const el = ref(null)
 let editor = null
-let lastEmitted = props.modelValue || ''
 
 onMounted(() => {
   if (isElectron) return
@@ -215,7 +230,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <!-- PC(Electron): textarea 기반 마크다운 에디터 (툴바 + 이미지 썸네일) — 한글 IME 정상 -->
+  <!-- PC(Electron): textarea 기반 마크다운 에디터 (툴바 + 이미지 첨부 썸네일) — 한글 IME 정상 -->
   <div v-if="isElectron" class="mde">
     <div class="mde-toolbar">
       <button type="button" title="제목" @click="linePrefix('## ')"><span class="t-h">H</span></button>
@@ -229,20 +244,23 @@ onBeforeUnmount(() => {
       <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="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-if="images.length" class="mde-thumbs">
-      <img v-for="(src, i) in images" :key="i" :src="src" class="mde-thumb" alt="" :title="src" />
+      <div v-for="(img, i) in images" :key="i" class="mde-thumb-wrap">
+        <img :src="img.url" class="mde-thumb" alt="" :title="img.alt || img.url" />
+        <button type="button" class="mde-thumb-del" title="이미지 제거" @click="removeImage(i)">×</button>
+      </div>
     </div>
     <textarea
       ref="taRef"
-      v-model="text"
+      v-model="bodyText"
       class="mde-textarea"
       :placeholder="placeholder"
       :style="{ height }"
@@ -260,22 +278,6 @@ onBeforeUnmount(() => {
   overflow: hidden;
   background: var(--color-background-soft);
 }
-.mde-thumbs {
-  display: flex;
-  gap: 0.45rem;
-  padding: 0.5rem 0.6rem;
-  overflow-x: auto;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-background);
-}
-.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;
   flex-wrap: wrap;
@@ -317,6 +319,44 @@ onBeforeUnmount(() => {
   background: hsla(160, 100%, 37%, 0.08);
   border-bottom: 1px solid var(--color-border);
 }
+.mde-thumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  padding: 0.6rem;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-background);
+}
+.mde-thumb-wrap {
+  position: relative;
+  flex: 0 0 auto;
+}
+.mde-thumb {
+  display: block;
+  height: 120px;
+  max-width: 220px;
+  object-fit: cover;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+}
+.mde-thumb-del {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 1.05rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.mde-thumb-del:hover {
+  background: rgba(0, 0, 0, 0.78);
+}
 .mde-textarea {
   display: block;
   width: 100%;