From 9c61f888a5c914e668eb886aa5d8692a540d945b Mon Sep 17 00:00:00 2001
From: ByungCheol <kenneth73510@nurier.co.kr>
Date: Sun, 7 Jun 2026 17:56:20 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20PC(Electron)=20=EB=B3=B8=EB=AC=B8=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=EC=9D=84=20=EC=9D=BC=EB=B0=98=20textarea?=
 =?UTF-8?q?=EB=A1=9C=20=E2=80=94=20=ED=95=9C=EA=B8=80=20IME=20=EC=A4=91?=
 =?UTF-8?q?=EB=B3=B5=20=EC=99=84=EC=A0=84=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Toast UI 위지윅·마크다운(CodeMirror) 둘 다 Electron 한글 IME 첫 자음 중복 발생
  (제목 등 일반 input 은 정상) → PC 에선 본문을 일반 textarea(v-model, 네이티브 IME)로 입력
- 웹/APK 는 기존 Toast UI 위지윅 유지

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

diff --git a/src/components/editor/MarkdownEditor.vue b/src/components/editor/MarkdownEditor.vue
index 068a59f..70aa321 100644
--- a/src/components/editor/MarkdownEditor.vue
+++ b/src/components/editor/MarkdownEditor.vue
@@ -14,23 +14,36 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:modelValue'])
 
-// PC(Electron)는 위지윅(contenteditable)에서 한글 IME 첫 자음이 중복되는 Chromium 버그가 있어
-// 마크다운(텍스트 기반) 모드로 입력받는다. 웹/모바일(APK)은 위지윅 유지.
+// PC(Electron)는 Toast UI 에디터(위지윅·CodeMirror 모두)에서 한글 IME 첫 자음이 중복되는
+// Chromium 버그가 있다(제목 등 일반 입력은 정상). → PC 에선 일반 textarea(네이티브 IME)로 입력받는다.
+// 웹/모바일(APK)은 기존 Toast UI 위지윅 유지.
 const isElectron = typeof navigator !== 'undefined' && /electron/i.test(navigator.userAgent)
-const editType = isElectron ? 'markdown' : props.initialEditType
 
+// ===== PC: 일반 textarea (Vue v-model 이 IME 조합을 올바르게 처리) =====
+const text = ref(props.modelValue || '')
+if (isElectron) {
+  watch(text, (v) => emit('update:modelValue', v))
+  watch(
+    () => props.modelValue,
+    (v) => {
+      if ((v || '') !== text.value) text.value = v || ''
+    },
+  )
+}
+
+// ===== 웹/APK: Toast UI 위지윅 =====
 const el = ref(null)
 let editor = null
-// 에디터가 마지막으로 emit 한 값. 부모가 되돌려준 echo 를 구분해 입력 중 setMarkdown 으로 끊기지 않게.
 let lastEmitted = props.modelValue || ''
 
 onMounted(() => {
+  if (isElectron) return
   editor = new Editor({
     el: el.value,
     height: props.height,
-    initialEditType: editType,
+    initialEditType: props.initialEditType,
     hideModeSwitch: true,
-    plugins: [codeSyntaxHighlight], // 코드 구문 강조
+    plugins: [codeSyntaxHighlight],
     initialValue: props.modelValue || '',
     placeholder: props.placeholder,
     usageStatistics: false,
@@ -44,10 +57,10 @@ onMounted(() => {
   })
 })
 
-// 외부 값 변경(수정 로드, 제출 후 초기화 등)만 에디터에 반영. echo 는 무시.
 watch(
   () => props.modelValue,
   (val) => {
+    if (isElectron) return
     const v = val || ''
     if (v === lastEmitted) return
     if (editor && v !== editor.getMarkdown()) {
@@ -64,5 +77,34 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="el"></div>
+  <!-- PC(Electron): 일반 textarea — 한글 IME 정상 -->
+  <textarea
+    v-if="isElectron"
+    v-model="text"
+    class="md-textarea"
+    :placeholder="placeholder"
+    :style="{ height }"
+  ></textarea>
+  <!-- 웹/APK: Toast UI 에디터 -->
+  <div v-else ref="el"></div>
 </template>
+
+<style scoped>
+.md-textarea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.75rem 0.9rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  font-family: inherit;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  resize: vertical;
+}
+.md-textarea:focus {
+  outline: none;
+  border-color: hsla(160, 100%, 37%, 1);
+}
+</style>