[개인프로젝트#1] 1&2. 프로젝트 기획 및 UI

1. 기획

notion으로 책 읽은 것을 기록하고 있는데, 이를 참고하여 읽은 책의 정보를 기록하는 페이지를 만들기로 하였다.

-기능

1. 로그인/회원가입
2. 책 등록하기(Create)
3. 책 조회(Read)
4. 책 수정하기(Update)
5. 책 삭제하기(Delete)

 

-API 설정

이거는 추후에 정리할 예정이다 

 

-ERD,테이블 설정 

• User(원래는 직접 로그인 시스템 구현하려고 했으나, 구글 api 를 이용해서 로그인을 구현할 예정이다)
• Id: 유저 아이디
• nickName : 페이지에서 사용될 이름
• pw: 비밀번호
• bookShelf: 사용자의 책정보 

 

• Book(나중에 Post로 이름 바꿈)
• Id: 책 구별하는 id
• author/publisher/bookTitle: 책의 기본정보
• category: 책의 카테고리 분류하기 위해서 
• check: 책 완독 여부 확인
• review: 사용자가 작성하는 책 후기 
• startDate/endDate:  책 읽기 시작한 날짜와 끝낸 날짜 

 

 

• 한 명의 사용자는 여러권의 책을 등록 할 수 있으므로 user와 book의 관계는 1:N 관계이다 
• 변수명은 camelCase로 작성할 예정

 

2. UI 구현

-사용툴 : adobe xd 

 

    1.  메인페이지  

도메인을 입력해 들어가면 메인페이지가 보이는데, 여기서 기능으로는 책 정보를 가지고 있는 bookshelf 페이지로 이동하는 버튼과, 회원가입하고 로그인이 있다. 

 

 

2. 회원가입 페이지 

사용자 아이디와 비밀번호, 닉네임을 입력하는 것을 생각하고 만들었다.

 

3. 로그인 페이지 

아이디와 비밀번호를 입력한다

 

4.  user's Bookshelf

로그인 후 메인에서 bookshelf를 클릭하면 나오는 페이지이다. 

 

5. Register

bookshelf에서 오른쪽 '+' 버튼 눌렀을 때 나오는 페이지이다. 책의 정보인 책 이름,저자,출판사,카테고리를 입력할 수 있고, 완독여부에 따라 'Read','Unread'를 선택할 수 있다.

 

 

 

6. 특정 책 눌렀을 때 Book Review 페이지로 이동하기 

책 등록 후 책의 이름을 누르면 책의 후기를 볼 수 있는 페이지로 이동할 수 있고, 여기서 후기를 등록할 수 있다.

 

 

7. 책 후기 등록 완료 

책 후기를 작성하고 오른쪽 하단에 등록 버튼을 누르면 후기 등록이 완료되고, 작성한 후기를 볼 수 있다.