[B -2-50] Ajax 댓글 처리 23 : [댓글 페이지의 화면 처리]

댓글의 화면 처리 방식

 

• 게시물을 조회하는 페이지에 들어오면 기본적으로 제일 오래된 댓글들을 갖고와서 1페이지에 보여준다.  (하지만, 필자의 프로젝트에서는 제일 최신 댓글들을 1페이지에 보여주는 식으로 처리할 것이다.)
• 1페이지의 게시글을 갖고올 때 해당 게시글의 댓글의 숫자를 파악해서 댓글의 페이지 번호를 출력한다.
• 댓글이 추가되면 댓글의 숫자만을 갖고와서 최종 페이지를 찾아서 이동한다.
• 댓글의 수정과 삭제 후에는 다시 동일 페이지를 호출한다.

---

/webapp/js/

reply.js

getList()

console.log("Reply Module........");

var replyService = (function() {

	function add(reply, callback, error) {
		console.log("add reply...............");

		$.ajax({
			type : 'post',
			url : '/replies/new',
			data : JSON.stringify(reply),
			contentType : "application/json; charset=utf-8",
			success : function(result, status, xhr) {
				if (callback) {
					callback(result);
				}
			},
			error : function(xhr, status, er) {
				if (error) {
					error(er);
				}
			}
		})
	}
	
	function getList(param, callback, error) {

	    var bno = param.bno;
	    var page = param.page || 1;
	    
	    $.getJSON("/replies/pages/" + bno + "/" + page + ".json",
	        function(data) {
	          if (callback) {
	            //callback(data); // 댓글 목록만 가져오는 경우 
	        	  callback(data.replyCnt, data.list); // 댓글 숫자랑 목록을 갖고오는 경우 
	          }
	        }).fail(function(xhr, status, err) {
		      if (error) {
		        error();
		      }
	        });
	}
	
	function remove(rno, callback, error) {
		$.ajax({
			type : 'delete',
			url : '/replies/' + rno,
			success : function(deleteResult, status, xhr) {
				if (callback) {
					callback(deleteResult);
				}
			},
			error : function(xhr, status, er) {
				if (error) {
					error(er);
				}
			}
		});
	}
	
	function update(reply, callback, error) {

		console.log("RNO: " + reply.rno);

		$.ajax({
			type : 'put',
			url : '/replies/' + reply.rno,
			data : JSON.stringify(reply),
			contentType : "application/json; charset=utf-8",
			success : function(result, status, xhr) {
				if (callback) {
					callback(result);
				}
			},
			error : function(xhr, status, er) {
				if (error) {
					error(er);
				}
			}
		});
	}
	
	function get(rno, callback, error) {

		$.get("/replies/" + rno + ".json", function(result) {

			if (callback) {
				callback(result);
			}

		}).fail(function(xhr, status, err) {
			if (error) {
				error();
			}
		});
	}
	
	function displayTime(timeValue) {

		var today = new Date();
		var gap = today.getTime() - timeValue;
		var dateObj = new Date(timeValue);
		var str = "";

		if (gap < (1000 * 60 * 60 * 24)) {

			var hh = dateObj.getHours();
			var mi = dateObj.getMinutes();
			var ss = dateObj.getSeconds();

			return [ (hh > 9 ? '' : '0') + hh, ':', (mi > 9 ? '' : '0') + mi,
					':', (ss > 9 ? '' : '0') + ss ].join('');

		} else {
			var yy = dateObj.getFullYear();
			var mm = dateObj.getMonth() + 1; // getMonth() is zero-based
			var dd = dateObj.getDate();

			return [ yy, '/', (mm > 9 ? '' : '0') + mm, '/',
					(dd > 9 ? '' : '0') + dd ].join('');
		}
	}
	
	
	return {
		add : add,
		getList : getList,
		remove : remove,
		update : update,
		get : get,
		displayTime : displayTime
	};

})();

 

Ajax로 가져오는 데이터가 replyCnt와 list라는 데이터로 구성되므로 이를 처리하는 구조로 수정한다.

기존에서 변경되는 부분은 callback 함수에 해당 게시글 댓글 수(replyCnt) 와 페이지에 해당하는 댓글 데이터를 전달하도록 하는 부분이다.

 

---

views/board

get.jsp

