Skip to content

Commit e1a298b

Browse files
Minkyu0424Minkyu0424
committed
🔀 [fix] : conflict resolved
2 parents 771cd37 + 1dc510d commit e1a298b

38 files changed

+1181
-71
lines changed

‎src/App.vue‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,7 @@
11
<script setup lang="ts">
2-
import { RouterView } from 'vue-router'
2+
import TheView from './layout/TheView.vue'
33
</script>
44

55
<template>
6-
<header>
7-
<div class="wrapper">
8-
<nav class="flex gap-3">
9-
<RouterLink to="/">Home</RouterLink>
10-
<RouterLink to="/Icon">Icon</RouterLink>
11-
<RouterLink to="/about">About</RouterLink>
12-
</nav>
13-
</div>
14-
</header>
15-
<RouterView />
6+
<TheView />
167
</template>
17-
<style scoped>
18-
@media (min-width: 1024px) {
19-
header {
20-
display: flex;
21-
place-items: center;
22-
padding-right: calc(var(--section-gap) / 2);
23-
}
24-
}
25-
</style>

‎src/assets/styles.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,43 @@
1212
body {
1313
font-family: 'SUIT-Variable', sans-serif;
1414
}
15+
16+
.shadow-custom {
17+
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
18+
}
19+
20+
.view-container {
21+
@apply py-10 px-6;
22+
}
23+
.max-w-1200 {
24+
@apply view-container w-full max-w-[1200px] min-w-[1024px] mx-auto;
25+
}
26+
.max-w-600 {
27+
@apply view-container w-full max-w-[600px] mx-auto;
28+
}
29+
.max-w-400 {
30+
@apply view-container w-full max-w-[400px] mx-auto;
31+
}
32+
33+
.list-bar {
34+
@apply w-full h-8 px-4 bg-background-2 flex items-center gap-4 shrink-0;
35+
}
36+
.list-card {
37+
@apply flex px-4 py-3 gap-4 border-b border-border-1 cursor-pointer hover:bg-background-2;
38+
}
39+
40+
.filter-container {
41+
@apply flex flex-col gap-1 shrink-0;
42+
}
43+
.filter-title {
44+
@apply text-[10px] font-bold text-body;
45+
}
46+
.filter-dropdown {
47+
@apply flex justify-center items-center w-full h-8 px-2 border-b border-border-1 relative text-xs cursor-pointer;
48+
}
49+
.filter-dropdown-option-list {
50+
@apply w-full max-h-[120px] overflow-y-scroll absolute left-0 top-[calc(100%+8px)] shadow-custom p-2 flex flex-col gap-2 rounded bg-white cursor-auto;
51+
}
52+
.filter-dropdown-option {
53+
@apply text-xs p-2 rounded text-center cursor-pointer;
54+
}

‎src/components/OrderIcon.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<svg
3+
width="16"
4+
height="16"
5+
viewBox="0 0 16 16"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg">
8+
<path
9+
d="M11 9.83984H5.00003C4.90108 9.83977 4.80433 9.86905 4.72204 9.92398C4.63974 9.97892 4.57559 10.057 4.53772 10.1484C4.49984 10.2399 4.48994 10.3405 4.50926 10.4375C4.52859 10.5345 4.57627 10.6237 4.64628 10.6936L7.64628 13.6936C7.69271 13.7401 7.74786 13.777 7.80856 13.8021C7.86926 13.8273 7.93432 13.8402 8.00003 13.8402C8.06574 13.8402 8.1308 13.8273 8.1915 13.8021C8.2522 13.777 8.30734 13.7401 8.35378 13.6936L11.3538 10.6936C11.4238 10.6237 11.4715 10.5345 11.4908 10.4375C11.5101 10.3405 11.5002 10.2399 11.4623 10.1484C11.4245 10.057 11.3603 9.97892 11.278 9.92398C11.1957 9.86905 11.099 9.83977 11 9.83984Z"
10+
:fill="isActive ? '#7879EB' : '#D4D4D8'" />
11+
<path
12+
d="M4.50919 5.5629C4.48995 5.65991 4.4999 5.76045 4.5378 5.8518C4.57563 5.94317 4.6397 6.02127 4.72191 6.07623C4.80412 6.13118 4.90079 6.16053 4.99968 6.16055H10.9997C11.0986 6.16063 11.1954 6.13134 11.2777 6.07641C11.36 6.02147 11.4241 5.94336 11.462 5.85194C11.4999 5.76053 11.5098 5.65994 11.4904 5.5629C11.4711 5.46585 11.4234 5.37673 11.3534 5.3068L8.35343 2.3068C8.30699 2.26031 8.25185 2.22343 8.19115 2.19827C8.13045 2.17311 8.06538 2.16016 7.99968 2.16016C7.93397 2.16016 7.86891 2.17311 7.80821 2.19827C7.74751 2.22343 7.69236 2.26031 7.64593 2.3068L4.64593 5.3068C4.57602 5.37676 4.52844 5.46589 4.50919 5.5629Z"
13+
fill="#D4D4D8" />
14+
</svg>
15+
</template>
16+
17+
<script setup lang="ts">
18+
defineProps<{ isActive?: boolean }>()
19+
</script>
20+
21+
<style scoped></style>

