[FEAT] Task 상세 조회 api 연결

src/apis/tasks/taskDescription/TaskDescriptionType.ts

@@ -0,0 +1,5 @@
+export interface TaskDescriptionType {
+	taskId: number;
+	targetDate?: string | null;
+	isOpen?: boolean;
+}

src/apis/tasks/taskDescription/axios.ts

@@ -0,0 +1,14 @@
+import { TaskDescriptionType } from './TaskDescriptionType';
+
+import { privateInstance } from '@/apis/instance';
+
+const taskDescription = async ({ taskId, targetDate }: TaskDescriptionType) => {
+	const { data } = await privateInstance.get(`/api/tasks/${taskId}`, {
+		params: {
+			targetDate,
+		},
+	});
+	return data;
+};
+
+export default taskDescription;

src/apis/tasks/taskDescription/query.ts

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+
+import taskDescription from './axios';
+import { TaskDescriptionType } from './TaskDescriptionType';
+
+// Task 상세 설명 조회
+const useTaskDescription = ({ taskId, targetDate, isOpen }: TaskDescriptionType) => {
+	const data = useQuery({
+		queryKey: ['today', 'taskDesc', taskId, targetDate],
+		queryFn: () => taskDescription({ taskId, targetDate }),
+		enabled: isOpen,
+	});
+
+	return data;
+};
+export default useTaskDescription;

src/components/common/BtnTask/BtnTask.tsx

@@ -2,12 +2,11 @@ import { css, Theme } from '@emotion/react';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
-import Modal from '../modal/Modal';
-
 import IconHoverContainer from './IconHoverContainer';
 
 import Icons from '@/assets/svg/index';
 import BtnDate from '@/components/common/BtnDate/BtnDate';
+import Modal from '@/components/common/modal/Modal';
 import MODAL from '@/constants/modalLocation';
 import { theme } from '@/styles/theme';
 import { TaskType } from '@/types/tasks/taskType';
@@ -44,7 +43,7 @@ function BtnTask(props: BtnTaskProps) {
 		btnStatus,
 		preventDoubleClick = false,
 		isDragging = false,
-		targetDate,
+		targetDate = null,
 	} = props;
 	const [isModalOpen, setModalOpen] = useState(false);
 	const [isHovered, setIsHovered] = useState(false);
@@ -127,7 +126,15 @@ function BtnTask(props: BtnTaskProps) {
 					targetDate={targetDate}
 				/>
 			</BtnTaskLayout>
-			<Modal isOpen={isModalOpen} sizeType={{ type: 'short' }} top={top} left={left} onClose={closeModal} taskId={id} />
+			<Modal
+				isOpen={isModalOpen}
+				sizeType={{ type: 'short' }}
+				top={top}
+				left={left}
+				onClose={closeModal}
+				taskId={id}
+				targetDate={targetDate}
+			/>
 		</ModalLayout>
 	);
 }

src/components/common/StagingArea/StagingAreaTaskContainer.tsx

@@ -15,12 +15,7 @@ interface StagingAreaTaskContainerProps {
 	targetDate: string;
 }
 
