/react-timer

지원 플랫폼 근로 온보딩

Primary LanguageTypeScript

⏱️ 타이머 미션

스크린샷 2023-05-13 오전 10 27 42

📝 실행 방법

  • 앱 바로 실행하기

  • 터미널에서 npm 설치(npm install) 후 npm start 커맨드로 앱을 실행할 수 있다.


👬 팀 구성원

제레미(김민석) 프로필 파인(임낭경) 프로필 로피(최세현) 프로필
제레미(FE) 파인(FE) 로피(AN)

✅ 프로그래밍 요구사항

카운트다운 타이머

  • 시, 분, 초, 알림 소리를 설정하고 ‘시작' 버튼을 클릭해 카운트다운 타이머를 시작할 수 있다.

  • 시작한 뒤 ‘정지' 버튼을 클릭해 타이머를 멈출 수 있다.

  • 설정한 시간이 다 지나면 알림 소리가 울리고, 알림 UI가 표시된다.

  • 알림 UI에서 ‘타이머를 다시 시작할까요?’ 메시지를 보여주고, ‘확인'을 클릭해 같은 타이머를 재시작하거나, 
’취소'를 클릭해 타이머를 종료할 수 있다.

  • ‘재설정' 버튼을 클릭해 타이머를 초기화할 수 있다.

  • 3분, 5분, 10분, 15분, 20분(혹은 그 외 자주 사용하는 특정 시간) 타이머는 별도의 UI를 통해 바로 설정할 수 있다.

스톱워치

  • ‘시작' 버튼을 클릭해 스톱워치를 시작할 수 있다. 시간은 1/1000초까지 표시된다.

  • 시작한 뒤 ‘정지' 버튼을 클릭해 스톱워치를 멈출 수 있다.

  • ‘랩' 버튼을 클릭해 현재 타임을 랩 목록에 추가할 수 있다.

  • 스톱워치가 정지된 상태에서는 ‘재시작' 버튼이 나타나며, 클릭하면 랩 목록과 스톱워치를 모두 초기화한다.

세계 시계

  • 서울의 현재 시간을 확인할 수 있다.

  • 현재 시간은 12시간제로 오전/오후 표기, 시간/분/초, 년/월/일과 요일까지 표시한다.

  • 일본 도쿄, 영국 런던, 캐나다 토론토의 현재 시간을 같은 페이지에서 확인할 수 있다.

  • 다른 나라의 시간도 동일하게 12시간제로 오전/오후 표기, 시간/분/초를 표시한다.

  • 년/월/일과 요일은 표시하지 않는다.

  • 서울 기준으로 시차를 표시한다.


@woowacourse