🐜 Mine 애플리케이션 프로젝트 - 달력 페이지 (3)

🐜 Mine 애플리케이션 프로젝트 - 달력 페이지(3)

 

📓 토요일, 일요일 숫자에 색상 넣기

 

이제 토요일과 일요일에 색상을 넣어주도록 하겠습니다.

화면에서 7월 달력이 그려진 모습에서 색상을 넣어줄 날짜를 확인해보겠습니다.

 

 

그리고 console.log(dates); 로 현재 그려지는 데이터가 어떻게 생겼는지 확인해보겠습니다.

토요일과 일요일이 가지는 공통점을 찾을 수 있습니다.

 

 

공통점을 찾았으니 조건문을 만들어서 토요일(푸른색), 일요일(붉은색)에 색상을 넣어주는 함수를 만들어 주겠습니다.

 

저는 colors 파일을 만들어서 색상을 import해서 사용하였습니다. 그리고 아래와 같이 dateColorStyle() 함수를 만들어 주었습니다.

 

 

🚨 "6월 27일" 도 빨간색으로 변경되는 문제가 발생!!

당연한 결과입니다. 조건문을 아래와 같이 주었기 때문입니다.

6월 데이터와 7월 데이터가 함께 그려지기 때문입니다.

필요한 조건이 하나 더 있습니다.

 

 

 

💯 문제 해결

 

위에서 month에 대한 조건을 추가해줘야 하는데 비교를 하려면 기준이 필요합니다.
현재 보여지는 달력의 month와 같은 데이터만 찾아주면 되겠죠?

 

이러라고 리덕스를 사용하는 겁니다:)

 

리덕스에 저장되어 있는 month를 가지고 오겠습니다. 그리고 currentMonth라는 변수를 만들어 준 다음 아래와 같이 조건문을 추가해보겠습니다.

 

아래와 같이 원하던 모습으로 잘 그려졌습니다.
추가로 이전 달 숫자를 흐리게 해주면 그럴싸한 달력이 될 것 같습니다.

 

📓 이전 달, 다음 달 색상 흐리게 표현하기 기능을 추가해보자

 

그 다음으로 이전 달과 다음 달 색상을 흐리게 표현주는 기능을 추가해보도록 하겠습니다.

 

이전에 만들어 준 함수에 로직을 추가해주면 됩니다. 앞에서 한 번 해봤으니 이제는 쉽게 할 수 있겠죠?

마찬가지로 아래와 같이 색상을 만들어주고,

아래와 같이 조건문을 추가해주면 됩니다.

 

드디어 달력이 완성되었습니다 👏 👏 👏 👏 👏

 

📓 오늘 날짜 표시해주기 기능을 추가해보자

마지막으로 오늘 날짜를 표시해주는 기능도 넣어주면 완벽할 것 같습니다.

 

Today(초록계열) 색상를 아래와 같이 만들어 주겠습니다.

그리고 Date 객체를 활용해서 현재 날짜를 찾아주는 조건문을 만들었습니다.

 

아래와 같이 오늘(today = 2021/08/25)이 잘 그려지는 것을 확인할 수 있습니다.

 

 

 

👀  2편에서 추가로 해결해야 할 부분에 대해 언급했었는데 다음편에서 정리해보록 하겠습니다.

 

① 불변성 깨트리지 않고 새로운 배열로 리턴하는 방식으로 변경 필요!

② 오늘 날짜가 주말이면 색깔이 변하지 않는 문제점 발견

③ 현재 달 시작일이 일요일이면 이전 달 데이터는 필요하지 않음