showList() / panel-footer 추가

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@ include file="../includes/header.jsp"%>
<div class="row">
	<div class="col-lg-12">
		<h1 class="page-header">게시판 조회</h1>
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading">게시글 조회 페이지</div>
			<!-- /.panel-heading -->
			<div class="panel-body">
					<div class="form-group">
						<label>글 번호</label>
						<input class="form-control" name="bno" value='<c:out value="${board.bno }"/>' readonly="readonly">
					</div>
					<div class="form-group">
						<label>작성자</label>
						<input class="form-control" name="writer" value='<c:out value="${board.writer }"/>' readonly="readonly">
					</div>
					<div class="form-group">
						<label>제목</label>
						<input class="form-control" name="title" value='<c:out value="${board.title }"/>' readonly="readonly">
					</div>
					<div class="form-group">
						<label>내용</label>
						<textarea class="form-control" rows="10" name="content" readonly="readonly"><c:out value="${board.content}"/></textarea>
					</div>
					
					<button data-oper='modify' class="btn btn-default">수정</button>
					<button data-oper='list' class="btn btn-info">목록</button>
					
					<!-- operForm 시작 -->
					<form id='operForm' action="/board/modify" method="get">
						<input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
						<input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum}"/>'>
						<input type='hidden' name='amount' value='<c:out value="${cri.amount}"/>'>
						
						<!-- Criteria의 키워드와 타입에 대한 처리 시작 -->
						<input type='hidden' name='keyword' value='<c:out value="${cri.keyword}"/>'>
						<input type='hidden' name='type' value='<c:out value="${cri.type}"/>'> 
						<!-- Criteria의 키워드와 타입에 대한 처리 종료 -->
					</form>
					<!-- operForm 종료 -->
			</div>
			<!-- /.panel-body -->
		</div>
		<!-- /.panel -->
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.row -->

<!-- 댓글 목록 표시 영역 시작 -->

<div class='row'>

  <div class="col-lg-12">

    <!-- /.panel -->
    <div class="panel panel-default">
      <div class="panel-heading">
        <i class="fa fa-comments fa-fw"></i> 댓글 목록
        <button id='addReplyBtn' class='btn btn-primary btn-xs pull-right'>댓글 작성</button>
      </div>
      
      <!-- /.panel-heading -->
      <div class="panel-body">
      
        <ul class="chat">

        </ul>
        <!-- ./ end ul -->
      </div>
      <!-- /.panel .chat-panel -->

	<div class="panel-footer"></div>


		</div>
  </div>
  <!-- ./ end row -->
</div>

<!-- 댓글 목록 표시 영역 끝 -->

</div>

<!-- 모달 추가 시작 -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
            <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">댓글 등록</h4>
            </div>
            <div class="modal-body">
            	<div class="form-group">
					<label>작성자</label> 
					<input class="form-control" name='replyer' value='replyer'>
				</div>
				<div class="form-group">
					<label>내용</label> 
					<input class="form-control" name='reply' value='New Reply!!!!'>
				</div>      
				<div class="form-group">
					<label>일자</label> 
					<input class="form-control" name='replyDate' value='2018-01-01 13:13'>
				</div>
            </div>
			<div class="modal-footer">
		        <button id='modalModBtn' type="button" class="btn btn-warning">수정</button>
		        <button id='modalRemoveBtn' type="button" class="btn btn-danger">삭제</button>
		        <button id='modalRegisterBtn' type="button" class="btn btn-primary">등록</button>
		        <button id='modalCloseBtn' type="button" class="btn btn-default">닫기</button>
			</div>          
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- 모달 추가 끝 -->

<script type="text/javascript">
$(document).ready(function() {

  var operForm = $("#operForm"); 

  $("button[data-oper='modify']").on("click", function(e){

    operForm.attr("action","/board/modify").submit();

  });

  $("button[data-oper='list']").on("click", function(e){

    operForm.find("#bno").remove();
    operForm.attr("action","/board/list")
    operForm.submit();

  });
});
</script>

<script type="text/javascript" src="/resources/js/reply.js"></script>

<!-- 이벤트 처리 시작 -->

<script>

