← 갤러리로 돌아가기생산성타이머
이 앱은 데모 페이지에서 로그인 없이 바로 체험할 수 있어요. 아래 버튼으로 이동해서 더미 데이터로 주요 기능을 눌러보세요.
데모 보러 가기🛠️ 개발 가이드
집중 → 휴식을 반복하는 뽀모도로 타이머를 정확한 시각 계산과 브라우저 알림음으로 구현했어요.
기술 스택
Next.jsReactWeb Audio API
핵심 구현 포인트
- 집중/짧은휴식/긴휴식을 하나의 phase 상태 머신으로 관리해요.
- setInterval의 누적 오차를 피하려고 "시작 시각 + 총 시간 − 현재 시각"으로 남은 시간을 매번 다시 계산해요.
- 알림음은 별도 오디오 파일 없이 Web Audio API로 직접 생성해요.
이렇게 만들면 돼요
- phase와 남은 시간(remaining) state를 설계해요.
- useEffect 안의 setInterval에서 remaining을 시각 차이로 재계산해요.
- phase가 끝나면 다음 phase로 전환하고 사이클 카운트를 올려요.
참고 파일
components/gallery/FocusTimerDemo.jsx