[블로그프로젝트] 33. 댓글작성하기

유튜브에서 블로그 만들기 프로젝트를 따라하면서 나의 스킬을 조금더 레벨업 하고자 한다.

IDE : IntelliJ

언어 : Java

DB : MySQL

빌드관리 도구 : Maven

OS : iOS

참고유튜브 : 메타코딩

---

댓글작성하기에 들어가기 전에

댓글목록의 순서를 내림차순으로 정렬하기 위해서

board.jsp에서 @Orderby("기준변수명 desc") 를 작성해준다.

 

변경전 오름차순 (asc)

변경후 내림차순(desc)

 

detail.jsp에 댓글작성하기와 댓글목록부분을 나눴었는데, 댓글작성하는 부분에 아래와 같이 작성한다.

db에 넘겨줄때 boardId에 대한 값도 같이 넘겨줘야하기 때문에 board에 id를 hidden 값으로 넘겨준다

textarea와 button에도 id를 각각 부여해준다.

form태그로 감싸서 사용하기 때문에 button에 type button으로 명시해준다.

    <div class="card">
        <form>
            <input type="hidden" id="boardId" value="${board.id}"/>
            <div class="card-body"><textarea id="reply-content" class="form-control" rows="1"></textarea></div>
            <div class="card-footer"><button type="button" id="btn-reply-save" class="btn btn-primary">Write Reply</button></div>
        </form>
    </div>

 

이제 버튼을 눌렀을때 기능이 작동하도록 작성하기 위해 board.jsp로 이동

        $("#btn-reply-save").on("click",()=> {
            this.replySave();
            });

 

ajax에서 url에서 탬플릿리터럴(${})을 사용하기 위해서 작은따옴표('')가 아닌 백틱(`)을 사용해서 작성해준다

            replySave : function(){

                let data = {
                    content : $("#reply-content").val()
                    };
                    console.log(data);
                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) {
                    alert("댓글작성완료");

                    location.href =`/board/${boardId}`;
                }).fail(function(error) {
                    alert("댓글작성실패");
                    alert(JSON.stringify(error));
                });

        }

 

해당요청을 받기위해 boardApiContoller로 이동

@postMapping으로 자바스크립트에서 보낸 주소로 받고 게시글고유번호, 댓글내용, 유저내용들을 받기위해서

파라메터로 boardId, reply, principal을 받는다

해당값들을 boardService에 댓글쓰기 메서드로 넘길때 user객체에도 board에 대한 내용, reply에 대한 내용들이 있기 때문에 한번에 담아서 넘겨준다.

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


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

 

db에 값을 넘겨서 저장해 줄 때 댓글을 어떤 게시글에 작성했는지 파악하기 위해서 hidden으로 넘겨받은 boardId를 기준으로 reply에 set해주고 user도 받은 그 내용대로 set해준후 replyRepository에 넘겨주면된다.

    @Transactional
    public void 댓글쓰기(User user, int boardId, Reply reply) {
        Board board = boardRepository.findById(boardId).orElseThrow(() ->{
            return new IllegalArgumentException("댓글 쓰기 실패 : 게시글을 찾을 수 없습니다");
        });

        reply.setUser(user);
        reply.setBoard(board);

        replyRepository.save(reply);

    }

 

이후 서버에서 확인해보면 댓글을 작성할 수 있는 걸 확인할 수 있고 db에도 값이 잘 들어가 있는걸 확인할 수 있다.