[v3] springboot 블로그 만들기-6

비동기 댓글 등록 구현

<div class="card-body">
    <form>
        <input type="hidden" id="boardId" value="{{model.id}}">
        <div id="boardId2" data-hello="{{model.id}}"></div>
        <textarea class="form-control" rows="2" id="comment"></textarea>
        <div class="d-flex justify-content-end">
            <button type="button" class="btn btn-outline-primary mt-1">댓글등록</button>
        </div>
    </form>
</div>

let boardId = $("#boardId2").data("hello");
let boardId2 = document.querySelector("#boardId2").dataset.hello;

댓글 저장 DTO

public class ReplyRequest {

    @Data
    public static class SaveDTO {
        private Integer boardId;
        private String comment;

        // insert into reply_tb(comment, board_id, user_id, created_at) values('댓글1', 5, 1, now());
        // 바로 boardId 받아올 수 없음 빌더의 board 는 orm 이라서
        public Reply toEntity(User sessionUser, Board board) {
            return Reply.builder()
                    .comment(comment)
                    .user(sessionUser)
                    .board(board)
                    .build();
        }
    }
}

public ReplyResponse.DTO 댓글쓰기(ReplyRequest.SaveDTO saveDTO, User sessionUser) {
    //1 게시글 존재유무 확인
    System.out.println(saveDTO.toString());
    Board boardPS = boardRepository.findById(saveDTO.getBoardId())
            .orElseThrow(()-> new ExceptionApi404("게시글을 찾을 수 없습니다"));
    //2. 비영속 댓글 객체 만들기
    Reply reply = saveDTO.toEntity(sessionUser, boardPS);

    //3. 댓글 저장 이 코드를 통해 영속 개체가 되었음
   replyRepository.save(reply);
    return new ReplyResponse.DTO(reply);
}

mustache 폼 수정

 <div class="card-body">
        <form >
            <input type="hidden" id="boardId" value="{{model.id}}">
            <textarea class="form-control" rows="2" id="comment"></textarea>
            <div class="d-flex justify-content-end">
                <button type="button" onclick="saveReply()" class="btn btn-outline-primary mt-1">댓글등록</button>
            </div>
        </form>
    </div>

<script>

async function saveReply(){
    //1. reply 객체 만들기 (id 로 찾아)
    let reply = {
        comment : $("#comment").val(),
        boardId : $("#boardId").val()
    };

    //2. fetch 요청
    let response = await fetch(`/api/reply`,{
        method : "post",
        body: JSON.stringify(reply),
        headers: {
            "Content-type":"application/json; charset=utf-8"
        }
    });
    let responseBody = await response.json(); // dto
    console.log(responseBody);

    //3. csr 하기
}
</script>

function replyItem(reply) {
        return `<div id="reply-${reply.id}" class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex">
                    <div class="px-1 me-1 bg-primary text-white rounded">${reply.username}</div>
                    <div>${reply.comment}</div>
                </div>
                        <button onclick="deleteReply('${reply.id}')" type="button" class="btn">🗑</button>
            </div>`;
    } 

//3. CSR 하기
$("#reply-box").prepend(replyItem(responseBody.body));
$("textarea").val(""); //댓글 입력이 완료되면 기존에 있던 text 제거 

로그인 상태에 따른 댓글 등록 처리

마무리