[Blog 프로젝트] 게시글 상세보기 기능 구현

게시글 상세보기 기능

1. 게시글 상세보기 버튼 클릭 시 /board/{id} URI로 GET요청을 보냅니다.
2. /board/{id} 요청에 응답하기 위해 BoardController에 메서드를 생성합니다.
3. 상세보기를 위한 view는 board/detail.html에서 생성합니다.

해당 순서에 따라 코드를 추가해보겠습니다.

---

board/layout.html

게시글 레이아웃에서 상세보기 버튼 클릭 시 /board/{id} 로 GET요청을 보낼 수 있도록 코드를 추가 해줍니다.

URI에 게시글의 ID정보를 포함하여 GET 요청을 전송합니다.

<a th:href="@{/board/{id}(id = ${board.id})}" class="btn btn-primary">상세 보기</a>

다음으로 해당 요청에 응답할 메서드를 컨트롤러에 추가해줍니다.

---

BoardController.java

URI에 포함된 id 값을 @PathVariable 어노테이션을 사용하여 저장한 다음, 해당 id 값으로 게시글을 검색하여 모델에 담아 뷰 페이지로 전송합니다.

@GetMapping("/board/{id}")
public String boardDetail(@PathVariable int id, Model model){
    model.addAttribute("board", boardService.findBoardById(id));
    return "board/detail";
}

다음으로 view를 생성합니다.

---

board/detail.html

model에 담겨 전달된 정보를 Thymeleaf 문법을 사용하여 사용자에게 출력해줍니다.

content 정보에는 html태그가 포함되어 있기 때문에 html태그를 적용하여 사용자에게 보여주기 위해서는 th:utext 속성을 사용하여야 합니다.

<div class="container">

    <div style="margin: 1rem 0; display: flex">
        <button type="button" class="btn btn-outline-secondary" style="margin-right: .5rem" onclick="history.back()">돌아가기</button>

        <div th:if="${board.user.username.equals(#authentication.name)}">
            <button th:onclick="|location.href = '@{/board/{id}/updateForm(id=${board.id})}'|" class="btn btn-warning">수정</button>
            <button id="btn-delete" class="btn btn-danger">삭제</button>
        </div>

    </div>
    <div style="border: 2px solid lightgray; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem">

        <div class="mb-3 mt-3" style="margin-bottom: 1rem;">
            <!--                <p>글번호: <span id="id" th:text="${board.id}"></span></p>-->
            <p style="margin-bottom: 0">작성자: <span th:text="${board.user.username}"></span></p>
            <p>작성일: <span th:text="${board.createDate}"></span></p>
            <h1 id="title" th:text="${board.title}">title</h1>
        </div>

        <hr>

        <div class="mb-3" style="margin-bottom: 1rem;">
            <div id="content">
                <p th:utext="${board.content}"></p>
            </div>
        </div>
    </div>

    <script type="text/javascript" th:inline="javascript">
        const id = $.parseJSON('[[ ${board.id} ]]');

    <script src="/js/board.js"></script>
</div>

<!-- --------------------- footer --------------------- -->
<div th:replace="/fragments/footer :: footerFragment"></div>
</body>
</html>