🍅 REACT 뽀모도로 타이머 만들기 (1) 🍅

  여름방학 동안 HTML, CSS, JS와 리액트 공부를 했다.

직접 만들어보는 공부를 하지 않았더니 피상적으로만 이해가 된다는 느낌을 계속 받아,

이번 겨울방학에는 직접 작은 프로젝트를 해보자 라는 생각으로 계획한 뽀모도로 타이머이다.

---

  홍보부 카드뉴스를 만들면서 쫌쫌따리 기른 피그마 실력으로 UI를 디자인했다.

UI 디자인을 마친 다음에.. 나는 피그마 기능 중 정말 기본만 사용해서 만들고 있었구나..

코드를 작성하면서.. 피그마로 UI 디자인 할 때 디테일한 부분까지 생각하지 않으면 굉장히 귀찮구나..

이 두가지를 느꼈다. 이후 유튜브에서 3시간쯤 되는 피그마 설명 영상을 봤다. 다음 디자인 할 때 적용해봐야겠다.

---

  네 페이지로 이루어진 타이머이다. 

첫 번째 페이지에서는 토마토 모양의 시계가 계속해서 돌아간다. 토마토 꼭지 버튼을 누르면 각 상세페이지로 넘어간다.

각 상세페이지에서 큰글자로 적힌 STUDY, TODO-LIST, SETTING을 누르면 첫 번째 페이지로 돌아온다.

  두 번째 페이지는 STUDY 페이지이다.

START를 누르면 저장되어 있는 시간만큼 타이머가 돌아가고 12시 방향까지 반시계 방향으로 바늘이 돌아간다.

  세 번째 페이지는 TODO-LIST 페이지이다.

입력칸에 투두를 입력하고 TODO 버튼을 누르면 하나씩 추가가 된다.

아쉽게도 토마토 모양의 배경 안에서만 추가되는 기능은 구현하지 못했다..

체크를 누르기 전에는 노랑색의 동그라미가, 체크를 누르면 토마토 이모티콘이 보인다.

각 투두의 삭제 기능도 구현되어 있다.

  네 번째 페이지는 SETTING 페이지이다.

STUDY는 공부 시간을 설정하고 BREAK는 휴식 시간을 설정한다.

저렇게 나타냈지만 분만 설정이 되고 시간은 설정이 되지 않는다..

SAVE 버튼을 누르면 공부 시간과 휴식 시간이 동시에 저장이 된다. 

---

다음 게시물부턴 구체적인 코드 설명을 하겠다!