Personal project - My Ranking

개요

테이블을 만들고 드래그앤드롭으로 순위를 관리할 수 있습니다. 사용자가 테이블 카테고리를 생성할 때 type필드와 select필드를 선택하고 추가하며 커스터마이징 할 수 있습니다. 테이블에 리스트를 추가하고 수정, 삭제가 가능합니다. 테이블을 보드로 전환할 수 있습니다. 회원가입과 로그인 기능이 있습니다.

프로젝트 목적

• 스스로 기획하고 구현한 첫 번째 개인 프로젝트입니다.
• Firebase로 CRUD를 구현합니다.

기술 스택

폴더 구조

src
 ┣ components
 ┃ ┣ AddCategoryModal.tsx
 ┃ ┣ CategoryCard.tsx
 ┃ ┣ Footer.tsx
 ┃ ┣ Header.tsx
 ┃ ┣ PaintBoard.tsx
 ┃ ┣ PaintCard.tsx
 ┃ ┣ RegisterModal.tsx
 ┃ ┗ UpdateModal.tsx
 ┣ routes
 ┃ ┣ Board.tsx
 ┃ ┣ Home.tsx
 ┃ ┣ Join.tsx
 ┃ ┣ Login.tsx
 ┃ ┣ MyLike.tsx
 ┃ ┣ MyLikes.tsx
 ┃ ┗ Table.tsx
 ┣ styles
 ┃ ┣ GlobalStyle.ts
 ┃ ┗ styled.d.ts
 ┣ App.tsx
 ┣ atom.tsx
 ┣ custom.d.ts
 ┣ errors.ts
 ┣ fbase.tsx
 ┗ index.tsx

주요 기능

회원가입 및 로그인

• 이메일로 회원가입과 로그인을 할 수 있습니다.
• 유효성 검사가 있습니다.

카테고리 커스터마이징

• 사용자가 카테고리를 생성할 수 있습니다.
• type필드와 select필드를 선택하여 추가할 수 있습니다.

리스트CRUD 및 드래그앤드롭

• 리스트를 생성하고 더블클릭하여 수정하고 삭제할 수 있습니다.
• 드래그앤드롭으로 랭킹을 변경할 수 있습니다.
• 파이어베이스와 연동되어 실시간으로 업데이트됩니다.

테이블모드 및 보드모드

• 테이블모드에서 랭킹을 조작할 수 있고 보드모드에서 한 눈으로 볼 수 있습니다.
• 보드모드는 select필드 기준으로 생성됩니다.

파이어베이스

사용자 계정

생성된 카테고리 저장 구조

리스트 저장 구조