PLANIT은 계획을 뜻하는 PLAN 과 행성을 뜻하는 PLANET의 뜻을 포함한 이름으로, 목표를 계획하고 달성하는 기쁨을 줄 수 있도록 도와주는 서비스
Planit 링크
Front-End Repo 링크
Back-End Repo 링크
Notion 링크
소개 영상
우리는 하루에도 수 많은 일들을 합니다.
할 일을 쉽게 기록하고 얼마나 잘 했는지 확인할 수 있다면 얼마나 좋을까요?
Planit은 할 일을 완료할 때마다 행성이 자라나면서 동기부여를 제공하는 To-do list 서비스입니다.
- 계획적인 하루를 보내고 싶으신가요?
- To-do list를 작성만 하고 실행하지 않은 적이 있나요?
Planit에서 To-do를 완료하고 행성을 키워보세요!
- 카카오를 통한 소셜 로그인 및 이메일을 통한 회원가입
- 페이지 설명
- 소셜 or 일반로그인
- 온보딩페이지(회원가입시 온보딩 페이지를 통해 플랜잇이 어떠한 서비스인지 알 수 있음)
- 페이지 설명
- 메인페이지에서 투두 달성을 통해 얻을 수 있는 행성을 볼 수 있습니다
- 행성은 달성수에 따라 변화함으로써, 사용자에게 To Do 달성을 더 재미있게 할 수 있도록 흥미와 동기를 부여함.
- 행성 커스텀 기능
- 페이지 설명
- 오늘 얻을 수 있는 행성을 볼 수 있고, 다음 단계의 행성을 얻기 위해 얼마나 더 달성해야 하는지 알 수 있음
- 메모기능
- 투두 작성은 버튼 없이 엔터나 다른 곳을 클릭하여 저장할 수 있음
- 프로필 사진과 닉네임을 변경할 수 있음.
- 페이지 설명
- 닉네임 중복이 가능하며, 프로필 사진을 설정할 수 있음.
- 비밀번호 변경
- 로그아웃 가능
| 이름 | 사용 이유 |
|---|---|
| React | Component 단위의 작성을 통해 UI를 구성하는 개별적인 뷰단위의 개발을 하여 하나의 컴포넌트를 여러 부분에 다중 사용할수 있게 만들거 생산성과 유지 보수를 용이하게 하고 JSX를 사용해 컴포넌트를 쉽게 구성할수 있도록 해주며 Vitual DOM을 이용해 연산 비용을 줄일수 있기에 React 라이브러리를 사용하게 되었습니다. |
| React-Redux Toolkit | React 상태관리를 전역으로 Redux store에 저장해 각각 기능 마다 Slice 로 구분해 서버에온 데이터들을 관리해주기 위해서 서 React-Redux ToolKit 을 사용했습니다. |
| Context API | 단순히 데이터를 Redux store와 Slice 로 dispatch 시킬필요 없이 하위 컴포넌트에 전역으로 데이터를 내려주기 위해서 Context API를 사용했습니다. |
| Styled-Component | CSS 를 컴포넌트 단위로 쪼갤수 있어 사용 빈도가 높은 CSS를 재사용할수 있고 다양한 스타일들을 분기처리를 할수있어 Styled-Component 를 사용했습니다. |
| Axios | 우선 Fetch 같은 경우 호환성이 떨어져 웹브라우저가 구버전일 경우 지원하지 않는 경우가 있으며, Fetch에 비해 객체의 형태로 Param이나 Query를 성정할수 있어 가독성이 뛰어나며, 따로 JSON형태의 변환이 필요없이 자동 변환이 되고 개선된 error handling의 성능을 가지고 있기에 Axios를 사용하게 되었습니다. |
- 상위 Header 재사용으로 인해 navigate redirect 문제 상세보기 - WIKI 이동
- 행성 사진들이 생명주기때문에 undefined 되는 문제 상세보기 - WIKI 이동
- 새로고침시 State 에 저장된 값들이 없어 지는 현상 상세보기 - WIKI 이동
- 사이드 네비게이션 을 Hook 으로 전역 관리 하기 상세보기 - WIKI 이동
- 27가지 행성이미지 경우의 수를 행성을 렌더 시키기 위한 분기처리 상세보기 - WIKI 이동
- 카카오 로그인 로그아웃 이후 비밀번호 없이 재로그인 상세보기 - WIKI 이동