$(document).ready(function () {
  
	var bnoValue = '<c:out value="${board.bno}"/>';
	var replyUL = $(".chat");
  
    showList(1);
    
	function showList(page){
	
		console.log("show list " + page);
		    
		replyService.getList({bno:bnoValue,page: page|| 1 }, function(replyCnt, list) {
		      
			console.log("replyCnt: "+ replyCnt );
			console.log("list: " + list);
			console.log(list);
		    
		    if(page == -1){
				pageNum = Math.ceil(replyCnt/10.0);
				showList(pageNum);
				return;
		    }
		      
			var str="";
		     
			if(list == null || list.length == 0){
				return;
			}
	
	    	for (var i = 0, len = list.length || 0; i < len; i++) {
	      		str += "<li class='left clearfix' data-rno='" + list[i].rno + "'>";
	      		str += "  <div>";
	      		str += "      <div class='header'>";
	      		str += "          <strong class='primary-font'>[" + list[i].rno + "] " + list[i].replyer + "</strong>"; 
	      		str += "          <small class='pull-right text-muted'>" + replyService.displayTime(list[i].replyDate) + "</small>";
	      		str += "      </div>";
	      		str += "      <p>" + list[i].reply + "</p>";
	      		str += "  </div>";
	      		str += "</li>";
	    	}

			replyUL.html(str);
			showReplyPage(replyCnt);

		});//end function
	}//end showList

	var pageNum = 1;
	var replyPageFooter = $(".panel-footer");
    
	function showReplyPage(replyCnt){
      
		var endNum = Math.ceil(pageNum / 10.0) * 10;  
		var startNum = endNum - 9; 
      
		var prev = startNum != 1;
		var next = false;
      
		if(endNum * 10 >= replyCnt){
			endNum = Math.ceil(replyCnt/10.0);
		}
      
      	if(endNum * 10 < replyCnt){
			next = true;
		}
      
		var str = "<ul class='pagination pull-right'>";
      
		if(prev){
			str+= "<li class='page-item'><a class='page-link' href='"+(startNum -1)+"'>Previous</a></li>";
		}
      
		for(var i = startNum ; i <= endNum; i++){
        
			var active = pageNum == i? "active":"";
			str+= "<li class='page-item "+active+" '><a class='page-link' href='"+i+"'>"+i+"</a></li>";
		}
      
		if(next){
			str+= "<li class='page-item'><a class='page-link' href='"+(endNum + 1)+"'>Next</a></li>";
		}
      
		str += "</ul></div>";
		console.log(str);
		replyPageFooter.html(str);
	}
     
	replyPageFooter.on("click","li a", function(e){
		e.preventDefault();
		console.log("page click");
       
		var targetPageNum = $(this).attr("href");
       
		console.log("targetPageNum: " + targetPageNum);
       
		pageNum = targetPageNum;
       
		showList(pageNum);
	});
   
	var modal = $(".modal");
	var modalInputReply = modal.find("input[name='reply']");
	var modalInputReplyer = modal.find("input[name='replyer']");
	var modalInputReplyDate = modal.find("input[name='replyDate']");
    
	var modalModBtn = $("#modalModBtn");
	var modalRemoveBtn = $("#modalRemoveBtn");
	var modalRegisterBtn = $("#modalRegisterBtn");
    
	$("#modalCloseBtn").on("click", function(e){
		modal.modal('hide');
	});
    
	$("#addReplyBtn").on("click", function(e){
      
		modal.find("input").val("");
		modalInputReplyDate.closest("div").hide();
		modal.find("button[id !='modalCloseBtn']").hide();
      
		modalRegisterBtn.show();
		$(".modal").modal("show");
	});
    

	modalRegisterBtn.on("click",function(e){
      
		var reply = {
			reply: modalInputReply.val(),
			replyer:modalInputReplyer.val(),
			bno:bnoValue
		};
		
		replyService.add(reply, function(result){
        
			alert(result);
	        
			modal.find("input").val("");
			modal.modal("hide");
	        
			showList(1);
			// showList(-1);
		
		});
      
	});
	
	//댓글 조회 클릭 이벤트 처리
	$(".chat").on("click", "li", function(e){
      
		var rno = $(this).data("rno");
      
		replyService.get(rno, function(reply){
      
		modalInputReply.val(reply.reply);
        modalInputReplyer.val(reply.replyer);
        modalInputReplyDate.val(replyService.displayTime(reply.replyDate)).attr("readonly","readonly");
        modal.data("rno", reply.rno);
        
        modal.find("button[id !='modalCloseBtn']").hide();
        modalModBtn.show();
        modalRemoveBtn.show();
        
        $(".modal").modal("show");
            
      });
    });
	
	// 댓글 수정 이벤트 처리
	modalModBtn.on("click", function(e){
        
		var reply = {
			rno:modal.data("rno"), 
			reply: modalInputReply.val()
		};
        
		replyService.update(reply, function(result){
              
			alert(result);
			modal.modal("hide");
			showList(1);
        });
      });
	
	// 댓글 삭제 이벤트 처리
    modalRemoveBtn.on("click", function (e){
  	  
    	  var rno = modal.data("rno");
    	  
    	  replyService.remove(rno, function(result){
    	        
    	      alert(result);
    	      modal.modal("hide");
    	      showList(1);
    	      
    	  });
    }); 
	
});

