From 703618da5e744f17c30149507b6c731e049c1fd3 Mon Sep 17 00:00:00 2001
From: wrryu09 <rryu09@ewhain.net>
Date: Wed, 17 Jul 2024 23:57:06 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20getTasksToday=20api=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/tasksToday/TasksTodayType.ts    |  1 +
 src/apis/dashboard/tasksToday/axios.ts        | 14 +++
 src/apis/dashboard/tasksToday/query.ts        | 13 +++
 .../DashboardPage/DashboardTask.tsx           | 86 ++++++-------------
 .../DashboardPage/DashboardTaskWrapper.tsx    |  2 +-
 5 files changed, 55 insertions(+), 61 deletions(-)
 create mode 100644 src/apis/dashboard/tasksToday/TasksTodayType.ts
 create mode 100644 src/apis/dashboard/tasksToday/axios.ts
 create mode 100644 src/apis/dashboard/tasksToday/query.ts

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<TaskType | null>(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 (
 		<TaskLayout>
 			<TextBox>
@@ -75,6 +36,7 @@ function DashboardTask({ text, taskStatus, emptyStatus, emptyImg }: DashboardTas
 					<NumberText>개</NumberText>
 				</NumberTextBox>
 			</TextBox>
+
 			<ScrollArea>
 				{TODAY.data.tasks.length === 0 ? (
 					<EmptyWrapper>
@@ -84,24 +46,28 @@ function DashboardTask({ text, taskStatus, emptyStatus, emptyImg }: DashboardTas
 						<EmptyText text={text}>{emptyStatus}</EmptyText>
 					</EmptyWrapper>
 				) : (
-					<>
-						{dummyTaskList.map((task) => (
-							<BtnTask
-								key={task.id + task.name}
-								hasDescription={task.hasDescription}
-								id={task.id}
-								name={task.name}
-								status={task.status}
-								deadLine={task.deadLine}
-								selectedTarget={selectedTarget}
-								preventDoubleClick
-								handleSelectedTarget={handleSelectedTarget}
-								iconType="active"
-							/>
-						))}
-						<ScrollGradient />
-					</>
+					isFetched && (
+						<>
+							{data.data.tasks.map((task: TaskType) => (
+								<BtnTask
+									key={task.id + task.name}
+									hasDescription={task.hasDescription}
+									id={task.id}
+									name={task.name}
+									status={task.status}
+									deadLine={task.deadLine}
+									selectedTarget={selectedTarget}
+									preventDoubleClick
+									handleSelectedTarget={handleSelectedTarget}
+									iconType="active"
+								/>
+							))}
+							<ScrollGradient />
+						</>
+					)
 				)}
+
+				<ScrollGradient />
 			</ScrollArea>
 		</TaskLayout>
 	);
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}
 			/>
 			<DashboardTask
-				text="postponed"
+				text="deferred"
 				taskStatus={DASHBOARD_TASK_TYPE.POSTPONED}
 				emptyStatus={DASHBOARD_TASK_TYPE.EMPTYPOSTPONE}
 				emptyImg={Images.EMPTY.postponeImg}