게시글 목록 행 메뉴 공통화

pages/admin/posts/index.vue

@@ -6,8 +6,7 @@ definePageMeta({
 const deletingId = ref('')
 const togglingFeaturedId = ref('')
 const togglingPinnedId = ref('')
-const openPostMenuId = ref('')
-const postMenuStyle = ref({})
+const { openMenuId: openPostMenuId, closeMenu: closePostMenu } = useAdminRowMenu()
 const errorMessage = ref('')
 const statusFilter = ref('all')
 const tagFilter = ref('all')
@@ -31,7 +30,6 @@ const referenceModalData = ref(createDefaultPostReferences())
 const referenceModalLoading = ref(false)
 const referenceModalError = ref('')
 const referenceModalSearchQuery = ref('')
-const postMenuTriggerRefs = new Map()
 const tagFilterRef = ref(null)
 const postSearchInputRef = ref(null)
 
@@ -715,14 +713,6 @@ const selectAnalyticsModalPeriod = async (period) => {
   await fetchAnalyticsModalData()
 }
 
-/**
- * 열린 행 메뉴를 닫는다.
- * @returns {void}
- */
-const closePostMenu = () => {
-  openPostMenuId.value = ''
-}
-
 /**
  * 태그 필터 드롭다운을 연다.
  * @returns {void}
@@ -826,79 +816,14 @@ const setPostPage = (page) => {
 }
 
 /**
- * 게시물 행 메뉴 트리거 엘리먼트를 저장한다.
- * @param {string} postId - 게시물 ID
- * @param {Element|null} element - 트리거 엘리먼트
- * @returns {void}
- */
-const setPostMenuTriggerRef = (postId, element) => {
-  if (!element) {
-    postMenuTriggerRefs.delete(postId)
-    return
-  }
-
-  postMenuTriggerRefs.set(postId, element)
-}
-
-/**
- * 게시물 행 메뉴 위치를 화면 기준으로 계산한다.
- * @returns {void}
- */
-const updatePostMenuPosition = () => {
-  if (!import.meta.client || !openPostMenuId.value) {
-    return
-  }
-
-  const trigger = postMenuTriggerRefs.get(openPostMenuId.value)
-  if (!trigger) {
-    return
-  }
-
-  const rect = trigger.getBoundingClientRect()
-  const menuWidth = 176
-  const estimatedHeight = 112
-  const margin = 8
-  const left = Math.max(margin, Math.min(rect.right - menuWidth, window.innerWidth - menuWidth - margin))
-  const opensUp = rect.bottom + estimatedHeight + margin > window.innerHeight
-  const top = opensUp
-    ? Math.max(margin, rect.top - estimatedHeight - 4)
-    : rect.bottom + 4
-
-  postMenuStyle.value = {
-    left: `${left}px`,
-    top: `${top}px`,
-    width: `${menuWidth}px`
-  }
-}
-
-/**
- * 행 메뉴 열기/닫기
- * @param {string} postId - 게시물 ID
- * @returns {void}
- */
-const togglePostMenu = (postId) => {
-  openPostMenuId.value = openPostMenuId.value === postId ? '' : postId
-}
-
-/**
- * 외부 클릭 시 행 메뉴 닫기
+ * 외부 클릭 시 태그 필터를 닫는다.
  * @param {PointerEvent} event - 포인터 이벤트
  * @returns {void}
  */
-const onPostMenuDocumentPointerDown = (event) => {
+const onPostListDocumentPointerDown = (event) => {
   if (isTagFilterOpen.value && event.target instanceof Node && !tagFilterRef.value?.contains(event.target)) {
     closeTagFilter()
   }
-
-  if (!openPostMenuId.value || !(event.target instanceof HTMLElement)) {
-    return
-  }
-
-  if (event.target.closest('[data-admin-post-row-menu]')) {
-    return
-  }
-
-  closePostMenu()
 }
 
 /**
@@ -1050,26 +975,13 @@ const deletePost = async (post) => {
 }
 
 onMounted(() => {
-  document.addEventListener('pointerdown', onPostMenuDocumentPointerDown)
+  document.addEventListener('pointerdown', onPostListDocumentPointerDown)
   document.addEventListener('keydown', onDocumentKeydown)
-  window.addEventListener('resize', updatePostMenuPosition)
-  window.addEventListener('scroll', updatePostMenuPosition, true)
 })
 
 onBeforeUnmount(() => {
-  document.removeEventListener('pointerdown', onPostMenuDocumentPointerDown)
+  document.removeEventListener('pointerdown', onPostListDocumentPointerDown)
   document.removeEventListener('keydown', onDocumentKeydown)
-  window.removeEventListener('resize', updatePostMenuPosition)
-  window.removeEventListener('scroll', updatePostMenuPosition, true)
-})
-
-watch(openPostMenuId, async (postId) => {
-  if (!postId) {
-    return
-  }
-
-  await nextTick()
-  updatePostMenuPosition()
 })
 
 watch(tagFilterSearch, () => {
@@ -1385,74 +1297,41 @@ watch(postPageCount, (pageCount) => {
               </p>
             </td>
             <td class="admin-posts__cell admin-posts__cell-actions relative w-12 px-2 py-4 text-right">
-              <div
-                class="admin-posts__row-menu relative inline-flex justify-end"
-                data-admin-post-row-menu
+              <AdminRowMoreMenu
+                v-model:open-menu-id="openPostMenuId"
+                :item-id="post.id"
+                menu-label="게시글 메뉴"
+                :disabled="deletingId === post.id || togglingFeaturedId === post.id || togglingPinnedId === post.id"
+                :busy="deletingId === post.id || togglingFeaturedId === post.id || togglingPinnedId === post.id"
               >
                 <button
-                  :ref="(element) => setPostMenuTriggerRef(post.id, element)"
-                  class="admin-posts__row-menu-trigger inline-flex size-9 items-center justify-center rounded text-[#394047] transition-colors hover:bg-[#eceff2] focus-visible:outline focus-visible:ring-2 focus-visible:ring-[#8e9cac] focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-40"
+                  class="admin-row-more-menu__item"
                   type="button"
-                  :disabled="deletingId === post.id || togglingFeaturedId === post.id || togglingPinnedId === post.id"
-                  :aria-expanded="openPostMenuId === post.id"
-                  aria-haspopup="menu"
-                  :aria-label="openPostMenuId === post.id ? '게시글 메뉴 닫기' : '게시글 메뉴'"
-                  @click.stop="togglePostMenu(post.id)"
+                  role="menuitem"
+                  :disabled="togglingPinnedId === post.id"
+                  @click="togglePostPinned(post)"
                 >
-                  <span
-                    v-if="deletingId === post.id || togglingFeaturedId === post.id || togglingPinnedId === post.id"
-                    class="text-[10px] font-semibold text-muted"
-                    aria-hidden="true"
-                  >…</span>
-                  <svg
-                    v-else
-                    class="size-6 shrink-0"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 -960 960 960"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z" />
-                  </svg>
+                  {{ post.adminPinned ? '고정 해제' : '상단 고정' }}
                 </button>
-                <Teleport to="body">
-                  <div
-                    v-if="openPostMenuId === post.id"
-                    class="admin-posts__row-menu-popover fixed z-[80] overflow-hidden rounded-xl border border-[#e2e5e9] bg-white py-2 text-sm text-[#3f4650] shadow-[0_18px_50px_rgba(15,23,42,0.16)]"
-                    :style="postMenuStyle"
-                    role="menu"
-                    data-admin-post-row-menu
-                  >
-                    <button
-                      class="admin-posts__row-menu-item block w-full px-4 py-2.5 text-left hover:bg-[#f3f5f7] disabled:opacity-50"
-                      type="button"
-                      role="menuitem"
-                      :disabled="togglingPinnedId === post.id"
-                      @click="togglePostPinned(post)"
-                    >
-                      {{ post.adminPinned ? '고정 해제' : '상단 고정' }}
-                    </button>
-                    <button
-                      class="admin-posts__row-menu-item block w-full px-4 py-2.5 text-left hover:bg-[#f3f5f7] disabled:opacity-50"
-                      type="button"
-                      role="menuitem"
-                      :disabled="togglingFeaturedId === post.id"
-                      @click="togglePostFeatured(post)"
-                    >
-                      {{ post.isFeatured ? '추천 제거' : '게시글 추천' }}
-                    </button>
-                    <button
-                      class="admin-posts__row-menu-item block w-full px-4 py-2.5 text-left text-[#c0392b] hover:bg-[#fef2f2] disabled:opacity-50"
-                      type="button"
-                      role="menuitem"
-                      :disabled="deletingId === post.id"
-                      @click="deletePost(post)"
-                    >
-                      게시글 삭제
-                    </button>
-                  </div>
-                </Teleport>
-              </div>
+                <button
+                  class="admin-row-more-menu__item"
+                  type="button"
+                  role="menuitem"
+                  :disabled="togglingFeaturedId === post.id"
+                  @click="togglePostFeatured(post)"
+                >
+                  {{ post.isFeatured ? '추천 제거' : '게시글 추천' }}
+                </button>
+                <button
+                  class="admin-row-more-menu__item admin-row-more-menu__item--danger"
+                  type="button"
+                  role="menuitem"
+                  :disabled="deletingId === post.id"
+                  @click="deletePost(post)"
+                >
+                  게시글 삭제
+                </button>
+              </AdminRowMoreMenu>
             </td>
           </tr>
         </tbody>