Spring 블로그 만들기 - 13. 댓글 쓰기/수정/삭제

by 똘똘이박사 2019. 3. 14. 21:04

이 포스팅의 샘플 게시판 개발 환경은 MAC OS, STS, OpenJDK11 입니다.

게시물 댓글 쓰기/수정/삭제 기능에 대한 포스팅은 아래와 같은 순서로 진행합니다.

RestBoardController 수정 (댓글 쓰기 추가)
댓글 저장 이벤트
댓글 수정
댓글 수정 내용 저장하기
댓글 삭제

블로그 만들기 - 13. 댓글 쓰기/수정/삭제

이전 포스팅에서 댓글 기능의 DAO와 Service를 만들때 쓰기와 수정, 삭제 기능에 대해서도 메소드를 추가해 놓았습니다. 따라서 이번 포스팅에서는 컨트롤러에 댓글의 쓰기/수정/삭제 부분과 View에서 댓글이 수정 모드일때 해당 댓글을 수정 모드로 변경하여 내용을 수정할 수 있게 처리해 주면 됩니다.

RestBoardController 수정 (댓글 쓰기 추가)

댓글 쓰기의 Controller 부분은 아래와 같습니다. 댓글 쓰기 역시 Ajax를 이용해 비동기방식으로 처리합니다.

RestBoardController.java 수정 (댓글 쓰기 추가)

@RequestMapping(value = "/saveReqly", method = RequestMethod.POST)

public Map<String, Object> saveReply(@RequestBody ReplyVO replyVO) throws Exception {

Map<String, Object> result = new HashMap<>();

try {

boardService.saveReply(replyVO);

result.put("status", "OK");

} catch (Exception e) {

e.printStackTrace();

result.put("status", "False");

}

return result;

}

댓글 저장 이벤트

댓글 입력 폼 부분은 이미 이전 포스팅에서 작성하였으므로, 이번 포스팅에서는 저장 버튼 클릭시 발생하는 이벤트에 대해서 설명합니다. 아래의 코드를 자바스크립트 영역에 추가 합니다.

boardContent.jsp 수정 (댓글 저장 이벤트 추가)

//댓글 저장 버튼 클릭 이벤트

