마이플랜잇

서비스 소개

마이플랜잇은 플랜에서 제공되는 직관적인 투두 리스트를 통해 목표를 쉽게 달성할 수 있도록 도와주는 서비스
플랜 페이지에서 유저가 원하는 플랜을 구입하면, 투두 페이지에서 구입한 플랜의 투두가 날짜별로 나열이 되고, 각 투두는 체크박스를 통해 완료 가능하도록 구현했습니다.
각 투두를 클릭하면 상세 페이지로 이동이 되고, 상세 페이지에서 유저들은 주제에 알맞는 학습이 가능합니다.

React: 자바스크립트 UI 작업을 위한 라이브러리로, 컴포넌트 단위로 작업이 가능하기에 재사용성 측면에서 효과적이고, 모바일앱에 어울리는 SPA 형태의 웹을 개발하기에 최적인 라이브러리이기 때문에 사용했습니다.
Redux-ToolKit: 전역 상태관리를 위한 라이브러리로, 유저가 로그인했을 때 전달받는 Access/Refresh Token들과 유저의 정보를 전역적으로 관리하기 위해 사용했습니다.
Styled-Component: CSS 파일 없이 자바스크립트 안에서 CSS 작업을 하기 위한 라이브러리로, 서비스 스타일링의 대부분을 Styled-Component를 통해서 작업했습니다. Props 전달이 가능하기 때문에 상태에 따른 스타일링을 더욱 간편하게 처리할 수 있습니다.
Axios: 백엔드와 통신을 하기 위한 HTTP 클라이언트 라이브러리로, 자바스크립트 내장 라이브러리인 fetch 함수엔 없는 인터셉터와 더욱 간편한 에러 캐치를 위해 사용했습니다.

모든 페이지들은 https://my-plan-it-client.vercel.app/ 에서 방문 가능합니다.

백엔드 서버를 닫은 관계로 직접적인 데이터 추가는 불가능한 점 양해 부탁드립니다.

로그인	메인

서비스를 키면 볼 수 있는 로그인 페이지입니다. 국내 유저들이 서비스에 더욱 간편한 로그인이 가능하도록 카카오 로그인을 구현 했고, 추후 해외 유저들을 대상으로 한 확장을 고려해서 구글 로그인도 구현을 했습니다. 앱스토어에 배포를 하기 위해 필수인 애플 로그인도 구현했습니다.	로그인이 성공하면 보여지는 메인/투두 페이지입니다. 처음 유저들이 로그인했을 때 구입한 플랜이 없기 때문에 바로 플랜 탐색이 가능하도록 바로가기 버튼이 있고, 플랜 구매를 하면 당일부터 유저에게 알맞는 투두들이 제공됩니다

투두 페이지 (플랜 구입 후)	투두 상세 페이지

*백엔드 서버를 닫은 관계로 피그마 스크린샷으로 대체합니다.* 유저가 원하는 플랜을 구입하면 이렇게 각 플랜에서 제공되는 투두들이 표시가 됩니다. 유저들은 투두들을 통해 관련 지식을 더욱 손쉽게 학습할 수 있습니다.	*백엔드 서버를 닫은 관계로 피그마 스크린샷으로 대체합니다.* 각 투두를 클릭하면 표시되는 페이지입니다. 유저는 주제에 맞는 정보를 상세 페이지에서 제공 받고, 학습을 성공적으로 완료하면 투두페이지에서 체크 표시를 하게 됩니다.

마이 투두 페이지	마이 투두 페이지 (투두 추가 후)

유저들이 구입한 플랜에서 제공되는 투두들이 아닌 개인적인 투두들을 기록하기 위한 페이지입니다. 유저들은 마이 투두 페이지를 통해 각자의 일정을 관리할 수 있습니다.	*백엔드 서버를 닫은 관계로 피그마 스크린샷으로 대체합니다.* 유저가 마이 투두 페이지에서 투두를 추가한 상태입니다.

마이 플랜	설정

*백엔드 서버를 닫은 관계로 피그마 스크린샷으로 대체합니다.* 유저가 플랜 페이지에서 찜하기를 한 플랜들, 구매한 플랜들, 그리고 현재 이용중인 플랜들을 모아볼 수 있는 페이지입니다.	마이 플랜 페이지에서 이어지는 설정 페이지입니다. 유저들은 설정 페이지에서 공지사항을 확인할 수 있고, 로그아웃 및 탈퇴가 가능합니다

플랜 구매	플랜 상세 소개 페이지

*백엔드 서버를 닫은 관계로 피그마 스크린샷으로 대체합니다.* 유저들이 플랜을 구입하기 위해 방문하는 페이지입니다. 유저는 루틴 카테고리와 성장 카테고리에서 원하는 플랜을 고를 수 있고, 찜하기 버튼을 통해 장바구니에 담듯이 플랜을 찜할 수 있습니다.	*백엔드 서버를 닫은 관계로 피그마 스크린샷으로 대체합니다.* 유저가 플랜를 골랐을 때 보여지는 플랜 상세 페이지입니다. 유저는 상세 페이지에서 이 플랜을 통해 배울 수 있는게 뭔지, 그리고 이룰 수 있는지 뭔지를 판단하고, 구매하기 버튼을 통해서 플랜 구입이 가능합니다.