🎯 Datepicker을 이용해 완료 목표일 입력하기

• antd design의 Datepicker, RangePicker을 이용해 시작일, 목표 완료일 2개를 입력받았습니다.
• 생성된 달력에 시작일, 완료일을 선택하면 onChange 속성을 통해 두 번째 인자로 값이 넘어갑니다. 배열 구조화 할당을 이용해 각각 sartDate, deadline에 넣었습니다.

// TodoCreate.tsx
const TodoCreate = ({ nextId, createTodo, incrementNextId }: TodoCreateProps) => {
  const [startDate, setStartDate] = useState('');;
	const [deadline, setDeadline] = useState('');

  const handleDateChange = (_: any, dateStrings: [string, string]) => {
    const [start, end] = dateStrings;
    setStartDate(start);
    setDeadline(end);
  };

  return (
    <>
      <InsertFormPositioner>
        <InsertForm>
          <Input />
          <RangePicker onChange={handleDateChange} />
          <CircleButton />
        </InsertForm>
      </InsertFormPositioner>
    </>
  );
};

• ITodo 타입에 startDate , deadline 데이터를 추가해 createTodo 함수 호출 시에 함께 값을 넣었습니다.

// ITodo type
export type Itodo = {
  id: number;
  text: string;
  done: boolean;
  startDate: string;
  deadline: string;
};

// TodoCreate
createTodo({
      id: nextId,
      text: value,
      done: false,
      startDate,
      deadline,
    });

🎯 TodoList에 완료 목표일 넣기

• TodoItem 컴포넌트에 추가만 하면 됩니다. 별도의 CSS를 지정하기 위해 DateText 컴포넌트를 생성했습니다.

const TodoItem = ({ toggleTodo, removeTodo, todo }: TodoItemProps) => {
  const { id, text, done, startDate, deadline } = todo;

  return (
    <TodoItemBlock>
			...
      <DateText done={done}>
        {startDate} ~ {deadline}
      </DateText>
			...
    </TodoItemBlock>
  );
};