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

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

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

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

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

 7월 토요일: 3 ,10, 17, 24, 31
 7월 일요일: 4, 11, 18, 25

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

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

 토요일 ➡️  { day: 6 }
 일요일 ➡️  { day: 0 }

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

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

import colors from '../style/colors';

const BasicColor = {
  color: `${colors.gray_text}`,
};

const SaturdayColor = {
  color: `${colors.blue_text}`,
};

const SundayColor = {
  color: `${colors.red_text}`,
};

export default function CalendarDate({ date, day }) {
  function dateColorStyle() {
     if (day === 6) {
      return SaturdayColor;
    }
    if (day === 0) {
      return SundayColor;
    }
    return BasicColor;
  }

 return (
    <div style={dateColorStyle()}>
      {date}
    </div>
  );
}

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

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

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

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

 6월 ➡️  { month: 6 }
 7월 ➡️  { month: 7 }

💯 문제 해결

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2편에서 추가로 해결해야 할 부분에 대해 다음편에서 정리해보록 하겠습니다.

  ① 불변성 깨트리지 않고 새로운 배열로 리턴하는 방식으로 변경 필요!
  ② 오늘 날짜가 주말이면 색깔이 변하지 않는 문제점 발견
  ③ 현재 달 시작일이 일요일이면 이전 달 데이터는 필요하지 않음