[Spring] 영화 리뷰 처리

in Study on Spring, Web
[Spring] 영화 리뷰 처리

영화 조회 페이지에 보여질 리뷰를 작성해봅시다.


영화의 리뷰는 조회 페이지에 리뷰 글과 리뷰 추가 버튼을 생성한 뒤 이벤트를 작성하는 방식으로 구현합니다.


1. ReviewDTO 생성


1

먼저 Review 엔티티에 맞는 ReviewDTO를 작성합니다.
Review는 Movie와 Member를 참조하는 구성으로 되어 있으므로 ReviewDTO는 엔티티와는 달리 Member의 mid나 Movie의 mno를 참조하는 형태로 변경됩니다.
ReviewDTO는 화명네 필요한 모든 내용을 가지고 있어야하기 때문에 회원의 아이디와 닉네임, 이메일도 같이 처리할 수 있도록 설계합니다.

2. Review - changeGrade(), changeText() 작성


2

리뷰의 수정 기능을 위해 Revie 엔티티에 changeGrade()와 changeText() 메소드를 작성합니다.

3. ReviewService 생성


3

ReviewService 인터페이스를 작성합니다. 리뷰의 조회, 작성, 삭제, 수정에 대한 함수를 선언한 뒤 Service 인터페이스에 필요한 dtoToEntity와 entityToDTO를 작성합니다.

4. ReviewServiceImpl 생성


4

ReviewService 인터페이스의 구현을 위한 ReviewServiceImpl을 작성합니다.
앞서 선언한 getListOfMovie(), register(), modify(), remove()를 구현합니다.

5. ReviewController 생성


5

RevieController는 Ajax로 동작하기 때문에 @RestController로 설계하고, ReviewDTO는 JSON 형태로 반환되어 처리됩니다.
새로운 영화 리뷰의 등록 역시 JSON 포맷으로 전송 처리합니다.
getList(), addRevie(), modifyReview(), removeReview()는 각각의 Mapping 방식을 지정하고 URL에서 받은 파라미터를 통해 조회, 작성, 삭제, 수정을 처리하도록 작성합니다.

6. read.html - 리뷰 모달 처리


6

서비스와 컨트롤러를 작성했으니 리뷰에 대한 화면을 작성합니다.
기존의 영화 리뷰 조회화면인 read.html 아래에 리뷰를 위한 모달창을 작성합니다.
모달창의 내부에는 시간이 hidden 속성으로 존재하고 리뷰어의 ID, 리뷰어가 준 평점, 리뷰의 내용이 존재하고 모달창 아래에는 닫기, 저장하기, 수정하기, 삭제하기 버튼을 만들어둡니다.

7. read.html - starrr 라이브러리 다운로드


7

리뷰어가 주는 평점을 별 채우기 이미지로 작성하기 위해 starrr 깃허브에 들어가 css 파일과 js 파일을 다운은 뒤 resource에 각각 추가합니다.

8. read.html - 이미지 모달 및 starrr 적용


8

조회 화면에서 섬네일 이미지를 클릭했을 때 원본 이미지를 출력하는 모달을 작성합니다. 이미지 모달은 modal-body 부분을 비운채로 작성합니다.
이미지 모달의 코드 아래에 starrr를 불러오도록 링크 태그를 작성합니다.
starrr에 대한 스크립트를 작성하고 리뷰 모달의 확인을 위한 코드를 작성합니다.

9. read.html - 리뷰 모달 결과


9

조회 화면에 접속한다면 작성한 리뷰 모달이 나오는 것과 불러온 starrr 역시 적용된 것을 확인할 수 있습니다.

10. read.html - 리뷰 등록 버튼 및 리뷰 공간 작성


10

리뷰의 등록을 위한 버튼을 추가합니다. 또한 영화 리뷰가 보여질 reviewList <div>를 작성합니다.

11. read.html - 리뷰 등록 버튼 이벤트 작성


11

추가한 리뷰 등록 버튼의 이벤트를 작성합니다.
버튼을 클릭할 경우 작성자와 리뷰 내용이 비어있고 삭제 버튼과 수정 버튼이 가려진 리뷰 모달창이 나오도록 코드를 작성합니다.

12. read.html - 리뷰 등록 버튼 결과


12

조회 화면에서 리뷰 등록 버튼을 클릭한 결과 리뷰 모달창에서 저장 버튼과 닫기 버튼만 보여지는 것을 확인할 수 있습니다.

