2-12. 답변 기능 만들기

텍스트 창과 등록 버튼 만들기

//question_detail.html
<h1 th:text="${question.subject}"></h1>
<div th:text="${question.content}"></div>
<h5 th:text="|${#lists.size(question.answerList)}개의 답변이 있습니다.|"></h5>
<div>
    <ul>
        <li th:each="answer : ${question.answerList}" th:text="${answer.content}"></li>
    </ul>
</div>
<form th:action="@{|/answer/create/${question.id}|}" method="post">
    <textarea name="content" id="content" rows="15"></textarea>
    <input type="submit" value="답변등록">
</form>

#: Thymeleaf의 내장 함수나 객체에 접근하기 위한 특수한 기호

답변 컨트롤러 만들기

//AnswerController.java
package com.mysite.sbb.answer;

import com.mysite.sbb.question.Question;
import com.mysite.sbb.question.QuestionService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

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

	private final QuestionService questionService;
	private final AnswerService answerService;

	@PostMapping("/create/{id}")
	public String createAnswer(Model model, @PathVariable("id") Integer id,
			@RequestParam(value = "content") String content) {
		Question question = this.questionService.getQuestion(id);
		this.answerService.create(question, content); //답변을 저장할 수 있게됨
		return String.format("redirect:/question/detail/%s", id);
	}
}

답변 서비스 만들기

//AnswerService.java
package com.mysite.sbb.answer;

import com.mysite.sbb.question.Question;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

import java.time.LocalDateTime;

@RequiredArgsConstructor
@Service
public class AnswerService {

	private final AnswerRepository answerRepository;

	public void create(Question question, String content) { //question 객체, 내용
		Answer answer = new Answer();
		answer.setContent(content); //내용
		answer.setCreateDate(LocalDateTime.now()); //작성시간
		answer.setQuestion(question); //객체 자체를 담음
		this.answerRepository.save(answer);
	}
}

2-13. 웹 페이지 디자인하기

화면의 디자인

스태틱 디렉터리와 스타일시트 이해하기

CSS 파일은 HTML 파일과 달리 static 디렉터리에 저장해야 한다.

src/main/resources → static → New → File → style.css

textarea {
	width: 100%;
}

input[type=submit] {
	margin-top: 10px;
}

html와 css 연결