댓글 보기의 개요

Untitled

댓글 뷰 페이지 삽입하기

public class ArticleController {
	(중략)
		@GetMapping("/articles/{id}") // 데이터 조회 요청 접수
    public String show(@PathVariable Long id, Model model) { // 매개변수로 id 받아오기
			(중략)
			return "articles/show";
		}

<a href="/articles">Go to Article List</a>

{{>comments/_comments}} <!-- 상세 페이지에 댓글 뷰 파일 삽입 -->
{{>layouts/footer}}

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

<div id="comments-list"> // 댓글 목록 영역 설정
    {{#commentDtos}} // 댓글 목록 순회
        <div class="card m" id="comments-{{id}}"> // 댓글 카드 만들고 id 부여
            <div class="card-header"> // 댓글 헤더 영역 설정
                {{nickname}} // 닉네임 보여주기
            </div>
            <div class="card-body"> // 댓글 본문 영역 설정
                {{body}} // 댓글 본문 보여주기
            </div>
        </div>
    {{/commentDtos}}
</div>

댓글 목록 가져오기

public class ArticleController {
    @Autowired
    private ArticleRepository articleRepository;

    @Autowired
    private CommentService commentService; // 서비스 객체 주입

		(중략)
}

public String show(@PathVariable Long id, Model model) { // 매개변수로 id 받아오기
        log.info("id = " + 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";
    }

<div id="comments-list">
    {{#commentDtos}}
        <div class="card m-2" id="comments-{{id}}">
				// 카드 요소의 마진(margin), 즉 바깥 여백을 2만큼 설정
            (중략)
        </div>
    {{/commentDtos}}
</div>

마무리

  1. 댓글의 레이아웃:

    Untitled

  2. 댓글 뷰 파일의 구성

  3. {{#commentDtos}}{{/commentDtos}}