[사람별_Day9] 공휴일 달력에 적용하기 (feat.공공데이터)

달력이라면 필요한 공휴일 !

 

공공데이터 API 발급

 

공휴일 정보를 얻어오기 위해서 공공데이터를 이용하였다.

 

회원가입과 로그인을 하고 활용신청을 클릭한다.

신청이 완료되면 일반 인증키 두 개가 발급되는데, Encoding 키를 이용하였다.

 

 

API 적용

 

라우트 핸들러

.env.local 파일에 키 값을 둘 때 한 가지 유의할 점이 있다.

supabase의 어논키 같은 경우는 브라우저에 노출되어도 크게 문제가 안 되기 때문에 'NEXT_PUBLIC'을 붙여서 사용한다.

 

하지만 공공데이터 같은 경우는 회원가입 후 발급받았기 때문에 브라우저에 노출이 조금 꺼려졌다.

따라서 'NEXT_PUBLIC'을 사용하지 않았다.

const ENV = {
  SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL || '',
  SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || '',
  HOLIDAY_KEY: process.env.HOLIDAY_KEY || '',
};

export default ENV;

 

 

그렇다면 이 키를 사용해서 어떻게 데이터를 불러와야 할까?

처음에는 기존 방식을 따라 service.ts 파일에서 fetch를 통해 다음과 같이 가져왔었다.

// 공공데이터 공휴일 API
export const getHolidays = async (year: string) => {
  const BASE_URL = 'http://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService';
  const res = await fetch(
    //현재 년도 값만
    `${BASE_URL}/getRestDeInfo?ServiceKey=${ENV.HOLIDAY_KEY}&solYear=${year}&_type=json&numOfRows=100`
  );
  const data = await res.json();

  return data;
};

 

하지만 'NEXT_PUBLIC'가 없기 때문에 브라우저에서의 사용이 불가능했다.

 

따라서 생각한 것이 라우트 핸들러!

서버-서버의 통신을 통해 데이터의 응답 값을 라우트 경로에 주기 때문에

서버에서 키 값 사용하여 데이터 페칭이 가능하며 그 데이터를 브라우저에서도 사용이 가능하다.

 

📍공휴일 API 라우트 핸들러

// app > api > holiday > route.ts
import { NextResponse } from 'next/server';

// 공휴일 라우트 핸들러
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const year = searchParams.get('year') || new Date().getFullYear().toString();

  const BASE_URL = 'http://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService';
  const HOLIDAY_KEY = process.env.HOLIDAY_KEY;

  const url = `${BASE_URL}/getRestDeInfo?ServiceKey=${HOLIDAY_KEY}&solYear=${year}&_type=json&numOfRows=100`;

  const res = await fetch(url);
  const data = await res.json();

  return NextResponse.json(data);
}

 

 

 

데이터 가공

 

라우트핸들러를 통해 받아온 응답값을 fetch로 받아온다.

