feat: 타이머 내 할일 카드 조회 get 연결 (#243)

src/mocks/timer/resolvers/timerResolvers.ts

@@ -23,9 +23,9 @@ export const timerResolvers = [
 		},
 	),
 
-	http.get(TIMER_MOCK_URL.GET_TODO_CARD, async ({ params }) => {
-		const { targetDate } = params;
-
+	http.get(TIMER_MOCK_URL.GET_TODO_CARD, async ({ request }) => {
+		const url = new URL(request.url);
+		const targetDate = url.searchParams.get('targetDate');
 		if (!targetDate) {
 			console.error('targetDate is not exist');
 			throw new HttpResponse(null, { status: 400 });

src/pages/TimerPage/TimerPage.tsx

@@ -4,7 +4,7 @@ import utc from 'dayjs/plugin/utc';
 
 import { useEffect, useMemo, useState } from 'react';
 
-import { useGetMoribSet, useGetTodoList, usePostTimerStop } from '@/shared/apis/timer/queries';
+import { useGetMoribSet, usePostTimerStop } from '@/shared/apis/timer/queries';
 
 import { splitTasksByCompletion } from '@/shared/utils/timer';
 import { getBaseUrl } from '@/shared/utils/url';
@@ -14,6 +14,8 @@ import { DATE_FORMAT, DEFAULT_URL, TIMEZONE } from '@/shared/constants/timerPage
 import HamburgerIcon from '@/shared/assets/svgs/btn_hamburger.svg?react';
 import HomeIcon from '@/shared/assets/svgs/btn_home.svg?react';
 
+import { useGetTodoCard } from '@/shared/apisV2/timer/queries';
+
 import Carousel from './Carousel/Carousel';
 import PopoverAllowedService from './PopoverAllowedService/PopoverAllowedService';
 import SideBarTimer from './SidebarTimer/SideBarTimer';
@@ -31,10 +33,13 @@ interface MoribSetData {
 	url: string;
 }
 
-interface Todo {
+interface Task {
 	id: number;
 	name: string;
+	startDate: string;
+	endDate: string | null;
 	targetTime: number;
+	isComplete: boolean;
 	categoryName: string;
 }
 
@@ -43,9 +48,20 @@ const TimerPage = () => {
 	const { isSidebarOpen, handleSidebarToggle } = useToggleSidebar();
 	const todayDate = dayjs().tz(TIMEZONE);
 	const formattedTodayDate = todayDate.format(DATE_FORMAT);
+	const { data: todosData, isLoading, error } = useGetTodoCard(formattedTodayDate);
+
+	const todos: Task[] = (todosData?.data?.task || []).map((todo: any, index: number) => ({
+		id: index,
+		name: todo.name,
+		startDate: todo.startDate,
+		endDate: todo.endDate,
+		targetTime: parseInt(todo.elapsedTime, 10),
+		isComplete: todo.isComplete,
+		categoryName: todo.categoryName,
+	}));
+
+	const totalTimeOfToday = todosData?.data?.sumTodayElapsedTime || 0;
 
-	const { data: todosData, isLoading, error } = useGetTodoList(formattedTodayDate);
-	const { task: todos = [], totalTimeOfToday = 0 } = todosData?.data || {};
 	const { ongoingTodos, completedTodos } = splitTasksByCompletion(todos);
 
 	const [selectedTodo, setSelectedTodo] = useSelectedTodo(todos);
@@ -58,7 +74,7 @@ const TimerPage = () => {
 
 	const [isAllowedServiceVisible, setIsAllowedServiceVisible] = useState(false);
 
-	const selectedTodoData = todos.find((todo: Todo) => todo.id === selectedTodo);
+	const selectedTodoData = todos.find((todo: Task) => todo.id === selectedTodo);
 
 	useEffect(() => {
 		setTargetTime(selectedTodoData?.targetTime || 0);

src/pages/TimerPage/hooks/useSelectedTodo.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 interface Todo {
 	id: number;
 	name: string;
-	targetTime: string;
+	targetTime: number;
 	categoryName: string;
 }
 

src/shared/apisV2/timer/axios/index.ts

@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+import { TIMER_MOCK_URL } from '@/mocks/timer/resolvers/timerResolvers';
+
+export const postTimerStop = async (taskId: string, targetDate: string, elapsedTime: number) => {
+	const url = TIMER_MOCK_URL.POST_TIMER_STOP.replace(':taskId', taskId);
+	const { data } = await axios.post(url, {
+		targetDate: targetDate,
+		elapsedTime: elapsedTime,
+	});
+	return data;
+};
+
+export const getTodoCard = async (targetDate: string) => {
+	const { data } = await axios.get(TIMER_MOCK_URL.GET_TODO_CARD, {
+		params: { targetDate },
+	});
+	return data;
+};

src/shared/apisV2/timer/queries/index.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getTodoCard } from '../axios';
+
+export const useGetTodoCard = (targetDate: string) => {
+	return useQuery({
+		queryKey: ['todo', targetDate],
+		queryFn: () => getTodoCard(targetDate),
+	});
+};