Merge pull request #85 from TaskFlow-CLAP/CLAP-262

CLAP-262 useOutsideClick 커스텀 훅 구현

Author: seorang42

src/components/filters/FilterCategory.vue

@@ -3,6 +3,7 @@
     <div class="filter-container grow">
       <span class="filter-title">1차 카테고리</span>
       <div
+        ref="mainRef"
         class="filter-dropdown"
         @click="toggleDropdown('main')">
         <span class="grow text-center">선택</span>
@@ -31,6 +32,7 @@
     <div class="filter-container grow">
       <span class="filter-title">2차 카테고리</span>
       <div
+        ref="subRef"
         class="filter-dropdown"
         :class="isDisabled ? 'bg-background-2 text-disabled' : 'text-black'"
         @click="!isDisabled && toggleDropdown('sub')">
@@ -77,6 +79,7 @@ import { dropdownIcon } from '@/constants/iconPath'
 import type { Category, FilterCategoryProps } from '@/types/common'
 import { computed, ref, watchEffect } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { categoryList = [], main, sub } = defineProps<FilterCategoryProps>()
 const emit = defineEmits(['update:main', 'update:sub'])
@@ -121,4 +124,7 @@ const onMainClick = (category: Category) => {
 const onSubClick = (value: number) => {
   emit('update:sub', value)
 }
+
+const { htmlRef: mainRef } = useOutsideClick(() => isMainOpened.value && toggleDropdown('main'))
+const { htmlRef: subRef } = useOutsideClick(() => isSubOpened.value && toggleDropdown('sub'))
 </script>

src/components/filters/FilterDropdown.vue

@@ -5,6 +5,7 @@
     :class="width === 'full' && 'grow'">
     <span class="filter-title">{{ title }}</span>
     <div
+      ref="htmlRef"
       class="filter-dropdown"
       @click="toggleDropdown">
       <span class="grow text-center">{{
@@ -32,6 +33,7 @@ import type { Filter } from '@/types/common'
 import { ref } from 'vue'
 import { dropdownIcon } from '@/constants/iconPath'
 import CommonIcons from '../common/CommonIcons.vue'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { title, value, width = '120', optionList } = defineProps<Filter>()
 const emit = defineEmits(['update:value'])
@@ -43,4 +45,6 @@ const onOptionClick = (option: string) => {
   emit('update:value', option)
   toggleDropdown()
 }
+
+const { htmlRef } = useOutsideClick(() => isDropdownOpened.value && toggleDropdown())
 </script>

src/components/filters/FilterDropdownMulti.vue

@@ -5,6 +5,7 @@
     :class="width === 'full' && 'grow'">
     <span class="filter-title">{{ title }}</span>
     <div
+      ref="htmlRef"
       class="filter-dropdown"
       @click="toggleDropdown">
       <span class="grow text-center">선택</span>
@@ -35,6 +36,7 @@ import type { Filter } from '@/types/common'
 import { ref } from 'vue'
 import { dropdownIcon } from '@/constants/iconPath'
 import CommonIcons from '../common/CommonIcons.vue'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { title, width = '120', optionList, value } = defineProps<Filter>()
 const emit = defineEmits(['update:value'])
@@ -45,4 +47,6 @@ const toggleDropdown = () => (isDropdownOpened.value = !isDropdownOpened.value)
 const onOptionClick = (option: string | number) => {
   emit('update:value', option)
 }
+
+const { htmlRef } = useOutsideClick(toggleDropdown)
 </script>

src/components/hooks/useOutsideClick.ts

@@ -0,0 +1,19 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+
+export const useOutsideClick = (onClick: () => void) => {
+  const htmlRef = ref<HTMLElement | null>(null)
+
+  const onOutsideClick = (event: MouseEvent) => {
+    if (htmlRef.value && !htmlRef.value.contains(event.target as Node)) {
+      onClick()
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('click', onOutsideClick)
+  })
+  onUnmounted(() => {
+    window.removeEventListener('click', onOutsideClick)
+  })
+  return { htmlRef }
+}