@jk-core/components

jk-core 프로젝트를 위한 React 커스텀 컴포넌트 모음입니다.

설치

npm install @jk-core/components
yarn add @jk-core/components

Calendar

Calendar 컴포넌트는 날짜 선택 기능을 제공하는 사용자 정의 React 컴포넌트입니다. 일, 월, 년 단위로 날짜를 선택할 수 있으며, 다양한 커스터마이징 옵션을 제공합니다.

특징

• 일/월/년 단위의 날짜 선택
• 커스텀 스타일링 지원
• 최소/최대 날짜 설정 기능
• 타일 내용 커스터마이징 가능
• 반응형 디자인

사용법

import { Calendar, CalendarView } from '@jk-core/components';
import { useState } from 'react';
function App() {
const [view, setView] = useState<CalendarView>('month');
const [date, setDate] = useState<Date>(new Date());
return (
<Calendar
date={date}
view={view}
setView={setView}
onChange={setDate}
/>
);
}

Props

| Prop | 타입 | 기본값 | 설명 | |------|------|--------|------| | className | string | '' | 추가적인 CSS 클래스 | | date | Date | undefined | 선택된 날짜 | | view | CalendarView | 'day' | 현재 보기 모드 ('day', 'month', 'year') | | setView | (view: CalendarView) => void | () => {} | 보기 모드 변경 함수 | | tileContent | (date: Date | undefined, view: CalendarView) => React.ReactNode | undefined | 타일 내용 커스터마이징 함수 | | onChange | (date: Date) => void | () => {} | 날짜 선택 시 호출되는 함수 | | min | Date | new Date(2000, 0, 1) | 선택 가능한 최소 날짜 | | max | Date | new Date(2099, 11, 31) | 선택 가능한 최대 날짜 | | onClose | () => void | undefined | 닫기 버튼 클릭 시 호출되는 함수 | | viewSelector | boolean | true | 보기 모드 선택기 표시 여부 |

스타일링

Calendar 컴포넌트는 CSS 모듈을 사용하여 스타일링되어 있습니다. 커스텀 스타일을 적용하려면 className prop을 사용하거나 컴포넌트의 CSS 모듈 파일을 직접 수정하세요.