Skip to content

Commit 74758e3

Browse files
seorang42seorang42
committed
✨ [feat] : 요청 페이지 Params 통합 및 onRequestParamsChange 커스텀 훅 구현
1 parent 858bdd9 commit 74758e3

19 files changed

+194
-120
lines changed

‎src/App.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
<script setup lang="ts">
2-
32
import { RouterView } from 'vue-router'
43
import TopMenu from './components/TopMenu.vue'
54
import TheView from './layout/TheView.vue'
6-
75
</script>
86

97
<template>

‎src/assets/styles.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ body {
2929
.max-w-400 {
3030
@apply view-container w-full max-w-[400px] mx-auto;
3131
}
32+
.list-view {
33+
@apply max-w-1200 h-screen flex flex-col gap-6 overflow-hidden;
34+
}
3235

3336
.button-medium {
3437
@apply flex items-center justify-center rounded px-4 py-2 font-bold gap-1 text-xs cursor-pointer shrink-0;

‎src/components/hooks/useRequestParamsChange.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { useRequestParamsStore } from '@/stores/params'
2+
3+
export const useRequestParamsChange = () => {
4+
const { params } = useRequestParamsStore()
5+
6+
const onTermChange = (value: string) => {
7+
if (value === '') {
8+
params.term = ''
9+
}
10+
params.term = Number(value)
11+
}
12+
const onTitleChange = (value: string) => {
13+
params.title = value
14+
}
15+
const onNickNameChange = (value: string) => {
16+
params.nickName = value
17+
}
18+
const onMainChange = (value: number) => {
19+
if (params.mainCategoryId.includes(value)) {
20+
params.mainCategoryId = [...params.mainCategoryId].filter(el => el !== value)
21+
} else {
22+
params.mainCategoryId.push(value)
23+
}
24+
}
25+
const onSubChange = (value: number) => {
26+
if (params.categoryId.includes(value)) {
27+
params.categoryId = [...params.categoryId].filter(el => el !== value)
28+
} else {
29+
params.categoryId.push(value)
30+
}
31+
}
32+
const onTaskStatusChange = (value: string) => {
33+
if (params.taskStatus) {
34+
if (params.taskStatus.includes(value)) {
35+
params.taskStatus = [...params.taskStatus].filter(el => el !== value)
36+
} else {
37+
params.taskStatus.push(value)
38+
}
39+
}
40+
}
41+
const onPageSizeChange = (value: string) => {
42+
params.pageSize = Number(value)
43+
}
44+
45+
return {
46+
onTermChange,
47+
onTitleChange,
48+
onNickNameChange,
49+
onMainChange,
50+
onSubChange,
51+
onTaskStatusChange,
52+
onPageSizeChange
53+
}
54+
}

‎src/components/my-request/MyRequestFilterBar.vue‎

Lines changed: 19 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,36 @@
44
title="조회 기간"
55
:width="120"
66
:option-list="TERM_LIST"
7-
:value="String(params.term)"
8-
@update:value="onTermChange" />
7+
:value="String(store.params.term)"
8+
@update:value="onParamsChange.onTermChange" />
99
<FilterCategory
1010
:category-list="DUMMY_CATEGORY_LIST"
11-
:main="params.mainCategoryId"
12-
:sub="params.categoryId"
13-
@update:main="onMainChange"
14-
@update:sub="onSubChange" />
11+
:main="store.params.mainCategoryId"
12+
:sub="store.params.categoryId"
13+
@update:main="onParamsChange.onMainChange"
14+
@update:sub="onParamsChange.onSubChange" />
1515
<FilterInput
1616
title="제목"
1717
:width="120"
18-
:value="params.title"
19-
@update:value="value => (params.title = value)" />
18+
:value="store.params.title"
19+
@update:value="onParamsChange.onTitleChange" />
2020
<FilterInput
2121
:width="120"
2222
title="처리자"
23-
:value="params.nickName"
24-
@update:value="value => (params.nickName = value)" />
23+
:value="store.params.nickName"
24+
@update:value="onParamsChange.onNickNameChange" />
2525
<FilterDropdownMulti
2626
title="상태"
2727
:width="120"
2828
:option-list="TASK_STATUS_LIST"
29-
:value="params.taskStatus"
30-
@update:value="onTaskStatusClick" />
29+
:value="store.params.taskStatus!"
30+
@update:value="onParamsChange.onTaskStatusChange" />
3131
<FilterDropdown
3232
title="페이지 당 개수"
3333
:width="120"
3434
:option-list="PAGE_SIZE_LIST"
35-
:value="String(params.pageSize)"
36-
@update:value="value => (params.pageSize = Number(value))" />
35+
:value="String(store.params.pageSize)"
36+
@update:value="onParamsChange.onPageSizeChange" />
3737
</div>
3838
</template>
3939

@@ -42,37 +42,13 @@ import FilterDropdown from '../filters/FilterDropdown.vue'
4242
import FilterCategory from '../filters/FilterCategory.vue'
4343
import FilterInput from '../filters/FilterInput.vue'
4444
import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
45-
import { useMyRequestParamsStore } from '@/stores/params'
45+
import { useRequestParamsStore } from '@/stores/params'
4646
import { DUMMY_CATEGORY_LIST } from '@/datas/dummy'
4747
import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
48+
import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
4849
49-
const { params } = useMyRequestParamsStore()
50+
const store = useRequestParamsStore()
51+
store.$reset()
5052
51-
const onTermChange = (value: string) => {
52-
if (value === '') {
53-
params.term = ''
54-
}
55-
params.term = Number(value)
56-
}
57-
const onMainChange = (value: number) => {
58-
if (params.mainCategoryId.includes(value)) {
59-
params.mainCategoryId = [...params.mainCategoryId].filter(el => el !== value)
60-
} else {
61-
params.mainCategoryId.push(value)
62-
}
63-
}
64-
const onSubChange = (value: number) => {
65-
if (params.categoryId.includes(value)) {
66-
params.categoryId = [...params.categoryId].filter(el => el !== value)
67-
} else {
68-
params.categoryId.push(value)
69-
}
70-
}
71-
const onTaskStatusClick = (value: string) => {
72-
if (params.taskStatus.includes(value)) {
73-
params.taskStatus = [...params.taskStatus].filter(el => el !== value)
74-
} else {
75-
params.taskStatus.push(value)
76-
}
77-
}
53+
const onParamsChange = useRequestParamsChange()
7854
</script>

‎src/components/my-request/MyRequestList.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
<script setup lang="ts">
2424
import MyRequestListBar from './MyRequestListBar.vue'
2525
import MyRequestListCard from './MyRequestListCard.vue'
26-
import { useMyRequestParamsStore } from '@/stores/params'
2726
import ListPagination from '../lists/ListPagination.vue'
2827
import ListContainer from '../lists/ListContainer.vue'
2928
import { DUMMY_MY_REQUEST_LIST_DATA } from '@/datas/dummy'
29+
import { useRequestParamsStore } from '@/stores/params'
3030
31-
const { params } = useMyRequestParamsStore()
31+
const { params } = useRequestParamsStore()
3232
const DUMMY_TOTAL_PAGE = 18
3333
const onPageChange = (value: number) => {
3434
params.page = value

‎src/components/my-request/MyRequestListBar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@
1212
</template>
1313

1414
<script setup lang="ts">
15-
import { useMyRequestParamsStore } from '@/stores/params'
1615
import { MY_REQUEST_LIST_BAR_TAB } from '@/constants/user'
1716
import ListBarTab from '../lists/ListBarTab.vue'
17+
import { useRequestParamsStore } from '@/stores/params'
1818
19-
const { params } = useMyRequestParamsStore()
19+
const { params } = useRequestParamsStore()
2020
2121
const toggleSortBy = (sortBy: 'REQUESTED' | 'FINISHED') => {
2222
if (sortBy === params.orderRequest.sortBy) {

‎src/components/request-history/RequestHistoryFilterBar.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div class="flex gap-4">
3+
<FilterDropdown
4+
title="조회 기간"
5+
:width="120"
6+
:option-list="TERM_LIST"
7+
:value="String(store.params.term)"
8+
@update:value="onParamsChange.onTermChange" />
9+
<FilterCategory
10+
:category-list="DUMMY_CATEGORY_LIST"
11+
:main="store.params.mainCategoryId"
12+
:sub="store.params.categoryId"
13+
@update:main="onParamsChange.onMainChange"
14+
@update:sub="onParamsChange.onSubChange" />
15+
<FilterInput
16+
title="제목"
17+
:width="120"
18+
:value="store.params.title"
19+
@update:value="onParamsChange.onTitleChange" />
20+
<FilterInput
21+
:width="120"
22+
title="이름"
23+
:value="store.params.nickName"
24+
@update:value="onParamsChange.onNickNameChange" />
25+
<FilterDropdownMulti
26+
title="상태"
27+
:width="120"
28+
:option-list="TASK_STATUS_LIST"
29+
:value="store.params.taskStatus!"
30+
@update:value="onParamsChange.onTaskStatusChange" />
31+
<FilterDropdown
32+
title="페이지 당 개수"
33+
:width="120"
34+
:option-list="PAGE_SIZE_LIST"
35+
:value="String(store.params.pageSize)"
36+
@update:value="onParamsChange.onPageSizeChange" />
37+
</div>
38+
</template>
39+
40+
<script setup lang="ts">
41+
import FilterDropdown from '../filters/FilterDropdown.vue'
42+
import FilterCategory from '../filters/FilterCategory.vue'
43+
import FilterInput from '../filters/FilterInput.vue'
44+
import { DUMMY_CATEGORY_LIST } from '@/datas/dummy'
45+
import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
46+
import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
47+
import { useRequestParamsStore } from '@/stores/params'
48+
import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
49+
50+
const store = useRequestParamsStore()
51+
store.$reset()
52+
53+
const onParamsChange = useRequestParamsChange()
54+
</script>

‎src/components/request-history/RequestHistoryList.vue‎

Whitespace-only changes.

‎src/components/request-history/RequestHistoryListBar.vue‎

Whitespace-only changes.

‎src/components/request-history/RequestHistoryListCard.vue‎

Whitespace-only changes.

0 commit comments

Comments
 (0)