@jk-core/components/README.md

components for jk

# @jk-core/components

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

<br/>

## 설치
```bash
npm install @jk-core/components
yarn add @jk-core/components
```

<br/>
<br/>


## Calendar

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

<br/>

## 특징

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

<br/>

## 사용법
```typescript
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}
/>
);
}
```

<br/>

## 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 | 보기 모드 선택기 표시 여부 |

<br/>

## 스타일링

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