diff --git a/src/apis/tasks/taskDescription/TaskDescriptionType.ts b/src/apis/tasks/taskDescription/TaskDescriptionType.ts new file mode 100644 index 00000000..98ab6ad1 --- /dev/null +++ b/src/apis/tasks/taskDescription/TaskDescriptionType.ts @@ -0,0 +1,5 @@ +export interface TaskDescriptionType { + taskId: number; + targetDate?: string | null; + isOpen?: boolean; +} diff --git a/src/apis/tasks/taskDescription/axios.ts b/src/apis/tasks/taskDescription/axios.ts new file mode 100644 index 00000000..715c83ae --- /dev/null +++ b/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; diff --git a/src/apis/tasks/taskDescription/query.ts b/src/apis/tasks/taskDescription/query.ts new file mode 100644 index 00000000..9dce3a4b --- /dev/null +++ b/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; diff --git a/src/components/common/BtnTask/BtnTask.tsx b/src/components/common/BtnTask/BtnTask.tsx index 24b6a988..2c08ec15 100644 --- a/src/components/common/BtnTask/BtnTask.tsx +++ b/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} /> - + ); } diff --git a/src/components/common/StagingArea/StagingAreaTaskContainer.tsx b/src/components/common/StagingArea/StagingAreaTaskContainer.tsx index df9a1be7..3b508a62 100644 --- a/src/components/common/StagingArea/StagingAreaTaskContainer.tsx +++ b/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 ( @@ -48,7 +43,6 @@ function StagingAreaTaskContainer({ handleSelectedTarget={handleSelectedTarget} selectedTarget={selectedTarget} isDragging={snapshot.isDragging} - targetDate={targetDate} /> )} diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx index 477dc5de..dae3e352 100644 --- a/src/components/common/modal/Modal.tsx +++ b/src/components/common/modal/Modal.tsx @@ -2,6 +2,7 @@ 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'; @@ -9,6 +10,7 @@ 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; @@ -16,26 +18,16 @@ interface ModalProps { 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 && ( - - e.stopPropagation()}> - - - - - - - {sizeType.type === 'long' && } - - - - - - - - ) + + e.stopPropagation()}> + + + + + + + {sizeType.type === 'long' && } + + + + + + + ); } diff --git a/src/components/targetArea/TargetArea.tsx b/src/components/targetArea/TargetArea.tsx index a76524b0..f4fea041 100644 --- a/src/components/targetArea/TargetArea.tsx +++ b/src/components/targetArea/TargetArea.tsx @@ -47,6 +47,7 @@ function TargetArea({ handleSelectedTarget={handleSelectedTarget} selectedTarget={selectedTarget} tasks={tasks} + targetDate={targetDate} /> {provided.placeholder} diff --git a/src/components/targetArea/TargetAreaDate.tsx b/src/components/targetArea/TargetAreaDate.tsx index 7db730e3..1dbd0279 100644 --- a/src/components/targetArea/TargetAreaDate.tsx +++ b/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 {formatDate}; } diff --git a/src/components/targetArea/TargetTaskSection.tsx b/src/components/targetArea/TargetTaskSection.tsx index 33af8364..48f31952 100644 --- a/src/components/targetArea/TargetTaskSection.tsx +++ b/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 ( @@ -44,6 +45,7 @@ function TargetTaskSection(props: TargetTaskSectionProps) { handleSelectedTarget={handleSelectedTarget} selectedTarget={selectedTarget} isDragging={snapshot.isDragging} + targetDate={targetDate} /> )} diff --git a/src/pages/Today.tsx b/src/pages/Today.tsx index 0ee52449..c6042fc4 100644 --- a/src/pages/Today.tsx +++ b/src/pages/Today.tsx @@ -131,7 +131,7 @@ function Today() { onClickNextDate={handleNextBtn} onClickTodayDate={handleTodayBtn} onClickDatePicker={handleChangeDate} - targetDate={selectedDate} + targetDate={selectedDate.toString()} /> )} diff --git a/src/types/today/TargetControlSectionProps.ts b/src/types/today/TargetControlSectionProps.ts index 4d8e780b..07802b91 100644 --- a/src/types/today/TargetControlSectionProps.ts +++ b/src/types/today/TargetControlSectionProps.ts @@ -3,5 +3,5 @@ export interface TargetControlSectionProps { onClickNextDate: () => void; onClickTodayDate: () => void; onClickDatePicker: (target: Date) => void; - targetDate: Date; + targetDate: string; } diff --git a/src/utils/formatDatetoLocalDate.ts b/src/utils/formatDatetoLocalDate.ts index 04dd6fe6..1cdd9e7f 100644 --- a/src/utils/formatDatetoLocalDate.ts +++ b/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 ''; diff --git a/src/utils/formatDatetoString.ts b/src/utils/formatDatetoString.ts index 3abe48b3..c20bcad4 100644 --- a/src/utils/formatDatetoString.ts +++ b/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 '';