♻️ [refactor] : 배열 수정용 onArrayChange 함수 구현 및 Filter width 기본값 지정

seorang42 · seorang42 · commit d7e17700e269 · 2025-01-26T15:09:31.000+09:00
diff --git a/src/components/filters/FilterDropdown.vue b/src/components/filters/FilterDropdown.vue
@@ -2,7 +2,7 @@
   <div
     class="filter-container"
     :style="{ width: width ? `${width}px` : '' }"
-    :class="!width && 'grow'">
+    :class="width === 'full' && 'grow'">
     <span class="filter-title">{{ title }}</span>
     <div
       class="filter-dropdown"
@@ -31,9 +31,9 @@
 import type { Filter } from '@/types/common'
 import { ref } from 'vue'
 import { dropdownIcon } from '@/constants/iconPath'
-import CommonIcons from '../common/CommonIcons.vue';
+import CommonIcons from '../common/CommonIcons.vue'
 
-const { title, value, width, optionList } = defineProps<Filter>()
+const { title, value, width = '120', optionList } = defineProps<Filter>()
 const emit = defineEmits(['update:value'])
 
 const isDropdownOpened = ref(false)
diff --git a/src/components/filters/FilterDropdownMulti.vue b/src/components/filters/FilterDropdownMulti.vue
@@ -2,7 +2,7 @@
   <div
     class="filter-container"
     :style="{ width: width ? `${width}px` : '' }"
-    :class="!width && 'grow'">
+    :class="width === 'full' && 'grow'">
     <span class="filter-title">{{ title }}</span>
     <div
       class="filter-dropdown"
@@ -34,9 +34,9 @@
 import type { Filter } from '@/types/common'
 import { ref } from 'vue'
 import { dropdownIcon } from '@/constants/iconPath'
-import CommonIcons from '../common/CommonIcons.vue';
+import CommonIcons from '../common/CommonIcons.vue'
 
-const { title, width, optionList, value } = defineProps<Filter>()
+const { title, width = '120', optionList, value } = defineProps<Filter>()
 const emit = defineEmits(['update:value'])
 
 const isDropdownOpened = ref(false)
diff --git a/src/components/filters/FilterInput.vue b/src/components/filters/FilterInput.vue
@@ -2,7 +2,7 @@
   <div
     class="filter-container"
     :style="{ width: width ? `${width}px` : '' }"
-    :class="!width && 'grow'">
+    :class="width === 'full' && 'grow'">
     <span class="filter-title">{{ title }}</span>
     <input
       @input="onValueChange"
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import type { Filter } from '@/types/common'
 
