Skip to content

Commit fa9b605

Browse files
seorang42seorang42
authored
Merge pull request #44 from TaskFlow-CLAP/CLAP-127
�CLAP-127 작업 보드 페이지 UI 구현
2 parents d84f7d5 + bb7bb13 commit fa9b605

File tree

9 files changed

+382
-105
lines changed

9 files changed

+382
-105
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
"@tsconfig/node22": "^22.0.0",
2727
"@types/js-cookie": "^3.0.6",
2828
"@types/node": "^22.10.2",
29-
"@types/sortablejs": "^1.15.8",
3029
"@typescript-eslint/eslint-plugin": "^8.20.0",
3130
"@typescript-eslint/parser": "^8.20.0",
3231
"@vitejs/plugin-vue": "^5.2.1",

‎src/components/task-board/TaskBoard.vue‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<template>
2+
<div class="flex-1 overflow-y-auto">
3+
<div class="w-full flex gap-12 sticky top-0 bg-white z-40">
4+
<div class="flex flex-1 bg-primary2 rounded-t-lg">
5+
<span class="text-xs font-bold text-body p-4">
6+
진행 중 {{ cardList.tasksInProgress.length }}
7+
</span>
8+
</div>
9+
<div class="flex flex-1 bg-primary2 rounded-t-lg">
10+
<span class="text-xs font-bold text-body p-4">
11+
검토 중 {{ cardList.tasksPendingComplete.length }}
12+
</span>
13+
</div>
14+
<div class="flex flex-1 bg-primary2 rounded-t-lg">
15+
<span class="text-xs font-bold text-body p-4">
16+
완료 {{ cardList.tasksCompleted.length }}
17+
</span>
18+
</div>
19+
</div>
20+
21+
<div class="w-full flex gap-12 min-h-[calc(100%-48px)]">
22+
<div class="flex-1 px-4 pb-4 bg-primary2 rounded-b-lg relative">
23+
<div class="absolute top-0 left-0 px-4 w-full">
24+
<div
25+
v-if="cardList.tasksInProgress.length === 0"
26+
class="w-full max-w-80 h-[130px] bg-white border border-dashed border-border-1 rounded-lg flex justify-center items-center">
27+
<span class="whitespace-pre-wrap text-center text-sm font-bold text-disabled">
28+
{{ '상태를 변경할 작업을\n끌어 놓으세요' }}
29+
</span>
30+
</div>
31+
</div>
32+
<draggableComponent
33+
:list="cardList.tasksInProgress"
34+
group="taskList"
35+
item-key="task"
36+
class="flex flex-col gap-4 h-full"
37+
@change="event => onListChange(event, 'tasksInProgress')">
38+
<template #item="{ element }">
39+
<TaskCard
40+
:key="element.taskId"
41+
:data="element" />
42+
</template>
43+
</draggableComponent>
44+
</div>
45+
46+
<div class="flex-1 px-4 pb-4 bg-primary2 rounded-b-lg relative">
47+
<div class="absolute top-0 left-0 px-4 w-full">
48+
<div
49+
v-if="cardList.tasksPendingComplete.length === 0"
50+
class="w-full max-w-80 h-[130px] bg-white border border-dashed border-border-1 rounded-lg flex justify-center items-center">
51+
<span class="whitespace-pre-wrap text-center text-sm font-bold text-disabled">
52+
{{ '상태를 변경할 작업을\n끌어 놓으세요' }}
53+
</span>
54+
</div>
55+
</div>
56+
<draggableComponent
57+
:list="cardList.tasksPendingComplete"
58+
group="taskList"
59+
item-key="task"
60+
class="flex flex-col gap-4 h-full"
61+
@change="event => onListChange(event, 'tasksPendingComplete')">
62+
<template #item="{ element }">
63+
<TaskCard
64+
:key="element.taskId"
65+
:data="element" />
66+
</template>
67+
</draggableComponent>
68+
</div>
69+
70+
<div class="flex-1 px-4 pb-4 bg-primary2 rounded-b-lg relative">
71+
<div class="absolute top-0 left-0 px-4 w-full">
72+
<div
73+
v-if="cardList.tasksCompleted.length === 0"
74+
class="w-full max-w-80 h-[130px] bg-white border border-dashed border-border-1 rounded-lg flex justify-center items-center">
75+
<span class="whitespace-pre-wrap text-center text-sm font-bold text-disabled">
76+
{{ '상태를 변경할 작업을\n끌어 놓으세요' }}
77+
</span>
78+
</div>
79+
</div>
80+
<draggableComponent
81+
:list="cardList.tasksCompleted"
82+
group="taskList"
83+
item-key="task"
84+
class="flex flex-col gap-4 h-full"
85+
@change="event => onListChange(event, 'tasksCompleted')">
86+
<template #item="{ element }">
87+
<TaskCard
88+
:key="element.taskId"
89+
:data="element" />
90+
</template>
91+
</draggableComponent>
92+
</div>
93+
</div>
94+
</div>
95+
</template>
96+
97+
<script setup lang="ts">
98+
import { DUMMY_TASK_CARD_LIST } from '@/datas/dummy'
99+
import { ref } from 'vue'
100+
import draggableComponent from 'vuedraggable'
101+
import TaskCard from '../TaskCard.vue'
102+
import type { DraggableEvent } from '@/types/manager'
103+
104+
const cardList = ref(DUMMY_TASK_CARD_LIST)
105+
106+
const status = {
107+
tasksInProgress: '진행 중',
108+
tasksPendingComplete: '검토 중',
109+
tasksCompleted: '완료'
110+
}
111+
112+
const onListChange = (event: DraggableEvent, key: keyof typeof status) => {
113+
const { added } = event
114+
if (added) {
115+
cardList.value[key][added.newIndex].taskStatus = status[key]
116+
}
117+
}
118+
</script>

