기능 | 캘린더 - ssseok/wedding.invitation GitHub Wiki

목적

  • 결혼식 날짜를 텍스트로만 날짜를 표시하는 것보다 캘린더를 통해 시각적으로 결혼 날짜를 강조했습니다.

설치

bunx --bun shadcn@latest add calendar

bun add react-day-picker
  • shadcn UI Calendar는 react-day-picker를 사용하고 있어 설치하였습니다.
bun add date-fns
  • 불변성에 뛰어나 사용하였습니다.
  • TypeScript 지원이 우수하기에 사용하였습니다.

코드

import { Calendar } from '@/common/components/ui/calendar';
import { WEDDING_DATE } from '../../config';
import { parse } from 'date-fns';
import { ko } from 'date-fns/locale';

export default function CalendarScreen() {
  const weddingDate = parse(WEDDING_DATE, 'yyyy.MM.dd', new Date());

  return (
    <>
      <h2 className='text-center text-xl font-en'>calendar</h2>
      <div className='flex justify-center my-4'>
        <img src='/ring.png' alt='반지' className='w-6 h-6 aspect-square' />
      </div>
      <div className='max-w-[400px] mx-auto md:max-w-[500px] lg:max-w-full'>
        <Calendar
          mode='single'
          selected={weddingDate}
          locale={ko}
          defaultMonth={weddingDate}
          disabled={(date) =>
            date < new Date('2025-01-01') || date > new Date('2025-12-31')
          }
        />
      </div>
    </>
  );
}
  • date-fns parse 함수는 문자열 형태에 날짜를 객체로 반환해줍니다.
  • 날짜 형식이 yyyy-MM-dd 지정하여 2025.01.01 형태의 문자열을 파싱합니다.
  • Calendar 속성
    • mode = 'single' => 단일 날짜만 선택 가능하도록 설정합니다.
    • selected={weddingDate} => 결혼 날짜를 미리 선택된 상태로 표시합니다.
    • locale={ko} => 한국어 로케일을 사용하여 요일과 월 이름을 한글로 표시합니다.
    • defaultMonth={weddingDate} => 캘린더가 처음 표시될 때 결혼 날짜가 있는 월을 보여줍니다.
    • disabled => 2025년 이외의 날짜는 선택할 수 없도록 비활성화합니다.
⚠️ **GitHub.com Fallback** ⚠️