fullcalendar를 이용한 이벤트 추가 기능 구현

이벤트 추가 기능은 구현했으나, 날짜를 클릭 했을 때(dateClick) 클릭한 날짜를 시작 날짜로 setting 하고 싶어서

구현 하기 전에, 로직을 정리해두고 시작하려 한다.

 

로직

1. Calendar쪽에서 날짜를 클릭해 일정을 추가하려 하면, 클릭한 날짜를 이벤트 추가 Modal쪽으로 넘겨줌

2. Modal쪽에서 전달 받은 날짜를 시작 날짜의 value 값으로 전달

 

구현하며 생긴 문제점&해결방법

1. 시작 날짜를 useState 를 통해 클릭 한 날짜로 저장하는데, 바로 반영되지 않는 문제

전에도 이런 문제가 있었던 적이 있는데, 구글링 등을 해보며 찾아보니 useEffect 를 사용해야 한다고 한다.

→ useEffect로 시작 날짜가 변할 때 마다 새로 렌더링 되도록 하니 해결됨

 

2. db에서 설정된 시작 날짜 column의 데이터 형식과 날짜를 클릭했을 때 시작 날짜에 저장되는 날짜 형식이 맞지 않는 문제

db에서 시작 날짜와 종료 날짜의 데이터 타입을 DATETIME으로 해놨고, Modal쪽의 시작 날짜와 종료 날짜의 input type또한 

datetime-local로 설정했었음

→ 시작 날짜의 데이터 타입을 varchar로 바꿔주었고, Modal쪽에서도 시작 날짜의 input type을 date로 바꿔줌 (년월일)

→ 종료 날짜의 데이터 타입은 DATETIME으로 그대로 설정했는데, 그 이유는 시간을 빼면 그 전날로 저장되기 때문

 (예로, 5/25~5/27일로 저장했는데, 26일로 인식하는 문제가 있기 때문에, 시간 또한 저장돼야 하는 것으로 보임)