Timer

Feedback & Status

시간을 표시하는 타이머.

Usage

인증 만료, 재전송 대기, 제한 시간처럼 지정된 만료 시각까지 남은 시간을 표시할 때 사용한다.

import

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

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

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

API Reference

Timer Props

Prop

Type

Default

targetTimeStamp

필수

Date

지정 안 함

autoStart

boolean

true

format

string

mm:ss

onOver

() => void

지정 안 함

예제

기본 사용

남은 5분을 mm:ss 로 세는 카운트다운입니다. 문서 카드에서는 autoStart 를 꺼 정지 화면으로 둡니다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import { Timer } from '@mildang/design-system/Timer';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    targetTimeStamp: new Date(Date.now() + 5 * 60 * 1000),
  }) } as ComponentProps<typeof Timer>;

const TimerDemoExampleRender = (args: ComponentProps<typeof Timer>) => {
    return <Timer targetTimeStamp={new Date(args.targetTimeStamp)} />;
  };

export default function TimerDemoExample(props: Partial<ComponentProps<typeof Timer>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Timer>;
  return TimerDemoExampleRender(mergedProps);
}

명령형 제어

ref 로 pause·resume·restart 를 직접 부릅니다. 시험 타이머처럼 외부 버튼이 흐름을 끊어야 할 때 씁니다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import { Timer } from '@mildang/design-system/Timer';
import { Flex } from '@mildang/styled-system/jsx';
import { Chip } from '@mildang/design-system/Chip';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    targetTimeStamp: new Date(Date.now() + 120 * 60 * 1000),
    autoStart: true,
  }) } as ComponentProps<typeof Timer>;

const TimerCustomFormatExampleRender = (args: ComponentProps<typeof Timer>) => {
    return (
      <Flex direction="row" align="start" gap={32}>
        <Flex direction="column" align="center" gap={8} justify="space-between">
          <Chip label="format: 'hh:mm:ss'" />
          <Timer targetTimeStamp={new Date(args.targetTimeStamp)} format="hh:mm:ss" />
        </Flex>
        <Flex direction="column" align="center" gap={8}>
          <Chip label="format: 'mm:ss'" />
          <Timer targetTimeStamp={new Date(args.targetTimeStamp)} format="mm:ss" />
        </Flex>
        <Flex direction="column" align="center" gap={8}>
          <Chip label="format: 'ss'" />
          <Timer targetTimeStamp={new Date(args.targetTimeStamp)} format="ss" />
        </Flex>
      </Flex>
    );
  };

export default function TimerCustomFormatExample(props: Partial<ComponentProps<typeof Timer>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Timer>;
  return TimerCustomFormatExampleRender(mergedProps);
}

AutoStart

코드

Open in Playground

import type { ComponentProps } from 'react';
import { Timer } from '@mildang/design-system/Timer';
import { Flex } from '@mildang/styled-system/jsx';
import { Chip } from '@mildang/design-system/Chip';
import { default as Text } from '@mildang/design-system/Text';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    targetTimeStamp: new Date(Date.now() + 5 * 60 * 1000),
    onOver: () => alert('Timer over'),
    format: 'hh:mm:ss',
  }) } as ComponentProps<typeof Timer>;

const TimerAutoStartExampleRender = (args: ComponentProps<typeof Timer>) => {
    return (
      <Flex direction="row" align="start" gap={32}>
        <Flex direction="column" align="center" gap={8} justify="space-between">
          <Chip label="AutoStart: false" />
          <Text>
            <Timer targetTimeStamp={new Date(args.targetTimeStamp)} autoStart={false} />
          </Text>
        </Flex>
        <Flex direction="column" align="center" gap={8}>
          <Chip label="AutoStart: true" />
          <Text>
            <Timer targetTimeStamp={new Date(args.targetTimeStamp)} autoStart={true} />
          </Text>
        </Flex>
      </Flex>
    );
  };

export default function TimerAutoStartExample(props: Partial<ComponentProps<typeof Timer>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Timer>;
  return TimerAutoStartExampleRender(mergedProps);
}

PauseTimer

코드

Open in Playground

import type { ComponentProps } from 'react';
import { Timer, TimerHandle } from '@mildang/design-system/Timer';
import { useRef, useState } from 'react';
import { Flex } from '@mildang/styled-system/jsx';
import { Button } from '@mildang/design-system/Button';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    targetTimeStamp: new Date(Date.now() + 5 * 60 * 1000),
    onOver: () => alert('Timer over'),
    format: 'hh:mm:ss',
    autoStart: true,
  }) } as ComponentProps<typeof Timer>;

const TimerPauseTimerExampleRender = (args: ComponentProps<typeof Timer>) => {
    const timerRef = useRef<TimerHandle>(null);
    const [isPause, setIsPause] = useState(false);

    return (
      <Flex direction="column" align="start" gap={8}>
        <Timer {...args} targetTimeStamp={new Date(args.targetTimeStamp)} ref={timerRef} />
        <Flex direction="row" align="center" gap={16}>
          <Button
            variant="primary"
            onClick={() => {
              if (isPause) {
                timerRef.current?.resume();
                setIsPause(false);
              } else {
                timerRef.current?.pause();
                setIsPause(true);
              }
            }}
          >
            {isPause ? '재생' : '일시정지'}
          </Button>
        </Flex>
      </Flex>
    );
  };

export default function TimerPauseTimerExample(props: Partial<ComponentProps<typeof Timer>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof Timer>;
  return TimerPauseTimerExampleRender(mergedProps);
}