코드 블록 설정 패널 UI 정리

components/admin/AdminEditorBlockPanel.vue

@@ -78,7 +78,18 @@ const inlineColorSwatches = {
   purple: '#8800ff'
 }
 
-const languageOptions = ['', 'javascript', 'html', 'css', 'vue', 'json', 'bash', 'markdown', 'sql']
+/** @type {Array<{ label: string, value: string }>} 코드 블록 언어 셀렉트 옵션 */
+const CODE_LANGUAGE_OPTIONS = [
+  { label: '일반 텍스트', value: '' },
+  { label: 'JavaScript', value: 'javascript' },
+  { label: 'HTML', value: 'html' },
+  { label: 'CSS', value: 'css' },
+  { label: 'Vue', value: 'vue' },
+  { label: 'JSON', value: 'json' },
+  { label: 'Bash', value: 'bash' },
+  { label: 'Markdown', value: 'markdown' },
+  { label: 'SQL', value: 'sql' }
+]
 
 /** @type {number|null} 패널 내부 포인터 조작 상태 해제 타이머 */
 let panelPointerInsideTimer = null
@@ -640,33 +651,36 @@ onBeforeUnmount(() => {
         </template>
 
         <template v-else-if="panel.kind === 'code'">
-          <div class="admin-editor-block-panel__code-settings grid gap-4">
+          <div class="admin-editor-block-panel__code-settings grid gap-5">
             <label class="admin-editor-block-panel__field grid gap-2 text-sm">
               <span class="font-semibold text-[#394047]">언어</span>
-              <input
-                class="rounded border border-[#d7dde2] bg-[#eff1f2] px-3 py-2 text-sm text-[#15171a] outline-none transition-colors focus:border-[#8e9cac]"
-                :value="panel.language"
-                type="text"
-                list="admin-editor-block-panel-languages"
-                placeholder="javascript"
-                @input="emit('update-code-options', { language: $event.target.value })"
-              >
-              <datalist id="admin-editor-block-panel-languages">
-                <option
-                  v-for="language in languageOptions"
-                  :key="`code-language-${language || 'plain'}`"
-                  :value="language"
-                />
-              </datalist>
+              <AdminSelectInput
+                :model-value="panel.language"
+                :options="CODE_LANGUAGE_OPTIONS"
+                label="코드 블록 언어"
+                root-class="admin-editor-block-panel__code-language-select"
+                width-class="w-full"
+                select-class="bg-[#eff1f2] border-[#d7dde2] text-[#15171a]"
+                @update:model-value="emit('update-code-options', { language: $event })"
+              />
             </label>
-            <label class="flex cursor-pointer items-center justify-between gap-3 rounded border border-[#edf0f2] bg-[#fafafa] px-3 py-3 text-sm font-semibold text-[#394047]">
-              <span>줄번호 표시</span>
-              <input
-                class="size-4 rounded border-[#c8ced3] text-[#15171a]"
-                type="checkbox"
-                :checked="panel.showLineNumbers"
-                @change="emit('update-code-options', { showLineNumbers: $event.target.checked })"
-              >
+            <label class="admin-editor-block-panel__code-line-number-toggle flex cursor-pointer items-center justify-between gap-4 border-t border-[#e3e6e8] pt-5 text-sm">
+              <span class="admin-editor-block-panel__code-line-number-toggle-copy flex min-w-0 items-center gap-3">
+                <span class="admin-editor-block-panel__code-line-number-toggle-label font-bold text-[#15171a]">
+                  줄번호 표시
+                </span>
+              </span>
+              <span class="admin-editor-block-panel__code-line-number-toggle-control relative inline-flex h-7 w-12 shrink-0 items-center">
+                <input
+                  class="peer sr-only"
+                  type="checkbox"
+                  aria-label="줄번호 표시"
+                  :checked="panel.showLineNumbers"
+                  @change="emit('update-code-options', { showLineNumbers: $event.target.checked })"
+                >
+                <span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#15171a]" aria-hidden="true" />
+                <span class="relative ml-1 size-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
+              </span>
             </label>
           </div>
         </template>

components/admin/AdminMarkdownEditor.vue

@@ -986,29 +986,28 @@ const handleTextareaCompositionEnd = () => {
  * @returns {void}
  */
 const refreshCaretLogicalLine = () => {
-  nextTick(() => {
-    const textarea = textareaRef.value
+  const textarea = textareaRef.value
 
-    if (!textarea) {
-      return
-    }
+  if (!textarea) {
+    return
+  }
 
-    const value = markdownValue.value ?? ''
-    const pos = Math.min(textarea.selectionStart, value.length)
-    const lineIndex = value.slice(0, pos).split('\n').length - 1
+  const value = markdownValue.value ?? ''
+  const start = Math.min(textarea.selectionStart, value.length)
+  const end = Math.min(textarea.selectionEnd, value.length)
+  const lineIndex = value.slice(0, start).split('\n').length - 1
 
-    lastSelectionState.value = {
-      start: Math.min(textarea.selectionStart, value.length),
-      end: Math.min(textarea.selectionEnd, value.length)
-    }
-    activeLogicalLineIndex.value = Math.max(0, lineIndex)
-    syncTextareaHeight()
-    syncBlockPanelState()
+  lastSelectionState.value = {
+    start,
+    end
+  }
+  activeLogicalLineIndex.value = Math.max(0, lineIndex)
+  syncBlockPanelState()
+  syncTextareaHeight()
 
-    if (activeMode.value === 'write' && document.activeElement === textarea) {
-      syncWriteSlashState()
-    }
-  })
+  if (activeMode.value === 'write' && document.activeElement === textarea) {
+    nextTick(syncWriteSlashState)
+  }
 }
 
 /**