‎src/components/TaskStatus.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div
3+
class="flex px-3 py-1 rounded-full"
4+
:class="bgColor">
5+
<span
6+
class="text-xs font-bold"
7+
:class="textColor"
8+
>{{ status }}</span
9+
>
10+
</div>
11+
</template>
12+
13+
<script setup lang="ts">
14+
import { computed } from 'vue'
15+
16+
const { status, isActive } = defineProps<{
17+
status?: string
18+
isActive?: boolean
19+
}>()
20+
21+
const defaultColor = {
22+
요청: 'gray',
23+
'진행 중': 'blue',
24+
'검토 중': 'orange',
25+
완료: 'green',
26+
종료: 'red'
27+
}
28+
29+
const key = status as keyof typeof defaultColor
30+
31+
const textColor = computed(() => {
32+
return isActive ? 'text-white' : `text-${defaultColor[key]}-1`
33+
})
34+
const bgColor = computed(() => {
35+
return isActive ? `bg-${defaultColor[key]}-1` : `bg-${defaultColor[key]}-2`
36+
})
37+
</script>
38+
39+
<style scoped></style>

‎src/components/TitleBar.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div class="flex justify-between items-center px-6 py-3 border-l-8 border-primary1">
3+
<span class="text-2xl font-bold text-black">{{ props.title }}</span>
4+
<button
5+
v-if="btn"
6+
class="flex items-center gap-1 text-xs font-bold text-primary1"
7+
@click="$emit('buttonClick')">
8+
<CommonIcons
9+
:name="plusIcon"
10+
:style="{ fill: '#7879EB' }" />
11+
{{ props.btn }}
12+
</button>
13+
</div>
14+
</template>
15+
16+
<script setup lang="ts">
17+
import { plusIcon } from '@/constants/iconPath'
18+
import type { TitleBar } from '@/types/common'
19+
import CommonIcons from './common/CommonIcons.vue'
20+
21+
const props = defineProps<TitleBar>()
22+
defineEmits(['buttonClick'])
23+
</script>

src/components/CommonIcons.vue renamed to src/components/common/CommonIcons.vue

File renamed without changes.

‎src/components/filters/FilterCategory.vue‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<template>
2+
<div class="flex gap-4 grow">
3+
<div class="filter-container grow">
4+
<span class="filter-title">1차 카테고리</span>
5+
<div
6+
class="filter-dropdown"
7+
@click="toggleDropdown('main')">
8+
<span class="grow text-center">선택</span>
9+
<CommonIcons
10+
:name="dropdownIcon"
11+
:style="{ fill: '#18181B' }" />
12+
<ul
13+
@click.stop
14+
v-if="isMainOpened"
15+
class="filter-dropdown-option-list">
16+
<li
17+
class="filter-dropdown-option"
18+
v-for="category in categoryList"
19+
:key="category.id"
20+
:class="
21+
(main as number[]).includes(category.id)
22+
? 'bg-primary1 text-white font-bold'
23+
: 'hover:bg-background-2 text-black'
24+
"
25+
@click="() => onMainClick(category)">
26+
{{ category.content }}
27+
</li>
28+
</ul>
29+
</div>
30+
</div>
31+
<div class="filter-container grow">
32+
<span class="filter-title">2차 카테고리</span>
33+
<div
34+
class="filter-dropdown"
35+
:class="isDisabled ? 'bg-background-2 text-disabled' : 'text-black'"
36+
@click="!isDisabled && toggleDropdown('sub')">
37+
<span class="grow text-center">선택</span>
38+
<CommonIcons
39+
:name="dropdownIcon"
40+
:style="{ fill: isDisabled ? '#A1A1AA' : '#18181B' }" />
41+
<ul
42+
@click.stop
43+
v-if="isSubOpened"
44+
class="filter-dropdown-option-list">
45+
<ul
46+
class="flex flex-col gap-2"
47+
v-for="category in selectedCategoryList"
48+
:key="category.content">
49+
<div class="w-full flex items-center gap-2">
50+
<div class="h-[1px] grow bg-border-2" />
51+
<span class="text-[10px] font-bold text-disabled">
52+
{{ category.content }}
53+
</span>
54+
<div class="h-[1px] grow bg-border-2" />
55+
</div>
56+
<li
57+
class="filter-dropdown-option"
58+
v-for="subCategory in category.subCategoryList"
59+
:key="subCategory.id"
60+
:class="
61+
(sub as number[]).includes(subCategory.id)
62+
? 'bg-primary1 text-white font-bold'
63+
: 'hover:bg-background-2 text-black'
64+
"
65+
@click="() => onSubClick(subCategory.id)">
66+
{{ subCategory.content }}
67+
</li>
68+
</ul>
69+
</ul>
70+
</div>
71+
</div>
72+
</div>
73+
</template>
74+
75+
<script setup lang="ts">
76+
import { dropdownIcon } from '@/constants/iconPath'
77+
import type { Category, FilterCategory } from '@/types/common'
78+
import { computed, ref, watchEffect } from 'vue'
79+
import CommonIcons from '../common/CommonIcons.vue'
80+
81+
const { categoryList, main, sub } = defineProps<FilterCategory>()
82+
const emit = defineEmits(['update:main', 'update:sub'])
83+
84+
const isMainOpened = ref(false)
85+
const isSubOpened = ref(false)
86+
const toggleDropdown = (type: 'main' | 'sub') =>
87+
type === 'main'
88+
? (isMainOpened.value = !isMainOpened.value)
89+
: (isSubOpened.value = !isSubOpened.value)
90+
91+
const selectedCategoryList = ref<{ content: string; subCategoryList: Category[] }[]>([])
92+
const isDisabled = computed(() => {
93+
return selectedCategoryList.value.length === 0
94+
})
95+
watchEffect(() => {
96+
if (isDisabled.value) isSubOpened.value = false
97+
})
98+
99+
const onMainClick = (category: Category) => {
100+
if (selectedCategoryList.value.map(el => el.content).includes(category.content)) {
101+
selectedCategoryList.value = [...selectedCategoryList.value].filter(
102+
el => el.content !== category.content
103+
)
104+
if (category.subCategoryList) {
105+
category.subCategoryList.forEach(el => {
106+
if ((sub as number[]).includes(el.id)) {
107+
emit('update:sub', el.id)
108+
}
109+
})
110+
}
111+
} else {
112+
if (category.subCategoryList) {
113+
selectedCategoryList.value.push({
114+
content: category.content,
115+
subCategoryList: category.subCategoryList
116+
})
117+
}
118+
}
119+
emit('update:main', category.id)
120+
}
121+
const onSubClick = (value: number) => {
122+
emit('update:sub', value)
123+
}
124+
</script>
125+
126+
<style scoped></style>