‎src/components/task-board/TaskBoardFilterBar.vue‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<div class="flex gap-4 z-50">
3+
<FilterDropdown
4+
title="구분"
5+
:option-list="DUMMY_DIVISION_LIST"
6+
:value="params.division"
7+
@update:value="onDivisionChange" />
8+
<FilterCategory
9+
:category-list="DUMMY_CATEGORY_LIST"
10+
:main="params.mainCategoryId"
11+
:sub="params.categoryId"
12+
@update:main="onMainChange"
13+
@update:sub="onSubChange" />
14+
<FilterInput
15+
title="제목"
16+
:value="params.title"
17+
@update:value="onTitleChange" />
18+
<FilterInput
19+
title="요청자"
20+
:value="params.nickName"
21+
@update:value="onNickNameChange" />
22+
</div>
23+
</template>
24+
25+
<script setup lang="ts">
26+
import FilterDropdown from '../filters/FilterDropdown.vue'
27+
import FilterCategory from '../filters/FilterCategory.vue'
28+
import FilterInput from '../filters/FilterInput.vue'
29+
import { DUMMY_CATEGORY_LIST, DUMMY_DIVISION_LIST } from '@/datas/dummy'
30+
import { useTaskBoardParamsStore } from '@/stores/params'
31+
32+
const { params } = useTaskBoardParamsStore()
33+
34+
const onArrayChange = <Value extends number | string>(array: Value[], value: Value) => {
35+
return array.includes(value) ? array.filter(el => el !== value) : [...array, value]
36+
}
37+
38+
const onDivisionChange = (value: string) => {
39+
params.division = value
40+
}
41+
const onMainChange = (value: number) => {
42+
params.mainCategoryId = onArrayChange(params.mainCategoryId, value)
43+
}
44+
const onSubChange = (value: number) => {
45+
params.categoryId = onArrayChange(params.categoryId, value)
46+
}
47+
const onNickNameChange = (value: string) => {
48+
params.nickName = value
49+
}
50+
const onTitleChange = (value: string) => {
51+
params.title = value
52+
}
53+
</script>

‎src/datas/dummy.ts‎

