슬래시 메뉴 키 입력 판별 분리

components/admin/AdminMarkdownEditor.vue

@@ -51,6 +51,7 @@ import {
   getNextSlashHighlightedIndex,
   getSlashCommandFocusTarget,
   getSlashCommandTextareaSelection,
+  getSlashMenuKeyboardAction,
   insertMarkdownLinesAtSlashTarget,
   isMediaSlashAction,
   parseSlashInput,
@@ -1451,7 +1452,9 @@ onMounted(() => {
     }
 
     if (liveSlashVisible.value) {
-      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      const slashKeyboardAction = getSlashMenuKeyboardAction(event.key)
+
+      if (slashKeyboardAction === 'navigate') {
         event.preventDefault()
         const count = visibleLiveSlashCommands.value.length
 
@@ -1472,7 +1475,7 @@ onMounted(() => {
         return
       }
 
-      if (event.key === 'Enter') {
+      if (slashKeyboardAction === 'apply') {
         event.preventDefault()
         const command = visibleLiveSlashCommands.value[liveSlashHighlightedIndex.value]
 
@@ -1483,7 +1486,7 @@ onMounted(() => {
         return
       }
 
-      if (event.key === 'Escape') {
+      if (slashKeyboardAction === 'cancel') {
         event.preventDefault()
         cancelLiveSlashCommand()
         return

docs/map.md

@@ -60,7 +60,7 @@
 | lib/markdown-image.js | 이미지 마크다운 직렬화·파싱, 단독 이미지 URL 판별 |
 | lib/markdown-table.js | 공개 Markdown 표 행·구분선·정렬·블록 파싱 |
 | lib/markdown-toc.js | 공개 게시글 TOC용 H1~H3 제목 추출과 앵커 ID 생성 |
-| lib/markdown-slash-commands.js | 관리자 Markdown-first 에디터 슬래시 명령 목록과 삽입 줄 정의, 미디어 명령 action·모달 종류 판별, 슬래시 메뉴 제외 줄 Set·하이라이트 인덱스·방향키 순환 갱신, 미디어 명령 지연 commit 무시·슬래시 원문 줄 교체 삽입, 적용 후 포커스·textarea 선택 위치 계산 helper |
+| lib/markdown-slash-commands.js | 관리자 Markdown-first 에디터 슬래시 명령 목록과 삽입 줄 정의, 미디어 명령 action·모달 종류 판별, 슬래시 메뉴 제외 줄 Set·하이라이트 인덱스·방향키 순환 갱신·키보드 동작 분류, 미디어 명령 지연 commit 무시·슬래시 원문 줄 교체 삽입, 적용 후 포커스·textarea 선택 위치 계산 helper |
 | lib/markdown-slash-menu-position.js | 관리자 Markdown-first 에디터 슬래시 메뉴 뷰포트 위치 보정 helper |
 | lib/markdown-slash-menu-scroll.js | 관리자 Markdown-first 에디터 슬래시 메뉴 선택 항목 표시용 scrollTop 계산 helper |
 | lib/markdown-inline.js | 공개·관리자 공통 인라인 마크다운 파서, 링크·굵게·기울임·인라인 코드·첨자·인라인 색상 토큰(`::color[텍스트]`) 변환, 링크·굵게·기울임·색상 내부 중첩 인라인 문법과 `<br>` 줄바꿈 처리, 라이브 멀티라인 본문의 기본 불릿/번호 목록 HTML 변환과 contenteditable 목록 마커 기준 커서 offset 계산·직렬화 |
@@ -123,7 +123,7 @@
 | tests/markdown-block-context.test.js | 관리자 블록 설정 패널의 활성 블록 컨텍스트 단위 회귀 테스트 |
 | tests/markdown-editor-history.test.js | 관리자 Markdown 에디터 undo/redo 히스토리 항목과 선택 범위 보정 단위 회귀 테스트 |
 | tests/markdown-editor-media.test.js | 관리자 Markdown 에디터 미디어 선택 helper의 종류·선택 가능 여부·미리보기·선택 상태·블록 생성 단위 회귀 테스트 |
-| tests/markdown-slash-commands.test.js | 관리자 슬래시 명령 파싱·미디어 action·모달 종류·제외 줄 Set 갱신·하이라이트 인덱스 보정·방향키 순환·포커스 대상·textarea 선택 위치·원문 줄 교체 삽입 단위 회귀 테스트 |
+| tests/markdown-slash-commands.test.js | 관리자 슬래시 명령 파싱·미디어 action·모달 종류·제외 줄 Set 갱신·하이라이트 인덱스 보정·방향키 순환·키보드 동작 분류·포커스 대상·textarea 선택 위치·원문 줄 교체 삽입 단위 회귀 테스트 |
 | tests/markdown-slash-menu-scroll.test.js | 관리자 슬래시 메뉴 선택 항목 scrollTop 보정 단위 테스트 |
 | tests/markdown-block-parser.test.js | 공개 Markdown 본문 블록 파싱 단위 회귀 테스트 |
 | tests/markdown-fenced-meta.test.js | Markdown fenced 블록 시작·종료 줄 탐색, 본문 수집, 메타 파싱 단위 회귀 테스트 |

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 이력
 
+## v1.11.92
+
+- 관리자 Markdown 에디터의 슬래시 메뉴 키보드 입력 동작 판별을 `markdown-slash-commands` helper로 분리.
+- 슬래시 메뉴 방향키·Enter·Escape 동작 분류 단위 테스트 추가.
+
 ## v1.11.91
 
 - 관리자 Markdown 에디터의 슬래시 메뉴 방향키 순환 인덱스 계산을 `markdown-slash-commands` helper로 분리.

lib/markdown-slash-commands.js

@@ -319,6 +319,27 @@ export const getNextSlashHighlightedIndex = ({ currentIndex, commandCount, key }
   return index
 }
 
+/**
+ * 슬래시 메뉴에서 키보드 입력이 수행할 동작을 계산한다.
+ * @param {string} key - 누른 키
+ * @returns {'navigate'|'apply'|'cancel'|''} 메뉴 동작
+ */
+export const getSlashMenuKeyboardAction = (key) => {
+  if (key === 'ArrowDown' || key === 'ArrowUp') {
+    return 'navigate'
+  }
+
+  if (key === 'Enter') {
+    return 'apply'
+  }
+
+  if (key === 'Escape') {
+    return 'cancel'
+  }
+
+  return ''
+}
+
 /**
  * 라이브 모드 미디어 슬래시 명령 처리 중 지연 commit을 무시할지 확인한다.
  * @param {Object} options - 판별 옵션

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.11.91",
+  "version": "1.11.92",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.11.91",
+      "version": "1.11.92",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.11.91",
+  "version": "1.11.92",
   "private": true,
   "type": "module",
   "imports": {

tests/markdown-slash-commands.test.js

@@ -7,6 +7,7 @@ import {
   getNextSlashHighlightedIndex,
   getSlashCommandFocusTarget,
   getSlashCommandTextareaSelection,
+  getSlashMenuKeyboardAction,
   insertMarkdownLinesAtSlashTarget,
   isMediaSlashAction,
   parseSlashInput,
@@ -86,6 +87,14 @@ test('슬래시 메뉴 하이라이트 인덱스는 방향키로 순환한다',
   assert.equal(getNextSlashHighlightedIndex({ currentIndex: 1, commandCount: 3, key: 'Enter' }), 1)
 })
 
+test('슬래시 메뉴 키보드 입력은 메뉴 동작으로 분류한다', () => {
+  assert.equal(getSlashMenuKeyboardAction('ArrowDown'), 'navigate')
+  assert.equal(getSlashMenuKeyboardAction('ArrowUp'), 'navigate')
+  assert.equal(getSlashMenuKeyboardAction('Enter'), 'apply')
+  assert.equal(getSlashMenuKeyboardAction('Escape'), 'cancel')
+  assert.equal(getSlashMenuKeyboardAction('Tab'), '')
+})
+
 test('슬래시 명령 줄에 미디어를 삽입할 때 원문 줄을 교체한다', () => {
   const markdown = [
     '첫 줄',