블로그 커스텀하기(캘린더) #1 포스팅 일자에 따라 캘린더 CSS 변경하기

블로그 커스텀하기 #1 캘린더 기능

이전에 라이브러리를 사용하지 않고 캘린더를 구현 한 적이 있다. 이번에 블로그를 새로 생성하며(티스토리에서 이전) 여러가지 기능을 추가로 넣어볼 예정이다. 그 중 첫 번째 기능은 giscus 를 이용한 댓글 기능이고, 두 번째로 캘린더 기능을 넣어볼 예정이다. 캘린더에는 다음 기능이 들어갈 예정이다.

목표

1. 날짜를 확인하기 위함(완전 기본)
2. 포스팅 일자 확인
3. 총 포스팅 개수 확인
4. hover나 click 이벤트 추가하기 ?

대단한 기능은 아니지만 블로그를 작성함에 조금이나마 동기부여가 될 만한 기능이라고 생각이 되어 바로 적용하기로 했다.

1. 포스팅 날짜 가져오기

해당 블로그를 만들어주신 분이 게시글의 메타데이터를 가져올 수 있는 함수를 이미 만들어두신게 있어서 약간의 응용만 진행했다. 이 블로그는 게시글을 작성할 때 메타데이터 설정을 할 수 있다. (title, date, desc, thumbnail 등) 이 중 캘린더에 필요한 데이터는 date이다. 다음 코드는 전체 게시글을 가져와서, date의 배열을 구하는 함수이다.

export const getPostedDates = async (): Promise<Date[]> => {
  const postPaths = getPostPaths();
 
  const postList = await Promise.all(postPaths.map((postPath) => parsePost(postPath)));
  const postedDates = postList.map((post) => post.date);
  return postedDates;
};

2. 데이터 정제

기본 캘린더 기능에서 일자를 뿌려주려면 date 즉, 1 ~ 30(31)까지의 숫자 배열만 있으면 되지만 내가 구현하려고 하는 것은 포스팅 여부에 따라 CSS를 변경해주어야 한다. 따라서 해당 날짜에 포스팅이 있는지 확인할 수 있는 값도 필요하다. 일자(숫자)만 들어있는 배열 데이터를 객체로 변경했고 hasPost 속성을 추가했다.

const dateConfigs = useMemo(() => {
  const items: DateConfig[] = [];
  for (let i = dayStart; i <= dayEnd; i = addDays(i, 1)) {
    const hasPost = postedDates.some((postedDate) => isSameDay(postedDate, i));
    items.push({ date: i, hasPost });
  }
  return items;
}, [currentMonth]);

hasPost에 따른 css 변경

캘린더에서 달력 한 칸에 해당하는 컴포넌트(CalendarCell)에 date와, hasPost를 전달해준다.

<CalendarCell
  key={dateConfig.date.toISOString()}
  date={dateConfig.date}
  hasPost={dateConfig.hasPost}
/>

그리고 CalendarCell 컴포넌트에서 hasPost에 따라 CSS만 변경해주면 목표로 했던 (포스팅 일자 확인) 기능 완성

미완성 작업

다음 기능은 캘린더에 전체 포스팅 개수를 출력하고 싶은데 기능 구현은 금방 하겠지만 어디에 배치해야 될지 모르겠다..

캘린더 체크리스트

• 날짜를 확인하기 위함(완전 기본) ✔️
• 포스팅 일자 확인 ✔️
• 총 포스팅 개수 확인
• hover나 click 이벤트 추가하기 ?