Skip to content

Commit ef5eff7

Browse files
seorang42seorang42
committed
♻️ [refactor] : TaskBoardView, TaskCard 실제 API 명세에 정의된 형식 적용
1 parent 4a971ac commit ef5eff7

File tree

4 files changed

+132
-132
lines changed

4 files changed

+132
-132
lines changed

‎src/components/TaskCard.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@
1313
<div class="flex justify-between items-end">
1414
<span class="text-xs font-bold text-black">{{ data.taskCode }}</span>
1515
<div class="flex flex-col gap-1 items-end">
16-
<span class="text-xs font-bold text-body">{{ data.requesterTeam }}</span>
16+
<span class="text-xs font-bold text-body">{{ data.requesterDepartment }}</span>
1717
<div class="flex items-center gap-1">
1818
<div class="w-4 h-4 rounded-full bg-background-1 overflow-hidden">
19-
<img :src="data.requesterImg" />
19+
<img :src="data.requesterImageUrl" />
2020
</div>
21-
<span class="text-xs font-bold text-black">{{ data.requesterName }}</span>
21+
<span class="text-xs font-bold text-black">{{ data.requesterNickName }}</span>
2222
</div>
2323
</div>
2424
</div>
@@ -29,14 +29,14 @@
2929
import { bentoIcon } from '@/constants/iconPath'
3030
import type { Status } from '@/types/common'
3131
import { computed } from 'vue'
32-
import { statusAsColor } from '@/utils/statusAsColor'
3332
import type { TaskCardProps } from '@/types/manager'
3433
import CommonIcons from './common/CommonIcons.vue'
34+
import { statusAsColor } from '@/utils/statusAsColor'
3535
3636
const { data } = defineProps<{ data: TaskCardProps }>()
3737
3838
const borderLeft = computed(() => {
39-
return `border-${statusAsColor(status as Status)}-1`
39+
return `border-${statusAsColor(data.taskStatus as Status)}-1`
4040
})
4141
4242
const onTaskClick = () => {

‎src/datas/dummy.ts‎

Lines changed: 51 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Category } from '@/types/common'
2-
import type { RequestedListData, RequestHistoryListData } from '@/types/manager'
2+
import type { RequestedListData, RequestHistoryListData, TaskCardList } from '@/types/manager'
33
import type { MyRequestListData } from '@/types/user'
44

55
export const DUMMY_CATEGORY_LIST: Category[] = [
@@ -746,116 +746,53 @@ export const DUMMY_REQUEST_HISTORY_LIST_DATA: RequestHistoryListData[] = [
746746
}
747747
]
748748

