13. 영화 찜 목록 구현

유저 테이블을 제작, 이 프로젝트는 협업이기 때문에 유저부분을 맡은 사람이 테이블을 제공하였다.

 

 

찜 목록 테이블 역시 만든다.

 

 

 

완성된 테이블

 

 

 

유저VO 부분

 

 

Security 유저로 현재 로그인된 유저의 닉네임을 불러올 예정이다.

 

 

 

이미 만든 상세페이지 컨트롤러에, @AuthenticationPrincipal로 SecurityUser를 불러 온 후, 현재 로그인된 유저의 아이디를 댓글창에 나타내게 할 것이다. 만일 비로그인된 상태라면 "로그인 후 작성 가능!"이라는 메세지를 전달한다.

 

 

 

댓글 쓰기 오른쪽 상단에 "로그인 후 작성 가능!" 이라는 메세지가 생겼다. 만일 로그인된 상황이라면 이곳에 로그인된 유저의 닉네임이 뜨게 된다.

 

 

 

 

본격적인 찜하기 구현... insert문으로 찜한 유저와 해당 영화 넘버를 삽입하도록 할 것이다. 그리고 찜 취소는 delete문으로, 그리고 찜 여부를 확인하기 위해 select문으로 해당 유저가 해당 영화에 찜 했는지 확인을 할 것이다.

 

 

 

찜하기 버튼을 눌렀을 시...  (likeVO.setUserId부분은 무시하자... 없어도 된다)

 

 

먼저 자바스크립트를 이렇게.. 위에서 만든 댓글창의 유저 부분을 띄우는 곳을 가져와서 만약 그 곳의 메세지가 "로그인 후 작성 가능!"이라면 비로그인 된 상태이기 때문에 "로그인을 해 달라"며 창을 띄우고 return한다. 찜했을 경우 아이콘이 빨간색으로 변경되게 할 것인데, 만약 빨간색일 경우 찜한 상태이므로 찜하기 해제 함수를 실행하고, 빨간색이 아닐 경우 찜하기 함수를 실행할 예정이다.

 

 

먼저 찜하기 함수... 댓글 쓰기 부분이랑 비슷하다. 해당 유저의 아이디와 해당 영화의 고유 넘버를 들고와서 json으로 변환후 해당 컨트롤러로 전달한다.

 

 

 

찜하기 해제 부분.. 그냥 DeleteMapping으로 처리하고.. 아이콘 색깔을 원래대로 되돌려 놓는다.

 

 

 

찜 여부 확인.. 해당 유저로 해당 영화에 찜한 여부가 확인되었다면.. 아이콘을 빨간색으로 변경한다.

 

 

 

로그인 안한 상황에서 찜 버튼을 눌렀을 시 로그인을 하라고 명령한다.

 

 

 

로그인을 하고 찜 버튼을 눌렀을 시, 버튼이 빨간색으로 변하고, db에 해당 유저와 영화 넘버가 저장되는 걸 확인할 수 있다. 그리고 이미 누를 찜 버튼을 다시 누르면 색깔이 원래대로 돌아오고, db에는 해당 데이터가 삭제되어 찜 여부가 해제되는걸 확인 할 수 있다.