react-calendar 를 사용해 일정 관리를 할 수 있는 웹페이지를 만들었습니다.
🥝 https://wondrous-kringle-c6e8e6.netlify.app
- 배포는 netlify를 사용했습니다.
기능
1. 일정 추가
Schedule 탭의 + 버튼을 누르면 일정을 추가할 수 있는 모달 창이 뜹니다.
2. 일정 확인
캘린더와 Schedule 탭에서 등록한 일정을 확인할 수 있습니다. 캘린더에서는 일정이 2개까지 표시됩니다.
3. 일정 상세보기
일정 리스트에서 아이템을 클릭하면 상세보기를 할 수 있습니다.
4. 일정 수정
수정 아이콘을 눌러 일정을 수정합니다.
- 아쉬운 점: 아이템을 삭제 후 다시 넣다 보니 일정의 순서가 바뀌는 경우가 있습니다.
5. 일정 삭제
삭제 아이콘을 눌러 일정을 삭제합니다.
6. 색상 테마 변경하기
오른쪽 하단의 팔레트 아이콘을 클릭하면 색상 라디오가 나옵니다. 클릭하여 색상 테마를 변경할 수 있습니다.
7. 일정을 localStorage에 저장
새로고침을 해도 데이터가 유지됩니다.
8. 참고 - 모바일
모바일에서는 일정 탭이 캘린더 아래로 내려갑니다. 화면이 좁다 보니 캘린더에 표시되는 일정은 원으로만 보이게 했습니다.
일정 상세보기, 일정 수정은 일정 탭을 스크롤하여 이용할 수 있습니다.
느낀 점
- 나름 틀을 잡고 시작했는데 이 정도로는 부족하다는 것을 깨달았습니다 .. 기능도 너무 크게 잡아둬서 개발할 때 다시 쪼개서 썼어요. 다음에는 프로젝트 구조를 확실히 잡고 시작해야겠어요.
- props를 너무 많이 넘겨줘서 이게 맞는지 긴가민가 합니다. context를 사용하면 될 것 같은데 context를 많이 써도 되는 건지 모르겠어요.
- 성능 부분을 전혀 신경 쓰지 못했는데... 우선은 프로젝트를 구현했다는 것에 의미를 두기로 했습니다 😅 성능은 공부를 더 해야 될 것 같아요.
도움을 받은 블로그
- react-calendar 커스텀은 아래의 블로그에서 도움을 받았습니다.
