🔥 #20 댓글 작성하기

댓글을 작성하는 기능을 구현해보았다.

먼저 게시글 상세페이지의 댓글 작성 버튼에 id를 넣고 board.js 에서 처리하도록 하였다.

< detail.jsp >

.
.
.
<div class="card">
        <form>
            <input type="hidden" id="boardId" value="${board.id}" />
            <div class="card-body">
                <textarea id="reply-content" class="form-control" row = "1"></textarea>
            </div>
            <div class="card-footer">
                <button type="button" id="btn-reply-save" class="btn btn-primary">등록</button>
            </div>
        </form>
    </div>
    <br />
    <div class="card">
        <div class="card-header">댓글 리스트</dv>
            <ul id="reply--box" class="list-group">
                <c:forEach var="reply" items="${board.replys}">
                    <li id="reply--1" class="list-group-item d-flex justify-content-between">
                        <div>${reply.content}</div>
                        <div class="d-flex">
                            <div class="font-italic">작성자 : ${reply.user.username} &nbsp;</div>
                            <button class="badge">삭제</button>
                        </div>
                    </li>
                </c:forEach>
            </ul>
        </div>
.
.
.

< board.js >

replySave: function () {
        let data = {
            content: $("#reply-content").val()
        };
        let boardId = $("#boardId").val()

        $.ajax({
            type: "POST",
            url: `/api/board/${boardId}/reply`,
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        }).done(function (resp) {
            // 결과가 정상이면 done 실행
            alert("댓글작성이 완료되었습니다.");
            location.href = `/board/${boardId}`;
        }).fail(function (error) {
            // 실패하면 fail 실행
            alert("댓글작성이 실패하였습니다.");
            alert(JSON.stringify(error));
        });
    },

여기서 url 에 백틱을 쓰는 이유는 자바스크립트 변수를 문자열에 바인딩 하기 위해서이다.

Reply 오브젝트는 Board와 연관관계를 맺고 있기 때문에, 해당 댓글이 어느 글에 쓰여진 것인지 알아야 한다.

따라서 jsp에서 hidden 값으로 board.id 를 넘겨주었고, 이를 board.js 에서 받아 url로 보냈다.

🎈 data는 body에 담고, boardId는 주소에 담은 것!!

이제 컨트롤러에서 위의 주소를 처리한다.

< BoardApiController >

	@PostMapping("/api/board/{boardId}/reply")
    public ResponseDto<Integer> replySave(@PathVariable int boardId, @RequestBody Reply reply, @AuthenticationPrincipal PrincipalDetail principal) {

        boardService.댓글쓰기(principal.getUser(), boardId, reply);
        return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
    }

boardId 와 reply 객체, principal로 현재 로그인된 사용자를 받아온다. (댓글을 작성한 User 를 알기 위해)

< BoardService >

	@Transactional // 전체가 성공해야 commit, 실패하면 rollback
    public void 댓글쓰기(User user, int boardId, Reply requestReply) {
        Board board = boardRepository.findById(boardId)
                .orElseThrow(()->{
                    return new IllegalArgumentException("댓글 쓰기 실패 : 게시글 id를 찾을 수 없습니다. id : " + boardId);
                });
        requestReply.setBoard(board);
        requestReply.setUser(user);

        replyRepository.save(requestReply);
    }

reply에는 content 밖에 없으므로 user와 board를 직접 set한 후, save 한다.

완료 ㅎㅎ