anonymousRecords/hello-web

Timer / Stopwach 컴포넌트 설계

Opened this issue · 1 comments

✅ Timer 컴폰넌트

image image

출처 : 구글 타이머

image

출처 : 네이버 타이머

타이머 기능

<시간 설정>

  • 시, 분, 초 마다 상, 하 버튼을 통하여 시간 설정이 가능함.
  • 0 아래의 숫자로는 설정이 불가능함.
  • 시간 설정이 진행되면, start 버튼과 reset 버튼이 활성화됨.
  • reset 버튼을 클릭하면, 시간 설정이 초기화됨.
  • 10초, 1분, 5분, 10분, 30분, 1시간을 기본 설정 테마로 제공됨.

<타이머 기능 동작>

  • 타이머 기능이 동작하면, start 버튼이 stop이 됨.
  • 타이머 기능이 동작하면, reset 버튼이 비활성화됨.
  • 시간이 지남에 따라, 설정 시간이 실시간으로 줄어듦.
  • 타이머 시간이 종료되면, 팝업창으로 알려줌.

✅ Stopwach 컴포넌트

image

출처 : 구글 스톱워치

  • 시작 버튼을 클릭하면, 스톱워치가 실행되고 버튼은 중지로 변경됨.
  • 리셋 버튼을 클릭하면, 스톱워치 기록이 초기화됨.
image image
  • 시간은 s와 ms로 시작됨.
  • 1m가 되면 m, s, ms / 1h가 되면 h, m, s로 보여짐.