@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 모듈 파일을 직접 수정하세요.