dodam dodam logo

B1ND Docs

Picker

날짜/시간을 선택할 수 있는 Picker 컴포넌트입니다. 두 가지 모드를 지원합니다:

  • Overlay 모드: useOverlay와 함께 사용하여 화면 중앙에 dim 배경과 함께 표시
  • Popup 모드: PickerTrigger와 함께 사용하여 버튼 아래에 팝업으로 표시

DatePicker

달력을 통해 날짜를 선택합니다. 과거 날짜 선택 방지(disablePast)와 제목 커스터마이징을 지원합니다.

Overlay 모드

화면 중앙에 dim 배경과 함께 DatePicker를 표시합니다.

tsx
"use client";


import { DatePicker, useOverlay, FilledButton } from "@b1nd/dodam-design-system/components";
import { useState } from "react";


export default function Example() {
  const overlay = useOverlay();
  const [date, setDate] = useState(new Date());


  const openDatePicker = () => {
    overlay.open(({ isOpen, close, exit, setDimClickHandler }) => (
      <DatePicker
        open={isOpen}
        date={date}
        onChangeDate={setDate}
        onClose={close}
        onExited={exit}
        setDimClickHandler={setDimClickHandler}
      />
    ));
  };


  return <FilledButton onClick={openDatePicker}>날짜 선택</FilledButton>;
}

Popup 모드

버튼 아래에 팝업으로 DatePicker를 표시합니다.

tsx
"use client";


import { DatePicker, PickerTrigger, FilledButton } from "@b1nd/dodam-design-system/components";
import { useState } from "react";


export default function Example() {
  const [date, setDate] = useState(new Date());


  return (
    <PickerTrigger
      content={({ onClose }) => (
        <DatePicker.Content
          date={date}
          onChangeDate={setDate}
          onClose={onClose}
        />
      )}
    >
      <FilledButton>날짜 선택</FilledButton>
    </PickerTrigger>
  );
}

과거 날짜 비활성화

disablePast prop을 사용하면 과거 날짜를 선택할 수 없습니다.

tsx
"use client";


import { DatePicker, useOverlay, FilledButton } from "@b1nd/dodam-design-system/components";
import { useState } from "react";


export default function Example() {
  const overlay = useOverlay();
  const [date, setDate] = useState(new Date());


  const openDatePicker = () => {
    overlay.open(({ isOpen, close, exit, setDimClickHandler }) => (
      <DatePicker
        open={isOpen}
        date={date}
        onChangeDate={setDate}
        onClose={close}
        onExited={exit}
        setDimClickHandler={setDimClickHandler}
        disablePast
      />
    ));
  };


  return <FilledButton onClick={openDatePicker}>날짜 선택</FilledButton>;
}

DatePicker Props (Overlay 모드)

PropTypeDefaultDescription
openboolean-Picker 표시 여부
dateDatenew Date()현재 선택된 날짜
onChangeDate(date: Date) => void-날짜 선택 시 호출되는 콜백
disablePastbooleanfalse과거 날짜 비활성화
titlestring"날짜 선택"달력 상단 제목
onClose() => void-닫기 애니메이션 시작 콜백
onExited() => void-닫기 애니메이션 완료 콜백

DatePicker.Content Props (Popup 모드)

PropTypeDefaultDescription
dateDatenew Date()현재 선택된 날짜
onChangeDate(date: Date) => void-날짜 선택 시 호출되는 콜백
disablePastbooleanfalse과거 날짜 비활성화
titlestring"날짜 선택"달력 상단 제목
onClose() => void-닫기 콜백

TimePicker

휠 스크롤로 시간/분을 선택합니다. 스크롤은 무한히 회전하며, 실제 값 반영은 "선택" 버튼 클릭 시에만 이루어집니다.

Overlay 모드

화면 중앙에 dim 배경과 함께 TimePicker를 표시합니다.

tsx
"use client";


import { TimePicker, useOverlay, FilledButton, getCurrentTime, type Time } from "@b1nd/dodam-design-system/components";
import { useState } from "react";


export default function Example() {
  const overlay = useOverlay();
  const [time, setTime] = useState<Time>(getCurrentTime());


  const openTimePicker = () => {
    overlay.open(({ isOpen, close, exit, setDimClickHandler }) => (
      <TimePicker
        open={isOpen}
        time={time}
        onChangeTime={setTime}
        onClose={close}
        onExited={exit}
        setDimClickHandler={setDimClickHandler}
      />
    ));
  };


  return <FilledButton onClick={openTimePicker}>시간 선택</FilledButton>;
}

Popup 모드

버튼 아래에 팝업으로 TimePicker를 표시합니다.

tsx
"use client";


import { TimePicker, PickerTrigger, FilledButton, getCurrentTime, type Time } from "@b1nd/dodam-design-system/components";
import { useState } from "react";


export default function Example() {
  const [time, setTime] = useState<Time>(getCurrentTime());


  return (
    <PickerTrigger
      content={({ onClose }) => (
        <TimePicker.Content
          time={time}
          onChangeTime={setTime}
          onClose={onClose}
        />
      )}
    >
      <FilledButton>시간 선택</FilledButton>
    </PickerTrigger>
  );
}

TimePicker Props

PropTypeDefaultDescription
openboolean-Picker 표시 여부
timeTime-현재 선택된 시간
onChangeTime(time: Time) => void-시간 선택 시 호출되는 콜백
titlestring"시간 선택"피커 상단 제목
onClose() => void-닫기 애니메이션 시작 콜백
onExited() => void-닫기 애니메이션 완료 콜백

Utilities

getCurrentTime()

현재 시스템 시간을 Time 형태로 반환합니다.

ts
import { getCurrentTime, type Time } from "@b1nd/dodam-design-system/components";


const time: Time = getCurrentTime();
// { hour: number; minute: number }

Notes

  • dim 영역을 클릭하면 Picker가 닫힙니다.
  • 실제 값 반영은 "선택" 버튼 클릭 시에만 발생합니다.
  • useOverlay를 사용하여 오버레이로 표시합니다.