Timer / Stopwach 컴포넌트 설계

[anonymousRecords]

✅ Timer 컴폰넌트

출처 : 구글 타이머

출처 : 네이버 타이머

타이머 기능

<시간 설정>

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

<타이머 기능 동작>

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

✅ Stopwach 컴포넌트

출처 : 구글 스톱워치

• 시작 버튼을 클릭하면, 스톱워치가 실행되고 버튼은 중지로 변경됨.
• 리셋 버튼을 클릭하면, 스톱워치 기록이 초기화됨.

• 시간은 s와 ms로 시작됨.
• 1m가 되면 m, s, ms / 1h가 되면 h, m, s로 보여짐.

[anonymousRecords]

Why the GOV.UK Design System team changed the input type for numbers