[Spring][커뮤니티 사이트]댓글 & 대댓글 - 삭제 및 수정

우선 저는 삭제와 수정에 대한 메서드 및 스크립트를 댓글과 대댓글을 나눠 구현하지 않고, 하나만 만들어서 댓글 및 대댓글 에 동일하게 사용하게 하였습니다.

---

Mapper.XML(OracleDB)

<!-- 댓글 수정 -->
<update id="ModifyReply">
	<![CDATA[
		update reply
		set content = #{content}
		where rno = #{rno}
	]]>
</update>

<select id="getModifyReply" resultType="ReplyVO" parameterType="int">
	<![CDATA[
		select * from reply
		where rno = #{rno}
	]]>
</select>

수정 부분입니다. 저는 비밀번호를 확인 후 댓글을 수정하게 하기위해 팝업을 이용하여 만들었습니다.

getModifyReply부분이 팝업 부분에 해당하는 쿼리입니다.

<!-- 댓글 삭제 -->
<delete id="DeleteReply" parameterType="ReplyVO">
	<![CDATA[
		delete from reply
		where rno = #{rno}
	]]>
</delete>
<!-- 댓글 삭제 시 대댓글 달려있는경우 -->
<update id="Reply_Content" parameterType="ReplyVO">
	<![CDATA[
		update reply
		set content = '(삭제된 댓글입니다.)'
		where rno = #{rno}
	]]>
</update>
<!-- 대댓글 갯수 -->
<select id="Count_ReReply" parameterType="ReplyVO" resultType="int">
	<![CDATA[
		select count(rno)
		from reply
		where rno != #{rno} and r_group = #{rno}
	]]>
</select>

삭제 부분입니다. 기본적으로 삭제를 하는 쿼리 , 대댓글 갯수, 대댓글이 달려있는경우 이렇게 세가지 쿼리를 만들었습니다. 대댓글 갯수쿼리는 댓글에 만약 대댓글이 달려있는지 확인하기 위해서 선언하였으며, 만약 대댓글이 달려있는 상태에서 댓글을 삭제하게 된다면 위 update쿼리문 처럼 (삭제된 댓글입니다.)라고 표시하게 하였습니다.

---

Controller

	//수정 팝업창
	@GetMapping("/getModifyReply")
	public void getModifyReply(int rno,Model model) {
		log.info("댓글 수정 팝업 Controller");
		model.addAttribute("reply",replySerivce.getModifyReply(rno));
	}

수정팝업창 부분은 게시판Controller에 선언하였습니다. 처음에 ReplyController에 선언하였지만 화면이 제대로 나오지 않아서 혹시나 하는 마음에 게시판Controller에 구현하니 나오게 되었습니다.

정확한 이유는 아니겠지만, 아무래도 게시판상세보기 화면에서 넘어가는 화면이기에(?) 그래서 그런거 같습니다..

이후 service 부분은 replyService부분으로 선언하였습니다.

	//댓글수정
	@PostMapping("/ModifyReply")
	public ResponseEntity<String> ModifyReply(@RequestBody ReplyVO reply){
		log.info("modify:" + reply);

		return service.ModifyReply(reply) == 1 
				? new ResponseEntity<>("success", HttpStatus.OK)
				: new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
	}

	//댓글삭제
	@PostMapping("/DeleteReply")
	public ResponseEntity<String> DeleteReply(ReplyVO reply){
		
		return service.DeleteReply(reply) == 1 
				? new ResponseEntity<>("success", HttpStatus.OK)
				: new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
	}

이후 댓글수정 과 삭제 부분입니다. 이것은 Reply의Controller에 구현했습니다

---

Service

	//수정
	@Override
	public int ModifyReply(ReplyVO reply) {
		return dao.ModifyReply(reply);
	}
	@Override
	public ReplyVO getModifyReply(int rno) {
		log.info("댓글 수정팝업 Service");
		return dao.getModifyReply(rno);
	}
	//삭제
	@Override
	public int DeleteReply(ReplyVO reply) {
		
		//댓글에 달린 대댓글 갯수가 몇개인지 카운트
		int Count_ReReply = dao.Count_ReReply(reply);
		
		int result = 0;
			if(Count_ReReply == 0) {
				result = dao.DeleteReply(reply);
			}else {
				//만약 댓글에 답글이 달려있을 경우에 댓글 삭제시 (삭제된 댓글)이라는 값을 넣는다
				result = dao.Reply_Content(reply);
			}
		
		return result;
	}

수정부분은 간단하게 구현이 되었습니다.

삭제부분은 우선 대댓글 수 에 대한 값을 선언 후, if문을 통해 대댓글이 0 이면 바로 삭제되게, 대댓글이 있을 시 (삭제된 댓글)이라고 업데이트 시키게 구현하였습니다.

---