Lines changed: 165 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -766,11 +766,115 @@ export const DUMMY_TASK_CARD_LIST: TaskCardList = {
766766
processorOrder: 0,
767767
taskStatus: '진행 중',
768768
createdAt: '2025-01-28T09:34:00.128Z'
769+
},
770+
{
771+
taskId: 1,
772+
taskCode: 'string',
773+
mainCategoryName: 'string',
774+
categoryName: 'string',
775+
title: 'string',
776+
requesterNickName: 'string',
777+
requesterImageUrl: 'string',
778+
requesterDepartment: 'string',
779+
processorOrder: 0,
780+
taskStatus: '진행 중',
781+
createdAt: '2025-01-28T09:34:00.128Z'
782+
},
783+
{
784+
taskId: 2,
785+
taskCode: 'string',
786+
mainCategoryName: 'string',
787+
categoryName: 'string',
788+
title: 'string',
789+
requesterNickName: 'string',
790+
requesterImageUrl: 'string',
791+
requesterDepartment: 'string',
792+
processorOrder: 0,
793+
taskStatus: '진행 중',
794+
createdAt: '2025-01-28T09:34:00.128Z'
795+
},
796+
{
797+
taskId: 3,
798+
taskCode: 'string',
799+
mainCategoryName: 'string',
800+
categoryName: 'string',
801+
title: 'string',
802+
requesterNickName: 'string',
803+
requesterImageUrl: 'string',
804+
requesterDepartment: 'string',
805+
processorOrder: 0,
806+
taskStatus: '진행 중',
807+
createdAt: '2025-01-28T09:34:00.128Z'
808+
},
809+
{
810+
taskId: 4,
811+
taskCode: 'string',
812+
mainCategoryName: 'string',
813+
categoryName: 'string',
814+
title: 'string',
815+
requesterNickName: 'string',
816+
requesterImageUrl: 'string',
817+
requesterDepartment: 'string',
818+
processorOrder: 0,
819+
taskStatus: '진행 중',
820+
createdAt: '2025-01-28T09:34:00.128Z'
769821
}
770822
],
771823
tasksPendingComplete: [
772824
{
773-
taskId: 0,
825+
taskId: 5,
826+
taskCode: 'string',
827+
mainCategoryName: 'string',
828+
categoryName: 'string',
829+
title: 'string',
830+
requesterNickName: 'string',
831+
requesterImageUrl: 'string',
832+
requesterDepartment: 'string',
833+
processorOrder: 0,
834+
taskStatus: '검토 중',
835+
createdAt: '2025-01-28T09:34:00.128Z'
836+
},
837+
{
838+
taskId: 6,
839+
taskCode: 'string',
840+
mainCategoryName: 'string',
841+
categoryName: 'string',
842+
title: 'string',
843+
requesterNickName: 'string',
844+
requesterImageUrl: 'string',
845+
requesterDepartment: 'string',
846+
processorOrder: 0,
847+
taskStatus: '검토 중',
848+
createdAt: '2025-01-28T09:34:00.128Z'
849+
},
850+
{
851+
taskId: 7,
852+
taskCode: 'string',
853+
mainCategoryName: 'string',
854+
categoryName: 'string',
855+
title: 'string',
856+
requesterNickName: 'string',
857+
requesterImageUrl: 'string',
858+
requesterDepartment: 'string',
859+
processorOrder: 0,
860+
taskStatus: '검토 중',
861+
createdAt: '2025-01-28T09:34:00.128Z'
862+
},
863+
{
864+
taskId: 8,
865+
taskCode: 'string',
866+
mainCategoryName: 'string',
867+
categoryName: 'string',
868+
title: 'string',
869+
requesterNickName: 'string',
870+
requesterImageUrl: 'string',
871+
requesterDepartment: 'string',
872+
processorOrder: 0,
873+
taskStatus: '검토 중',
874+
createdAt: '2025-01-28T09:34:00.128Z'
875+
},
876+
{
877+
taskId: 9,
774878
taskCode: 'string',
775879
mainCategoryName: 'string',
776880
categoryName: 'string',
@@ -785,7 +889,59 @@ export const DUMMY_TASK_CARD_LIST: TaskCardList = {
785889
],
786890
tasksCompleted: [
787891
{
788-
taskId: 0,
892+
taskId: 10,
893+
taskCode: 'string',
894+
mainCategoryName: 'string',
895+
categoryName: 'string',
896+
title: 'string',
897+
requesterNickName: 'string',
898+
requesterImageUrl: 'string',
899+
requesterDepartment: 'string',
900+
processorOrder: 0,
901+
taskStatus: '완료',
902+
createdAt: '2025-01-28T09:34:00.128Z'
903+
},
904+
{
905+
taskId: 11,
906+
taskCode: 'string',
907+
mainCategoryName: 'string',
908+
categoryName: 'string',
909+
title: 'string',
910+
requesterNickName: 'string',
911+
requesterImageUrl: 'string',
912+
requesterDepartment: 'string',
913+
processorOrder: 0,
914+
taskStatus: '완료',
915+
createdAt: '2025-01-28T09:34:00.128Z'
916+
},
917+
{
918+
taskId: 12,
919+
taskCode: 'string',
920+
mainCategoryName: 'string',
921+
categoryName: 'string',
922+
title: 'string',
923+
requesterNickName: 'string',
924+
requesterImageUrl: 'string',
925+
requesterDepartment: 'string',
926+
processorOrder: 0,
927+
taskStatus: '완료',
928+
createdAt: '2025-01-28T09:34:00.128Z'
929+
},
930+
{
931+
taskId: 13,
932+
taskCode: 'string',
933+
mainCategoryName: 'string',
934+
categoryName: 'string',
935+
title: 'string',
936+
requesterNickName: 'string',
937+
requesterImageUrl: 'string',
938+
requesterDepartment: 'string',
939+
processorOrder: 0,
940+
taskStatus: '완료',
941+
createdAt: '2025-01-28T09:34:00.128Z'
942+
},
943+
{
944+
taskId: 14,
789945
taskCode: 'string',
790946
mainCategoryName: 'string',
791947
categoryName: 'string',
@@ -1824,3 +1980,10 @@ export const DUMMY_TEAM_MEMBERS_LIST = [
18241980
]
18251981
}
18261982
]
1983+
1984+
export const DUMMY_DIVISION_LIST = [
1985+
{ value: '', content: '전체' },
1986+
{ value: '‼️ 긴급', content: '‼️ 긴급' },
1987+
{ value: '❌ 오류', content: '❌ 오류' },
1988+
{ value: '🕑 정기', content: '🕑 정기' }
1989+
]

0 commit comments

Comments
 (0)