diff --git a/src/apis/dashboard/tasksToday/TasksTodayType.ts b/src/apis/dashboard/tasksToday/TasksTodayType.ts new file mode 100644 index 00000000..7759065d --- /dev/null +++ b/src/apis/dashboard/tasksToday/TasksTodayType.ts @@ -0,0 +1 @@ +export type TasksTodayType = 'upcoming' | 'inprogress' | 'deferred'; diff --git a/src/apis/dashboard/tasksToday/axios.ts b/src/apis/dashboard/tasksToday/axios.ts new file mode 100644 index 00000000..33e1e4b0 --- /dev/null +++ b/src/apis/dashboard/tasksToday/axios.ts @@ -0,0 +1,14 @@ +import { TasksTodayType } from './TasksTodayType'; + +import { privateInstance } from '@/apis/instance'; + +const getTasksToday = async (type: TasksTodayType) => { + const { data } = await privateInstance.get('/api/tasks/today', { + params: { + type, + }, + }); + return data; +}; + +export default getTasksToday; diff --git a/src/apis/dashboard/tasksToday/query.ts b/src/apis/dashboard/tasksToday/query.ts new file mode 100644 index 00000000..e8bec548 --- /dev/null +++ b/src/apis/dashboard/tasksToday/query.ts @@ -0,0 +1,13 @@ +import { useQuery } from '@tanstack/react-query'; + +import getTasksToday from './axios'; +import { TasksTodayType } from './TasksTodayType'; + +/** TaskToday 리스트 조회 */ +const useGetTasksToday = (type: TasksTodayType) => + useQuery({ + queryKey: ['dashboard', type], + queryFn: () => getTasksToday(type), + }); + +export default useGetTasksToday; diff --git a/src/components/DashboardPage/DashboardTask.tsx b/src/components/DashboardPage/DashboardTask.tsx index c8ffbd00..520c1ee1 100644 --- a/src/components/DashboardPage/DashboardTask.tsx +++ b/src/components/DashboardPage/DashboardTask.tsx @@ -1,16 +1,17 @@ import styled from '@emotion/styled'; import { useState } from 'react'; +import useGetTasksToday from '@/apis/dashboard/tasksToday/query'; import BtnTask from '@/components/common/BtnTask/BtnTask'; import ScrollGradient from '@/components/common/ScrollGradient'; import TODAY from '@/constants/tasksToday'; import { TaskType } from '@/types/tasks/taskType'; interface DashboardTaskProps { - text: 'upcoming' | 'postponed' | 'inprogress'; taskStatus: string; emptyStatus: string; emptyImg: string; + text: 'upcoming' | 'deferred' | 'inprogress'; } function DashboardTask({ text, taskStatus, emptyStatus, emptyImg }: DashboardTaskProps) { const [selectedTarget, setSelectedTarget] = useState(null); @@ -24,48 +25,8 @@ function DashboardTask({ text, taskStatus, emptyStatus, emptyImg }: DashboardTas height: auto; `; - const dummyTaskList: TaskType[] = [ - { - id: 10, - name: '바보~', - deadLine: { - date: '2024-06-30', - time: '12:30', - }, - hasDescription: false, - status: '진행중', - }, - { - id: 11, - name: '넛수레', - deadLine: { - date: '2024-06-30', - time: '12:30', - }, - hasDescription: true, - status: '지연', - }, - { - id: 12, - name: '콘하스', - deadLine: { - date: '2024-06-30', - time: '12:30', - }, - hasDescription: true, - status: '완료', - }, - { - id: 13, - name: '김지원', - deadLine: { - date: '2024-06-30', - time: '12:30', - }, - hasDescription: true, - status: '미완료', - }, - ]; + const { isFetched, data } = useGetTasksToday(text); + return ( @@ -75,6 +36,7 @@ function DashboardTask({ text, taskStatus, emptyStatus, emptyImg }: DashboardTas + {TODAY.data.tasks.length === 0 ? ( @@ -84,24 +46,28 @@ function DashboardTask({ text, taskStatus, emptyStatus, emptyImg }: DashboardTas {emptyStatus} ) : ( - <> - {dummyTaskList.map((task) => ( - - ))} - - + isFetched && ( + <> + {data.data.tasks.map((task: TaskType) => ( + + ))} + + + ) )} + + ); diff --git a/src/components/DashboardPage/DashboardTaskWrapper.tsx b/src/components/DashboardPage/DashboardTaskWrapper.tsx index 8f741b13..2db65a3a 100644 --- a/src/components/DashboardPage/DashboardTaskWrapper.tsx +++ b/src/components/DashboardPage/DashboardTaskWrapper.tsx @@ -14,7 +14,7 @@ function DashboardTaskWrapper() { emptyImg={Images.EMPTY.taskImg} />