💁‍♀️ 오류 내용

Chrome에서는 잘 작동하던 것 들이 iOS 사용기기들과 safari에서 일정 시작일과 종료일이 invalid date로 나오고, 달력에 event가 생성되지 않는 현상이 발생하였다.

⁉️ 가설

애플 관련 브라우저에서는 new Date()로 생성되는 날짜 포맷 중, -를 인식하지 못하기 때문에, /로 변경하면 제대로 작동할 것이다.

🚀 해결과정

1. Modal의 Invalid date 해결

1. 서버에서 받은 데이터의 상태 = startTime: '2022-08-01 11:36', endTime: '2022-08-18 11:30'

2. firstStartTime이라는 변수에 바꾸고자 하는 데이터 schedule.startTime을 넣는다.

3. 정규식을 사용해서 -를 /로 바꿔서 데이터의 형태를 YYYY-MM-DD HH:MM로 변경한다

4. startTime, endTime의 초기값에서 new Date의 인자로 위에서 형태를 변경한 데이터를 넣어준다.

const firstStartTime = schedule.startTime;
const startTimeNewDateFormat = firstStartTime.replace(/-/g, "/");
const firstEndTime = schedule.endTime;
const endTimeNewDateFormat = firstEndTime.replace(/-/g, "/");

const [startTime, setStartTime] = useState(new Date(startTimeNewDateFormat));
const [endTime, setEndTime] = useState(new Date(endTimeNewDateFormat));

2. 달력에 이벤트 생성안되는 문제 해결

1. 서버에서 받은 데이터의 상태 = startTime: '2022-08-01 11:36', endTime: '2022-08-18 11:30'

2. 달력의 경우, 데이터를 state로 관리하는 것이 아니라, 서버에서 받아온 데이터를 출력하기만 하면 되기때문에 별도 state 없다.

3. 데이터 출력을 return문 안에서 map 함수를 사용하여 하고있었기에, map함수 안에서 format을 변경하였다.

<Calendar
  events={scheduleList.map((list, id) => {
    const startTimeFormat = list.startTime.replace(/-/g, "/");
    const endTimeFormat = list.endTime.replace(/-/g, "/");
    <div key={id} />;
    return {
      title: list.toDo,
      allDay: false,
      start: new Date(startTimeFormat),
      end: new Date(endTimeFormat),
      crop: list.crop,
    };
  })}
(...생략)
/>