슬래시 메뉴 재배치 리스너 정리

components/admin/AdminMarkdownEditor.vue

@@ -157,6 +157,10 @@ const liveSlashSuppressedLines = ref(new Set())
 /** 키보드로 슬래시 메뉴를 탐색 중일 때 mouseenter 하이라이트 무시 */
 const liveSlashKeyboardNav = ref(false)
 let liveSlashKeyboardNavTimer = null
+/** @type {HTMLElement|null} 슬래시 메뉴 위치 갱신을 위해 구독한 미리보기 스크롤 영역 */
+let liveSlashPreviewScrollElement = null
+/** @type {HTMLElement|null} 슬래시 메뉴 위치 갱신을 위해 구독한 작성 textarea */
+let liveSlashTextareaScrollElement = null
 
 const liveSlashVisible = computed(() => liveSlashSourceLine.value !== null)
 
@@ -1512,6 +1516,7 @@ onMounted(() => {
   onBeforeUnmount(() => {
     window.clearTimeout(blockPanelFocusTimer)
     window.clearTimeout(liveSlashKeyboardNavTimer)
+    removeLiveSlashRepositionListeners()
     document.removeEventListener('selectionchange', onSelectionChange)
     document.removeEventListener('keydown', onDocumentKeydown, true)
     document.removeEventListener('pointerdown', onDocumentPointerDown, true)
@@ -2427,6 +2432,49 @@ const updateLiveSlashMenuPosition = () => {
   })
 }
 
+/**
+ * 슬래시 메뉴 위치 재계산 이벤트를 실행한다.
+ * @returns {void}
+ */
+const repositionLiveSlashMenu = () => {
+  updateLiveSlashMenuPosition()
+}
+
+/**
+ * 슬래시 메뉴 위치 재계산 이벤트 리스너를 제거한다.
+ * @returns {void}
+ */
+const removeLiveSlashRepositionListeners = () => {
+  if (!import.meta.client) {
+    return
+  }
+
+  window.removeEventListener('scroll', repositionLiveSlashMenu, true)
+  window.removeEventListener('resize', repositionLiveSlashMenu)
+  liveSlashPreviewScrollElement?.removeEventListener('scroll', repositionLiveSlashMenu)
+  liveSlashTextareaScrollElement?.removeEventListener('scroll', repositionLiveSlashMenu)
+  liveSlashPreviewScrollElement = null
+  liveSlashTextareaScrollElement = null
+}
+
+/**
+ * 슬래시 메뉴 위치 재계산 이벤트 리스너를 등록한다.
+ * @returns {void}
+ */
+const addLiveSlashRepositionListeners = () => {
+  if (!import.meta.client) {
+    return
+  }
+
+  removeLiveSlashRepositionListeners()
+  liveSlashPreviewScrollElement = getPreviewSurfaceElement()
+  liveSlashTextareaScrollElement = getWriteTextareaElement()
+  window.addEventListener('scroll', repositionLiveSlashMenu, true)
+  window.addEventListener('resize', repositionLiveSlashMenu)
+  liveSlashPreviewScrollElement?.addEventListener('scroll', repositionLiveSlashMenu)
+  liveSlashTextareaScrollElement?.addEventListener('scroll', repositionLiveSlashMenu)
+}
+
 /**
  * 키보드로 선택한 슬래시 메뉴 항목이 보이도록 스크롤한다.
  * @returns {void}
@@ -2528,22 +2576,14 @@ watch(liveSlashVisible, (visible) => {
     return
   }
 
-  const onReposition = () => updateLiveSlashMenuPosition()
-
   if (visible) {
-    window.addEventListener('scroll', onReposition, true)
-    window.addEventListener('resize', onReposition)
-    getPreviewSurfaceElement()?.addEventListener('scroll', onReposition)
-    getWriteTextareaElement()?.addEventListener('scroll', onReposition)
+    addLiveSlashRepositionListeners()
     updateLiveSlashMenuPosition()
     scrollLiveSlashHighlightedIntoView()
     return
   }
 
-  window.removeEventListener('scroll', onReposition, true)
-  window.removeEventListener('resize', onReposition)
-  getPreviewSurfaceElement()?.removeEventListener('scroll', onReposition)
-  getWriteTextareaElement()?.removeEventListener('scroll', onReposition)
+  removeLiveSlashRepositionListeners()
 })
 
 /**