Skip to content

Commit a6cef12

Browse files
seorang42seorang42
committed
🔀 [fix] : conflict resolved
2 parents cb89bec + 8a919f3 commit a6cef12

27 files changed

+608
-151
lines changed

‎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/filters/FilterDropdown.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div
33
class="filter-container"
44
:style="{ width: width ? `${width}px` : '' }"
5-
:class="!width && 'grow'">
5+
:class="width === 'full' && 'grow'">
66
<span class="filter-title">{{ title }}</span>
77
<div
88
class="filter-dropdown"
@@ -31,9 +31,9 @@
3131
import type { Filter } from '@/types/common'
3232
import { ref } from 'vue'
3333
import { dropdownIcon } from '@/constants/iconPath'
34-
import CommonIcons from '../common/CommonIcons.vue';
34+
import CommonIcons from '../common/CommonIcons.vue'
3535
36-
const { title, value, width, optionList } = defineProps<Filter>()
36+
const { title, value, width = '120', optionList } = defineProps<Filter>()
3737
const emit = defineEmits(['update:value'])
3838
3939
const isDropdownOpened = ref(false)

‎src/components/filters/FilterDropdownMulti.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div
33
class="filter-container"
44
:style="{ width: width ? `${width}px` : '' }"
5-
:class="!width && 'grow'">
5+
:class="width === 'full' && 'grow'">
66
<span class="filter-title">{{ title }}</span>
77
<div
88
class="filter-dropdown"
@@ -34,9 +34,9 @@
3434
import type { Filter } from '@/types/common'
3535
import { ref } from 'vue'
3636
import { dropdownIcon } from '@/constants/iconPath'
37-
import CommonIcons from '../common/CommonIcons.vue';
37+
import CommonIcons from '../common/CommonIcons.vue'
3838
39-
const { title, width, optionList, value } = defineProps<Filter>()
39+
const { title, width = '120', optionList, value } = defineProps<Filter>()
4040
const emit = defineEmits(['update:value'])
4141
4242
const isDropdownOpened = ref(false)