13. read.html - 리뷰 저장 버튼 이벤트 작성


13

리뷰 모달창의 저장 버튼을 클릭할 때의 이벤트를 작성합니다.
저장을 누를 경우 해당 모달창의 작성된 내용이 Ajax를 통해 JSON 데이터로 만들어서 전송하게 합니다. 데이터 처리가 성공할 때 self.location.reload()를 통해 URL을 다시 호출하게 합니다.

14. read.html - 리뷰 저장 버튼 결과 1


14

위 그림과 같이 점수를 적은 뒤 리뷰 저장 버튼을 클릭해보면

15. read.html - 리뷰 저장 버튼 결과 2


15

화면이 새로고침되며 리뷰의 평균 점수가 바뀐 것을 확인할 수 있습니다.

16. read.html - getMovieReviews() 작성


16

조회 페이지에서 리뷰를 볼 수 있도록 Ajax를 이용해 MovieReviewDTO들의 리스트를 JSON 형태로 받아 페이지가 열릴 때 호출되도록 처리합니다.
formatTime()은 가져온 리뷰의 날짜를 포매팅 하는 함수입니다.
getJSON()을 이용해 MovieReviewController를 호출해 reviewList라는 클래스 속성으로 <div>의 내용물을 채우도록 합니다.

17. read.html - getMovieReviews() 결과


17

조회 화면 아래에 작성된 리뷰들이 보여지는 것을 확인할 수 있습니다.

18. read.html - 리뷰 클릭 이벤트 작성


18

리뷰 목록에서 리뷰를 선택할 때 수정이나 삭제가 가능하도록 리뷰를 클릭할 때의 이벤트를 작성합니다.
리뷰 목록을 클릭하면 저장 버튼은 숨긴 채 해당 리뷰의 mid와 평점, 텍스트를 가져오도록 합니다. 이 때 reviewnum의 경우 수정 및 삭제에서 사용할 수 있도록 외부에 선언합니다.

19. read.html - 리뷰 클릭 이벤트 결과


19

리뷰 목록에서 리뷰를 선택한 결과 해당 리뷰에 대한 데이터를 갖고있는 모달창이 나오는 것을 확인할 수 있습니다.

20. read.html - 리뷰 수정 버튼 이벤트 및 삭제 버튼 이벤트 작성


20

리뷰 수정 버튼은 클릭시 PUT 방식으로 처리하고 리뷰 삭제 버튼은 DELETE 방식으로 처리하도록 작성합니다.
또한 리뷰 저장 버튼의 이벤트와 동일하게 성공시 sefl.loacation.reload()를 사용하도록 작성합니다.

21. read.html - 리뷰 수정 버튼 이벤트 결과


21

리뷰 모달창의 내용을 수정한 뒤 수정 버튼을 누른 결과 정상적으로 리뷰가 수정되는 것을 확인할 수 있습니다.

22. read.html - 리뷰 삭제 버튼 이벤트 결과


22

리뷰 모달창의 삭제 버튼을 누른 결과 정상적으로 리뷰가 삭제되는 것을 확인할 수 있습니다.

23. UploadController - getFile() 수정


23

조회 페이지에서 섬네일을 클릭할 때 원본 이미지를 보게 하기 위해 getFile()을 수정합니다.
UploadController의 ‘display/fileName=’을 활용하는 방법도 있지만 섬네일의 파일이 중간에 ‘s_‘만 추가된 점을 활용해 특정 파라미터 값이 존재할 경우 원본 파일을 보내주는 형태로 수정하도록 합니다.
파라미터에 size를 추가하여 size가 1일 경우 원본 파일을 보내도록 수정합니다.

24. read.html - uploadResult


24

섬네일 이미지를 클릭할 때 원본 이미지 모달창을 띄우도록 하기 위해 uploadResult를 확인합니다.

25. read.html - uploadResult 클릭 이벤트 작성


25

화면에서 섬네일이 포함된 <li>를 클릭하면 data-file 속성값을 가져와 imageModal창에 이미지 태그로 추가합니다. 이 때 size 파라미터를 전달해 원본 이미지를 가져오도록 작성합니다.

26. read.html - uploadResult 클릭 이벤트 결과


26

조회 화면에서 섬네일 이미지를 클릭한 결과 정상적으로 이미지 모달창에 원본 이미지가 보이는 것을 확인할 수 있습니다.

© 2022. All rights reserved.