-function StagingAreaTaskContainer({
-	handleSelectedTarget,
-	selectedTarget,
-	tasks,
-	targetDate,
-}: StagingAreaTaskContainerProps) {
+function StagingAreaTaskContainer({ handleSelectedTarget, selectedTarget, tasks }: StagingAreaTaskContainerProps) {
 	return (
 		<StagingAreaTaskContainerLayout>
 			<BtnTaskContainer type="staging">
@@ -48,7 +43,6 @@ function StagingAreaTaskContainer({
 											handleSelectedTarget={handleSelectedTarget}
 											selectedTarget={selectedTarget}
 											isDragging={snapshot.isDragging}
-											targetDate={targetDate}
 										/>
 									</div>
 								)}

src/components/common/fullCalendar/FullCalendarBox.tsx

@@ -36,6 +36,8 @@ function FullCalendarBox({ size, selectDate, selectedTarget }: FullCalendarBoxPr
 	const [isModalOpen, setModalOpen] = useState(false);
 	const [top, setTop] = useState(0);
 	const [left, setLeft] = useState(0);
+	const [modalTaskId, setModalTaskId] = useState<number | null>(null);
+	const [modalTimeBlockId, setModalTimeBlockId] = useState<number | null>(null);
 
 	const calendarRef = useRef<FullCalendar>(null);
 
@@ -90,11 +92,20 @@ 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);
+
+		const clickedEvent = info.event.extendedProps;
+
+		if (clickedEvent) {
+			setModalTaskId(clickedEvent.taskId);
+			setModalTimeBlockId(clickedEvent.timeBlockId);
+			setModalOpen(true);
+		}
 	};
 
 	const closeModal = () => {
 		setModalOpen(false);
+		setModalTaskId(null);
+		setModalTimeBlockId(null);
 	};
 
 	const addEventWhenDragged = (selectInfo: DateSelectArg) => {
@@ -217,14 +228,15 @@ function FullCalendarBox({ size, selectDate, selectedTarget }: FullCalendarBoxPr
 				eventDrop={updateEvent} // 기존 이벤트 드래그 수정 핸들러
 				eventResize={updateEvent} // 기존 이벤트 리사이즈 수정 핸들러
 			/>
-			{isModalOpen && (
+			{isModalOpen && modalTaskId !== null && modalTimeBlockId !== null && (
 				<Modal
 					isOpen={isModalOpen}
 					sizeType={{ type: 'short' }}
 					top={top}
 					left={left}
 					onClose={closeModal}
-					taskId={5} // 예시 taskId, 실제 데이터로 교체 필요
+					taskId={modalTaskId}
+					timeBlockId={modalTimeBlockId}
 				/>
 			)}
 		</FullCalendarLayout>

src/components/common/modal/Modal.tsx

@@ -2,40 +2,32 @@ import styled from '@emotion/styled';
 
 import ModalBackdrop from './ModalBackdrop';
 
+import useTaskDescription from '@/apis/tasks/taskDescription/query';
 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';
 import ModalTextInputTime from '@/components/common/modal/ModalTextInputTime';
 import TextInputBox from '@/components/common/modal/TextInputBox';
 import { SizeType } from '@/types/textInputType';
+import formatDatetoLocalDate from '@/utils/formatDatetoLocalDate';
 
 interface ModalProps {
 	isOpen: boolean;
 	sizeType: SizeType;
 	top: number;
 	left: number;
 	onClose: () => void;
-	taskId?: number;
+	taskId: number;
 	timeBlockId?: number;
+	targetDate?: string | null;
 }
-
-function Modal({ isOpen, sizeType, top, left, onClose, taskId, timeBlockId }: ModalProps) {
-	const dummyData = {
-		id: taskId,
-		name: 'task name',
-		description: 'task description',
-		deadLine: {
-			date: '2024-06-30',
-			time: '12:30',
-		},
-		status: '진행 중', // 수정
-		timeBlock: {
-			id: 1,
-			startTime: '2024-07-08T12:30',
-			endTime: '2024-07-08T14:30',
-		},
-	};
+function Modal({ isOpen, sizeType, top, left, onClose, taskId, targetDate = null, timeBlockId }: ModalProps) {
+	const { data, isFetched } = useTaskDescription({
+		taskId,
+		targetDate: formatDatetoLocalDate(targetDate),
+		isOpen,
+	});
 
 	const { mutate } = useDeleteTimeBlock();
 
@@ -50,26 +42,24 @@ function Modal({ isOpen, sizeType, top, left, onClose, taskId, timeBlockId }: Mo
 
 		onClose();
 	};
-
+	if (!isOpen || !isFetched) return null;
 	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} onDelete={handleDelete} />
-					</ModalHeader>
-					<ModalBody>
-						<TextInputBox type={sizeType.type} name={dummyData.name} desc={dummyData.description} />
-						{sizeType.type === 'long' && <ModalTextInputTime />}
-					</ModalBody>
-					<ModalFooter>
-						<OkayCancelBtn type="cancel" onClick={onClose} />
-						<OkayCancelBtn type="okay" onClick={onClose} />
-					</ModalFooter>
-				</ModalLayout>
-			</ModalBackdrop>
-		)
+		<ModalBackdrop onClick={onClose}>
+			<ModalLayout type={sizeType.type} top={top} left={left} onClick={(e) => e.stopPropagation()}>
+				<ModalHeader>
+					<BtnDate date={data.data.deadLine.date} time={data.data.deadLine.time} />
+					<ModalHeaderBtn type={sizeType.type} onDelete={handleDelete} />
+				</ModalHeader>
+				<ModalBody>
+					<TextInputBox type={sizeType.type} name={data.data.name} desc={data.data.description} />
+					{sizeType.type === 'long' && <ModalTextInputTime />}
+				</ModalBody>
+				<ModalFooter>
+					<OkayCancelBtn type="cancel" onClick={onClose} />
+					<OkayCancelBtn type="okay" onClick={onClose} />
+				</ModalFooter>
+			</ModalLayout>
+		</ModalBackdrop>
 	);
 }
 

src/components/targetArea/TargetArea.tsx

@@ -47,6 +47,7 @@ function TargetArea({
 							handleSelectedTarget={handleSelectedTarget}
 							selectedTarget={selectedTarget}
 							tasks={tasks}
+							targetDate={targetDate}
 						/>
 						{provided.placeholder}
 					</div>

src/components/targetArea/TargetAreaDate.tsx

@@ -4,11 +4,12 @@ import formatDatetoStrinKor from '@/utils/formatDatetoStringKor';
 
 /** nnnn년 nn월 nn일 */
 interface TargetAreaDateProps {
-	targetDate: Date;
+	targetDate: string;
 }
 
 function TargetAreaDate({ targetDate }: TargetAreaDateProps) {
-	const formatDate = formatDatetoStrinKor(targetDate);
+	const dateTypeDate = new Date(targetDate);
+	const formatDate = formatDatetoStrinKor(dateTypeDate);
 	return <DateText>{formatDate}</DateText>;
 }
 

src/components/targetArea/TargetTaskSection.tsx

@@ -11,9 +11,10 @@ interface TargetTaskSectionProps {
 	handleSelectedTarget: (task: TaskType | null) => void;
 	selectedTarget: TaskType | null;
 	tasks: TaskType[];
+	targetDate: string;
 }
 function TargetTaskSection(props: TargetTaskSectionProps) {
-	const { handleSelectedTarget, selectedTarget, tasks } = props;
+	const { handleSelectedTarget, selectedTarget, tasks, targetDate } = props;
 
 	return (
 		<BtnTaskContainer type="target">
@@ -44,6 +45,7 @@ function TargetTaskSection(props: TargetTaskSectionProps) {
 										handleSelectedTarget={handleSelectedTarget}
 										selectedTarget={selectedTarget}
 										isDragging={snapshot.isDragging}
+										targetDate={targetDate}
 									/>
 								</div>
 							)}

src/pages/Today.tsx

@@ -131,7 +131,7 @@ function Today() {
 						onClickNextDate={handleNextBtn}
 						onClickTodayDate={handleTodayBtn}
 						onClickDatePicker={handleChangeDate}
-						targetDate={selectedDate}
+						targetDate={selectedDate.toString()}
 					/>
 				)}
 			</DragDropContext>

src/types/today/TargetControlSectionProps.ts

@@ -3,5 +3,5 @@ export interface TargetControlSectionProps {
 	onClickNextDate: () => void;
 	onClickTodayDate: () => void;
 	onClickDatePicker: (target: Date) => void;
-	targetDate: Date;
+	targetDate: string;
 }

src/utils/formatDatetoLocalDate.ts

@@ -1,9 +1,10 @@
 /** Date 형식을 0000-00-00 형식 string 으로 반환합니다 */
-const formatDatetoLocalDate = (date: Date | null) => {
+const formatDatetoLocalDate = (date: Date | null | string) => {
 	if (date) {
-		const year = date.getFullYear();
-		const month = '0'.concat((date.getMonth() + 1).toString()).slice(-2);
-		const day = '0'.concat(date.getDate().toString()).slice(-2);
+		const dateTypeDate = new Date(date);
+		const year = dateTypeDate.getFullYear();
+		const month = '0'.concat((dateTypeDate.getMonth() + 1).toString()).slice(-2);
+		const day = '0'.concat(dateTypeDate.getDate().toString()).slice(-2);
 		return `${year}-${month}-${day}`;
 	}
 	return '';

src/utils/formatDatetoString.ts

@@ -1,11 +1,12 @@
 /** Date 형식을 0000.00.00 형식 string 으로 반환합니다
  * undefined, null 의 경우 '시간' 텍스트를 반환합니다
  */
-const formatDatetoString = (date: Date | undefined | null) => {
+const formatDatetoString = (date: Date | undefined | null | string) => {
 	if (date) {
-		const year = date.getFullYear();
-		const month = '0'.concat((date.getMonth() + 1).toString()).slice(-2);
-		const day = '0'.concat(date.getDate().toString()).slice(-2);
+		const dateTypeDate = new Date(date);
+		const year = dateTypeDate.getFullYear();
+		const month = '0'.concat((dateTypeDate.getMonth() + 1).toString()).slice(-2);
+		const day = '0'.concat(dateTypeDate.getDate().toString()).slice(-2);
 		return `${year}.${month}.${day}`;
 	}
 	return '';