From 2149a117fa71159c83f600b1b0bd84aab264d1fd Mon Sep 17 00:00:00 2001 From: KIMGEONHWI Date: Sun, 12 Jan 2025 02:02:41 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=ED=83=80=EC=9D=B4=EB=A8=B8=20=EB=82=B4?= =?UTF-8?q?=20=ED=95=A0=EC=9D=BC=20=EC=B9=B4=EB=93=9C=20=EC=A1=B0=ED=9A=8C?= =?UTF-8?q?=20get=20=EC=97=B0=EA=B2=B0=20(#243)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mocks/timer/resolvers/timerResolvers.ts | 6 ++--- src/pages/TimerPage/TimerPage.tsx | 26 ++++++++++++++++---- src/pages/TimerPage/hooks/useSelectedTodo.ts | 2 +- src/shared/apisV2/timer/axios/index.ts | 19 ++++++++++++++ src/shared/apisV2/timer/queries/index.ts | 10 ++++++++ 5 files changed, 54 insertions(+), 9 deletions(-) create mode 100644 src/shared/apisV2/timer/axios/index.ts create mode 100644 src/shared/apisV2/timer/queries/index.ts diff --git a/src/mocks/timer/resolvers/timerResolvers.ts b/src/mocks/timer/resolvers/timerResolvers.ts index ba0f6cd8..b923c7b5 100644 --- a/src/mocks/timer/resolvers/timerResolvers.ts +++ b/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 }); diff --git a/src/pages/TimerPage/TimerPage.tsx b/src/pages/TimerPage/TimerPage.tsx index 19fd0aff..bb960721 100644 --- a/src/pages/TimerPage/TimerPage.tsx +++ b/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); diff --git a/src/pages/TimerPage/hooks/useSelectedTodo.ts b/src/pages/TimerPage/hooks/useSelectedTodo.ts index a009ec6a..2511a269 100644 --- a/src/pages/TimerPage/hooks/useSelectedTodo.ts +++ b/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; } diff --git a/src/shared/apisV2/timer/axios/index.ts b/src/shared/apisV2/timer/axios/index.ts new file mode 100644 index 00000000..e45c731c --- /dev/null +++ b/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; +}; diff --git a/src/shared/apisV2/timer/queries/index.ts b/src/shared/apisV2/timer/queries/index.ts new file mode 100644 index 00000000..fe540d57 --- /dev/null +++ b/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), + }); +};