</script>

<!-- 이벤트 처리 끝 -->

<script>
	console.log("===============");
	console.log("JS TEST");
	
	var bnoValue = '<c:out value="${board.bno}"/>';
	/* 댓글 등록 처리 시작 */
	/* 
	// for replyService add test
	replyService.add(
    	{
    		reply:"JS Test", 
    		replyer:"tester", 
    		bno:bnoValue
    	},
	    function(result){
	      alert("RESULT : " + result);
	    }
	);
	 */
	/* 댓글 등록 처리 끝 */

	/* 댓글 목록 처리 시작 */
	/* 
	replyService.getList({bno:bnoValue, page:1}, function(list){
	  for(var i = 0, len = list.length||0; i < len; i++ ){
	    console.log(list[i]);
	  }
	});
	*/
	/* 댓글 목록 처리 끝 */
	
	/* 댓글 15 번 삭제 처리 시작 */
	/* 
	replyService.remove(15, function(count) {

		console.log(count);

		if (count === "success") {
			alert("REMOVED");
		}
	}, function(err) {
		alert('ERROR...');
	});
	 */
	/* 댓글 삭제 처리 끝 */
	
	/* 14번 댓글 수정 처리 시작 */
	/* 
	replyService.update({
		rno : 14,
		bno : bnoValue,
		reply : "댓글 수정 테스트 완료!"
	}, function(result) {
		alert("수정 완료...");
	});  
	 */
	/* 댓글 수정 처리 끝 */
	
	/* 16번 댓글 조회 처리 시작 */
	replyService.get(16, function(data){
		console.log('16번 댓글 조회 : ' + data); 
	});
	/* 댓글 조회 처리 끝 */
</script>

<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>

댓글의 페이지를 호출하는 부분은 showList() 이므로 페이지 번호를 출력하게끔 수정한다.

showList() 함수는 파라미터로 전달되는 page 변수를 이용해서 원하는 댓글 페이지를 갖게오게 된다.

이 때 만약 page 번호가 -1로 전달되면 마지막 페이지로 찾아서 다시 호출하게 된다.

 

사용자가 새로운 댓글을 추가하면 showList(-1); 를 호출해서 우선 전체 댓글의 숫자를 파악하게 한다.

이 후에 다시 마지막 페이지를 호출해서 이동시키는 방식으로 동작시킨다.

 

이 방식은 서버를 여러 번 호출해야 하는 단점이 있지만, 댓글의 등록 행위가 댓글 조회나 페이징에 비해 적기 때문에 심각한 문제는 아니다.

 

하지만, 필자의 프로젝트에서는 최근 댓글이 첫 페이지의 상단부터 정렬되게 만들었기때문에 showList(1); 로 처리한다.

 

댓글은 화면상에서 댓글이 출력되는 영역의 아래쪽에 <div class='panel-footer'>를 하나 추가하고, <div>의 아래쪽에 추가한다.

 

showReplyPage()는 기존에 자바로 작성되는 PageMaker의 자바스크립트 버전에 해당한다.

댓글 페이지를 문자열로 구성한 후 <div>의 innerHTML로 추가한다.

showList()의 마지막에 페이지를 출력하도록 수정한다.

 

     replyUL.html(str);
     
     showReplyPage(replyCnt);

 

실제로 화면상에는 CSS의 구성으로 인해 페이지네이션이 하단부에 추가된다.

 

페이지 번호를 클릭 시 새 댓글을 갖고오도록 하는 부분

댓글 페이지번호는 <a>태그 내에 존재하므로 이벤트 처리에서는 <a> 태그의 기본 동작을 제한(preventDefault())하고, 댓글 페이지 번호를 변경한 후 해당 페이지의 댓글을 갖고오도록 한다.

 

댓글이 페이지 처리되면 댓글의 수정 및 삭제 시에도 현재 댓글이 포함된 페이지로 이동하도록 수정.

 

기존과 달라진 점은 showList()를 호출할 때 현재 보고 있는 댓글 페이지의 번호를 호출한다는 점이다.

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

 

---

댓글 페이지의 화면 처리