스프링부트 ~24 | 댓글목록 뷰페이지 만들기 => 게시글 상세페이지에서 확인

Intro

 

지난번에 댓글 기능을 추가했다. 댓글 DB에는 PK(primary key 즉 id), nickname, body 그리고 FK인 article_id가 저장되는 형태였다. 그리고 댓글 CRUD 요청을 받는 컨트롤러와 그것을 처리하는 서비스를 REST API 방식으로 구현완료했다.

 

이번에는 댓글 데이터를 가져와 적절히 보여주는 뷰페이지를 만들어 볼 것이다. 

그리고 이 뷰페이지는 해당 게시글 상세페이지에서 하단에서 볼 수 있게 해보자.

 

---

상세페이지에 댓글 레이아웃 추가하기

 

article 상세페이지 하단에 comment가 보이게 할 것이다. 

즉 상세페이지 레이아웃에 댓글레이아웃을 추가해주자.

 

구현해둔 ArticleController에 가보자.

상세페이지 url 요청이 들어왔을 때 보여줄 화면, 즉 뷰페이지를 리턴하는 메서드를 구현해두었다.

return "articles/show"가 보인다. 그 뷰페이지(resources/templates/articles/show.mustache)로 가서 댓글레이아웃을 추가해주면 되는 것이다. 원하는 위치에 {{>comments/_comments}} 자리를 잡아주고, comments/_comments.mustache를 만들어주러 가쟈~~~

 

댓글 레이아웃은 이런 형태로 만들어줄 것이다.

~~ 댓글 목록 보여주는 부분~~

~~ 새 댓글 작성하는 부분~~

 

 

---

댓글 뷰페이지 _comments.mustache 작성하기

 

이렇게 큰 틀을 잡아놓았다.

<div>
  <!-- 댓글 목록 -->
  {{>comments/_list}}
  <!-- 새 댓글 작성 -->
  {{>comments/_new}}
</div>

 

이제 _list.mustache랑 _new.mustache 파일만 만들어주면 된다.

 

↓↓↓

 

div로 틀을 잡아주고... id를 부여해주고... 슥슥.. card형태의 컴포넌트를 이욯해보자.

아래처럼 잘 작성해주면 댓글들을 쭈루룩 보여주게 된다.

recall) commentDtos를 View에서 이용하기 위해서는 Controller 에서 모델에 키, 값을 등록해주어야 했다는 것!

recall) model.addAttribute(key, value)

<div id="comments-list">
  {{#commentDtos}}
    <div class="card m-2" id="comments-{{id}}">
      <div class="card-header">
        {{nickname}}
      </div>
      <div class="card-body">
        {{body}}
      </div>
    </div>
  {{/commentDtos}}
</div>

 

recall) 배웠던 mustache 문법

예전에 이렇게 정리해두었다.

 

cf) 부트스트랩에서 제공하는 card 컴포넌트의 구조

부트스트랩 도큐먼트에서 card 검색해보면 다양한 여러 카드형태의 컴포넌트를 사용할 수 있다. (구경고고)

실습에서는 그 중에서 댓글 용도로 쓸만한 card 형태를 골라 사용한 것이다.

 그냥 이 카드 형태 가져와서 쓸부분 남기고 안쓸부분(버튼 등) 날려줘서 적절히 변형해 쓰면 된다.

 

 

 

댓글 목록 가져오기 (Controller에서 데이터를 Model에 등록)

recall) commentDtos를 View에서 이용하기 위해서는 Controller 에서 모델에 Dto를 등록해주어야 했다는 것!

 

상세페이지 요청 url이 매핑된 메서드를 Controller에서 확인해보자.

상황: 상세페이지 뷰페이지로 return "articles/show"하고 있고, 우리는 그 뷰페이지에 comment layout을 추가중이다.

우리는 뷰페이지에서 댓글들의 리스트를 사용해야 한다.

 

아 그러면 commentService를 통해 댓글 리스트를 가져와서 모델에 등록하면 되겠다.

현재 게시글의 id를 통해 현재게시글과 연결된 댓글을 가져오면 되겠다. 

recall) 서비스는 당연히 리포지토리를 가지고 있고, 리포지토리에는 쿼리 메서드 두어서 특정 게시글의 모든 댓글을 조회하는 기능을 만들어 둔 상황이다.

 

List<CommentDto> commentDtos = commentService.comments(id);를 추가하여 댓글 dto 리스트를 가져오고, 

그 리스트 자체를 모델에 추가한다. model.addAttribute("commentDtos", commentDtos)

@GetMapping("/articles/{id}") // 해당 URL요청을 처리 선언
public String show(@PathVariable Long id,
                       Model model) { // URL에서 id를 변수로 가져옴
        log.info("id = " + id);
        // id로 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null);
        List<CommentDto> commentsDtos = commentService.comments(id);
        // 가져온 데이터를 Model에 등록
        model.addAttribute("article", articleEntity);
        model.addAttribute("commentDtos", commentsDtos);
        // 보여줄 페이지 설정
        return "articles/show";
}

 

 

 

---

힛