sakang07/nyamodoro

고양이 컨셉의 심플한 뽀모도로 타이머 웹앱

Nyamodoro Timer 🐈‍⬛

제가 키우는 고양이와 참여하고 있는 뽀모도로 스터디에서 아이디어를 얻어 만든 뽀모도로 타이머입니다. React의 기본 작동 원리를 습득하기 위해 간단히 기획해 보았으며, state의 개념을 이해하고 컴포넌트의 작성법을 연습할 수 있었습니다.

Tech Stack

JavaScript	React	SCSS	Github

Function Guide

• 고양이를 클릭해서 먹이를 주면 30분의 타이머를 시작합니다.
• 집중 시간인 25분과 휴식 시간인 5분이 끝날 때 울음소리를 내서 알려 줍니다.
• 작동 도중에 타이머를 일시정지하려면 고양이를 마우스 드래그로 쓰다듬어 줍니다. 다시 작동하려면 고양이를 클릭해서 깨웁니다.
• 30분의 한 사이클을 마치면 고양이가 사냥한 물건을 한 개씩 주워 옵니다.
• 자동 급식기와 도움말 기능은 아직 미구현입니다...

Copyright

이 프로젝트의 저작권은 SA K에게 있습니다. © 2021. SA K

nyamodoro's Issues

휴식시간 표기

Description

5분이 남는 순간부터 타이머 숫자 컬러 변경해서 휴식 시간임을 알림.

Todo

• 25분이 지나고 5분이 남으면 타이머의 숫자 컬러 변경.
• 휴식 시간 시작시 고양이를 울게 하고 고양이 울음소리 재생하여 알림.

Etc

도움말

Description

도움말 추가

Todo

• 도움말 버튼을 누르면 화면에 도움말 팝업.
• x 버튼을 누르면 도움말 끄기.

Etc

타이머 일시정지 기능

Description

타이머 일시정지 기능(고양이 드래그하면 멈추고 다시 누르면 작동).

Todo

• 고양이를 드래그하는 것으로 타이머가 일시 정지하게 하기.
• 고양이를 다시 눌러서 깨우면 타이머가 다시 작동하도록 하기.

Etc

자동 기능

Description

30분이 지나면 다시 시작할 필요 없이 계속해서 사이클이 돌아가는 자동 기능.

Todo

• 자동 급식기 버튼을 누르면 사이클이 계속해서 돌아가게 하기.

Etc

타이머 종료 알림

Description

0분이 되어 타이머가 종료되면 이를 알리고 사이클 카운터가 올라가도록 구현 필요.

Todo

• 0분이 되어 한 사이클이 끝나면 다시 고양이가 울게 하여 알림.
• 사이클 카운터가 1씩 올라가게 구현.
• 사이클을 나타내는 이미지가 랜덤하게 삽입되도록 구현.

Etc

UI 개선

Description

뽀모도로 타이머의 사이클 수를 표시하는 창이 개수에 따라 유연하게 늘어나도록 구현

Todo

• 배경 이미지가 박스 크기에 맞게 조절되도록 한다

Etc