캘린더에 데이터 시각화하기 - 특정 기간 조회 및 데이터 정리

🔍 1. Supabase API 구현 - 특정 기간 데이터 조회

export const calendarApi = {
  getByDateRange: async (startDate: string, endDate: string, userId: string) => {
    try {
      // 지정된 시작 및 종료 날짜의 시간 범위를 설정
      const startDateTime = `${startDate}T00:00:00.000Z`; // 시작 날짜의 00시 설정
      const endDateTime = `${endDate}T23:59:59.999Z`; // 종료 날짜의 23시 59분 설정

      const { data, error } = await supabase
        .from("challenges")
        .select("*")                  // 모든 컬럼을 선택
        .eq("user_id", userId)         // 사용자의 ID에 해당하는 행을 필터링
        .gte("created_at", startDateTime) // 시작 날짜 이후의 데이터만 선택
        .lte("created_at", endDateTime)   // 종료 날짜 이전의 데이터만 선택
        .order("created_at", { ascending: true }); // 날짜별로 오름차순 정렬

      if (error) throw error; // 오류가 있으면 예외 발생
      return data; // 필터링된 데이터 반환
    } catch (error) {
      console.error("기간별 챌린지 조회 오류:", error);
      throw error; // 호출한 함수로 예외 전달
    }
  }
};

 

calendarApi.getByDateRange 함수는 Supabase 데이터베이스에서

사용자 지정 날짜 범위에 해당하는 데이터를 필터링하여 가져옵니다.

 

startDate, endDate, userId를 매개변수로 받아서

주어진 기간 내에 생성된 사용자의 챌린지 데이터를 조회합니다.

 

📊 2. 데이터 처리 - 날짜별 데이터 정리

const fetchMonthlyData = async () => {
  if (!userId) return; // userId가 없으면 함수 종료

  try {
    // 현재 월의 시작 및 종료 날짜를 YYYY-MM-DD 형식으로 설정
    const startOfMonth = currentMonth.startOf("month").format("YYYY-MM-DD");
    const endOfMonth = currentMonth.endOf("month").format("YYYY-MM-DD");

    // 지정된 월에 해당하는 챌린지 데이터 조회
    const challengeData = await calendarApi.getByDateRange(
      startOfMonth,
      endOfMonth,
      userId
    );

    // 데이터를 날짜별로 정리
    const dataByDate: MonthlyData = {};
    challengeData.forEach((item) => {
      const date = item.created_at.split("T")[0];  // 타임스탬프에서 날짜만 추출 (YYYY-MM-DD 형식)
      // 날짜별로 co2, point 값을 누적 또는 기본값으로 저장
      dataByDate[date] = {
        co2: item.co2 || 0,
        point: item.point || 0,
        challenge_count: 1
      };
    });

    setMonthlyData(dataByDate); // 상태 업데이트
  } catch (error) {
    console.error("캘린더 데이터 요청 실패:", error);
  }
};

 

fetchMonthlyData 함수는 API에서 가져온 데이터를 날짜별로 정리하여

캘린더에 표시할 수 도록 해줬습니다

 

월의 시작과 끝 날짜를 정의하여 한 달치 데이터를 조회한 뒤에

데이터의 created_at 타임스탬프에서 날짜만 추출하여 날짜별로 저장합니다.

 

📅 3. UI 구현 - 날짜별 데이터 표시

{week.map(({ day, isInCurrentMonth }) => {
  const dateStr = day.format("YYYY-MM-DD"); // 날짜를 YYYY-MM-DD 형식으로 변환
  const dayData = monthlyData[dateStr]; // 해당 날짜의 데이터
  const today = new Date();
  const isToday = day.format("YYYY-MM-DD") === dayjs(today).format("YYYY-MM-DD");

  return (
    <div className={`flex flex-col items-center p-4 ${!isInCurrentMonth ? "text-gray-400" : ""}`}>
      <div className={`
        w-10 h-10 font-medium flex items-center justify-center
        ${isToday ? "bg-red-500" : dayData ? "bg-gray-400" : ""}
        ${(isToday || dayData) && "rounded-full text-white"}
      `}>
        {day.format("D")}
      </div>
      {dayData && (
        <>
          <p className="text-sm font-medium">{dayData.co2.toFixed(2)}kg</p>
          <p className="text-sm font-medium">+{dayData.point}P</p>
        </>
      )}
    </div>
  );
})}

 

주어진 주의 날짜들을 반복하면서 monthlyData에

저장된 데이터와 매칭하여 캘린더 셀에 표시했으며

 

조건에 따라 오늘 날짜와 데이터가 있는 날짜에 스타일링을 추가해

사용자가 데이터를 직관적으로 파악할 수 있게 해줬습니다

 

사용한 타입

interface MonthlyData {
  [key: string]: {
    co2: number;    
    point: number;  
    challenge_count: number; 
  };
}

interface MonthlyStats {
  totalCo2: number;
  totalPoints: number;
  totalChallenges: number;
}

 

 

✨ 구현 포인트

1. 데이터 정리: 타임스탬프에서 날짜 부분만 가져와 캘린더에서 키로 사용
2. 조건부 스타일링: 오늘 날짜와 데이터가 있는 날짜에 스타일을 추가하여 쉽게 구별 가능
3. 월간 통계 계산: 한 달 동안의 총 CO₂ 절감량, 포인트, 참여 횟수를 조회 가능

💡 배운 점

1. Supabase에서 날짜로 필터링할 때는 시간 범위를 정확히 설정하는 게 중요하다는 점.
2. 타임스탬프를 처리할 때는 시간대 차이를 방지하기 위해 UTC 형식을 사용하기
3. 캘린더에서 날짜별 데이터를 매핑할 때 일관된 날짜 형식을 사용하는 게 중요

 

 

 

마치며

 

원하는 기간의 데이터를 캘린더에 표시할 수 있게 구현이 완료되었고

앞으로는 필요하다면 애니메이션이나 상호작용을 추가할듯 하네욥