/calendar

Primary LanguageJavaScript

페이워크 과제 - 캘린더 구현

깃허브 주소

배포 주소

필수 기능

  • 각 날짜 선택 가능 및 선택 시 배경색 변경
  • 오늘 날짜는 항상 배경색 존재
  • 다른 달 날짜는 다른 색상 처리
  • 다른 달 날짜 선택시 해당 달로 변경
  • 화살표로 월 변경
  • 이번달 버튼 클릭시 이번 달로 변경

추가로 구현한 기능

컴포넌트 분리

- CalendarButton 및 CalendarItem 컴포넌트 분리

Drag & Drop

- drag start 시 기존 selected 날짜들 초기화
- drag over 시 over 되는 날짜들 selected로 변경
- drag end 시 start ~ end에 해당 되는 모든 날짜들 selected로 변경

TodoList 구현

- 선택한 날짜 및 항목 입력이 모두 입력되어야 추가 가능
- 여러 날짜 선택 시 [시작날짜 ~ 끝 날짜] 형태로 print
- 날짜 선택 시 해당 날짜에 등록된 TodoList print
- 여러 날짜에 같은 TodoList가 담겨 있어도 한 날짜에서 삭제/수정 하면 해당되는 모든 날짜에서 삭제/수정

날짜 로딩중 애니메이션 구현