Pomodoro - TS, React, Tailwind CSS

이번에 frontend mento 사이트에서 간단한 타이머를 만들어 봤습니다. 

 

사용한 기술 스택

• typescript
• react
• tailwind css 
• headlessui
• react-countdown-circle-timer

 

구현 사항

1. 반응형 (모바일, 태블릿, pc)

2. 타이머

3. 환경 설정 모달

4. 시간, 폰트, 색깔 설정

 

1. 반응형 구현

tailwind css를 사용하면 반응형 디자인을 쉽게 구현할 수 있기 때문에 tailwind css를 사용했습니다.

필요한 색깔, 폰트, 사이즈 등을 tailwind.config에 세팅해 줍니다. 

2. 타이머 구현

타이머 구현은 react-countdown-circle-timer 라이브러리를 사용해서 구현하였습니다.

 

3. 환경 설정 모달 및 홈 화면 탭바 구현

모달과 홈 화면의 탭바 구현은 headlessui 라이브러리를 사용하면 간단하게 구현할 수 있기 때문에 사용하였습니다.

 

4. 시간, 폰트, 색깔 설정 구현

사실 이 프로젝트에서 메인 기능입니다.

환경 설정 모달에서 시간, 폰트, 색깔을 변경하면 모든 부분에서 변경되어야 하기 떄문에 state를 전역으로 관리해줘야 합니다.

그래서 redux로 관리하는 것은 조금 오버인 거 같아서 useContext, useReducer을 사용하여 관리했습니다.

 

 

 

 

 

디자인과 아이디어가 필요하다면 fontend mento 사이트를 이용해보는 것도 좋을 것 같습니다~!!

Pomodoro

 

GitHub - SH-Lee2/Pomodoro: 색깔, 시간, 폰트 변경할 수 있는 타이머