🔀 [fix] : conflict resolved

Author: Minkyu0424

src/api/admin.ts

@@ -2,11 +2,6 @@ import type { NewLabelTypes, UserRegistrationProps } from '@/types/admin'
 import type { LabelDataTypes } from '@/types/common'
 import { axiosInstance } from '@/utils/axios'
 
-export const getLabelsAdmin = async () => {
-  const response = await axiosInstance.get('/api/managements/labels')
-  return response.data
-}
-
 export const deleteLabelAdmin = async (id: number) => {
   const response = await axiosInstance.delete(`/api/managements/labels/${id}`)
   return response.data

src/api/common.ts

@@ -10,7 +10,12 @@ export const getSubCategory = async () => {
   return response.data
 }
 
-export const getAllCategory = async () => {
+export const getLabels = async () => {
+  const response = await axiosInstance.get('/api/labels')
+  return response.data
+}
+
+export const getCategory = async () => {
   const response = await axiosInstance.get('/api/category')
   return response.data
 }

src/components/ModalView.vue

@@ -92,6 +92,7 @@ watch(textValue, newValue => {
 })
 
 const closeModal = () => {
+  textValue.value = ''
   emit('close')
 }
 

src/components/TaskCard.vue

@@ -16,11 +16,11 @@
       <span class="text-xs font-bold text-black">{{ data.taskCode }}</span>
       <div class="flex flex-col gap-1 items-end">
         <span class="text-xs font-bold text-body">{{ data.requesterDepartment }}</span>
-        <div class="flex items-center gap-1">
+        <div class="flex items-center gap-1.5">
           <div class="w-4 h-4 rounded-full bg-background-1 overflow-hidden">
             <img :src="data.requesterImageUrl" />
           </div>
-          <span class="text-xs font-bold text-black">{{ data.requesterNickName }}</span>
+          <span class="text-xs font-bold text-black">{{ data.requesterNickname }}</span>
         </div>
       </div>
     </div>

src/components/common/TitleContainer.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-2 items-center">
+    <span class="text-4xl font-bold text-black whitespace-pre-wrap text-center leading-tight">{{
+      title
+    }}</span>
+    <span class="font-bold whitespace-pre-wrap text-body text-center">{{ content }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ title: string; content?: string }>()
+</script>

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(() => isDropdownOpened.value && 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 }
+}

src/components/my-request/MyRequestFilterBar.vue

@@ -35,26 +35,21 @@
 <script setup lang="ts">
 import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsStore } from '@/stores/params'
-import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import FilterCategory from '../filters/FilterCategory.vue'
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
+import { getCategory } from '@/api/common'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
 
-const fetchCategory = async () => {
-  const response = await axiosInstance.get('/api/category')
-  return response.data
-}
-
 const { data } = useQuery({
   queryKey: ['category'],
-  queryFn: fetchCategory
+  queryFn: getCategory
 })
 </script>