[FEAT] Task 타임블로킹 삭제 api 연결

src/apis/timeBlocks/deleteTimeBlock/DeleteTimeBlockType.ts

@@ -0,0 +1,4 @@
+export interface DeleteTimeBlokType {
+	taskId: number;
+	timeBlockId: number;
+}

src/apis/timeBlocks/deleteTimeBlock/axios.ts

@@ -0,0 +1,10 @@
+import { DeleteTimeBlokType } from './DeleteTimeBlockType';
+
+import { privateInstance } from '@/apis/instance';
+
+/** TimeBlock 삭제 */
+const deleteTimeBlock = async ({ taskId, timeBlockId }: DeleteTimeBlokType) => {
+	await privateInstance.delete(`/api/tasks/${taskId}/time-blocks/${timeBlockId}`);
+};
+
+export default deleteTimeBlock;

src/apis/timeBlocks/deleteTimeBlock/query.ts

@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import deleteTimeBlock from './axios';
+import { DeleteTimeBlokType } from './DeleteTimeBlockType';
+
+/** TimeBlock 삭제 */
+const useDeleteTimeBlock = () => {
+	const queryClient = useQueryClient();
+	const mutation = useMutation({
+		mutationFn: ({ taskId, timeBlockId }: DeleteTimeBlokType) => deleteTimeBlock({ taskId, timeBlockId }),
+		onSuccess: () => queryClient.invalidateQueries({ queryKey: ['timeblock'] }),
+	});
+
+	return { mutate: mutation.mutate };
+};
+
+export default useDeleteTimeBlock;

src/components/common/fullCalendar/FullCalendarBox.tsx

@@ -34,6 +34,8 @@ function FullCalendarBox({ size, selectDate, selectedTarget }: FullCalendarBoxPr
 	const [startDate, setStartDate] = useState<string>(todayDate);
 
 	const [isModalOpen, setModalOpen] = useState(false);
+	const [modalTaskId, setModalTaskId] = useState<number | null>(null);
+	const [modalTimeBlockId, setModalTimeBlockId] = useState<number | null>(null);
 
 	const handleViewChange = (view: ViewMountArg) => {
 		setCurrentView(view.view.type);
@@ -84,21 +86,38 @@ function FullCalendarBox({ size, selectDate, selectedTarget }: FullCalendarBoxPr
 		const adjustedTop = Math.min(calculatedTop, MODAL.SCREEN_HEIGHT - MODAL.TASK_MODAL_HEIGHT);
 		setTop(adjustedTop);
 		setLeft(rect.left - MODAL.TASK_MODAL_WIDTH + 40);
-		setModalOpen(true);
+
+		// eslint-disable-next-line no-underscore-dangle
+		const clickedEvent = info.event._def.extendedProps;
+
+		if (clickedEvent) {
+			setModalTaskId(clickedEvent.taskId);
+			setModalTimeBlockId(clickedEvent.timeBlockId);
+			setModalOpen(true);
+		}
 	};
 
 	/** 모달 닫기 */
 	const closeModal = () => {
 		setModalOpen(false);
+		setModalTaskId(null);
+		setModalTimeBlockId(null);
 	};
 
 	// Get timeblock
 	const { data: timeBlockData } = useGetTimeBlock({ startDate, range });
-	console.log('timeBlockData.data.data', timeBlockData?.data.data);
+	console.log(timeBlockData?.data.data);
 
 	const { mutate } = usePostTimeBlock();
 
-	const calendarEvents = timeBlockData ? processEvents(timeBlockData.data.data) : [];
+	const { events, taskEvents } = timeBlockData
+		? processEvents(timeBlockData.data.data)
+		: { events: [], taskEvents: [] };
+
+	// TODO: 캘린더 모달 상세조회 부분 구현 시 해당 부분 참고
+	console.log('taskEvents', taskEvents);
+
+	const calendarEvents = timeBlockData ? events : [];
 
 	/** 드래그해서 이벤트 추가하기 */
 	const addEventWhenDragged = (selectInfo: DateSelectArg) => {
@@ -123,20 +142,15 @@ function FullCalendarBox({ size, selectDate, selectedTarget }: FullCalendarBoxPr
 				classNames: 'tasks',
 			});
 
-			// console.log('selectedTarget.name,', selectedTarget.name);
-
 			const removeTimezone = (str: string) => str.replace(/:\d{2}[+-]\d{2}:\d{2}$/, '');
 
 			const startStr = removeTimezone(selectInfo.startStr);
 			const endStr = removeTimezone(selectInfo.endStr);
 
-			// console.log('selectedTarget.id.toString(),', selectedTarget.id.toString());
-			// console.log('startStr:', startStr);
-			// console.log('endStr:', endStr);
-
 			mutate({ taskId: selectedTarget.id, startTime: startStr, endTime: endStr });
 		}
 	};
