sori.studio/composables/useAdminRowMenu.js

/**
 * 관리자 테이블·목록 행 more vert 메뉴 열림 상태
 * @returns {{ openMenuId: import('vue').Ref<string>, closeMenu: () => void }}
 */
export const useAdminRowMenu = () => {
  const openMenuId = ref('')

  /**
   * 열린 메뉴를 닫는다.
   * @returns {void}
   */
  const closeMenu = () => {
    openMenuId.value = ''
  }

  /**
   * 문서 바깥 클릭 시 메뉴를 닫는다.
   * @param {PointerEvent} event - 포인터 이벤트
   * @returns {void}
   */
  const onDocumentPointerDown = (event) => {
    if (!openMenuId.value || !(event.target instanceof HTMLElement)) {
      return
    }

    if (event.target.closest('[data-admin-row-menu]')) {
      return
    }

    closeMenu()
  }

  onMounted(() => {
    document.addEventListener('pointerdown', onDocumentPointerDown)
  })

  onBeforeUnmount(() => {
    document.removeEventListener('pointerdown', onDocumentPointerDown)
  })

  return {
    openMenuId,
    closeMenu
  }
}