$(document).on('click', '#btnReplySave', function(){

var replyContent = $('#content').val();

var replyReg_id = $('#reg_id').val();

var paramData = JSON.stringify({"content": replyContent

, "reg_id": replyReg_id

, "bid":'${boardContent.bid}'

});

var headers = {"Content-Type" : "application/json"

, "X-HTTP-Method-Override" : "POST"};

$.ajax({

url: "${saveReplyURL}"

, headers : headers

, data : paramData

, type : 'POST'

, dataType : 'text'

, success: function(result){

showReplyList();

$('#content').val('');

$('#reg_id').val('');

}

, error: function(error){

console.log("에러 : " + error);

}

});

댓글 수정폼(textarea)에 있는 데이터를 읽어와 JSON 형태의 문자열로 만듭니다. 이때 사용할 수 있는 함수가 JSON.stringify() 인데 JSON객체를 JSON 형태의 문자열로 변환해 주는 일을 합니다. 반대로 JSON형태의 문자열을 JSON객체로 바꾸는 함수가 있습니다. JSON.parse() 라는 함수인데 이 포스팅에서는 다루지 않습니다.

이제 댓글을 입력하고 저장을 해봅니다.

댓글 수정

댓글의 수정은 다른 화면으로 이동이나 팝업을 띄우지 않고, 댓글이 있던 자리에 수정 폼을 만들어 댓글을 수정 할 수 있도록 합니다. 우선 화면이 어떻게 변경이 되는지 먼저 확인해 보도록 하겠습니다.

위의 붉은 상자 안에 있는 댓글을 수정하기 위해 [수정]을 클릭합니다.

위와 같이 기존에 댓글이 있던 자리가 입력 폼으로 변경이 되면서, 기존에 작성했던 댓글이 입력 폼 안에 셋팅 되도록 합니다. 저장을 클릭하면 수정된 내용이 반영이 되어 다시 리스트가 나타나고, 취소를 클릭하면 다시 이전의 리스트로 돌아가도록 합니다.

가장 먼저, 어떻게 리스트의 일 부분이 입력폼으로 변경이 되었는지 확인해 봅니다.

댓글 수정 버튼은 지난 포스팅의 리스트 출력에 포함된 부분이므로 자세한 내용은 지난 포스팅(댓글 리스트)를 참조 하시기 바랍니다. 수정 버튼을 클릭 하였을때 발생하는 이벤트를 살펴 보도록 하겠습니다.

boardContent.jsp 수정 (댓글 수정 폼 이벤트 추가)

function fn_editReply(rid, reg_id, content){

var htmls = "";

htmls += '<div class="media text-muted pt-3" id="rid' + rid + '">';

htmls += '<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder:32x32">';

htmls += '<title>Placeholder</title>';

htmls += '<rect width="100%" height="100%" fill="#007bff"></rect>';

htmls += '<text x="50%" fill="#007bff" dy=".3em">32x32</text>';

htmls += '</svg>';

htmls += '<p class="media-body pb-3 mb-0 small lh-125 border-bottom horder-gray">';

htmls += '<span class="d-block">';

htmls += '<strong class="text-gray-dark">' + reg_id + '</strong>';

htmls += '<span style="padding-left: 7px; font-size: 9pt">';

htmls += '<a href="javascript:void(0)" onclick="fn_updateReply(' + rid + ', \'' + reg_id + '\')" style="padding-right:5px">저장</a>';

htmls += '<a href="javascript:void(0)" onClick="showReplyList()">취소<a>';

htmls += '</span>';

htmls += '<textarea name="editContent" id="editContent" class="form-control" rows="3">';

htmls += content;

htmls += '</textarea>';

htmls += '</p>';

htmls += '</div>';

$('#rid' + rid).replaceWith(htmls);

$('#rid' + rid + ' #editContent').focus();

}

댓글의 수정 폼 역시 리스트와 마찬가지로 자바스크립트 안에서 html코드를 생성하고, 생성한 코드를 리스트 코드와 대체 할 수 있도록 되어 있습니다. 원하는 댓글에 수정 폼으로 변경이 가능한 이유는 리스트 작성 시 각각의 댓글에 해당하는 부분을 아래와 같이 고유의 아이디를 만들어 구분해 놓았기 때문입니다.

댓글 리스트 출력 부분의 일부 (각 댓글의 id 생성 부분)

htmls += '<div class="media text-muted pt-3" id="rid' + this.rid + '">';

이 부분을 좀더 자세히 그림으로 보면 아래와 같습니다.

위와 같이 댓글의 리스트를 출력하는 부분에 댓글 일련번호(rid)를 이용하여 댓글 고유의 id를 만들 었습니다. 원리는 게시판의 리스트를 출력할때 게시판의 일련번호(bid)를 인수로 설정하는 것과 동일한 원리를 적용한 것입니다.

따라서 댓글 일련번호(rid)를 이용해 아래와 같이 댓글 리스트의 일 부분을 위에서 생성한 입력 폼 태그로 교체 할 수 있습니다.

$('#rid' + rid).replaceWith(htmls);

입력폼을 생성하였다면 이제 수정 후 저장에 대한 이벤트를 추가해 줍니다.

댓글 수정 내용 저장하기

댓글 수정 후 저장 버튼을 클릭 했을때 발생하는 저장 이벤트(update)를 추가해 줍니다.

boardContent.jsp 수정 (추가부분)

function fn_updateReply(rid, reg_id){

var replyEditContent = $('#editContent').val();

var paramData = JSON.stringify({"content": replyEditContent

, "rid": rid

});

var headers = {"Content-Type" : "application/json"

, "X-HTTP-Method-Override" : "POST"};

$.ajax({

url: "${updateReplyURL}"

, headers : headers

, data : paramData

, type : 'POST'

, dataType : 'text'

, success: function(result){

console.log(result);

showReplyList();

}

, error: function(error){

console.log("에러 : " + error);

}

});

}

댓글 수정에 대한 저장 역시 ajax를 이용한 비동기 방식으로 처리하고, 데이터 저장(수정)이 성공하면 댓글 리스트를 다시 한 번 호출하여 조금 전 작성한 댓글이 출력 될 수 있도록 댓글 리스트를 갱신합니다.

댓글 삭제

댓글 삭제 버튼을 클릭 하였을 경우 발생하는 이벤트를 추가 합니다.

boardContent.jsp 수정 (댓글 삭제 이벤트 추가)

function fn_deleteReply(rid){

var paramData = {"rid": rid};

$.ajax({

url: "${deleteReplyURL}"

, data : paramData

, type : 'POST'

, dataType : 'text'

, success: function(result){

showReplyList();

}

, error: function(error){

console.log("에러 : " + error);

}

});

}

댓글 삭제가 성공하면 댓글 리스트를 다시 불러와 화면을 갱신해 줍니다.

블로그 만들기 포스팅 리스트

※ 포스팅에 오타나 잘못된 부분, 추가적으로 더 알고 싶은 부분이 있으면 댓글 주세요~

저작자표시 비영리 변경금지

'개발 > Spring 블로그 만들기' 카테고리의 다른 글

Spring 블로그 만들기 - 15. 상단 메뉴바 만들기(부트스트랩) (1)	2019.03.29
Spring 블로그 만들기 - 14. 위지윅 에디터 사용하기(CKEditor5) (10)	2019.03.18
Spring 블로그 만들기 - 12. 댓글 리스트 (22)	2019.03.13
Spring 블로그 만들기 - 11. properties 사용하기 (4)	2019.03.08
Spring 블로그 만들기 - 10. 게시물 검색(search) (18)	2019.03.01