SpringBoot 비동기 댓글

<div class="replyContent">
	//댓글 등록될 곳
	<div id="replyList">
	</div>
    
	<form>
		<input type="hidden" id="boardNo" th:value="${dto.boardNo}">
		<div class="card" style="margin-top: 10px;">
                	<div class="card-body"><textarea class="form-control" rows="1" id="replyContent"></textarea></div>
                	<div class="card-footer"><button class="btn btn-primary" id="btn-reply-save">등록</button></div>
		</div>
	</form>
</div>

div태그 id="replyList" 부분에 가져온 데이터들을 삽입하게 된다.

 

//스크립트 태그
<script layout:fragment="script" th:inline="javascript">
    $(document).ready(function () {
        getReplyList()
    })

    function getReplyList() {
        var boardNo = [[ ${dto.boardNo} ]]
        const replyList = document.getElementById("replyList");

        $.ajax({
            type: 'GET',
            url: '/reply/' + boardNo,
            success: function (res) {
                replyList.innerHTML = ``

                for (let i = 0; i < res.data.length; i++) {
                    const reply = res.data[i];
                    const date = new Date(reply.replyRegDate);
                    const formattedDate = date.toISOString().slice(0, 16).replace('T', ' ');
                    let replyContent = reply.replyContent;

                    const html = `
                        <th:block>
                            <div class="row justify-content-start px-2 pt-2">
                                ${formattedDate}
                            </div>
                            <div class="row border-bottom px-2 pb-3 text-break">
                                ${replyContent}
                            </div>
                        </th:block>
                    `;

                    replyList.innerHTML += html;
                }
            },
        })
    }
</script>

날짜 포맷팅 같은 경우 Date객체를 가져와 따로 날짜 처리를 해줘야 된다.

---

Controller

/**
 * 댓글 비동기 RestController
 * @author mogreene
 */
@Slf4j
@RestController
@RequiredArgsConstructor
public class ReplyController {

    private final ReplyService replyService;

    /**
     * 댓글 등록
     * @param boardNo
     * @param replyDTO
     * @return
     */
    @PostMapping("/reply/{boardNo}")
    public ResponseEntity<ApiResponseDTO<?>> postReply(@PathVariable Long boardNo,
                                                       @RequestBody ReplyDTO replyDTO) {

        int success = replyService.postReply(boardNo, replyDTO);

        if (success != 1) {
            throw new IllegalArgumentException("댓글 등록 실패!");
        }

        ApiResponseDTO<?> apiResponseDTO = ApiResponseDTO.builder()
                .httpStatus(HttpStatus.CREATED)
                .data("Reply Create!")
                .build();
        return new ResponseEntity<>(apiResponseDTO, HttpStatus.CREATED);
    }

    /**
     * 댓글 조회
     * @param boardNo
     * @return
     */
    @GetMapping("/reply/{boardNo}")
    public ResponseEntity<ApiResponseDTO<?>> getReplyList(@PathVariable Long boardNo) {

        List<ReplyDTO> dtoList = replyService.getReply(boardNo);

        ApiResponseDTO<?> apiResponseDTO = ApiResponseDTO.builder()
                .httpStatus(HttpStatus.CREATED)
                .data(dtoList)
                .build();
        return new ResponseEntity<>(apiResponseDTO, HttpStatus.CREATED);
    }
}

ApiResponseDTO 는 일관된 Json응답을 보내주기 위해 따로 만들었다. 만약 필요없다면 ResponseEntity<?>로 아무값이나 넣어주면 된다.

 

그 외 댓글을 가져오는 service나 repository는 많은 예제와 원하는 설정이 있을테니 알아서 입맛것 사용하면 될듯하다.