51) REST 방식 댓글 구현 - 5

22.6.29

 - 이어서 댓글 구현 5번째 시간!

 

---

1)  댓글 목록 HTML 처리

 -  댓글 목록은 별도의 div를 추가해서 게시글 아래쪽에 위치하도록 작성

 

get.jsp

<!-- 댓글 -->

	<div class="row">
		<div class="col-lg-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="test">댓글을 달아주세여</h4>
				</div>

				<div class="panel-body">
					<ul class="chat">
						<!--  start reply-->
						
					</ul>
				</div>
				<!--  /panel-body-->
			</div>
			<!--  /panel-->
		</div>
		<!--  /col-lg12 -->
	</div>
	<!--  /row-->

</div>


<!-- 댓글 등록  -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#replyForm" id="addReplyBtn">
  댓글 등록
</button>

 - 중간에 ul 태그 아래 쪽에 댓글이 위치하게 됨

 - get.js 파일을 또 만들어서 모듈화 시켜줌

 - get.js에 showList라는 함수를 만들어서 해당 게시글의 모든 댓글 목록을 가져오는 코드를 작성

 

get.js

$(function () {
	let bnoValue = $('input[name="bno"]').val();
	let replyUL = $('.chat');
		
	function showList(page) {
		replyService.getList({bno : bnoValue, page : page}, function (list) {
			let str = '';
			
			for(let r of list){
					str += `
				            <li class="left clearfix" data-rno='${r.rno}'>
				                <div>
				                    <div class="header">
				                        <strong class="primary-font">${r.replyer}</strong>
				                        <small class="pull-right text-muted">${replyService.displayTime(r.updateDate)}</small>
				                        
				                    </div>
				                    <p>${r.reply}</p>
				                </div>
				            </li>
				            `
			}
		      replyUL.html(str);
		});
	}
	showList(1);

 - 함수를 만들고 목록 불러오기처럼 댓글 번호와 페이지를 이용해 댓글을 불러옴

 - for 반복문 속에 str 변수를 만들어 이 안에 li 태그속에 댓글을 불러오게 작성 후 replyUl(chat 클래스)에 html을 대신하도록 코드 작성

 - 이 반복문 속에는 '(일반 따옴표)가 아닌 `(역따옴표)로 감싸줌!

 

2) 날짜/시간에 대한 처리

 - xml, json 에서 시간은 숫자로 표시됨(특정 일자 기준으로 지나간 시간을 숫자로 표시하는 것!)

 - reply.js 에 다음 코드 추가

 

reply.js

	 function displayTime(timeValue) {
			let timeArr = JSON.stringify(timeValue).substr(1).split(",");
	        return `${timeArr[0]}년 ${timeArr[1]}월 ${timeArr[2]}일`;
		
		    }
            
           return {
           displayTime : displayTime
           }

 - 이 코드를 추가해주면 get.js에서 displayTime으로 시간을 불러올 수 있다.

 

3) 새로운 댓글 처리

 - 1)번 항목의 get.jsp를 보면 가장 아래쪽에 댓글 등록 div 태그가 존재함

 - 댓글 항목에 댓글 등록이라는 버튼을 추가한것!

 - 또 get.jsp 에 모달창을 이용해 댓글을 추가로 등록하는 코드 작성

 

get.jsp

<!-- 댓글 -->
<div class="modal fade" id="replyForm" tabindex="-1" role="dialog"
	aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="replyForm">댓글 달기</h5>
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="reply">내용 입력</label>
					<input class="form-control" name="reply" id= "reply"> 
				</div>
				<div class="form-group">
					<label for="replyer">작성자</label>
					<input class="form-control" name="replyer" id="replyer"> 
				</div>
				<div class="form-group">
					<label for="regDate">등록일</label>
					<input class="form-control" name="regDate" id="regDate" value="${board.regDate}">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-warning" id="modalRemoveBtn">삭제</button>
				<button type="button" class="btn btn-danger" id="modalMoBtn">수정</button>
				<button type="button" class="btn btn-primary" id="modalRegisterBtn">등록</button>
				<button type="button" class="btn btn-secondary" data-dismiss="modal" id="modalCloseBtn" >닫기</button>
			</div>
		</div>
	</div>
</div>

 - 이는 화면단에 모달창을 이용해 댓글등록하는 창을 띄우는 것

 - 모달창에 존재하는 삭제 수정 등록 취소 버튼은 get.js에 따로 jQuery문을 작성!

 

get.js

	let bno = $('input[name="bno"]').val();
	
	
	// 모달
	let modal = $('.modal');
	let modalInputReply = modal.find('input[name="reply"]');
	let modalInputReplyer = modal.find('input[name="replyer"]');
	let modalInputReplyDate = modal.find('input[name="regDate"]');
	
	let modalMoBtn = $('#modalMoBtn');
	let modalRemoveBtn = $('#modalRemoveBtn');
	let modalRegisterBtn = $('#modalRegisterBtn');
	let modalCloseBtn = $('modalCloseBtn');
	
	// 댓글등록 모달창
	$('#addReplyBtn').on('click', function(e) {
		modal.find('input').val('');
		modalInputReplyDate.closest('div').hide();
		modalRemoveBtn.hide();
		modalMoBtn.hide();
		modalRegisterBtn.show();
		});

 - 댓글 등록 버튼을 클리할 시 시간입력 버튼, 제거 버튼, 수정버튼은 숨기고, 등록과 취소 버튼만 보이도록 코드 작성

 

4) 댓글 등록 및 목록 갱신

 - 위의 코드에 이어서 모달창의 등록버튼 클릭시 실제 댓글이 등록되도록 코드 작성

 

get.js

	// 댓글 등록 이벤트 처리
		modalRegisterBtn.on('click', function(e) {
			let reply = {
					reply : modalInputReply.val(),
					replyer : modalInputReplyer.val(),
					bno : bno
			}
			replyService.add(reply, function(result) {
				alert(result);
				modal.find('input').val('');
				modal.modal('hide');
				
				showList(1);
			})
		})

 - reply라는 변수에 입력받은 댓글 내용과 작성자명, 그리고 댓글 번호를 저장 

 - 이를 add 메서드에 객체로 받고 callback 함수로 결과 값을 경고창으로 띄우고 , 입력칸을 비운채로 모달창을 닫고 리스트를 다시 불러온다.

 - 이렇게 되면 입력 후 댓글 목록을 다시 불러오게 되어 방금 입력한 댓글도 목록창에 띄워지는 걸 확인할 수 있다.

 

 

---

 - 끝이 없다 댓글 추가!!! ㅠㅠ 언제 끝나니!!