Time Picker
시간을 선택할 수 있는 컴포넌트입니다. 회의 예약, 알람 설정, 근무 시간 관리 등에 활용할 수 있습니다.
설치
Terminal
npx @msub-core/ui-cli add time-picker
사용법
TSX
import { TimePicker } from "@msub-core/ui/components/time-picker"
function MyComponent() {
const [time, setTime] = useState({ hours: 14, minutes: 30 })
return (
<TimePicker
value={time}
onTimeChange={setTime}
/>
)
}기본
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| value | TimeValue | - | No | 현재 시간 값 (controlled) |
| defaultValue | TimeValue | - | No | 기본 시간 값 (uncontrolled) |
| onTimeChange | (time: TimeValue) => void | - | No | 시간 변경 핸들러 |
| use12Hour | boolean | false | No | 12시간제 사용 여부 |
| showSeconds | boolean | false | No | 초 표시 여부 |
| minuteStep | number | 1 | No | 분 단위 간격 |
| hourStep | number | 1 | No | 시간 단위 간격 |
| secondStep | number | 1 | No | 초 단위 간격 |
| minTime | TimeValue | - | No | 최소 시간 제한 |
| maxTime | TimeValue | - | No | 최대 시간 제한 |
| disabled | boolean | false | No | 비활성화 상태 |
| clearable | boolean | false | No | 클리어 버튼 표시 |
| showNow | boolean | false | No | 현재 시간 버튼 표시 |
| label | string | - | No | 라벨 |
| error | string | - | No | 에러 메시지 |
| helperText | string | - | No | 도움말 텍스트 |
| variant | "default" | "outline" | "ghost" | "default" | No | 변형 스타일 |
| size | "sm" | "default" | "lg" | "default" | No | 크기 |
크기
sm
default
lg
변형
default
outline
ghost
12시간제
초 단위 포함
시간 간격
15분 간격
30분 간격
시간 제한
근무 시간: 09:00 - 18:00
지금 버튼
'현재 시간' 버튼을 클릭하여 현재 시각으로 설정할 수 있습니다
초기화 버튼
X 버튼을 클릭하여 시간을 초기화할 수 있습니다
에러 상태
유효하지 않은 시간입니다
근무 시간 외 시간입니다
비활성화
라벨과 도움말
회의는 30분 단위로 예약 가능합니다
오전 7시에 알람이 울립니다
회의 예약 예제
회의실 예약
회의 시간을 선택하세요
선택된 시작 시간: 09:00
알람 설정 예제
알람 설정
기상 알람 시간을 설정하세요
설정된 알람07:30 AM