스프링 부트 게시판 만들기-3 글 상세보기 페이지 만들기

1. 개요

이번 항목에서는 스프링 부트 게시판의 글 상세보기 페이지를 만드는 방법에 대해 설명하겠습니다. 글 상세보기 페이지는 사용자가 게시판에서 클릭한 글의 내용과 관련된 정보를 자세히 보여주는 역할을 합니다. 이 페이지는 사용자에게 좀 더 풍부한 경험을 제공하고, 더 많은 정보를 제공하여 사용자가 글을 더 잘 이해하고 상호작용할 수 있도록 도와줍니다.

다음 항목에서는 화면 구성 요소, 글 상세 정보 표시, 댓글 목록 표시, 댓글 작성 기능에 대해 자세히 알아보겠습니다. 이 과정을 통해 스프링 부트를 사용하여 간단하고 실용적인 게시판을 만들 수 있는 방법을 익힐 수 있습니다.

2. 화면 구성 요소

글 상세보기 페이지는 기본적으로 다음과 같은 구성 요소로 이루어집니다:

• 제목: 글의 제목을 나타냅니다. 주로 h1 태그를 사용하여 큰 글씨로 표시합니다.
• 작성자: 글을 작성한 사용자의 정보를 표시합니다. 작성자의 닉네임이나 아이디를 보여줄 수 있습니다.
• 작성일: 글이 작성된 날짜와 시간을 표시합니다.
• 내용: 글의 내용을 자세히 보여줍니다. 긴 내용일 경우 스크롤을 통해 내용을 볼 수 있도록 구현할 수 있습니다.
• 이미지: 글에 첨부된 이미지를 표시할 수 있습니다. 일반적으로 이미지 형식인 jpg, png 등을 지원합니다.
• 댓글 목록: 해당 글에 작성된 댓글들을 보여줍니다. 댓글은 작성자, 작성일, 내용 등의 정보를 포함하여 표시할 수 있습니다.
• 댓글 작성 폼: 사용자가 댓글을 작성할 수 있는 폼을 제공합니다. 작성자 이름, 내용 입력란, 작성 버튼 등의 요소로 구성될 수 있습니다.

이러한 화면 구성 요소들을 조합하여 글 상세보기 페이지를 완성할 수 있습니다. 이어지는 항목들에서는 각각의 구성 요소에 대해 자세히 설명하고, 스프링 부트를 사용하여 어떻게 구현할 수 있는지 알아보겠습니다.

3. 글 상세 정보 표시

글 상세보기 페이지에서는 글의 제목, 작성자, 작성일, 내용 등의 정보를 표시해야 합니다. 이러한 정보들은 데이터베이스로부터 가져와야 하며, 스프링 부트를 사용하여 간단하게 구현할 수 있습니다.

먼저, 글의 제목은 h1 태그를 사용하여 큰 글씨로 표시할 수 있습니다. 스프링 부트는 Thymeleaf 템플릿 엔진을 기본으로 제공하므로, 템플릿 파일에서 다음과 같이 제목을 표시할 수 있습니다:

<h1 th:text="${post.title}"></h1>

위 코드에서 post.title은 컨트롤러에서 전달된 글의 제목을 나타냅니다. 이렇게 하면 제목이 동적으로 표시되며, 사용자가 클릭한 글의 제목이 h1 태그 내에 표시됩니다.

다음으로, 작성자와 작성일은 글의 정보를 가져와서 표시해야 합니다. 마찬가지로 Thymeleaf를 이용하여 정보를 표시할 수 있습니다. 예를 들어, 작성자의 아이디를 표시하려면 다음과 같이 코드를 작성할 수 있습니다:

<p>작성자: <span th:text="${post.author}"></span></p>

위 코드에서 post.author는 컨트롤러에서 전달된 글의 작성자를 나타냅니다. 이렇게 하면 작성자 정보가 동적으로 표시되며, 사용자가 클릭한 글의 작성자가 span 태그 내에 표시됩니다. 작성일 역시 동일한 방식으로 표시할 수 있습니다.

마지막으로, 글의 내용을 표시하기 위해서는 div 태그나 p 태그 등을 사용하여 내용을 묶어줄 수 있습니다. 스크롤을 통해 긴 내용을 볼 수 있도록 스타일을 적용할 수도 있습니다.

<div th:text="${post.content}"></div>

위 코드에서 post.content는 컨트롤러에서 전달된 글의 내용을 나타냅니다. 이렇게 하면 글의 내용이 동적으로 표시되며, 사용자가 클릭한 글의 내용이 div 태그 내에 표시됩니다.

위와 같은 방법으로 글의 제목, 작성자, 작성일, 내용 등의 정보를 동적으로 표시할 수 있습니다. 이러한 정보들은 데이터베이스에서 가져와서 사용자에게 제공해야 하므로, 스프링 부트에서는 컨트롤러를 통해 데이터를 전달하는 방식으로 구현할 수 있습니다.

4. 댓글 목록 표시

글 상세보기 페이지에서는 해당 글에 작성된 댓글 목록을 표시해야 합니다. 이를 위해서는 데이터베이스로부터 댓글 데이터를 가져와야 하며, 스프링 부트를 사용하여 구현할 수 있습니다.

