feat: home 기존 api, v2 mocking api로 교체 및 모달 임시 주석 (#249)

morib-in · Jan 23, 2025 · a3c7831 · a3c7831
1 parent b626b6e
commit a3c7831
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 77 deletions.
diff --git a/src/pages/HomePage/BoxCategory/BoxCategory.tsx b/src/pages/HomePage/BoxCategory/BoxCategory.tsx
@@ -7,14 +7,13 @@ import ButtonTodoToggle from '@/shared/components/ButtonTodayToggle/ButtonTodoTo
 
 import useClickOutside from '@/shared/hooks/useClickOutside';
 
-import { usePatchTaskStatus } from '@/shared/apis/common/queries';
-import { usePostCreateTask } from '@/shared/apis/home/queries';
-
-import { Task } from '@/shared/types/home';
+import type { TaskListType, TaskType } from '@/shared/types/tasks';
 
 import ButtonAddIcon from '@/shared/assets/svgs/btn_task_add.svg?react';
 import MeatBallDefault from '@/shared/assets/svgs/todo_meatball_default.svg?react';
 
+import { usePostCreateTask, usePostToggleTaskStatus } from '@/shared/apisV2/home/home.mutations';
+
 import { useCalendar } from '../hooks/useCalendar';
 import BoxTodoInput from './BoxTodoInput/BoxTodoInput';
 import StatusDefaultBoxCategory from './StatusDefaultBoxCategory/StatusDefaultBoxCategory';
@@ -25,9 +24,9 @@ const Calendar = lazy(() => import('@/shared/components/Calendar/Calendar'));
 interface BoxCategoryProps {
 	id: number;
 	title: string;
-	completedTodos: Task[];
-	ongoingTodos: Task[];
-	updateTodayTodos: (todo: Omit<Task, 'isComplete'>) => void;
+	completedTodos: TaskListType;
+	ongoingTodos: TaskListType;
+	updateTodayTodos: (todo: Omit<TaskType, 'isComplete'>) => void;
 	addingTodayTodoStatus: boolean;
 	getSelectedNumber: (id: number) => number;
 	addingComplete: boolean;
@@ -85,11 +84,9 @@ const BoxCategory = ({
 	const handleCreatePost = () => {
 		const dataToPost = {
 			categoryId: id,
-			taskData: {
-				name: name,
-				startDate: format(selectedStartDate) as string,
-				endDate: format(selectedEndDate),
-			},
+			name: name,
+			startDate: format(selectedStartDate) as string,
+			endDate: format(selectedEndDate),
 		};
 		mutate(dataToPost);
 
@@ -100,7 +97,7 @@ const BoxCategory = ({
 		handlePeriodEnd();
 	};
 
-	const { mutate: toggleTodoStatus } = usePatchTaskStatus();
+	const { mutate: toggleTodoStatus } = usePostToggleTaskStatus();
 
 	if (isError) {
 		console.error(error);
@@ -167,13 +164,13 @@ const BoxCategory = ({
 								</>
 							)}
 
-							{ongoingTodos.map(({ id, name, startDate, endDate, targetTime }) => {
+							{ongoingTodos.map(({ id, name, startDate, endDate, elapsedTime }) => {
 								const todo = {
 									id: id,
 									name: name,
 									startDate: startDate,
 									endDate: endDate,
-									targetTime: targetTime,
+									elapsedTime: elapsedTime,
 								};
 
 								const selectedNumber = getSelectedNumber(id);
@@ -185,10 +182,10 @@ const BoxCategory = ({
 										name={name}
 										startDate={startDate}
 										endDate={endDate}
-										targetTime={targetTime}
+										elapsedTime={elapsedTime}
 										isSelected={!!selectedNumber}
 										selectedNumber={selectedNumber}
-										onToggleComplete={() => toggleTodoStatus(id)}
+										onToggleComplete={() => toggleTodoStatus({ taskId: id })}
 										updateTodayTodos={() => updateTodayTodos(todo)}
 										clickable={addingTodayTodoStatus}
 										addingComplete={addingComplete}
@@ -199,16 +196,16 @@ const BoxCategory = ({
 
 						{completedTodos.length !== 0 && (
 							<ButtonTodoToggle isToggled={false}>
-								{completedTodos.map(({ id, name, startDate, endDate, targetTime }) => (
+								{completedTodos.map(({ id, name, startDate, endDate, elapsedTime }) => (
 									<BoxTodo
 										id={id}
 										key={id}
 										isComplete
 										name={name}
 										startDate={startDate}
 										endDate={endDate}
-										targetTime={targetTime}
-										onToggleComplete={() => toggleTodoStatus(id)}
+										elapsedTime={elapsedTime}
+										onToggleComplete={() => toggleTodoStatus({ taskId: id })}
 										clickable={addingTodayTodoStatus}
 										addingComplete={addingComplete}
 									/>

diff --git a/src/pages/HomePage/BoxTodayTodo/BoxTodayTodo.tsx b/src/pages/HomePage/BoxTodayTodo/BoxTodayTodo.tsx
@@ -1,18 +1,18 @@
 import { convertTime } from '@/shared/utils/time';
 
-import { Task } from '@/shared/types/home';
+import type { TaskType } from '@/shared/types/tasks';
 
 import StatusAddBoxTodayTodo from './StatusAddBoxTodayTodo/StatusAddBoxTodayTodo';
 import StatusDefaultBoxTodayTodo from './StatusDefaultBoxTodayTodo/StatusDefaultBoxTodayTodo';
 
 interface BoxTodayTodoProps {
 	time: number;
 	addingTodayTodoStatus: boolean;
-	selectedTodayTodos: Omit<Task, 'isComplete'>[];
+	selectedTodayTodos: Omit<TaskType, 'isComplete'>[];
 	hasTodos: boolean;
 	enableAddingTodayTodo: () => void;
 	disableAddingTodayTodo: () => void;
-	deleteTodayTodos: (todo: Omit<Task, 'isComplete'>) => void;
+	deleteTodayTodos: (todo: Omit<TaskType, 'isComplete'>) => void;
 	getSelectedNumber: (id: number) => number;
 	enableComplete: () => void;
 	cancelComplte: () => void;

diff --git a/src/pages/HomePage/BoxTodayTodo/StatusAddBoxTodayTodo/StatusAddBoxTodayTodo.tsx b/src/pages/HomePage/BoxTodayTodo/StatusAddBoxTodayTodo/StatusAddBoxTodayTodo.tsx
@@ -2,16 +2,16 @@ import BoxTodo from '@/shared/components/BoxTodo/BoxTodo';
 import HomeLargeBtn from '@/shared/components/ButtonHomeLarge/ButtonHomeLarge';
 
 import { HomeLargeBtnVariant } from '@/shared/types/global';
-import { Task } from '@/shared/types/home';
+import type { TaskType } from '@/shared/types/tasks';
 
 import { LARGE_BTN_TEXT, SMALL_BTN_TEXT } from '@/shared/constants/btnText';
 
 import HomeSmallBtn from './ButtonHomeSmall/ButtonHomeSmall';
 
 interface StatusAddBoxTodayTodoProps {
-	selectedTodayTodos: Omit<Task, 'isComplete'>[];
+	selectedTodayTodos: Omit<TaskType, 'isComplete'>[];
 	onDisableAddStatus: () => void;
-	deleteTodayTodos: (todo: Omit<Task, 'isComplete'>) => void;
+	deleteTodayTodos: (todo: Omit<TaskType, 'isComplete'>) => void;
 	getSelectedNumber: (id: number) => number;
 	enableComplete: () => void;
 	cancelComplte: () => void;
@@ -42,14 +42,14 @@ const StatusAddBoxTodayTodo = ({
 		<div className="flex flex-grow flex-col justify-between">
 			{hasTodayTodos ? (
 				<ul className="mt-[0.7rem] max-h-[57.5rem] overflow-auto">
-					{selectedTodayTodos.map(({ id, targetTime, startDate, endDate, name }) => {
+					{selectedTodayTodos.map(({ id, elapsedTime, startDate, endDate, name }) => {
 						const selectedNumber = getSelectedNumber(id);
 
 						return (
 							<li key={id}>
 								<BoxTodo
 									id={id}
-									targetTime={targetTime}
+									elapsedTime={elapsedTime}
 									startDate={startDate}
 									endDate={endDate}
 									name={name}

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
@@ -11,24 +11,20 @@ import ModalWrapper, { ModalWrapperRef } from '@/shared/components/ModalWrapper/
 
 import useClickOutside from '@/shared/hooks/useClickOutside';
 
-import {
-	useDeleteCategory,
-	useGetAllCategoryTask,
-	useGetTargetTime,
-	usePostCreateTodayTodos,
-} from '@/shared/apis/home/queries';
-
 import { getThisWeekRange } from '@/shared/utils/date';
-import { getDailyCategoryTask, isTaskExist, splitTasksByCompletion } from '@/shared/utils/homePage';
+import { getDailyCategoryTask, isTaskExist, splitTasksByCompletion } from '@/shared/utils/tasks';
 
-import { Task } from '@/shared/types/home';
+import { TaskType } from '@/shared/types/tasks';
 
 import BellIcon from '@/shared/assets/svgs/bell.svg?react';
 import FriendSettingIcon from '@/shared/assets/svgs/friend_setting.svg?react';
 import LargePlusIcon from '@/shared/assets/svgs/large_plus.svg?react';
 
 import { ROUTES_CONFIG } from '@/router/routesConfig';
 
+import { useDeleteCategory, usePostAddTodayTodos } from '@/shared/apisV2/home/home.mutations';
+import { useGetCategoryTask, useGetWorkTime } from '@/shared/apisV2/home/home.queries';
+
 import BoxCategory from './BoxCategory/BoxCategory';
 import BoxTodayTodo from './BoxTodayTodo/BoxTodayTodo';
 import ButtonMoreFriends from './ButtonMoreFriends/ButtonMoreFriends';
@@ -54,35 +50,30 @@ const HomePage = () => {
 	const [selectedDate, setSelectedDate] = useState(todayDate);
 	const { startDate, endDate } = getThisWeekRange(selectedDate);
 
-	const { data: categoriesData, isError, error } = useGetAllCategoryTask(startDate, endDate);
+	const { data: categoriesData } = useGetCategoryTask({ startDate, endDate });
 
 	const categories = categoriesData?.data || [];
+
 	const dailyCategoryTask = getDailyCategoryTask(selectedDate, categories);
 
 	const [addingTodayTodoStatus, setAddingTodayTodoStatus] = useState(false);
 	const [addingComplete, setAddingComplete] = useState(false);
-	const addTodayTodoOverlayStyle = addingTodayTodoStatus && !addingComplete ? 'opacity-30 pointer-events-none' : '';
+	const addTodayTodosOverlayStyle = addingTodayTodoStatus && !addingComplete ? 'opacity-30 pointer-events-none' : '';
 
-	const [todayTodos, setTodayTodos] = useState<Omit<Task, 'isComplete'>[]>([]);
+	const [todayTodos, setTodayTodos] = useState<Omit<TaskType, 'isComplete'>[]>([]);
 
-	const { mutate: createTodayTodos } = usePostCreateTodayTodos();
+	const { mutate: addTodayTodos } = usePostAddTodayTodos();
 	const { mutate: deleteCategory } = useDeleteCategory();
 
 	const navigate = useNavigate();
 
-	const updateTodayTodos = (todo: Omit<Task, 'isComplete'>) => {
+	const updateTodayTodos = (todo: Omit<TaskType, 'isComplete'>) => {
 		const canAddTask = !todayTodos.some((prevTodo) => prevTodo.id === todo.id);
 		if (canAddTask) setTodayTodos((prev) => [...prev, todo]);
 		else setTodayTodos((prev) => prev.filter((prevTodo) => prevTodo.id !== todo.id));
 	};
 
-	const {
-		data: targetTimeData,
-		error: targetTimeError,
-		isError: isTargetTimeError,
-	} = useGetTargetTime(formattedTodayDate);
-
-	const { targetTime } = targetTimeData?.data || 0;
+	const { data: workTimeData } = useGetWorkTime({ targetDate: formattedTodayDate });
 
 	const handleOpenCategoryModal = () => {
 		categoryModalRef.current?.open();
@@ -105,7 +96,7 @@ const HomePage = () => {
 		queryClient.invalidateQueries({ queryKey: ['msets'] });
 	};
 
-	const deleteTodayTodos = (todo: Omit<Task, 'isComplete'>) => {
+	const deleteTodayTodos = (todo: Omit<TaskType, 'isComplete'>) => {
 		setTodayTodos((prev) => prev.filter((prevTodo) => prevTodo.id !== todo.id));
 	};
 
@@ -139,34 +130,24 @@ const HomePage = () => {
 	const handleCreateTodayTodos = () => {
 		const todayTodoData = todayTodos.map((todo) => todo.id);
 		const dataToPost = {
-			todayDate: formattedTodayDate,
-			todayTodos: {
-				taskIdList: todayTodoData,
-			},
+			targetDate: formattedTodayDate,
+			taskList: todayTodoData,
 		};
 
-		createTodayTodos(dataToPost, {
+		addTodayTodos(dataToPost, {
 			onSuccess: () => {
 				navigate(ROUTES_CONFIG.timer.path);
 			},
 		});
 	};
 
-	const handleDeleteCategory = (userId: number) => {
-		deleteCategory(userId);
+	const handleDeleteCategory = (categoryId: number) => {
+		deleteCategory({ categoryId });
 	};
 
-	if (isError) {
-		console.error(error);
-	}
-
-	if (isTargetTimeError) {
-		console.error(targetTimeError);
-	}
-
 	return (
 		<div className="flex h-screen w-[calc(100vw-7.4rem)] overflow-auto bg-gray-bg-01 p-[4.2rem]">
-			<div className={`absolute right-[4.2rem] top-[5.4rem] flex gap-[0.8rem] ${addTodayTodoOverlayStyle}`}>
+			<div className={`absolute right-[4.2rem] top-[5.4rem] flex gap-[0.8rem] ${addTodayTodosOverlayStyle}`}>
 				<button onClick={handleOpenFriendsModal}>
 					<FriendSettingIcon className="rounded-[1.6rem] hover:bg-gray-bg-04 active:bg-gray-bg-05" />
 				</button>
@@ -243,7 +224,7 @@ const HomePage = () => {
 				</main>
 
 				<BoxTodayTodo
-					time={targetTime}
+					time={workTimeData?.data?.sumTodayElapsedTime || 0}
 					addingTodayTodoStatus={addingTodayTodoStatus}
 					selectedTodayTodos={todayTodos}
 					hasTodos={isTaskExist(dailyCategoryTask)}
@@ -257,10 +238,10 @@ const HomePage = () => {
 					onCreateTodayTodos={handleCreateTodayTodos}
 				/>
 			</div>
-
+			{/*
 			<ModalWrapper ref={categoryModalRef} backdrop={true}>
 				<ModalContentsCategory handleCloseModal={handleCloseModal} />
-			</ModalWrapper>
+			</ModalWrapper> */}
 
 			<ModalWrapper ref={friendsModalRef} backdrop={true}>
 				<ModalContentsFriends ref={friendModalContentRef} />

diff --git a/src/shared/components/BoxTodo/BoxTodo.tsx b/src/shared/components/BoxTodo/BoxTodo.tsx
@@ -1,6 +1,6 @@
 import { formatSeconds } from '@/shared/utils/time';
 
-import { Task } from '@/shared/types/home';
+import type { TaskType } from '@/shared/types/tasks';
 
 import ButtonCalendarIcon from '@/shared/assets/svgs/btn_cal.svg?react';
 import CheckBoxBlankIcon from '@/shared/assets/svgs/check_box_blank.svg?react';
@@ -15,13 +15,13 @@ interface BoxTodoProps {
 	name: string;
 	startDate: string;
 	endDate: string | null;
-	targetTime: number;
+	elapsedTime: number;
 	isComplete?: boolean;
 	isSelected?: boolean;
 	selectedNumber?: number;
 	onClick?: () => void;
 	onToggleComplete?: () => void;
-	updateTodayTodos?: (todo: Omit<Task, 'isComplete'>) => void;
+	updateTodayTodos?: (todo: Omit<TaskType, 'isComplete'>) => void;
 	clickable?: boolean;
 	addingComplete?: boolean;
 	timerIncreasedTime?: number;
@@ -38,19 +38,19 @@ const BoxTodo = ({
 	onToggleComplete,
 	updateTodayTodos,
 	clickable,
-	targetTime,
+	elapsedTime,
 	addingComplete,
 	timerIncreasedTime,
 }: BoxTodoProps) => {
-	const formattedTime = formatSeconds(timerIncreasedTime ? targetTime + timerIncreasedTime : targetTime);
+	const formattedTime = formatSeconds(timerIncreasedTime ? elapsedTime + timerIncreasedTime : elapsedTime);
 	const formattedstartDate = startDate.replace(/-/g, '.');
 	const formattedendDate = endDate ? endDate.replace(/-/g, '.') : '';
 
 	const nameStyle = isComplete ? 'line-through' : '';
 	const CheckBoxIcon = isComplete ? <CheckBoxFillIcon /> : <CheckBoxBlankIcon />;
 
-	const TimeIcon = targetTime ? <TimeFillIcon /> : <TimeLineIcon />;
-	const timeTextClass = targetTime ? 'text-mint-01' : 'text-gray-04';
+	const TimeIcon = elapsedTime ? <TimeFillIcon /> : <TimeLineIcon />;
+	const timeTextClass = elapsedTime ? 'text-mint-01' : 'text-gray-04';
 
 	const selectedStyle =
 		isSelected && !addingComplete
@@ -66,7 +66,7 @@ const BoxTodo = ({
 	const handleClickTodo = () => {
 		if (addingComplete) return;
 
-		if (clickable && updateTodayTodos) updateTodayTodos({ id, name, startDate, endDate, targetTime });
+		if (clickable && updateTodayTodos) updateTodayTodos({ id, name, startDate, endDate, elapsedTime });
 		else if (onClick) {
 			onClick();
 		}