통계시각화 - Part3 일일달성률 월간달력에 표시

이 포스팅에서는 일일 달성률을 월간 달력에 시각적으로 표시하는 방법을 설명합니다. 각 날짜에 대한 달성률에 따라 달성률이 높은 날에는 다른 스티커를 붙이는 것처럼 시각적으로 표현하여, 달성률을 직관적으로 확인할 수 있도록 구현합니다

---

참고: achievement 데이터를 패치하는 것은 이전 글에서 다뤘으므로, 이번 글에서는 생략합니다.

 

1. 타일 콘텐츠 함수

각 날짜 타일에 달성률에 따른 아이콘을 표시

// pages/index.tsx

// 타일 콘텐츠 함수
const tileContent = ({ date }: { date: Date }) => {
  const dateString = dayjs(date).format('YYYY-MM-DD');  // 날짜를 문자열로 변환
  const achievement = monthlyAchievements[dateString];  // 해당 날짜의 달성률 가져오기

  if (achievement !== undefined) {  // 달성률이 존재하는 경우
    let imgUrl = '';  // 이미지 URL 초기화
    if (achievement <= 30) {
      imgUrl = 'First';  // 달성률 0~30% 이미지 설정
    } else if (achievement <= 60) {
      imgUrl = 'Second';  // 달성률 31~60% 이미지 설정
    } else if (achievement <= 90) {
      imgUrl = 'Third';  // 달성률 61~90% 이미지 설정
    } else {
      imgUrl = 'Last';  // 달성률 91~100% 이미지 설정
    }
    return (
      <img
        src={`../../achievement${imgUrl}.png`}  // 해당 달성률 이미지 경로 설정
        style={{
          width: '20px',  // 이미지 너비
          height: '20px',  // 이미지 높이
          margin: 'auto',  // 가운데 정렬
        }}
      />
    );
  }
  return null;  // 달성률이 없는 경우 표시하지 않음
};

(설명 : 주석참고)

 

2. 월간 달력 표시

// pages/index.tsx

// 월간 달력 표시
{currentTab === 'month' && (
  <>
    <StyledCalendar
      key={selectedDate.toString()}  // 선택된 날짜를 키로 사용하여 달력 리렌더링 트리거
      onChange={(value) => handleDateChange(value as Date)}  // 날짜 변경 핸들러
      value={selectedDate}  // 현재 선택된 날짜
      view='month'  // 달력 뷰를 월간으로 설정
      tileClassName={tileClassName}  // 타일 클래스 이름 설정 함수
      tileContent={tileContent}  // 타일 콘텐츠 설정 함수
      formatMonthYear={(locale, date) => formatLabel(date)}  // 월 표시 형식
      formatDay={(locale, date) => dayjs(date).date().toString()}  // 일 표시 형식
      locale='en-US'  // 달력 로케일 설정 (일요일 시작)
    />
    <AchievementPercentage>
      <div>
        <img src='../../achievementFirst.png' alt='' />  {/* 달성률 0~30% 이미지 */}
        <p>0~30%</p>
      </div>
      <div>
        <img src='../../achievementSecond.png' alt='' />  {/* 달성률 31~60% 이미지 */}
        <p>31~60%</p>
      </div>
      <div>
        <img src='../../achievementThird.png' alt='' />  {/* 달성률 61~90% 이미지 */}
        <p>61~90%</p>
      </div>
      <div>
        <img src='../../achievementLast.png' alt='' />  {/* 달성률 91~100% 이미지 */}
        <p>91~100%</p>
      </div>
    </AchievementPercentage>
  </>
)}

(설명 : 주석참고)

 

---