게시판 만들기 - 3

게시판 만들기 - 3

• 상세페이지 생성
• /question/detail/id 로 연결하기 위해서 controller에 추가

@GetMapping("/detail/{id}")
public String detail(Model model, @PathVariable("id")Integer id){
    Question question = questionService.getQuestion(id);
    model.addAttribute("question",question);
    return "question_detail";
}

Service에 id 를 통해서 repository에서 찾은 값이 존재할 경우 값 반환

• 없는 경우 DataNotFoundException으로 커스텀 exception으로 예외 경우 처리

public Question getQuestion(Integer id){
    Optional<Question> findQuestion = questionRepository.findById(id);
    if(findQuestion.isPresent()){
        return findQuestion.get();
    }else{
        throw new DataNotFoundException("question not found");
    }
}

답변 기능 추가하기

• 상세페이지 부분에 댓글을 추가해놓자.
• html 부분에 답변 등록 버튼 추가

<h1 th:text="${question.subject}"></h1>
<div th:text="${question.content}"></div>

<form th:action="@{|/answer/create/${question.id}|}" method="post">
    <textarea name="content" id="content" rows="15"></textarea>
    <input type="submit" value="답변등록">
</form>

• 답변 등록에 맞는 답변 컨트롤러를 추가 진행.

답변 컨트롤러 추가

@Controller
@RequestMapping("/answer")
@RequiredArgsConstructor
public class AnswerController {

    private final QuestionService questionService;
    private final AnswerService answerService;

    @PostMapping("/create/{id}")
    public String createAnswer(Model model, @PathVariable("id") Integer id,
                               @RequestParam("content") String content) {

        Question question = questionService.getQuestion(id);
        answerService.create(question, content);

        return String.format("redirect:/question/detail/%s", id);
    }
}

• 답변으로 적은 내용이 저장되게 하기 위해서 post로 받아서 진행.

답변 서비스 추가

@Service
@RequiredArgsConstructor
public class AnswerService {

    private final AnswerRepository answerRepository;

    public void create(Question question, String content) {
        Answer answer = new Answer();
        answer.setContent(content);
        answer.setQuestion(question);
        answer.setCreateDate(LocalDateTime.now());

        answerRepository.save(answer);
    }

}

• 정답 추가하는 정답 서비스 추가
• 답변 생성을 위해서 question과 content를 받아서 객체를 생성 진행

상세페이지에 답변 표시하기

• 답변이 표시되기 위해서 Question.answerList를 통해서 답변을 추가하기.

<h5 th:text="|${#lists.size(question.answerList)}개의 답변이 있습니다.|"></h5>
<div>
    <ul>
        <li th:each="answer : ${question.answerList}" th:text="${answer.content}"></li>
    </ul>
</div>

• 부트스트랩 추가해놓기
• static에
  

• html부분을 꾸미기 위해서 bootstrap을 추가로 하여 html 부분에 적용

question_detail 과 question_list 에 적용

• question_detail.

<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<div class="container my-3">
    <!-- 질문 -->
    <h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;" th:text="${question.content}"></div>
            <div class="d-flex justify-content-end">
                <div class="badge bg-light text-dark p-2 text-start">
                    <div th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 답변의 갯수 표시 -->
    <h5 class="border-bottom my-3 py-2"
        th:text="|${#lists.size(question.answerList)}개의 답변이 있습니다.|"></h5>
    <!-- 답변 반복 시작 -->
    <div class="card my-3" th:each="answer : ${question.answerList}">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;" th:text="${answer.content}"></div>
            <div class="d-flex justify-content-end">
                <div class="badge bg-light text-dark p-2 text-start">
                    <div th:text="${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm')}"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 답변 반복 끝  -->
    <!-- 답변 작성 -->
    <form th:action="@{|/answer/create/${question.id}|}" method="post" class="my-3">
        <textarea name="content" id="content" rows="10" class="form-control"></textarea>
        <input type="submit" value="답변등록" class="btn btn-primary my-2">
    </form>
</div>

• question_list

<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<div class="container my-3">
    <table class="table">
        <thead class="table-dark">
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성일시</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="question, loop : ${questionList}">
            <td th:text="${loop.count}"></td>
            <td>
                <a th:href="@{|/question/detail/${question.id}|}" th:text="${question.subject}"></a>
            </td>
            <td th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></td>
        </tr>
        </tbody>
    </table>
</div>