에디터 보조 UI 컴포넌트 분리

components/admin/AdminMarkdownModeToggle.vue

@@ -0,0 +1,60 @@
+<script setup>
+defineProps({
+  activeMode: {
+    type: String,
+    required: true
+  },
+  teleportTo: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['toggle'])
+</script>
+
+<template>
+  <Teleport v-if="teleportTo" :to="teleportTo">
+    <button
+      class="admin-markdown-editor__mode-toggle inline-flex size-8 shrink-0 items-center justify-center rounded text-[#394047] transition-colors hover:bg-[#f1f3f4] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#8e9cac]"
+      type="button"
+      :aria-label="activeMode === 'write' ? '미리보기로 전환' : '작성 모드로 전환'"
+      @click="emit('toggle')"
+    >
+      <svg
+        v-if="activeMode === 'write'"
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="admin-markdown-editor__mode-icon lucide-book-open"
+        aria-hidden="true"
+      >
+        <path d="M12 7v14" />
+        <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
+      </svg>
+      <svg
+        v-else
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="admin-markdown-editor__mode-icon lucide-edit-3"
+        aria-hidden="true"
+      >
+        <path d="M13 21h8" />
+        <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+      </svg>
+    </button>
+  </Teleport>
+</template>