@7segment/countdown-react v0.0.4

Countdown Component

이 프로젝트는 React 애플리케이션을 위한 유연하고 사용하기 쉬운 카운트다운 컴포넌트를 제공합니다. 세븐 세그먼트 디스플레이 스타일의 시각적 요소를 포함하여 남은 시간을 일, 시간, 분, 초 단위로 표시할 수 있습니다.

https://github.com/user-attachments/assets/8b87632c-7f6d-4ff0-b3af-479f9c090081

프로젝트 개요

이 라이브러리는 다음과 같은 주요 기능을 제공합니다

1. SevenSegment 컴포넌트는 7-세그먼트 디스플레이 형식을 사용하여 숫자(0-9)를 시각적으로 표시하는 React 컴포넌트입니다. 숫자의 각 세그먼트는 활성화 상태에 따라 다른 색상으로 표시됩니다.

2. SegmentDisplay 컴포넌트는 주어진 숫자를 7-세그먼트 디스플레이 형식으로 시각적으로 표시하는 React 컴포넌트입니다. 이 컴포넌트는 SevenSegment 컴포넌트를 사용하여 여러 자릿수를 표시합니다.

3. Countdown 컴포넌트는 주어진 목표 날짜(targetDate)까지 남은 시간을 7-세그먼트 디스플레이 형식으로 시각적으로 표시하는 React 컴포넌트입니다. 이 컴포넌트는 useCountdown 훅을 사용하여 남은 시간을 계산하고, SegmentDisplay와 Colon 컴포넌트를 사용하여 남은 시간의 각 부분을 표시합니다.

4. useCountdown 훅은 주어진 목표 날짜까지 남은 시간을 계산하고 관리하는 커스텀 React 훅입니다. 이 훅은 남은 시간을 일, 시간, 분, 초 단위로 포맷하여 반환하며, 카운트다운이 0에 도달하면 지정된 콜백 함수를 호출합니다.

5. useControlledCountdown 훅은 제어 가능한 카운트다운 타이머를 제공하는 React 훅입니다. 이 훅은 주어진 초기 시간에서 시작하여, 남은 시간을 일, 시간, 분, 초 단위로 포맷하여 반환하며, 카운트다운의 시작, 중지, 초기화 기능을 제공합니다.

설치 방법

npm을 사용하여 패키지를 설치할 수 있습니다:

npm i @7segment/countdown-react

또는 yarn을 사용하는 경우:

yarn add @7segment/countdown-react

사용 방법

Seven Segment

다음과 같은 속성을 가집니다.

import React from "react";
import { SevenSegment } from "./path/to/SevenSegment";

const App = () => {
  return (
    <div>
      <h1>Seven Segment Display</h1>
      <SevenSegment
        digit={5}
        onColor="red"
        offColor="gray"
        size={150}
        animationDuration={500}
      />
    </div>
  );
};

export default App;

Segment Display

컴포넌트는 아래와 같은 속성을 가집니다 | 속성 | 타입 | 설명 | 기본값 | |----------------------|---------|--------------------------------------------------|-------------| | value | number | 표시할 숫자 | - | | place | number | 표시할 자리수 (자릿수를 맞추기 위해 앞에 0을 채움) | 2 | | onColor | string | 활성화된 세그먼트의 색상 | "dodgerblue"| | offColor | string | 비활성화된 세그먼트의 색상 | "aliceblue" | | size | number | 컴포넌트의 크기 (픽셀 단위) | 100 | | animationDuration | number | 세그먼트 색상 변경 애니메이션 지속 시간 (밀리초) | 300 |

import React from "react";
import { SegmentDisplay } from "./path/to/SegmentDisplay";

const App = () => {
  return (
    <div>
      <h1>Segment Display</h1>
      <SegmentDisplay value={5} /> // 05
      <SegmentDisplay value={42} onColor="green" /> //42
      <SegmentDisplay value={7} size={150} />
      <SegmentDisplay value={123} place={5} animationDuration={1000} /> //00123
    </div>
  );
};

export default App;

Countdown

import React from "react";
import { Countdown } from "./path/to/Countdown";

const App = () => {
  const targetDate = new Date("2024-12-31T23:59:59");

  return (
    <div>
      <h1>Countdown to New Year</h1>
      <Countdown
        targetDate={targetDate}
        onColor="red"
        offColor="gray"
        size={50}
        animationDuration={500}
        color="black"
        colonGap={10}
      />
    </div>
  );
};

export default App;

useCountdown

Parameter

Returns

Example

import React from "react";
import { useCountdown } from "./path/to/useCountdown";

const CountdownComponent = () => {
  const { days, hours, minutes, seconds } = useCountdown(
    new Date("2025-01-01"),
    {
      onEnd: () => console.log("카운트다운 종료!"),
    }
  );

  return (
    <div>
      <h1>Countdown to 2025</h1>
      <div>
        {days}일 {hours}시간 {minutes}분 {seconds}초 남음
      </div>
    </div>
  );
};

export default CountdownComponent;

useControlledCountdown

Parameter

Returns

Example

import React from "react";
import { useControlledCountdown } from "./path/to/useControlledCountdown";

const CountdownComponent = () => {
  const { days, hours, minutes, seconds, isRunning, start, stop, reset } =
    useControlledCountdown(3600);

  return (
    <div>
      <div>
        {days}일 {hours}시간 {minutes}분 {seconds}초 남음
      </div>
      <div>
        {isRunning ? (
          <button onClick={stop}>중지</button>
        ) : (
          <button onClick={start}>시작</button>
        )}
        <button onClick={reset}>리셋</button>
      </div>
    </div>
  );
};

export default CountdownComponent;

Test Coverage

라이선스

이 프로젝트는 MIT 라이선스 하에 제공됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.