export const useGetHolidays = (calendarYear: string) => {
  // 공휴일 데이터 전체 가져오기
  const fetchHolidays = async () => {
    const res = await fetch(`/api/holidays?year=${calendarYear}`); // 년도에 맞는 데이터
    const data = await res.json();
    const items = data.response?.body?.items?.item || [];
    
    ...

 

이 값은 달력에 바로 적용할 수 없으므로 알맞게 가공해야 한다.

 

 

1. 필요한 값만 추출

• 초기 데이터에서 필요한 날짜와 공휴일명을 뽑아낸다.

// 필요한 값만 추출
    const holidays = items.map((item: Item) => ({
      date: item.locdate, // 20250408 형식
      name: item.dateName,
    }));

 

 

 

 

2. 달력에 적용할 수 있도록 가공

• .slice 메서드를 사용하기 위해 숫자였던 date를 문자열로 변환하여 dateStr 변수에 담아준다.
• '20250101' 형태의 date를 년, 월, 일로 나누어 new Date 객체로 변환한다.
  • 이때, 월은 0부터 시작하는 인덱스이기 때문에 '-1' 처리를 해준다.

 // 캘린더에 적용할 수 있도록 가공
    const formattedHolidays = holidays.map((item: Holidays) => {
      const dateStr = item.date.toString(); // number → string

      return {
        title: item.name,
        date: new Date(
          parseInt(dateStr.slice(0, 4), 10), // year
          parseInt(dateStr.slice(4, 6), 10) - 1, // month (0-indexed)
          parseInt(dateStr.slice(6, 8), 10) // day
        ),
      };
    });
    return formattedHolidays;
  };

 

 

 

3. useQuery 훅을 반환

• 이 모든 기능의 함수를 queryFn로 갖는 useQuery를 생성한다.
• 공휴일의 정보를 년마다 캐싱하기 위해 쿼리 키를 해당 년도에 따라 동적으로 변동한다.

 return useQuery({
    queryKey: [QUERY_KEY.HOLIDAYS, calendarYear], // 년도에 따라 쿼리키 변동
    queryFn: fetchHolidays,
    staleTime: 1000 * 60 * 60 * 24, // 1일
  });

 

 

 

📌useQuery 커스텀 훅 전체 로직

import { QUERY_KEY } from '@/constants/queryKey';
import { Holidays, Item } from '@/types/plans';
import { useQuery } from '@tanstack/react-query';

export const useGetHolidays = (calendarYear: string) => {
  // 공휴일 데이터 전체 가져오기
  const fetchHolidays = async () => {
    const res = await fetch(`/api/holidays?year=${calendarYear}`); // 년도에 맞는 데이터
    const data = await res.json();
    const items = data.response?.body?.items?.item || [];

    // 필요한 값만 추출
    const holidays = items.map((item: Item) => ({
      date: item.locdate, // 20250408 형식
      name: item.dateName,
    }));

    // 캘린더에 적용할 수 있도록 가공
    const formattedHolidays = holidays.map((item: Holidays) => {
      const dateStr = item.date.toString(); // number → string
      return {
        title: item.name,
        date: new Date(
          parseInt(dateStr.slice(0, 4), 10), // year
          parseInt(dateStr.slice(4, 6), 10) - 1, // month (0-indexed)
          parseInt(dateStr.slice(6, 8), 10) // day
        ),
      };
    });
    console.log('formattedHolidays', formattedHolidays);
    return formattedHolidays;
  };

  return useQuery({
    queryKey: [QUERY_KEY.HOLIDAYS, calendarYear], // 년도에 따라 쿼리키 변동
    queryFn: fetchHolidays,
    staleTime: 1000 * 60 * 60 * 24, // 1일
  });
};

 

 

 

달력에 공휴일 적용

 

이제 달력에 적용할 수 있도록 가공한 데이터를 적용해야 한다.

 

캘린더 컴포넌트에서 다음과 같이 상태와 값을 정의하고 있다.

커스텀 훅에 해당 년도를 문자열로 넣어주고 그 값을 'holidays'라는 이름으로 받아온다.

  const [month, setMonth] = useState(new Date()); //해당 달
  const calendarYear = month.getFullYear(); // 해당 달의 년도
  const { data: holidays } = useGetHolidays(String(calendarYear)); // useQuery 커스텀 훅

 

 

기존에 나타내었던 약속 일정들과 공휴일을 하나의 배열로 합쳐서 달력에 전달해주어야 한다.

• 기존 약속인 event를 펼친다.
• 공휴일 데이터인 holidays을 기존 약속과 같은 이름으로  매핑하여 펼친다.
• 둘을 하나의 배열로 만든다.

  // 약속 + 공휴일
  const combinedEvents: CalendarEventType[] = [
    ...(events || []),
    ...(holidays || []).map((holiday: Holidays, idx: number) => ({
      id: `holiday-${idx}`,
      title: holiday.title,
      start: holiday.date,
      end: holiday.date, // 단일 일정
      isHoliday: true, // 스타일 구분용
    })),
  ];

 

 

최종적으로 캘린더에 적용하면 완료!

   <DnDCalendar
        localizer={localizer}
        events={combinedEvents}
        ...
    />