Merge pull request #25 from TaskFlow-CLAP/CLAP-130

CLAP-130 전체 요청 기록 페이지 UI 제작

Author: seorang42

src/App.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-
 import { RouterView } from 'vue-router'
 import TopMenu from './components/TopMenu.vue'
 import TheView from './layout/TheView.vue'
-
 </script>
 
 <template>

src/assets/styles.css

@@ -29,6 +29,9 @@ body {
 .max-w-400 {
   @apply view-container w-full max-w-[400px] mx-auto;
 }
+.list-view {
+  @apply max-w-1200 h-screen flex flex-col gap-6 overflow-hidden;
+}
 
 .button-medium {
   @apply flex items-center justify-center rounded px-4 py-2 font-bold gap-1 text-xs cursor-pointer shrink-0;

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)

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)

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) => {

src/components/hooks/useRequestParamsChange.ts

@@ -0,0 +1,45 @@
+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)
+    }
+  }
+  const onTitleChange = (value: string) => {
+    params.title = value
+  }
+  const onNickNameChange = (value: string) => {
+    params.nickName = value
+  }
+  const onMainChange = (value: number) => {
+    params.mainCategoryId = onArrayChange(params.mainCategoryId, value)
+  }
+  const onSubChange = (value: number) => {
+    params.categoryId = onArrayChange(params.categoryId, value)
+  }
+  const onTaskStatusChange = (value: string) => {
+    params.taskStatus = onArrayChange(params.taskStatus!, value)
+  }
+  const onPageSizeChange = (value: string) => {
+    params.pageSize = Number(value)
+  }
+
+  return {
+    onTermChange,
+    onTitleChange,
+    onNickNameChange,
+    onMainChange,
+    onSubChange,
+    onTaskStatusChange,
+    onPageSizeChange
+  }
+}

src/components/lists/ListCardTab.vue

@@ -2,7 +2,7 @@
   <div
     class="flex gap-2 items-center"
     :style="{ width: width ? `${width}px` : '' }"
-    :class="!width && 'grow'">
+    :class="width ? 'shrink-0' : 'grow'">
     <div
       v-if="profileImg"
       class="w-6 h-6 rounded-full overflow-hidden">

src/components/my-request/MyRequestFilterBar.vue

@@ -2,38 +2,33 @@
   <div class="flex gap-4">
     <FilterDropdown
       title="조회 기간"
-      :width="120"
       :option-list="TERM_LIST"
-      :value="String(params.term)"
-      @update:value="onTermChange" />
+      :value="String(store.params.term)"
+      @update:value="onParamsChange.onTermChange" />
     <FilterCategory
       :category-list="DUMMY_CATEGORY_LIST"
-      :main="params.mainCategoryId"
-      :sub="params.categoryId"
-      @update:main="onMainChange"
-      @update:sub="onSubChange" />
+      :main="store.params.mainCategoryId"
+      :sub="store.params.categoryId"
+      @update:main="onParamsChange.onMainChange"
+      @update:sub="onParamsChange.onSubChange" />
     <FilterInput
       title="제목"
-      :width="120"
-      :value="params.title"
-      @update:value="value => (params.title = value)" />
+      :value="store.params.title"
+      @update:value="onParamsChange.onTitleChange" />
     <FilterInput
-      :width="120"
       title="처리자"
-      :value="params.nickName"
-      @update:value="value => (params.nickName = value)" />
+      :value="store.params.nickName"
+      @update:value="onParamsChange.onNickNameChange" />
     <FilterDropdownMulti
       title="상태"
-      :width="120"
       :option-list="TASK_STATUS_LIST"
-      :value="params.taskStatus"
-      @update:value="onTaskStatusClick" />
+      :value="store.params.taskStatus!"
+      @update:value="onParamsChange.onTaskStatusChange" />
     <FilterDropdown
       title="페이지 당 개수"
-      :width="120"
       :option-list="PAGE_SIZE_LIST"
-      :value="String(params.pageSize)"
-      @update:value="value => (params.pageSize = Number(value))" />
+      :value="String(store.params.pageSize)"
+      @update:value="onParamsChange.onPageSizeChange" />
   </div>
 </template>
 
@@ -42,37 +37,13 @@ import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterCategory from '../filters/FilterCategory.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
-import { useMyRequestParamsStore } from '@/stores/params'
+import { useRequestParamsStore } from '@/stores/params'
 import { DUMMY_CATEGORY_LIST } from '@/datas/dummy'
 import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
+import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 
-const { params } = useMyRequestParamsStore()
+const store = useRequestParamsStore()
+store.$reset()
 
-const onTermChange = (value: string) => {
-  if (value === '') {
-    params.term = ''
-  }
-  params.term = Number(value)
-}
-const onMainChange = (value: number) => {
-  if (params.mainCategoryId.includes(value)) {
-    params.mainCategoryId = [...params.mainCategoryId].filter(el => el !== value)
-  } else {
-    params.mainCategoryId.push(value)
-  }
-}
-const onSubChange = (value: number) => {
-  if (params.categoryId.includes(value)) {
-    params.categoryId = [...params.categoryId].filter(el => el !== value)
-  } else {
-    params.categoryId.push(value)
-  }
-}
-const onTaskStatusClick = (value: string) => {
-  if (params.taskStatus.includes(value)) {
-    params.taskStatus = [...params.taskStatus].filter(el => el !== value)
-  } else {
-    params.taskStatus.push(value)
-  }
-}
+const onParamsChange = useRequestParamsChange()
 </script>

src/components/my-request/MyRequestList.vue

@@ -23,12 +23,12 @@
 <script setup lang="ts">
 import MyRequestListBar from './MyRequestListBar.vue'
 import MyRequestListCard from './MyRequestListCard.vue'
-import { useMyRequestParamsStore } from '@/stores/params'
 import ListPagination from '../lists/ListPagination.vue'
 import ListContainer from '../lists/ListContainer.vue'
 import { DUMMY_MY_REQUEST_LIST_DATA } from '@/datas/dummy'
+import { useRequestParamsStore } from '@/stores/params'
 
-const { params } = useMyRequestParamsStore()
+const { params } = useRequestParamsStore()
 const DUMMY_TOTAL_PAGE = 18
 const onPageChange = (value: number) => {
   params.page = value

src/components/my-request/MyRequestListBar.vue

@@ -12,11 +12,11 @@
 </template>
 
 <script setup lang="ts">
-import { useMyRequestParamsStore } from '@/stores/params'
 import { MY_REQUEST_LIST_BAR_TAB } from '@/constants/user'
 import ListBarTab from '../lists/ListBarTab.vue'
+import { useRequestParamsStore } from '@/stores/params'
 
-const { params } = useMyRequestParamsStore()
+const { params } = useRequestParamsStore()
 
 const toggleSortBy = (sortBy: 'REQUESTED' | 'FINISHED') => {
   if (sortBy === params.orderRequest.sortBy) {