+
 	return (
 		<FullCalendarLayout size={size}>
 			<CustomButtonContainer>
@@ -199,15 +213,15 @@ function FullCalendarBox({ size, selectDate, selectedTarget }: FullCalendarBoxPr
 				eventClick={handleEventClick}
 				select={addEventWhenDragged}
 			/>
-			{isModalOpen && (
-				// 🚨 임시 taskID ... 데이터 형식 확정 후 수정할 것 🚨
+			{isModalOpen && modalTaskId !== null && modalTimeBlockId !== null && (
 				<Modal
 					isOpen={isModalOpen}
 					sizeType={{ type: 'short' }}
 					top={top}
 					left={left}
 					onClose={closeModal}
-					taskId={5}
+					taskId={modalTaskId}
+					timeBlockId={modalTimeBlockId}
 				/>
 			)}
 		</FullCalendarLayout>

src/components/common/fullCalendar/processEvents.tsx

@@ -8,18 +8,33 @@ interface EventData {
 	classNames: string;
 }
 
-const processEvents = (timeBlockData: TimeBlockData): EventData[] => {
+interface TasksEventData {
+	taskId: number;
+	timeBlockId: number;
+	title: string;
+	start: string;
+	end: string;
+	allDay?: boolean;
+	classNames: string;
+}
+
+const processEvents = (timeBlockData: TimeBlockData): { events: EventData[]; taskEvents: TasksEventData[] } => {
 	const events: EventData[] = [];
+	const taskEvents: TasksEventData[] = [];
 
 	// tasks 데이터 처리
 	timeBlockData.tasks.forEach((task) => {
 		task.timeBlocks.forEach((timeBlock) => {
-			events.push({
+			const taskEvent = {
+				taskId: task.id,
+				timeBlockId: timeBlock.id,
 				title: task.name,
 				start: timeBlock.startTime,
 				end: timeBlock.endTime,
 				classNames: 'tasks',
-			});
+			};
+			events.push(taskEvent);
+			taskEvents.push(taskEvent);
 		});
 	});
 
@@ -36,7 +51,7 @@ const processEvents = (timeBlockData: TimeBlockData): EventData[] => {
 		});
 	});
 
-	return events;
+	return { events, taskEvents };
 };
 
 export default processEvents;

src/components/common/modal/Modal.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 
 import ModalBackdrop from './ModalBackdrop';
 
+import useDeleteTimeBlock from '@/apis/timeBlocks/deleteTimeBlock/query';
 import BtnDate from '@/components/common/BtnDate/BtnDate';
 import OkayCancelBtn from '@/components/common/button/OkayCancelBtn';
 import ModalHeaderBtn from '@/components/common/modal/ModalHeaderBtn';
@@ -15,13 +16,13 @@ interface ModalProps {
 	top: number;
 	left: number;
 	onClose: () => void;
-	taskId: number;
+	taskId?: number;
+	timeBlockId?: number;
 }
 
-function Modal({ isOpen, sizeType, top, left, onClose, taskId }: ModalProps) {
-	// taskId 가지고 api로 상세정보 요청하면 됨
+function Modal({ isOpen, sizeType, top, left, onClose, taskId, timeBlockId }: ModalProps) {
 	const dummyData = {
-		id: taskId, // 안쓰는 변수 린트 통과용 필드
+		id: taskId,
 		name: 'task name',
 		description: 'task description',
 		deadLine: {
@@ -35,13 +36,28 @@ function Modal({ isOpen, sizeType, top, left, onClose, taskId }: ModalProps) {
 			endTime: '2024-07-08T14:30',
 		},
 	};
+
+	const { mutate } = useDeleteTimeBlock();
+
+	const handleDelete = () => {
+		console.log('taskId, timeBlockId', taskId, timeBlockId);
+
+		if (taskId && timeBlockId) {
+			mutate({ taskId, timeBlockId });
+		} else {
+			console.error('taskId 또는 timeBlockId가 존재하지 않습니다.');
+		}
+
+		onClose();
+	};
+
 	return (
 		isOpen && (
 			<ModalBackdrop onClick={onClose}>
 				<ModalLayout type={sizeType.type} top={top} left={left} onClick={(e) => e.stopPropagation()}>
 					<ModalHeader>
 						<BtnDate date={dummyData.deadLine.date} time={dummyData.deadLine.time} />
-						<ModalHeaderBtn type={sizeType.type} />
+						<ModalHeaderBtn type={sizeType.type} onDelete={handleDelete} />
 					</ModalHeader>
 					<ModalBody>
 						<TextInputBox type={sizeType.type} name={dummyData.name} desc={dummyData.description} />

src/components/common/modal/ModalDeleteBtn.tsx

@@ -4,7 +4,11 @@ import { useState } from 'react';
 import SettingDeleteBtn from '@/components/common/button/settingBtn/SettingDeleteBtn';
 import ModalDeleteDetail from '@/components/common/modal/ModalDeleteDetail';
 
-function ModalDeleteBtn() {
+interface ModalDeleteBtnProps {
+	onDelete: (e: React.MouseEvent) => void;
+}
+
+function ModalDeleteBtn({ onDelete }: ModalDeleteBtnProps) {
 	const [isClicked, setIsClicked] = useState(false);
 
 	const [top, setTop] = useState(0);
@@ -22,7 +26,7 @@ function ModalDeleteBtn() {
 			<SettingDeleteBtn size="big" isHover isPressed={false} isActive onClick={handleBtnClick} />
 			{isClicked && (
 				<ModalDeleteDetailWapper>
-					<ModalDeleteDetail top={top} left={left} onClose={handleBtnClick} />
+					<ModalDeleteDetail top={top} left={left} onClose={handleBtnClick} onDelete={onDelete} />
 				</ModalDeleteDetailWapper>
 			)}
 		</ModalDeleteBtnLayout>

src/components/common/modal/ModalDeleteDetail.tsx

@@ -8,7 +8,7 @@ interface ModalDeleteDetailProps {
 	top: number;
 	left: number;
 	onClose: (e: React.MouseEvent) => void;
-	onDelete?: () => void;
+	onDelete: (e: React.MouseEvent) => void;
 }
 
 function ModalDeleteDetail({ top, left, onClose, onDelete }: ModalDeleteDetailProps) {

src/components/common/modal/ModalHeaderBtn.tsx

@@ -4,10 +4,14 @@ import SettingCheckBtn from '@/components/common/button/settingBtn/SettingCheckB
 import ModalDeleteBtn from '@/components/common/modal/ModalDeleteBtn';
 import { SizeType } from '@/types/textInputType';
 
-function ModalHeaderBtn({ type }: SizeType) {
+interface ModalHeaderBtnProps extends SizeType {
+	onDelete: () => void;
+}
+
+function ModalHeaderBtn({ type, onDelete }: ModalHeaderBtnProps) {
 	return (
 		<ModalHeaderBtnLayout>
-			<ModalDeleteBtn />
+			<ModalDeleteBtn onDelete={onDelete} />
 			{type === 'long' && <SettingCheckBtn type="progress" size="big" isHover isPressed={false} isActive />}
 			<SettingCheckBtn type="complete" size="big" isHover isPressed={false} isActive />
 		</ModalHeaderBtnLayout>