[Every Book Day]메인 페이지

#구현 화면1  

▲ 메인화면에서 도서 검색 시 도서 검색 페이지로 이동한다. 

▲How?

검색 폼에 입력한 keyword의 폼 전송을 통해 원하는 데이터를 요청하고, 도서 검색 API를 통해 데이터를 응답하는 방식으로 구현하였다. 

 

---

 

#구현 화면2

▲구매처 링크를 클릭하면 관련 책 내용의 네이버 책 페이지로 이동한다. 

 

 

---

 

#구현 화면3

▲조각글 입력하기 혹은 독후감 작성하기 버튼 클릭 시 도서명, 저자명, 구매처링크와 같은 정보가 자동으로 입력된 입력폼으로 이동한다. 

 

▲How?

1. 조각글 입력하기와 독후감 작성하기는 로그인을 하지 않으면 사용할 수 없기 때문에 로그인이 되어있지 않다면 로그인 페이지로 이동한 후 다시 조각글이나 독후감 작성페이지로 이동되도록 만들었다. 이는 로그인필터를 이용해 구현하였다. 

2. 메인화면의 검색 폼에 입력한 keyword의 폼 전송으로 원하는 데이터를 요청하고, 네이버 도서 검색 API를 통해 데이터를 응답받는 식으로 구현하였으며 이때 각 작성하기 버튼을 클릭하면 도서 검색 API를 통해 응답받은 데이터를 hidden속성을 가진 폼 전송을 통해 원하는 데이터가 입력 폼에 자동으로 입력되도록 구현하였다.  

---

#구현 화면4

▲조각글 top3를 메인화면에 보여줌, 더 보러가기 버튼 클릭 시 해당 카테고리로 이동한다.

 

▲독후감, 북클라우드, 북스마켓, 에피소드 top3~5를 메인화면에 보여줌, 모두 더 보러가기 버튼이 있다.

▲How?

1. 조각글과 독후감은 가장 많은 하트를 받은 top3 이므로 하트 테이블과의 join을 통해 하트 수로 내림차순 시킨 후 상위 3개 row를 추출하는 방식으로 구현

2. 북클라우드, 에피소드는 가장 많은 조회수 top3이므로 기존 테이블에서 조회수로 내림차순 시킨 후 상위 3개 row를 추출하는 방식으로 구현

3. 북스마켓은 북스마켓의 리스트를 불러오는 쿼리문을 재사용하여(num으로 내림차순) 메인화면에서 for문을 3번 돌려 데이터를 불러오는 방식으로 구현