[Spring] 댓글 페이지의 화면 처리

[Spring] 댓글 페이지의 화면 처리

 

이전 글

2021.08.15 - [Spring] - [Spring] 댓글의 페이징 처리 - Data 처리편

2021.08.14 - [Spring] - [Spring] 댓글의 수정/삭제 이벤트 처리

2021.08.14 - [Spring] - [Spring] 특정 댓글의 클릭 이벤트 처리

2021.08.13 - [Spring] - [Spring] 새로운 댓글 처리

2021.08.11 - [Spring] - [Spring] 댓글 목록 HTML 처리

 

댓글의 화면 처리

1. 게시물을 조회하는 페이지에 들어오면 기본적으로 가장 오래된 댓글들을 가져와서 1페이지에 보여줍니다.

2. 1페이지의 게시물을 가져올 때 해당 게시물의 댓글의 숫자를 파악해서 댓글의 페이지 번호를 출력합니다.

3. 댓글이 추가되면 댓글의 숫자만을 가져와서 최종 페이지를 찾아서 이동합니다.

4. 댓글의 수정과 삭제 후에는 다시 동일 페이지를 호출합니다.

 

댓글 페이지 계산과 출력

Ajax로 가져오는 데이터가 replyCnt와 list라는 데이터로 구성되므로 이를 처리하는 reply.js의 내용 역시 이를 처리하는 구조로 수정합니다.

reply.js

reply.js를 이용해서 댓글의 페이지를 호출하는 부분은 showList 함수이므로 페이지 번호를 출력하도록 수정합니다.

 

get.jsp 수정 - showList 함수

page 변수를 이용해서 댓글 페이지를 가져오게 됩니다. 이때 page 번호가 '-1'로 전달되면 마지막 페이지를 찾아서 다시 호출하게 됩니다. 사용자가 새로운 댓글을 추가하면 showList(-1);을 호출해 전체 댓글의  숫자를 파악하게 합니다. 이 후에 다시 마지막 페이지를 호출해서 이동시키는 방식으로 동작시킵니다.

댓글은 화면상 댓글 아래에 <div class='panel-footer'>를 하나 추가하고, <div>의 아래쪽에 추가합니다.

 

get.jsp

 

get.jsp에 댓글 페이지 번호를 출력하는 로직을 작성합니다.

get.jsp 수정

showReplyPage( )는 기존 Java로 작성되는 PageMaker의 JS 버전에 해당합니다. 댓글 페이지를 문자열로 구성한 후 <div>의 innerHTML로 추가합니다. showList( )의 마지막에 페이지를 출력하도록 수정합니다.

실행결과

마지막 처리는 페이지의 번호를 클릭했을 때 새로운 댓글을 가져오도록 하는 부분입니다.

 

get.jsp, 댓글 페이징 버튼의 이벤트 처리

댓글의 페이지 번호는 <a> 태그 내에 존재하므로 이벤트 처리에서는

<a> 태그의 기본 동작을 제한하고(preventDefault( )) 댓글 페이지 번호로 해당 페이지의 댓글을 가져옵니다.

 

 

댓글의 수정과 삭제

댓글의 페이지 처리가 적용되었다면, 댓글의 수정/삭제 시에도 현재 댓글이 포함된 페이지로 이동하도록 수정합니다.

 

댓글 선택 시 페이지 번호(pageNum)를 저장합니다.

get.jsp

댓글의 수정/삭제 후 저장된 페이지 번호(pageNum)를 파라미터로 넣어 댓글 목록을 보이도록 합니다. showList( )

 

get.jsp

브라우저에서 댓글의 등록, 수정, 삭제 작업은 모두 페이지 이동을 하게 됩니다.

---

오늘은 댓글 페이지의 화면 처리에 대해 알아보았습니다.^^