댓글 목록을 표시하기 위해서는 리스트 형태로 각각의 댓글을 표시해야 합니다. 스프링 부트의 Thymeleaf 템플릿 엔진을 사용하여 다음과 같은 형태로 댓글 목록을 표시할 수 있습니다:

<h2>댓글 목록</h2>
<div th:each="comment : ${comments}">
    <p>작성자: <span th:text="${comment.author}"></span></p>
    <p>작성일: <span th:text="${comment.date}"></span></p>
    <p><span th:text="${comment.content}"></span></p>
</div>

위 코드에서 comments는 컨트롤러에서 전달된 댓글 목록 데이터를 나타냅니다. th:each 디렉티브를 사용하여 comments 리스트 내의 각각의 댓글에 대해 반복적으로 표시할 수 있습니다. 각각의 댓글은 작성자, 작성일, 내용 등의 정보를 포함하며, Thymeleaf를 사용하여 동적으로 표시됩니다.

위 코드를 실행하면, 해당 글에 작성된 댓글들이 순서대로 나열되어 화면에 보여지게 됩니다. 사용자는 댓글 작성자, 작성일, 내용 등의 정보를 확인할 수 있으며, 필요한 경우 스크롤을 통해 더 많은 댓글을 볼 수 있도록 구현할 수 있습니다.

다음으로, 사용자가 댓글을 작성할 수 있는 폼을 표시해야 합니다. 폼은 다음과 같은 형태로 만들 수 있습니다:

<h3>댓글 작성</h3>
<form action="/comment" method="POST">
    <input type="text" name="author" placeholder="작성자" required>
    <textarea name="content" placeholder="댓글 내용" required></textarea>
    <button type="submit">작성하기</button>
</form>

위 코드에서 /comment 경로로 POST 요청을 보내면서 댓글을 작성하는 폼이 구현됩니다. 작성자와 내용을 입력할 수 있는 입력란이 제공되며, 작성하기 버튼을 클릭하면 폼 데이터가 서버로 전송됩니다.

위와 같은 방식으로 댓글 목록을 표시하고, 댓글 작성 폼을 제공할 수 있습니다. 이렇게 구현된 댓글 목록 페이지는 사용자가 글의 댓글을 확인하고 작성할 수 있도록 도와줍니다.

5. 댓글 작성 기능

글 상세보기 페이지에서는 사용자가 댓글을 작성할 수 있는 기능을 제공해야 합니다. 이를 위해 스프링 부트를 사용하여 댓글 작성 기능을 구현할 수 있습니다.

댓글을 작성하기 위해 사용자는 작성자 이름과 댓글 내용을 입력해야 합니다. 이를 위해 폼을 제공하여 사용자가 입력란에 원하는 정보를 작성할 수 있도록 해야 합니다. 스프링 부트에서는 다음과 같은 형태로 댓글 작성 폼을 구현할 수 있습니다:

<h3>댓글 작성</h3>
<form action="/post/{{postId}}/comments" method="POST">
    <input type="text" name="author" placeholder="작성자" required>
    <textarea name="content" placeholder="댓글 내용" required></textarea>
    <button type="submit">작성하기</button>
</form>

위 코드에서 /post/{{postId}}/comments 경로로 POST 요청을 보내면서 댓글을 작성하는 폼이 구현됩니다. {{postId}}는 실제 글의 ID 값으로 대체되어야 합니다.

위 폼에서 작성자와 댓글 내용을 입력할 수 있는 입력란이 제공됩니다. 사용자는 이름과 내용을 입력한 후 작성하기 버튼을 클릭하여 댓글을 작성할 수 있습니다. 작성하기 버튼을 클릭하면 폼 데이터가 서버로 전송됩니다.

댓글 작성 기능을 구현하기 위해서는 컨트롤러에서 해당 경로에 대한 POST 요청을 처리하는 핸들러 메서드를 작성해야 합니다. 예를 들어, 다음과 같은 형태로 핸들러 메서드를 작성할 수 있습니다:

@PostMapping("/post/{postId}/comments")
public String addComment(@PathVariable Long postId, Comment comment) {
    // 댓글 데이터 처리 로직
    // ...
    return "redirect:/post/" + postId; // 작성한 글로 리다이렉트
}

위 코드에서 @PostMapping("/post/{postId}/comments") 어노테이션은 해당 경로로 들어오는 POST 요청을 처리하는 핸들러 메서드임을 나타냅니다. @PathVariable 어노테이션을 사용하여 postId 값을 가져와서 사용할 수 있으며, Comment 객체는 사용자가 작성한 댓글 데이터를 나타냅니다.

핸들러 메서드에서는 댓글 데이터를 처리할 수 있는 로직을 구현해야 합니다. 예를 들어, 데이터베이스에 댓글을 저장하거나, 글 상세보기 페이지로 리다이렉트하는 등의 작업을 수행할 수 있습니다. 이를 위해서는 데이터베이스 처리나 필요한 서비스 클래스를 주입하여 사용할 수 있습니다.

위와 같은 방식으로 댓글 작성 기능을 구현할 수 있습니다. 사용자는 댓글 작성 폼을 통해 원하는 정보를 입력한 후 작성하기 버튼을 클릭하여 댓글을 작성할 수 있습니다. 작성한 댓글은 서버에서 처리되며, 사용자는 작성된 댓글을 확인할 수 있습니다.