[사람별_Day6] 캘린더에 일정 나타내기 - UTC

RBC에 대한 기본적인 기능 및 설정은 얼추 마무리되고, 실제 데이터와 연동하고자 한다.

supabase 테이블에 적용된 데이터를 가져와서 캘린더에 출력해보았다.

---

supabase 테이블 연결 설정은 간략히 아래와 같이 진행했다.

1. 페이지, 컴포넌트 생성 및 연결
2. supabaseClient 생성 (supabaseClient.ts)
3. plans 테이블 값 불러오기 로직 (supabaseApi.ts)
4. plans 타입 지정
5. 컴포넌트에서 호출 : useState, useEffect

 

 

new Date()

 

초기값을 빈 배열로 두어 이벤트 상태를 관리하였다.

하지만 state의 타입을 <plans[]>로 지정하였을 때 에러가 발생했다.

 

에러는 다음과 같이 나타났다.

"이 호출과 일치하는 오버로드가 없습니다. '"start"' 형식은~ , '"end"' 형식은~"

 

에러 원인은 supabase의 데이터 값과 RBC가 필요한 값이 다르기 때문이다.

• supabase : start_date와 end_date 모두 string
• RBC : start와 end 모두 Date 필요

이를 해결하기 위한 방법은 supabase의 값을 알맞게 매핑하기.

즉, Date 객체로 변환하기 위해 new Date()를 사용한다.

 

정리하자면

• new Date() 사용 이유
  1. number와 string 형식은 Date 형식에 할당할 수 없다.
  2. 즉, RBC에서는 "start"와 "end" 필드가 Date 객체여야 한다.
  3. Supabase에서 받아오는 start_date와 end_date의 type은 string.
  4. 이 둘을 직접 Date 객체로 변환 : new Date()

state 타입은 <CalendarEvent[]>로 변경한다.

 

📌Type과 최종 로직

export interface PlansType {
  plan_id: string;
  created_at: number;
  user_id: string;
  contacts_id: string;
  start_date: string;
  end_date: string;
  title: string | null;
  detail: string | null;
  priority: string | null;
}

export interface CalendarEventType {
  id: string;
  title: string | null;
  start: Date;
  end: Date;
}

// src > components > commons > calendar.tsx

'use client';
import { Calendar, dateFnsLocalizer } from 'react-big-calendar';
import { format, parse, startOfWeek, getDay } from 'date-fns';
import { enUS } from 'date-fns/locale/en-US';
import { ko } from 'date-fns/locale/ko';
import { getPlans } from '@/lib/utils/supabaseApi';
import { useEffect, useState } from 'react';
import { CalendarEventType } from '@/types/plans';

// 로케일(지역화) 설정
const locales = {
  'en-US': enUS, //미국-영어 : 미국식 날짜
  'ko-KR': ko, //한국-한글 : 한국식 날짜
};

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
});

const MainCalendar = () => {
  const [events, setEvents] = useState<CalendarEventType[]>([]);

  useEffect(() => {
    const fetchEvents = async () => {
      try {
        const plans = await getPlans();

        const formatted = plans.map(
          (plan): CalendarEventType => ({
            id: plan.plan_id,
            title: plan.title,
            start: new Date(plan.start_date),
            end: new Date(plan.end_date),
          })
        );
        setEvents(formatted);
      } catch (error) {
        console.error('일정 목록 가져오기 에러', error);
      }
    };
    fetchEvents();
  }, []);

  return (
    <div>
      <Calendar
        localizer={localizer}
        events={events} // 여기에 이벤트 추가 가능
        startAccessor='start'
        endAccessor='end'
        style={{ height: 500 }}
      />
    </div>
  );
};

export default MainCalendar;

 

달력과 DB의 값 차이 : UTC

 

supabase 데이터 중 시작일과 종료일이 달력과 다르게 나타났다.

 

supabase의 데이터 타입을 timestamptz (타임스탬프 with 타임존)으로 두면

값이 추가될 때 자체적으로 세계표준시간(UTC)을 적용한다.

 

나의 입장에서는 데이터 -> 브라우저 출력 이다. 때문에 테이블에 저장된 값으로부터 하루가 밀려서 출력되는 것으로 느껴지지만

사용자 입장에서는 브라우저 동작 -> 데이터 저장 이다. 때문에 실제 사용자는 9일 밥 먹기 일정을 추가했지만 -9시간(한국 기준 UTC처리)가 되어 supabase에 저장이 되는 것이다.

(브라우저)4월 9일 00:00:00 로 선택 -> (supabase) 4월 8일 15:00:00 저장

 

 

연속 일정 처리 - 종료일 정각

따라서 사용자가 선택한 시간에 맞추어 달력에 잘 출력된다.

하지만 이는 단일 일정에만 적용이 되고, 연속 일정에는 조금 다른 처리를 해주어야 한다.

 

 

 

 

위의 test 일정은 모두 5일 일정이다. 하지만 test-15는 4일 일정으로 출력된다. 왜 그럴까??

결론부터 말하자면 종료일 시간이 정각이기 때문이다.

 

test-15 시작일

test-15 종료일

test-15의 일정 데이터이다.

일정 시작일을 보면 UTC가 적용되어 13일로 저장되어있지만 formatted 값은 14일 정각이다.

일정 종료일을 보면 UTC가 적용되어 17일로 저장되어있다. 마찬가지로 formatted 값을 보면 18일 정각이다.

 

시작일은 formatted 데이터가 정각이어도 시작하는 날이기에 정상적으로 표시되지만

종료일은 정각 시간이 적용되어 18일 이전까지만 달력에 표시된다.

 

따라서 종료일을 1시간 정도 늘려 적용시키면(일정 입력 기능 담당 팀원 분이 적용)

 

종료일이 18일 오전 1시로 설정되어 위의 달력처럼(test-16) 잘 출력된다.