Merge pull request #175 from TEAM-DAWM/feat/#173/task-get-targetarea

[FEAT] task get api TargetArea 연동

src/apis/tasks/getTask/GetTasksType.ts

@@ -1,5 +1,5 @@
 export interface GetTasksType {
  isTotal?: boolean;
  sortOrder?: string;
- targetDate?: Date;
+ targetDate?: string;
 }

src/components/targetArea/TargetArea.tsx

@@ -14,7 +14,7 @@ interface TargetAreaProps {
  tasks: TaskType[];
 }
 
-function TargetArea({ handleSelectedTarget, selectedTarget, tasks }: TargetAreaProps) {
+function TargetArea({ handleSelectedTarget, selectedTarget }: TargetAreaProps) {
  const [targetDate, setTargetDate] = useState(new Date());
 
  const handlePrevBtn = () => {
@@ -59,7 +59,7 @@ function TargetArea({ handleSelectedTarget, selectedTarget, tasks }: TargetAreaP
  <TargetTaskSection
  handleSelectedTarget={handleSelectedTarget}
  selectedTarget={selectedTarget}
- tasks={tasks}
+ selectedDate={targetDate}
  />
  {provided.placeholder}
  </div>

src/components/targetArea/TargetTaskSection.tsx

@@ -3,43 +3,50 @@ import { Draggable } from 'react-beautiful-dnd';
 import BtnTask from '../common/BtnTask/BtnTask';
 import BtnTaskContainer from '../common/BtnTaskContainer';
 
+import useGetTasks from '@/apis/tasks/getTask/query';
 import { TaskType } from '@/types/tasks/taskType';
+import formatDatetoLocalDate from '@/utils/formatDatetoLocalDate';
 
 interface TargetTaskSectionProps {
  handleSelectedTarget: (task: TaskType | null) => void;
  selectedTarget: TaskType | null;
- tasks: TaskType[];
+ selectedDate: Date | null;
 }
 function TargetTaskSection(props: TargetTaskSectionProps) {
- const { handleSelectedTarget, selectedTarget, tasks } = props;
-
+ const { handleSelectedTarget, selectedTarget, selectedDate } = props;
+ const targetDate = formatDatetoLocalDate(selectedDate);
+ const { isFetched, data } = useGetTasks({ targetDate });
  return (
  <BtnTaskContainer type="target">
- {tasks.map((task, index) => (
- <Draggable key={task.id} draggableId={task.id.toString()} index={index}>
- {(provided, snapshot) => (
- <div
- ref={provided.innerRef}
- {...provided.draggableProps}
- {...provided.dragHandleProps}
- style={{ userSelect: 'none', ...provided.draggableProps.style }}
- >
- <BtnTask
- iconType="active"
- key={task.id}
- hasDescription={task.hasDescription}
- name={task.name}
- deadLine={task.deadLine}
- status={task.status}
- id={task.id}
- handleSelectedTarget={handleSelectedTarget}
- selectedTarget={selectedTarget}
- isDragging={snapshot.isDragging}
- />
- </div>
- )}
- </Draggable>
- ))}
+ {isFetched && (
+ <>
+ {data.data.tasks.map((task: TaskType, index: number) => (
+ <Draggable key={task.id} draggableId={task.id.toString()} index={index}>
+ {(provided, snapshot) => (
+ <div
+ ref={provided.innerRef}
+ {...provided.draggableProps}
+ {...provided.dragHandleProps}
+ style={{ userSelect: 'none', ...provided.draggableProps.style }}
+ >
+ <BtnTask
+ iconType="active"
+ key={task.id}
+ hasDescription={task.hasDescription}
+ name={task.name}
+ deadLine={task.deadLine}
+ status={task.status}
+ id={task.id}
+ handleSelectedTarget={handleSelectedTarget}
+ selectedTarget={selectedTarget}
+ isDragging={snapshot.isDragging}
+ />
+ </div>
+ )}
+ </Draggable>
+ ))}
+ </>
+ )}
  </BtnTaskContainer>
  );
 }

src/utils/formatDatetoLocalDate.ts

@@ -0,0 +1,12 @@
+/** Date 형식을 0000-00-00 형식 string 으로 반환합니다 */
+const formatDatetoLocalDate = (date: Date | null) => {
+ 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);
+ return `${year}-${month}-${day}`;
+ }
+ return '';
+};
+
+export default formatDatetoLocalDate;