71. 댓글 작성시 Dto 사용해보기

지난강의에서..

• 데이터를 받을 때 dto없이 넘겨왔다.
• 하지만 데이터 받을 때 컨트롤러에서 dto를 만들어서 받는게 좋다.
• 이 강의서 dto를 받지않은 이유는 OAuth 흐름을 알기위한 미니 프로젝트이기때문이다.

ReplySaveRequestDto

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ReplySaveRequestDto {
    private int userId;
    private int boardId;
    private String content;
 
    @Data
    @NoArgsConstructor
    @AllArgsConstructor
    @Builder
    public static class ResponseDto<T> {
        // HttpStatus status;
        int status;
        T data;
 
 
    }
}

BoardApiController

• 지난번에 매개변수에 @PathVariable int boardId,@RequestBody Reply reply, 따로 따로 가져왔는데 ReplySaveRequestDto를 만듦으로써 ReplySaveRequestDto로 매개변수를 받는것으로 변경한다.
• 그러면 기존에 사용자 정보를 detail.jsp에서 넘겨서 받아와야한다.
  ⇒ detail.jsp 에 input type=”hidden” 으로 해서 사용자 정보 받아온다.

@PostMapping("/api/board/{boardId}/reply")
public ReplySaveRequestDto.ResponseDto<Integer> replaySave(@RequestBody ReplySaveRequestDto replySaveRequestDto){
 
    return new ReplySaveRequestDto.ResponseDto<Integer>(HttpStatus.OK.value(),1);
}

detail.jsp

<div class="card">
    <form>
        <input type="hidden" id="userId" value="${principal.user.id}">
        <input type="hidden" id="boardId" value="${board.id}">
        <div class="card-body">
            <textarea id="reply-content" rows="2" class="form-control"></textarea>
        </div>
        <div class="card-footer">
            <button type="button" id="btn-reply-save" class="btn btn-primary">등록</button>
        </div>
    </form>
</div>

board.js

replySave: function () {
    let data = {
        userId : $("#userId").val(),
        boardId : $("#boardId").val(),
        content: $("#reply-content").val(),
    };
 
    $.ajax({
        type: "POST",
        url: `/api/board/${data.boardId}/reply`, // 참고로 여기서 따옴표가 아니라 백틱이다!
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
    }).done(function (resp) {
        alert("댓글작성이 완료되었습니다.");
        location.href = `/board/${data.boardId}`;
    }).fail(function (error) {
        alert(JSON.stringify(error));
    });
},

BoardApiController

※ 댓글쓰기의 매개변수도 변경됐으므로 BoardService 에가서 수정해야한다.

@PostMapping("/api/board/{boardId}/reply")
public ReplySaveRequestDto.ResponseDto<Integer> replaySave(@RequestBody ReplySaveRequestDto replySaveRequestDto){
            boardService.댓글쓰기2(replySaveRequestDto);
    return new ReplySaveRequestDto.ResponseDto<Integer>(HttpStatus.OK.value(),1);
}

BoardService

• 지난 강의에서는 User의 정보는 principle에 저장되어있는 값을 가져왔기 때문에 따로 영속화하지않았지만 이번엔 매개변수로 받아오므로 user도 영속화해줘야한다.
• 방법1처럼 넣을 수도있지만 Reply에 방법2update() 함수를 만들어 값을 넣을 수도 있다.

@Autowired
private UserRepository userRepository;

@Transactional
public void 댓글쓰기2(ReplySaveRequestDto replySaveRequestDto){
 
    User user= userRepository.findById(replySaveRequestDto.getUserId()).orElseThrow(()->{
        return new IllegalArgumentException("댓글 찾기 실패 : 유저 id를 찾을 수 없습니다.");
    }); // 영속화 완료
 
    Board board= boardRepository.findById(replySaveRequestDto.getBoardId()).orElseThrow(()->{
        return new IllegalArgumentException("댓글 찾기 실패 : 게시글 id를 찾을 수 없습니다.");
    }); // 영속화 완료
 
// 방법1
//        Reply reply = Reply.builder()
//                .user(user)
//                .board(board)
//                .content(replySaveRequestDto.getContent())
//                .build();
 
// 방법2
    Reply reply = new Reply();
    reply.update(user,board,replySaveRequestDto.getContent());
 
    replyRepository.save(reply);
}

Reply

public void update(User user, Board board, String content){
    setUser(user);
    setBoard(board);
    setContent(content);
}