TimePicker

Data Input

시·분과 오전/오후를 고르는 휠 피커.

Usage

오전·오후, 시, 분을 휠 목록에서 선택하게 할 때 사용한다.

import

import { TimePicker } from '@mildang/design-system/TimeField';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

TimePicker Props

Prop

Type

Default

cancelText

string

지정 안 함

className

string

지정 안 함

confirmText

string

지정 안 함

footerLeft

ReactNode

지정 안 함

minuteStep

1 | 5 | 10 | 15 | 30

onCancel

() => void

지정 안 함

onChange

(value: string) => void

지정 안 함

onConfirm

(value: string) => void

지정 안 함

showFooter

boolean

false

value

string

지정 안 함

같은 패밀리

@mildang/design-system/TimeField 에서 같이 내보내는 컴포넌트다.

TimeFieldBase

시간 입력과 시·분·오전/오후 선택 패널을 결합한 시간 필드.

예제

기본 사용

트리거 없이 페이지에 그대로 놓는 시간 휠 패널 — minuteStep 으로 선택 단위를 정합니다.

코드

Open in Playground

'use client';

import { useState } from 'react';
import { TimePicker } from '@mildang/design-system/TimeField';

/**
 * 트리거 없이 페이지 안에 그대로 놓는 시간 휠 패널.
 *
 * `DateCalendar` 와 같은 갈래다 — 팝오버 없이도 혼자 설 수 있는 부품이라 자기 카드에서
 * 그대로 보여준다. 폭은 recipe 의 `root`(240px)가 들고 있어 별도 폭 부모가 필요 없다.
 */
export default function TimePickerExample() {
  const [value, setValue] = useState('15:30');

  return <TimePicker value={value} onChange={setValue} minuteStep={30} />;
}

Demo

코드

Open in Playground

import type { ComponentProps } from 'react';
import { TimePicker } from '@mildang/design-system/TimeField';
import { useState } from 'react';
import { Stack } from '@mildang/styled-system/jsx';
import { Text } from '@mildang/design-system/Text';

const STORY_DEFAULT_ARGS = { ...({
    minuteStep: 5,
    showFooter: false,
  }), ...({}) } as ComponentProps<typeof TimePicker>;

const TimePickerDemoExampleRender = (args: ComponentProps<typeof TimePicker>) => {
    const [value, setValue] = useState('15:30');
    return (
      <Stack gap="8">
        <TimePicker {...args} value={value} onChange={setValue} />
        <Text variant="caption-lg-medium" color="neutral.text.lowest">
          value: {value}
        </Text>
      </Stack>
    );
  };

export default function TimePickerDemoExample(props: Partial<ComponentProps<typeof TimePicker>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof TimePicker>;
  return TimePickerDemoExampleRender(mergedProps);
}

WithFooter

코드

Open in Playground

import { useState } from 'react';
import { Stack } from '@mildang/styled-system/jsx';
import { Text } from '@mildang/design-system/Text';
import { TimePicker } from '@mildang/design-system/TimeField';

const TimePickerWithFooterExample = () => {
    const [value, setValue] = useState('12:00');
    const [confirmed, setConfirmed] = useState('12:00');
    return (
      <Stack gap="8">
        <Text variant="caption-lg-medium" color="neutral.text.lowest">
          showFooter=true — 확인 버튼을 눌러야 반영
        </Text>
        <TimePicker
          value={value}
          onChange={setValue}
          showFooter
          onCancel={() => setValue(confirmed)}
          onConfirm={(v) => setConfirmed(v)}
        />
        <Text variant="caption-lg-medium" color="neutral.text.lowest">
          confirmed: {confirmed}
        </Text>
      </Stack>
    );
  };

export default TimePickerWithFooterExample;

MinuteSteps

코드

Open in Playground

import { HStack, Stack } from '@mildang/styled-system/jsx';
import { Text } from '@mildang/design-system/Text';
import { css } from '@mildang/styled-system/css';
import { useState } from 'react';
import { TimePicker } from '@mildang/design-system/TimeField';

function MinuteStepDemo({ step }: { step: 1 | 5 | 10 | 15 | 30 }) {
  const [value, setValue] = useState('14:00');
  return <TimePicker value={value} onChange={setValue} minuteStep={step} />;
}

const TimePickerMinuteStepsExample = () => (
    <HStack gap="16" flexWrap="wrap" alignItems="flex-start">
      {([1, 5, 10, 15, 30] as const).map((step) => (
        <Stack key={step} gap="4">
          <Text variant="caption-lg-medium" color="neutral.text.lowest">
            minuteStep={step}
          </Text>
          <div className={css({ width: '240px' })}>
            <MinuteStepDemo step={step} />
          </div>
        </Stack>
      ))}
    </HStack>
  );

export default TimePickerMinuteStepsExample;