749-
export const DUMMY_TASK_CARD_LIST = [
750-
{
751-
taskStatus: '진행 중',
752-
taskList: [
753-
{
754-
taskId: 1,
755-
title: '제목1',
756-
mainCategoryName: '1차 카테고리',
757-
categoryName: '2차 카테고리',
758-
taskCode: 'VMCR25010100001',
759-
requesterTeam: '백엔드 1팀',
760-
requesterImg: 'https://picsum.photos/24/24',
761-
requesterName: 'Hello.world'
762-
},
763-
{
764-
taskId: 2,
765-
title: '제목2',
766-
mainCategoryName: '1차 카테고리',
767-
categoryName: '2차 카테고리',
768-
taskCode: 'VMCR25010100001',
769-
requesterTeam: '백엔드 1팀',
770-
requesterImg: 'https://picsum.photos/24/24',
771-
requesterName: 'Hello.world'
772-
},
773-
{
774-
taskId: 3,
775-
title: '제목3',
776-
mainCategoryName: '1차 카테고리',
777-
categoryName: '2차 카테고리',
778-
taskCode: 'VMCR25010100001',
779-
requesterTeam: '백엔드 1팀',
780-
requesterImg: 'https://picsum.photos/24/24',
781-
requesterName: 'Hello.world'
782-
}
783-
]
784-
},
785-
{ taskStatus: '검토 중', taskList: [] },
786-
{
787-
taskStatus: '완료',
788-
taskList: [
789-
{
790-
taskId: 4,
791-
title: '제목4',
792-
mainCategoryName: '1차 카테고리',
793-
categoryName: '2차 카테고리',
794-
taskCode: 'VMCR25010100001',
795-
requesterTeam: '백엔드 1팀',
796-
requesterImg: 'https://picsum.photos/24/24',
797-
requesterName: 'Hello.world'
798-
},
799-
{
800-
taskId: 5,
801-
title: '제목5',
802-
mainCategoryName: '1차 카테고리',
803-
categoryName: '2차 카테고리',
804-
taskCode: 'VMCR25010100001',
805-
requesterTeam: '백엔드 1팀',
806-
requesterImg: 'https://picsum.photos/24/24',
807-
requesterName: 'Hello.world'
808-
},
809-
{
810-
taskId: 6,
811-
title: '제목6',
812-
mainCategoryName: '1차 카테고리',
813-
categoryName: '2차 카테고리',
814-
taskCode: 'VMCR25010100001',
815-
requesterTeam: '백엔드 1팀',
816-
requesterImg: 'https://picsum.photos/24/24',
817-
requesterName: 'Hello.world'
818-
},
819-
{
820-
taskId: 7,
821-
title: '제목7',
822-
mainCategoryName: '1차 카테고리',
823-
categoryName: '2차 카테고리',
824-
taskCode: 'VMCR25010100001',
825-
requesterTeam: '백엔드 1팀',
826-
requesterImg: 'https://picsum.photos/24/24',
827-
requesterName: 'Hello.world'
828-
},
829-
{
830-
taskId: 8,
831-
title: '제목8',
832-
mainCategoryName: '1차 카테고리',
833-
categoryName: '2차 카테고리',
834-
taskCode: 'VMCR25010100001',
835-
requesterTeam: '백엔드 1팀',
836-
requesterImg: 'https://picsum.photos/24/24',
837-
requesterName: 'Hello.world'
838-
},
839-
{
840-
taskId: 9,
841-
title: '제목9',
842-
mainCategoryName: '1차 카테고리',
843-
categoryName: '2차 카테고리',
844-
taskCode: 'VMCR25010100001',
845-
requesterTeam: '백엔드 1팀',
846-
requesterImg: 'https://picsum.photos/24/24',
847-
requesterName: 'Hello.world'
848-
},
849-
{
850-
taskId: 10,
851-
title: '제목10',
852-
mainCategoryName: '1차 카테고리',
853-
categoryName: '2차 카테고리',
854-
taskCode: 'VMCR25010100001',
855-
requesterTeam: '백엔드 1팀',
856-
requesterImg: 'https://picsum.photos/24/24',
857-
requesterName: 'Hello.world'
858-
}
859-
]
860-
}
861-
]
749+
export const DUMMY_TASK_CARD_LIST: TaskCardList = {
750+
tasksInProgress: [
751+
{
752+
taskId: 0,
753+
taskCode: 'string',
754+
mainCategoryName: 'string',
755+
categoryName: 'string',
756+
title: 'string',
757+
requesterNickName: 'string',
758+
requesterImageUrl: 'string',
759+
requesterDepartment: 'string',
760+
processorOrder: 0,
761+
taskStatus: '진행 중',
762+
createdAt: '2025-01-28T09:34:00.128Z'
763+
}
764+
],
765+
tasksPendingComplete: [
766+
{
767+
taskId: 0,
768+
taskCode: 'string',
769+
mainCategoryName: 'string',
770+
categoryName: 'string',
771+
title: 'string',
772+
requesterNickName: 'string',
773+
requesterImageUrl: 'string',
774+
requesterDepartment: 'string',
775+
processorOrder: 0,
776+
taskStatus: '검토 중',
777+
createdAt: '2025-01-28T09:34:00.128Z'
778+
}
779+
],
780+
tasksCompleted: [
781+
{
782+
taskId: 0,
783+
taskCode: 'string',
784+
mainCategoryName: 'string',
785+
categoryName: 'string',
786+
title: 'string',
787+
requesterNickName: 'string',
788+
requesterImageUrl: 'string',
789+
requesterDepartment: 'string',
790+
processorOrder: 0,
791+
taskStatus: '완료',
792+
createdAt: '2025-01-28T09:34:00.128Z'
793+
}
794+
],
795+
hasNext: true,
796+
isFirst: true,
797+
isLast: true
798+
}

‎src/types/manager.ts‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,24 @@ export interface RequestHistoryListData {
2424
}
2525