DAO

	//수정
	@Override
	public int ModifyReply(ReplyVO reply) {
		return session.update("mapper.reply.ModifyReply",reply);
	}
	@Override
	public ReplyVO getModifyReply(int rno) {
		log.info("댓글 수정팝업창 dao");
		return session.selectOne("mapper.reply.getModifyReply",rno);
	}
	//삭제
	@Override
	public int DeleteReply(ReplyVO reply) {
		return session.delete("mapper.reply.DeleteReply",reply);
	}
	
	//삭제시 댓글에 대댓글 카운트
	@Override
	public int Count_ReReply(ReplyVO reply) {
		return session.selectOne("mapper.reply.Count_ReReply",reply);
	}
	//대댓글이 달린 댓글 삭제시 완전삭제가 아닌 (삭제된 댓글)이라고 표기
	@Override
	public int Reply_Content(ReplyVO reply) {
		return session.update("mapper.reply.Reply_Content",reply);
	}

---

 JSP

htmls += '<a class="dropdown-item ModifyReply" href="#" data-rno='+rno+'><i class="fa fa-pencil mr-1"></i> 수정</a>';
htmls += '<a class="dropdown-item text-danger" href="#"  onClick="DeleteReply('+rno+')"><i class="fa fa-trash mr-1"></i> 삭제</a>';

댓글 과 대댓글 목록 ajax 부분을 보면 수정과 삭제 버튼 이 이렇게 구현이 되어있습니다.

수정 부분의 data-rno 부분은 스크립트에서 rno의 값을 사용하기위해 선언하였습니다.

---

수정JS & 팝업JSP

//댓글 수정 팝업
$(document).on('click', '.ModifyReply', function(){  
	var rno = $(this).attr('data-rno');
	var bno = ${detail.bno}
	
	let popUrl = "${path}/board/getModifyReply?rno=" + rno + "&bno=" + bno ;
	let popOption = "width = 350px, height= 250px, top=300px, left=-1000px ";

		window.open(popUrl,"리뷰 수정",popOption);
});

댓글 수정 팝업창을 띄우는 스크립트 입니다. 이후 getModifyReply 이라는 jsp를 하나 더 만들어서 팝업창 화면에 대한 부분을 구현하였습니다.

이렇게 수정 버튼을 클릭하게 된다면 이러한 화면이 나타나게 됩니다.

	<div>
		<input type="hidden" name="rno" id="rno">
		<input type="hidden" name="bno" id="bno">
		
		<div>
			<input type="password" name="r_pw" id="r_pw" placeholder="비밀번호"/>
			<div><span id="r_pw_check"></span> </div>
		</div>
		<br>
		<div>
			<textarea name='content' id='content' rows='8' placeholder='댓글을 입력해 주세요'></textarea>
			<button class='UpdateBtn'>수 정</button>
			<button class='cancel_btn'>취 소</button>
		</div>			
	
	</div>

팝업 화면은 위에 보시듯 간단하게 구현하였습니다.

.incorrect {
	color: red;
}

이후 style태그에 css를 추가시켜줍니다. 이것은 수정버튼을 눌렸는데 비밀번호가 틀릴경우 빨간색 글씨로 글을 띄우기 위함입니다.

//수정 ajax
$('.UpdateBtn').on('click',function(){
	var rno = ${reply.rno};
	var content = $('#content').val();
	//비번 확인
	var r_pw = '${reply.r_pw}';
	var r_pw2 = $('#r_pw').val();
	var Msg = $('#r_pw_check');
	
	if(r_pw != r_pw2){
		Msg.html("비밀번호가 틀렸습니다.");
		Msg.attr("class","incorrect");
		return false;
	}
	
	
	var paramData = JSON.stringify({
		"rno" : rno,
		"content" : content
	});
	
	var headers = {
			"Content-Type" : "application/json",
			"X-HTTP-Method-Override" : "POST"
		};
	
	$.ajax({
		type : 'post',
		url : '${path}/reply/ModifyReply',
		headers : headers,
		data : paramData,
		success : function(){
			opener.parent.location.reload();
			window.close();
		},
		error : function(error){
			console.log(error);
		}
	});//end ajax
})//end function

수정스크립트에서 해당 댓글의 r_pw의 값과 수정을 하기위해 입력한 r_pw의 값을 확인합니다.

이후 틀렸을 경우 span태그를 통해 위에 선언한 incorrect css를 통해 비밀번호가 틀렸다고 나타나게 합니다.

결과화면

//수정 취소
$(".cancel_btn").on("click", function(e) {
	window.close();
});

수정부분 마지막으로 취소버튼에 대한 스크립트입니다.

---

삭제JS

function DeleteReply(rno){
	var Delconfirm = confirm('삭제 하시겠습니까?');
	
 	if(Delconfirm){
		alert('삭제 되었습니다.');
	}else{
		alert('삭제 취소 되었습니다.');
		return false;
	}
	
	$.ajax({
		url : '${path}/reply/DeleteReply',
		type : 'post',
		data : {"rno" : rno},
		success : function(result){
			ReplyList();
		},
		error : function(error){
			console.log(error);
		}
	});//end ajax
	
};

삭제 부분은 간단하게 if문을 통해 삭제를 할것인지 안할것인지 판단 후 삭제를 하면 ajax를 통해 삭제가 됩니다.

대댓글이 달린 상태에서 삭제시 위의 사진처럼 나타나게 됩니다.

 

이상입니다~~~