‎src/components/filters/FilterDropdown.vue‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<div
3+
class="filter-container"
4+
:style="{ width: width ? `${width}px` : '' }"
5+
:class="!width && 'grow'">
6+
<span class="filter-title">{{ title }}</span>
7+
<div
8+
class="filter-dropdown"
9+
@click="toggleDropdown">
10+
<span class="grow text-center">{{
11+
optionList?.filter(el => el.value === value)[0].content
12+
}}</span>
13+
<CommonIcons :name="dropdownIcon" />
14+
<ul
15+
@click.stop
16+
v-if="isDropdownOpened"
17+
class="filter-dropdown-option-list">
18+
<li
19+
class="filter-dropdown-option hover:bg-background-2 text-black"
20+
v-for="option in optionList"
21+
:key="option.value"
22+
@click="() => onOptionClick(option.value)">
23+
{{ option.content }}
24+
</li>
25+
</ul>
26+
</div>
27+
</div>
28+
</template>
29+
30+
<script setup lang="ts">
31+
import type { Filter } from '@/types/common'
32+
import { ref } from 'vue'
33+
import { dropdownIcon } from '@/constants/iconPath'
34+
import CommonIcons from '../common/CommonIcons.vue';
35+
36+
const { title, value, width, optionList } = defineProps<Filter>()
37+
const emit = defineEmits(['update:value'])
38+
39+
const isDropdownOpened = ref(false)
40+
const toggleDropdown = () => (isDropdownOpened.value = !isDropdownOpened.value)
41+
42+
const onOptionClick = (option: string) => {
43+
emit('update:value', option)
44+
toggleDropdown()
45+
}
46+
</script>

‎src/components/filters/FilterDropdownMulti.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div
3+
class="filter-container"
4+
:style="{ width: width ? `${width}px` : '' }"
5+
:class="!width && 'grow'">
6+
<span class="filter-title">{{ title }}</span>
7+
<div
8+
class="filter-dropdown"
9+
@click="toggleDropdown">
10+
<span class="grow text-center">선택</span>
11+
<CommonIcons :name="dropdownIcon" />
12+
<ul
13+
@click.stop
14+
v-if="isDropdownOpened"
15+
class="filter-dropdown-option-list">
16+
<li
17+
class="filter-dropdown-option"
18+
v-for="option in optionList"
19+
:key="option.value"
20+
:class="
21+
(value as string[]).includes(option.value)
22+
? 'bg-primary1 text-white font-bold'
23+
: 'hover:bg-background-2 text-black'
24+
"
25+
@click="() => onOptionClick(option.value)">
26+
{{ option.content }}
27+
</li>
28+
</ul>
29+
</div>
30+
</div>
31+
</template>
32+
33+
<script setup lang="ts">
34+
import type { Filter } from '@/types/common'
35+
import { ref } from 'vue'
36+
import { dropdownIcon } from '@/constants/iconPath'
37+
import CommonIcons from '../common/CommonIcons.vue';
38+
39+
const { title, width, optionList, value } = defineProps<Filter>()
40+
const emit = defineEmits(['update:value'])
41+
42+
const isDropdownOpened = ref(false)
43+
const toggleDropdown = () => (isDropdownOpened.value = !isDropdownOpened.value)
44+
45+
const onOptionClick = (option: string | number) => {
46+
emit('update:value', option)
47+
}
48+
</script>

0 commit comments

Comments
 (0)