2626
export interface TaskCardProps {
27-
title: string
27+
taskId: number
28+
taskCode: string
2829
mainCategoryName: string
2930
categoryName: string
30-
taskCode: string
31-
requesterTeam: string
32-
requesterImg: string
33-
requesterName: string
34-
status: string
31+
title: string
32+
requesterNickName: string
33+
requesterImageUrl: string
34+
requesterDepartment: string
35+
processorOrder: number
36+
taskStatus: string
37+
createdAt: string
38+
}
39+
40+
export interface TaskCardList {
41+
tasksInProgress: TaskCardProps[]
42+
tasksPendingComplete: TaskCardProps[]
43+
tasksCompleted: TaskCardProps[]
44+
hasNext: boolean
45+
isFirst: boolean
46+
isLast: boolean
3547
}

‎src/views/TaskBoardView.vue‎

Lines changed: 58 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,75 @@
33
<TitleBar title="작업 보드" />
44

55
<div class="grow flex gap-12 overflow-hidden">
6-
<div
7-
v-for="status in cardList"
8-
:key="status.taskStatus"
9-
class="w-full flex flex-col bg-primary2 rounded-lg relative">
6+
<div class="w-full flex flex-col bg-primary2 rounded-lg relative">
107
<span class="text-xs font-bold text-body p-4">
11-
{{ status.taskStatus }} {{ status.taskList.length }}
8+
진행 중 {{ cardList.tasksInProgress.length }}
129
</span>
1310
<div class="absolute top-12 px-4 w-full">
1411
<div
15-
v-if="status.taskList.length === 0"
12+
v-if="cardList.tasksInProgress.length === 0"
1613
class="w-full max-w-80 h-[130px] bg-white border border-dashed border-border-1 rounded-lg flex justify-center items-center">
1714
<span class="whitespace-pre-wrap text-center text-sm font-bold text-disabled">
1815
{{ '상태를 변경할 작업을\n끌어 놓으세요' }}
1916
</span>
2017
</div>
2118
</div>
2219
<draggableComponent
23-
:list="status.taskList"
20+
:list="cardList.tasksInProgress"
21+
group="taskList"
22+
item-key="task"
23+
class="flex flex-col grow px-4 pb-4 gap-4 overflow-y-scroll"
24+
@change="onListChange">
25+
<template #item="{ element }">
26+
<TaskCard
27+
:key="element.taskId"
28+
:data="element" />
29+
</template>
30+
</draggableComponent>
31+
</div>
32+
33+
<div class="w-full flex flex-col bg-primary2 rounded-lg relative">
34+
<span class="text-xs font-bold text-body p-4">
35+
검토 중 {{ cardList.tasksPendingComplete.length }}
36+
</span>
37+
<div class="absolute top-12 px-4 w-full">
38+
<div
39+
v-if="cardList.tasksPendingComplete.length === 0"
40+
class="w-full max-w-80 h-[130px] bg-white border border-dashed border-border-1 rounded-lg flex justify-center items-center">
41+
<span class="whitespace-pre-wrap text-center text-sm font-bold text-disabled">
42+
{{ '상태를 변경할 작업을\n끌어 놓으세요' }}
43+
</span>
44+
</div>
45+
</div>
46+
<draggableComponent
47+
:list="cardList.tasksPendingComplete"
48+
group="taskList"
49+
item-key="task"
50+
class="flex flex-col grow px-4 pb-4 gap-4 overflow-y-scroll"
51+
@change="onListChange">
52+
<template #item="{ element }">
53+
<TaskCard
54+
:key="element.taskId"
55+
:data="element" />
56+
</template>
57+
</draggableComponent>
58+
</div>
59+
60+
<div class="w-full flex flex-col bg-primary2 rounded-lg relative">
61+
<span class="text-xs font-bold text-body p-4">
62+
완료 {{ cardList.tasksCompleted.length }}
63+
</span>
64+
<div class="absolute top-12 px-4 w-full">
65+
<div
66+
v-if="cardList.tasksCompleted.length === 0"
67+
class="w-full max-w-80 h-[130px] bg-white border border-dashed border-border-1 rounded-lg flex justify-center items-center">
68+
<span class="whitespace-pre-wrap text-center text-sm font-bold text-disabled">
69+
{{ '상태를 변경할 작업을\n끌어 놓으세요' }}
70+
</span>
71+
</div>
72+
</div>
73+
<draggableComponent
74+
:list="cardList.tasksCompleted"
2475
group="taskList"
2576
item-key="task"
2677
class="flex flex-col grow px-4 pb-4 gap-4 overflow-y-scroll"

0 commit comments

Comments
 (0)