TodoList 만들기(3)

달력 만들기

date-fns라는 라이브러리의 도움을 받아서 History탭에 넣을 달력을 만들어보았다.

 

Calender 라는 컴포넌트안에 크게 Header, Week, Days 로 나누어서 컴포넌트를 만들어 보았다.

curMonth라는, 현재 보고있는 달의 상태를 저장할 변수를 만들고, 이 상태를 변경할 함수를 만든다.

subMonths와 addMonths 함수는 date-fns 에서 지원하는 함수이다.

 

Header

Header에는 년도, 월, 화살표만 들어가면 된다.

format 함수 역시 date-fns에서 지원하는 함수로 특정 날짜를 넣으면 형식에 맞게(yyyy는 2023, M은 3 이런식으로) 렌더링해준다.

각각의 화살표에는 onClick 이벤트로 이전에 만들어둔 prevMonth, nextMonth 함수를 등록했다.

 

Week

Week 컴포넌트는 헤더 밑에서 요일을 알려줄 목록을 나타낸다.

그냥 평범하게 map으로 렌더링 해준다.

 

Days

Days 컴포넌트가 중요한데, 해당 달의 시작과 끝을 알아야 하고, 달에 포함되지 않는 날짜도 해당 달에 포함되는 주까지는 표시를 해줘야 한다.

먼저 필요한 변수들을 선언한다. 첫 이미지에서 사용한 함수들은 모두 date-fns에서 지원하는 함수들이다.

현재달의 첫날, 마지막날, 현재 주의 첫날, 마지막날을 반환해준다.

두번째 이미지의 함수는 오늘을 표시하기위해서 만든 함수이다. 오늘 일, 월, 년이 같을 때 추가로 class를 넣어준다.

 

반복문을 돌려서 날짜를 이번달의 첫날부터 마지막날까지 div 태그를 만들어준다. 

한주를 하나의 배열로 묶고, 다시 cells라는 배열에 넣어서 최종적으로는 cells라는 배열을 렌더링해준다.

 

div 태그의 className에서 조건식은 오늘을 따로 지정해주기 위한 것이고,

span 태그의 className 조건식은 현재 달이 아닌 날짜를 흐리게 표시해 주기 위한 것이다.

 

코드를 다 작성하고 styled-component로 적당한 style을 지정해주면 완성된다!

 

TodayList를 작성하고 정산하면 이 달력에 메모와 함께 내용이 추가되도록 해 볼 것이다.

 

 

달력 만든김에 전체 Header에서 버튼을 누르면 Modal창으로 미니달력을 볼 수 있도록 해봤다.

 

 

Reference

- https://date-fns.org/

- https://sennieworld.tistory.com/61