-const { title, width } = defineProps<Filter>()
+const { title, width = '120' } = defineProps<Filter>()
 const emit = defineEmits(['update:value'])
 
 const onValueChange = (event: Event) => {
diff --git a/src/components/hooks/useRequestParamsChange.ts b/src/components/hooks/useRequestParamsChange.ts
@@ -3,11 +3,16 @@ import { useRequestParamsStore } from '@/stores/params'
 export const useRequestParamsChange = () => {
   const { params } = useRequestParamsStore()
 
+  const onArrayChange = <Value extends number | string>(array: Value[], value: Value) => {
+    return array.includes(value) ? array.filter(el => el !== value) : [...array, value]
+  }
+
   const onTermChange = (value: string) => {
     if (value === '') {
       params.term = ''
+    } else {
+      params.term = Number(value)
     }
-    params.term = Number(value)
   }
   const onTitleChange = (value: string) => {
     params.title = value
@@ -16,27 +21,13 @@ export const useRequestParamsChange = () => {
     params.nickName = value
   }
   const onMainChange = (value: number) => {
-    if (params.mainCategoryId.includes(value)) {
-      params.mainCategoryId = [...params.mainCategoryId].filter(el => el !== value)
-    } else {
-      params.mainCategoryId.push(value)
-    }
+    params.mainCategoryId = onArrayChange(params.mainCategoryId, value)
   }
   const onSubChange = (value: number) => {
-    if (params.categoryId.includes(value)) {
-      params.categoryId = [...params.categoryId].filter(el => el !== value)
-    } else {
-      params.categoryId.push(value)
-    }
+    params.categoryId = onArrayChange(params.categoryId, value)
   }
   const onTaskStatusChange = (value: string) => {
-    if (params.taskStatus) {
-      if (params.taskStatus.includes(value)) {
-        params.taskStatus = [...params.taskStatus].filter(el => el !== value)
-      } else {
-        params.taskStatus.push(value)
-      }
-    }
+    params.taskStatus = onArrayChange(params.taskStatus!, value)
   }
   const onPageSizeChange = (value: string) => {
     params.pageSize = Number(value)
diff --git a/src/components/my-request/MyRequestFilterBar.vue b/src/components/my-request/MyRequestFilterBar.vue
@@ -2,7 +2,6 @@
   <div class="flex gap-4">
     <FilterDropdown
       title="조회 기간"
-      :width="120"
       :option-list="TERM_LIST"
       :value="String(store.params.term)"
       @update:value="onParamsChange.onTermChange" />
@@ -14,23 +13,19 @@
       @update:sub="onParamsChange.onSubChange" />
     <FilterInput
       title="제목"
-      :width="120"
       :value="store.params.title"
       @update:value="onParamsChange.onTitleChange" />
     <FilterInput
-      :width="120"
       title="처리자"
       :value="store.params.nickName"
       @update:value="onParamsChange.onNickNameChange" />
     <FilterDropdownMulti
       title="상태"
-      :width="120"
       :option-list="TASK_STATUS_LIST"
       :value="store.params.taskStatus!"
       @update:value="onParamsChange.onTaskStatusChange" />
     <FilterDropdown
       title="페이지 당 개수"
-      :width="120"
       :option-list="PAGE_SIZE_LIST"
       :value="String(store.params.pageSize)"
       @update:value="onParamsChange.onPageSizeChange" />
diff --git a/src/components/request-history/RequestHistoryFilterBar.vue b/src/components/request-history/RequestHistoryFilterBar.vue
@@ -2,7 +2,6 @@
   <div class="flex gap-4">
     <FilterDropdown
       title="조회 기간"
-      :width="120"
       :option-list="TERM_LIST"
       :value="String(store.params.term)"
       @update:value="onParamsChange.onTermChange" />
@@ -14,23 +13,19 @@
       @update:sub="onParamsChange.onSubChange" />
     <FilterInput
       title="제목"
-      :width="120"
       :value="store.params.title"
       @update:value="onParamsChange.onTitleChange" />
     <FilterInput
-      :width="120"
       title="이름"
       :value="store.params.nickName"
       @update:value="onParamsChange.onNickNameChange" />
     <FilterDropdownMulti
       title="상태"
-      :width="120"
       :option-list="TASK_STATUS_LIST"
       :value="store.params.taskStatus!"
       @update:value="onParamsChange.onTaskStatusChange" />
     <FilterDropdown
       title="페이지 당 개수"
-      :width="120"
       :option-list="PAGE_SIZE_LIST"
       :value="String(store.params.pageSize)"
       @update:value="onParamsChange.onPageSizeChange" />
diff --git a/src/components/requested/RequestedFilterBar.vue b/src/components/requested/RequestedFilterBar.vue
@@ -2,7 +2,6 @@
   <div class="flex gap-4">
     <FilterDropdown
       title="조회 기간"
-      :width="120"
       :option-list="TERM_LIST"
       :value="String(store.params.term)"
       @update:value="onParamsChange.onTermChange" />
@@ -14,17 +13,14 @@
       @update:sub="onParamsChange.onSubChange" />
     <FilterInput
       title="제목"
-      :width="120"
       :value="store.params.title"
       @update:value="onParamsChange.onTitleChange" />
     <FilterInput
-      :width="120"
       title="처리자"
       :value="store.params.nickName"
       @update:value="onParamsChange.onNickNameChange" />
     <FilterDropdown
       title="페이지 당 개수"
-      :width="120"
       :option-list="PAGE_SIZE_LIST"
       :value="String(store.params.pageSize)"
       @update:value="onParamsChange.onPageSizeChange" />
diff --git a/src/types/common.ts b/src/types/common.ts
@@ -7,7 +7,7 @@ export interface TitleBarProps {
 
 export interface Filter {
   title: string
-  width?: number
+  width?: string
   optionList?: Option[]
   value: (Ref<string> | string) | (Ref<string[]> | string[])
 }

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ export interface TitleBarProps {`
`7`	`7`
`8`	`8`	`export interface Filter {`
`9`	`9`	`title: string`
`10`		`- width?: number`
	`10`	`+ width?: string`
`11`	`11`	`optionList?: Option[]`
`12`	`12`	`value: (Ref<string> \| string) \| (Ref<string[]> \| string[])`
`13`	`13`	`}`