‎src/components/filters/FilterInput.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div
33
class="filter-container"
44
:style="{ width: width ? `${width}px` : '' }"
5-
:class="!width && 'grow'">
5+
:class="width === 'full' && 'grow'">
66
<span class="filter-title">{{ title }}</span>
77
<input
88
@input="onValueChange"
@@ -13,7 +13,7 @@
1313
<script setup lang="ts">
1414
import type { Filter } from '@/types/common'
1515
16-
const { title, width } = defineProps<Filter>()
16+
const { title, width = '120' } = defineProps<Filter>()
1717
const emit = defineEmits(['update:value'])
1818
1919
const onValueChange = (event: Event) => {

‎src/components/hooks/useRequestParamsChange.ts‎

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

‎src/components/lists/ListCardTab.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div
33
class="flex gap-2 items-center"
44
:style="{ width: width ? `${width}px` : '' }"
5-
:class="!width && 'grow'">
5+
:class="width ? 'shrink-0' : 'grow'">
66
<div
77
v-if="profileImg"
88
class="w-6 h-6 rounded-full overflow-hidden">

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

Lines changed: 19 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,33 @@
22
<div class="flex gap-4">
33
<FilterDropdown
44
title="조회 기간"
5-
:width="120"
65
:option-list="TERM_LIST"
7-
:value="String(params.term)"
8-
@update:value="onTermChange" />
6+
:value="String(store.params.term)"
7+
@update:value="onParamsChange.onTermChange" />
98
<FilterCategory
109
:category-list="DUMMY_CATEGORY_LIST"
11-
:main="params.mainCategoryId"
12-
:sub="params.categoryId"
13-
@update:main="onMainChange"
14-
@update:sub="onSubChange" />
10+
:main="store.params.mainCategoryId"
11+
:sub="store.params.categoryId"
12+
@update:main="onParamsChange.onMainChange"
13+
@update:sub="onParamsChange.onSubChange" />
1514
<FilterInput
1615
title="제목"
17-
:width="120"
18-
:value="params.title"
19-
@update:value="value => (params.title = value)" />
16+
:value="store.params.title"
17+
@update:value="onParamsChange.onTitleChange" />
2018
<FilterInput
21-
:width="120"
2219
title="처리자"
23-
:value="params.nickName"
24-
@update:value="value => (params.nickName = value)" />
20+
:value="store.params.nickName"
21+
@update:value="onParamsChange.onNickNameChange" />
2522
<FilterDropdownMulti
2623
title="상태"
27-
:width="120"
2824
:option-list="TASK_STATUS_LIST"
29-
:value="params.taskStatus"
30-
@update:value="onTaskStatusClick" />
25+
:value="store.params.taskStatus!"
26+
@update:value="onParamsChange.onTaskStatusChange" />
3127
<FilterDropdown
3228
title="페이지 당 개수"
33-
:width="120"
3429
:option-list="PAGE_SIZE_LIST"
35-
:value="String(params.pageSize)"
36-
@update:value="value => (params.pageSize = Number(value))" />
30+
:value="String(store.params.pageSize)"
31+
@update:value="onParamsChange.onPageSizeChange" />
3732
</div>
3833
</template>
3934

@@ -42,38 +37,13 @@ import FilterDropdown from '../filters/FilterDropdown.vue'
4237
import FilterCategory from '../filters/FilterCategory.vue'
4338
import FilterInput from '../filters/FilterInput.vue'
4439
import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
45-
import { useMyRequestParamsStore } from '@/stores/params'
40+
import { useRequestParamsStore } from '@/stores/params'
4641
import { DUMMY_CATEGORY_LIST } from '@/datas/dummy'
4742
import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
48-
import type { Status } from '@/types/common'
43+
import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
4944
50-
const { params } = useMyRequestParamsStore()
45+
const store = useRequestParamsStore()
46+
store.$reset()
5147
52-
const onTermChange = (value: string) => {
53-
if (value === '') {
54-
params.term = ''
55-
}
56-
params.term = Number(value)
57-
}
58-
const onMainChange = (value: number) => {
59-
if (params.mainCategoryId.includes(value)) {
60-
params.mainCategoryId = [...params.mainCategoryId].filter(el => el !== value)
61-
} else {
62-
params.mainCategoryId.push(value)
63-
}
64-
}
65-
const onSubChange = (value: number) => {
66-
if (params.categoryId.includes(value)) {
67-
params.categoryId = [...params.categoryId].filter(el => el !== value)
68-
} else {
69-
params.categoryId.push(value)
70-
}
71-
}
72-
const onTaskStatusClick = (value: Status) => {
73-
if (params.taskStatus.includes(value)) {
74-
params.taskStatus = [...params.taskStatus].filter(el => el !== value)
75-
} else {
76-
params.taskStatus.push(value)
77-
}
78-
}
48+
const onParamsChange = useRequestParamsChange()
7949
</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: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div class="flex gap-4">
3+
<FilterDropdown
4+
title="조회 기간"
5+
:option-list="TERM_LIST"
6+
:value="String(store.params.term)"
7+
@update:value="onParamsChange.onTermChange" />
8+
<FilterCategory
9+
:category-list="DUMMY_CATEGORY_LIST"
10+
:main="store.params.mainCategoryId"
11+
:sub="store.params.categoryId"
12+
@update:main="onParamsChange.onMainChange"
13+
@update:sub="onParamsChange.onSubChange" />
14+
<FilterInput
15+
title="제목"
16+
:value="store.params.title"
17+
@update:value="onParamsChange.onTitleChange" />
18+
<FilterInput
19+
title="이름"
20+
:value="store.params.nickName"
21+
@update:value="onParamsChange.onNickNameChange" />
22+
<FilterDropdownMulti
23+
title="상태"
24+
:option-list="TASK_STATUS_LIST"
25+
:value="store.params.taskStatus!"
26+
@update:value="onParamsChange.onTaskStatusChange" />
27+
<FilterDropdown
28+
title="페이지 당 개수"
29+
:option-list="PAGE_SIZE_LIST"
30+
:value="String(store.params.pageSize)"
31+
@update:value="onParamsChange.onPageSizeChange" />
32+
</div>
33+
</template>
34+
35+
<script setup lang="ts">
36+
import FilterDropdown from '../filters/FilterDropdown.vue'
37+
import FilterCategory from '../filters/FilterCategory.vue'
38+
import FilterInput from '../filters/FilterInput.vue'
39+
import { DUMMY_CATEGORY_LIST } from '@/datas/dummy'
40+
import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
41+
import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
42+
import { useRequestParamsStore } from '@/stores/params'
43+
import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
44+
45+
const store = useRequestParamsStore()
46+
store.$reset()
47+
48+
const onParamsChange = useRequestParamsChange()
49+
</script>

0 commit comments

Comments
 (0)