# 댓글 목록 뷰 만들기 ## 미션 댓글 목록을 게시글 상세 페이지에 추가하시오.  ## 01:17 댓글 뷰 페이지 삽입 - mustache #### ../articles/show.mustache ``` {{>layouts/header}} <table class="table"> ... </table> <a href="/articles/{{article.id}}/edit" class="btn btn-primary">Edit</a> <a href="/articles/{{article.id}}/delete" class="btn btn-danger">Delete</a> <a href="/articles">Go to Article List</a> {{>comments/_comments}} {{>layouts/footer}} ``` #### ../comments/_comments.mustache ``` <div> <!-- 댓글 목록 --> {{>comments/_list}} <!-- 새 댓글 작성 --> {{>comments/_new}} </div> ``` #### ../comments/_list.mustache ``` <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> ``` #### ../comments/_new.mustache ``` <!-- 파일만 생성 --> ``` ## 07:25 댓글 목록 가져오기 - Controller, Service, Model, View, addattribute #### ../controller/ArticleController ``` ... public class ArticleController { @Autowired private ArticleRepository articleRepository; @Autowired private CommentService commentService; ... @GetMapping("/articles/{id}") // 해당 URL요청을 처리 선언 public String show(@PathVariable Long id, Model model) { // URL에서 id를 변수로 가져옴 log.info("id = " + id); // 1: id로 데이터를 가져옴! Article articleEntity = articleRepository.findById(id).orElse(null); List<CommentDto> commentsDtos = commentService.comments(id); // 2: 가져온 데이터를 모델에 등록! model.addAttribute("article", articleEntity); model.addAttribute("commentDtos", commentsDtos); // 3: 보여줄 페이지를 설정! return "articles/show"; } ... } ``` ## 🔥 구글링 훈련하기 - 부트스트랩 Card 사용법