[10MM] 스톱워치 요구사항

10MM 서비스는 "하루 10분으로 시작하는 습관 만들기"입니다.
이 "하루 10분"을 측정하기 위해 스톱워치 기능이 필요했습니다.

스톱워치 구현 View

10MM의 스톱워치에는 아래와 같은 요구사항이 존재했습니다.

요구사항

• 버튼 플로우 (3 flow)
  • 시작
  • 일시 정지 , 끝내기
  • 다시 시작, 끝내기
• 일시정지 버튼을 클릭하면 타이머의 시간이 멈추고, 다시 시작 버튼을 클릭하면 타이머가 다시 흘러갑니다.
• 10분이 흐르기 전에 끝내기버튼을 클릭할 경우 스톱워치의 시간이 기록되지 않고 다른 페이지로 이동됩니다.
• 1초 간격으로 타이머의 시간이 흘러갑니다.
  • 개발/테스트에서도 다음 플로우로 흘러가려면 최소 10분 시간이 필요합니다.
  • 따라서, 로컬 or 테스트에서는 시간을 더 빨리 조절 할 수 있어야합니다.
• 10분 마다 번개 스택이 하나씩 쌓입니다.
  • 이후 해당 번개 스택으로 엠엠이 캐릭터가 성장합니다.
• 60분이 넘어가면 자동으로 미션 기록 인증 페이지로 넘어가야합니다.
• 앱 환경을 고려해 화면을 이탈하거나, 백그라운드에서도 타이머의 시간이 흘러가야합니다.
  • 앱이 백그라운드로 들어가거나, 앱이 꺼졌을 때도 타이머의 시간이 흘러가야합니다.
  • 다시 화면에 들어왔을 때 또는 새로고침 되었을 때 기존의 스톱워치의 상태 (일시정지, 진행중)가 유지되어야합니다.
• 뒤로가기 버튼 클릭, 또는 뒤로가기 동작 (브라우저 동작)이 일어나면, 정말 끝내시겠습니다?라는 모달이 뜨게 됩니다.
  • 모달이 뜨는 동안 타이머의 시간은 멈추어있어야합니다.
  • 끝내기를 선택하면 타이머의 기록이 삭제되고 전 페이지로 돌아가야합니다.
  • 취소를 선택하면 모달이 꺼지고, 타이머의 상태가 이전으로 돌아가야합니다.
• 10분 전에 끝내기 버튼을 클릭하면 뒤로가기 동작과 같은 동작이 일어나야합니다.
  • 따라서 브라우저의 뒤로가기 동작을 커스텀 해야합니다. (앱도 마찬가지)

---

위와 같은 스톱워치의 기능을 정상적으로 구현하기 위해 많은 고민이 있었는데요,, 🤔
다음 글부터 이 내용에 대해 공유해보려고 합니다 😄