[React] 프로젝트 관리 시스템 만들기(feat . Supabase)

안녕하세요! 저는 이번에 React를 공부해보면서 프로젝트 관리 시스템을 만들어 보려고합니다.

저는 새로운 것을 배울때 이론적인 부분은 어느정도 공부해놓고, 그 이후에 무언가를 만들어보면서 부족한 부분을 채워나가는 편입니다.

우선 무엇을 만들지 정해야하는데 저는 프로젝트 관리 시스템(Project-Management-System) 줄여서 PMS 라고 표현하겠습니다.

위 내용을 구현하기 위해 저는 Supabase를 이용하기로 했습니다. 저는 백엔드 개발을 할 줄 모르기 때문에 다양한 기능(인증, Edge Function) 등 유용한 기능을 제공하여 개발시간을 단축시켜주고 있습니다.

주요 기능

PMS는 사용자가 프로젝트와 목표를 관리할 수 있는 시스템인데 아래에서 구현하려는 기능을 요약해보았습니다.

사용자가 프로젝트를 생성 -> 목표를 설정 -> 목표 완료 -> 해당 목표를 프로젝트에 반영

결과적으로 사용자는 프로젝트를 생성 -> 목표를 설정 -> 목표를 완료 -> 이 진행률을 프로젝트에 반영하여 시각적으로 확인할 수 있습니다.

위 내용을 어떻게 보여주면 좋을지 고민하다가 대시보드 화면을 임의로 구상한 내용입니다. (내용은 더미 데이터)

대시보드 화면에서는 최근 프로젝트 3개를 보여주려고하며, 아래에는 프로젝트의 상태( 총 갯수, 진행, 대기, 완료 ) 의 내용을 간략하게 보여주려고합니다. 그리고 우측 상단에는 생성하기 버튼을 통해 프로젝트 생성 페이지로 이동할 수 있도록 하려고합니다.

다음글에서는 이 내용을 개발하면서 사용하면 좋은 패키지들을 적용해나가보면서 실력 향상을 노려보겠습니다...!