프로젝트 소개
- 프로젝트 명 : Bookie
- 소개
- 한 줄 정리 : 도서 리뷰 사이트
- 내용 : 읽은 도서의 감상을 공유할 수 있는 사이트입니다.
필수 구현 사항
- 로그인, 회원 가입
- Authentication 에서 제공하는 api를 이용하여 아래 회원 가입, 로그인을 구현해보세요.
- 아이디(이메일), 패스워드
- 소셜 로그인 (구글, 깃헙)
- CRUD
- Firestore 에서 제공하는 api를 이용하여 CRUD 데이터베이스 핸들링을 구현해보세요.
- CUD(등록, 수정, 삭제)가 일어날 때 마다 R(조회)해서 자연스럽게 화면 변경을 해보세요.
- 마이 페이지
- 내 게시물 보기
- 프로필 수정 기능
- 배포하기
- Vercel 이라는 호스팅플랫폼을 이용해 배포합니다.
- 배포에 적용될 브랜치는 main 또는 master 브랜치로 적용합니다.
페이지 분류
- 로그인
- 회원가입
- 리뷰 페이지
- 게시글 작성 모달
- 리뷰 상세페이지
- 마이페이지
기능 분류
1. 로그인
- id, pw 입력
- 유저 id pw 내용 보내기
- 유저 로그인 정보 받아오기
- firebase Authentication 에서 제공하는 api 연동
- 소셜 로그인 요청 기능
- 소셜 로그인 (firebase Authentication 에서 제공하는 api)
2. 회원가입
- id(email), pw, nickname, category 입력
- id(email), pw, nickname, category 보내기 (firebase)
- 회원가입시 로그인해주고 메인으로 페이지 이동하기
- 헤더 - 로그인 or 회원가입 클릭 시 해당 페이지로 이동
- 카테고리 클릭시 선택한 카테고리 값을 가지고 메인페이지로 이동
- 로그인, 비로그인 상태에 따른 페이지 분기
3. 리뷰 페이지
- 헤더에 로그인, 회원가입 페이지로 이동 기능
- 헤더에 프로필 사진 보여주기
- 프로필 사진 클릭시 마이페이지 이동
- 렌딩페이지에서 선택한 카테고리 게시글 목록 보여주기
- 사이드바에 카테고리 리스트 보여주기
- 카테고리 선택시 선택 했는지 상태 보여주기
- 카테고리 선택에 따른 게시글 보여주기
- 게시글 작성 페이지로 이동 기능 (모달로 책 조회 조회한 데이터 가지고 상세페이지로 이동)
4. 게시글 작성 모달
- 메인(모달)에서 선택 데이터 가져오기(책 제목, 이미지 url)
- 게시글 제목, 감상 내용, 카테고리(category) 입력
- 작성일자 자동 등록
- 입력 폼 firebase 보내기
- 게시글 등록 후 메인 보내기
5. 리뷰 상세페이지
- 헤더 보여주기
- firebase에서 게시글 데이터 가져오기
- 가져온 데이터 뿌려주기 (제목, 내용, 카테고리, 작성자(nickname), 작성일자, 책정보)
6. 마이페이지
- 유저 정보 받아오기
- 프로필 이미지 보여주기
- 닉네임 보여주기
- 프로필, 닉네임 수정하기
- 자신이 작성 한 글 목록 보여주기
- 글 선택시 상세 페이지로 이동하기
- 로그아웃
와이어프레임
'웹개발 > PRJ' 카테고리의 다른 글
[최종프로젝트] 1차 회의 - 그라운드룰, 주제정하기 (0) | 2024.03.30 |
---|---|
[react prj] 선물 추천 사이트 만들기 (0) | 2024.02.28 |
[React] 도서리뷰사이트 prj - Firebase를 이용해 Create, Read 기능 구현하기 (0) | 2024.02.13 |
[React] Weekly to do list 만들기 2 (0) | 2024.01.19 |
[react] weekly to-do-list 만들기1 (0) | 2024.01.18 |