From 7425d571347f1887bc7951355174789a420751c8 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Mon, 22 Jun 2026 23:44:48 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20Teleport=20=EB=93=9C=EB=A1=AD?=
 =?UTF-8?q?=EB=8B=A4=EC=9A=B4=20=EC=9C=84=EC=B9=98/=ED=86=A0=EA=B8=80=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20useDropdownMenu=20=EB=A1=9C=20=ED=86=B5?=
 =?UTF-8?q?=ED=95=A9=20(Phase=202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DropdownSelect·StatusSelect 에 중복되던 fixed 위치 계산·open 토글·
바깥클릭/ESC/스크롤 닫기 로직을 useDropdownMenu 훅으로 추출.

- composables/useDropdownMenu.ts 신설 (align/matchWidth/gap/esc 옵션)
- DropdownSelect, StatusSelect 가 훅을 사용하도록 정리
- 절대배치 메뉴(일정 멀티셀렉트/유형필터/참석자 스택)는 Phase 0 useClickOutside 로 이미 공유

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/DropdownSelect.vue  | 46 +++-------------
 frontend/src/components/StatusSelect.vue    | 34 +++---------
 frontend/src/composables/useDropdownMenu.ts | 58 +++++++++++++++++++++
 3 files changed, 74 insertions(+), 64 deletions(-)
 create mode 100644 frontend/src/composables/useDropdownMenu.ts

diff --git a/frontend/src/components/DropdownSelect.vue b/frontend/src/components/DropdownSelect.vue
index 868d738..ad8f6a5 100644
--- a/frontend/src/components/DropdownSelect.vue
+++ b/frontend/src/components/DropdownSelect.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts" generic="T extends string">
 // 커스텀 드롭다운(셀렉트) — 네이티브 select 대신 디자인 토큰에 맞춘 정렬/필터 공통 UI.
 // 메뉴는 body 로 Teleport + fixed 위치로 띄워, 스크롤/overflow 컨테이너 안에서도 잘리지 않는다.
-import { computed, nextTick, ref } from 'vue'
-import { useClickOutside } from '@/composables/useClickOutside'
+import { computed } from 'vue'
+import { useDropdownMenu } from '@/composables/useDropdownMenu'
 
 interface Option {
   value: T
@@ -24,55 +24,25 @@ const props = withDefaults(
 )
 const emit = defineEmits<{ (e: 'update:modelValue', value: T): void }>()
 
-const open = ref(false)
-const root = ref<HTMLElement | null>(null)
-const triggerRef = ref<HTMLElement | null>(null)
-const menuRef = ref<HTMLElement | null>(null)
-// 메뉴 fixed 위치(트리거 기준 계산)
-const menuStyle = ref<Record<string, string>>({})
+// 메뉴 위치/토글/바깥클릭 닫기 — 공용 훅
+const { open, triggerRef, menuRef, menuStyle, toggle, close } = useDropdownMenu({
+  align: props.align,
+  matchWidth: true,
+})
 
 // 현재 선택된 옵션 라벨(트리거에 표시)
 const selectedLabel = computed(
   () => props.options.find((o) => o.value === props.modelValue)?.label ?? '',
 )
 
-// 트리거 위치 기준으로 메뉴 좌표 계산(뷰포트 fixed)
-function positionMenu(): void {
-  const el = triggerRef.value
-  if (!el) return
-  const r = el.getBoundingClientRect()
-  const style: Record<string, string> = {
-    top: `${r.bottom + 6}px`,
-    minWidth: `${r.width}px`,
-  }
-  if (props.align === 'right') {
-    style.right = `${Math.max(0, window.innerWidth - r.right)}px`
-  } else {
-    style.left = `${r.left}px`
-  }
-  menuStyle.value = style
-}
-
-function toggle(): void {
-  open.value = !open.value
-  if (open.value) void nextTick(positionMenu)
-}
 function select(value: T): void {
   emit('update:modelValue', value)
-  open.value = false
+  close()
 }
-
-// 바깥 클릭(트리거/메뉴 외부)·Esc·스크롤(위치 어긋남) 시 닫기 — 공용 훅
-useClickOutside(open, () => (open.value = false), [root, menuRef], {
-  event: 'click',
-  esc: true,
-  closeOnScroll: true,
-})
 </script>
 
 <template>
   <div
-    ref="root"
     class="dd"
     :class="{ push: pushRight, block }"
   >
diff --git a/frontend/src/components/StatusSelect.vue b/frontend/src/components/StatusSelect.vue
index 633ac1f..37a2d87 100644
--- a/frontend/src/components/StatusSelect.vue
+++ b/frontend/src/components/StatusSelect.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 진행 상태(대기/진행 중/완료) 선택 드롭다운 — 상태색 테마. 메뉴는 body Teleport(스크롤 클리핑 방지).
-import { computed, nextTick, ref } from 'vue'
-import { useClickOutside } from '@/composables/useClickOutside'
+import { computed } from 'vue'
+import { useDropdownMenu } from '@/composables/useDropdownMenu'
 import type { ChecklistWorkStatus } from '@/mock/relay.mock'
 
 const props = defineProps<{ modelValue: ChecklistWorkStatus }>()
@@ -15,34 +15,16 @@ const META: Record<ChecklistWorkStatus, { label: string; color: string; weak: st
 const ORDER: ChecklistWorkStatus[] = ['todo', 'doing', 'done']
 const cur = computed(() => META[props.modelValue])
 
-const open = ref(false)
-const triggerRef = ref<HTMLElement | null>(null)
-const menuRef = ref<HTMLElement | null>(null)
-const menuStyle = ref<Record<string, string>>({})
+// 메뉴 위치/토글/바깥클릭 닫기 — 공용 훅(우측 정렬, 너비는 CSS 고정)
+const { open, triggerRef, menuRef, menuStyle, toggle, close } = useDropdownMenu({
+  align: 'right',
+  gap: 5,
+})
 
-function positionMenu(): void {
-  const el = triggerRef.value
-  if (!el) return
-  const r = el.getBoundingClientRect()
-  menuStyle.value = {
-    top: `${r.bottom + 5}px`,
-    right: `${Math.max(0, window.innerWidth - r.right)}px`,
-  }
-}
-function toggle(): void {
-  open.value = !open.value
-  if (open.value) void nextTick(positionMenu)
-}
 function pick(v: ChecklistWorkStatus): void {
   emit('update:modelValue', v)
-  open.value = false
+  close()
 }
-// 바깥 클릭·스크롤(위치 어긋남) 시 닫기 — 공용 훅(Teleport 메뉴라 트리거+메뉴 모두 내부로)
-useClickOutside(open, () => (open.value = false), [triggerRef, menuRef], {
-  event: 'click',
-  esc: false,
-  closeOnScroll: true,
-})
 </script>
 
 <template>
diff --git a/frontend/src/composables/useDropdownMenu.ts b/frontend/src/composables/useDropdownMenu.ts
new file mode 100644
index 0000000..58eb258
--- /dev/null
+++ b/frontend/src/composables/useDropdownMenu.ts
@@ -0,0 +1,58 @@
+import { nextTick, ref } from 'vue'
+import { useClickOutside } from './useClickOutside'
+
+// Teleport(body) + fixed 위치로 띄우는 드롭다운 메뉴 공용 훅.
+// 트리거 기준 좌표 계산 · open 토글 · 바깥클릭/ESC/스크롤 닫기를 한 곳으로 모은다.
+// (DropdownSelect, StatusSelect 등 스크롤/overflow 컨테이너 안에서도 안 잘리는 메뉴에 사용)
+//
+// - align:      트리거 좌/우 끝 기준 정렬 (기본 'left')
+// - matchWidth: 메뉴 최소 너비를 트리거 너비에 맞출지 (기본 false)
+// - gap:        트리거 하단과 메뉴 사이 간격(px) (기본 6)
+// - esc:        ESC 로 닫을지 (기본 true)
+export function useDropdownMenu(
+  opts: {
+    align?: 'left' | 'right'
+    matchWidth?: boolean
+    gap?: number
+    esc?: boolean
+  } = {},
+) {
+  const { align = 'left', matchWidth = false, gap = 6, esc = true } = opts
+
+  const open = ref(false)
+  const triggerRef = ref<HTMLElement | null>(null)
+  const menuRef = ref<HTMLElement | null>(null)
+  // 메뉴 fixed 위치(트리거 기준 계산)
+  const menuStyle = ref<Record<string, string>>({})
+
+  function position(): void {
+    const el = triggerRef.value
+    if (!el) return
+    const r = el.getBoundingClientRect()
+    const style: Record<string, string> = { top: `${r.bottom + gap}px` }
+    if (matchWidth) style.minWidth = `${r.width}px`
+    if (align === 'right') {
+      style.right = `${Math.max(0, window.innerWidth - r.right)}px`
+    } else {
+      style.left = `${r.left}px`
+    }
+    menuStyle.value = style
+  }
+
+  function toggle(): void {
+    open.value = !open.value
+    if (open.value) void nextTick(position)
+  }
+  function close(): void {
+    open.value = false
+  }
+
+  // 바깥클릭(트리거/메뉴 외부)·ESC·스크롤(위치 어긋남) 닫기
+  useClickOutside(open, close, [triggerRef, menuRef], {
+    event: 'click',
+    esc,
+    closeOnScroll: true,
+  })
+
+  return { open, triggerRef, menuRef, menuStyle, toggle, close, position }
+}