[GDSC] 웹 커리큘럼 6주차 : 글쓴이 표시 & 수정 · 삭제

▼ What ?

'회원가입' 과 '로그인/로그아웃' 까지 복습하고 정리해봤는데, 양이 많아서 글쓴이를 표시하는 기능과 글을 수정하고 삭제하는 기능에 대해선 따로 정리해보려고 한다.

---

▼ 글쓴이 표시

 

Question & Answer 엔티티에 글쓴이 속성 추가

 

Question 엔티티 수정

• Question 엔티티에 'author' 속성을 추가하자.
  ➜ 여러 개의 질문(many)이 한 명의 작성자(one)에게 작성될 수 있으므로 '@ManyToOne' 을 적용해줘야 한다.

...
import jakarta.persistence.ManyToOne;
import com.gdsc.webboard.user.SiteUser;
...
public class Question {

    ...
    
    @ManyToOne
    private SiteUser author;
}

 

---

 

Answer 엔티티 수정

• Question 엔티티에 추가했듯이 author 속성을 추가해주면 된다.

...
import com.gdsc.webboard.user.SiteUser;
...
public class Answer {
    
    ...

    @ManyToOne
    private SiteUser author;
}

🔻 H2 console 테이블에 author 속성이 추가된 것을 확인 가능하다.

 

---

 

답변에 작성자 등록하기

• 답변을 작성하는 Answer 컨트롤러를 수정해주자.
  ➜ 현재 로그인한 유저에 대한 정보를 불러와야 하기 때문에, 스프링 시큐리티가 제공하는 Principal 객체를 사용해야 한다 !

...
import java.security.Principal;
...
public class AnswerController {

    ...

    @PostMapping("/create/{id}")
    public String createAnswer(Model model, @PathVariable("id") Integer id, 
            @Valid AnswerForm answerForm, BindingResult bindingResult, Principal principal) {
        ...
    }
}

 

• principal.getName()
  ➜ 현재 로그인한 유저의 사용자명(사용자ID)을 반환해주는 메서드를 사용할 수 있게 되었다.
  ➜ 그렇게 얻은 사용자명을 이용해서 User 서비스를 통해 SiteUser 엔티티 클래스의 객체를 조회할 수 있는 'getUser' 메서드를 'UserService' 클래스에 추가해주면 된다.
  

...
import java.util.Optional;
import com.gdsc.webboard.DataNotFoundException;
...
public class UserService {

    ...

    public SiteUser getUser(String username) {
        Optional<SiteUser> siteUser = this.userRepository.findByusername(username);
        if (siteUser.isPresent()) {
            return siteUser.get();
        } else {
            throw new DataNotFoundException("siteuser not found");
        }
    }
}

🔻 UserRepository에 이미 선언해둔 'findByusername' 을 이용하여 쉽게 구현 가능 !

 

• 이제 답변 저장시에 작성자를 저장할 수 있도록 Answer 서비스를 수정 !
  ➜ 답변을 생성하는 create 메서드에서 파라미터로 SiteUser 엔티티 클래스 객체를 추가로 전달받아서 답변 저장시에 author 속성도 저장되게 하면 된다.

...
import com.mysite.sbb.user.SiteUser;
...
public class AnswerService {

    ...

    public Answer create(Question question, String content, SiteUser author) {
        Answer answer = new Answer();
        answer.setContent(content);
        answer.setCreateDate(LocalDateTime.now());
        answer.setQuestion(question);
        answer.setAuthor(author);    // 글쓴이 Setter 메서드 추가
        this.answerRepository.save(answer);
        return answer;
    }
}

 

• 이렇게 Answer 서비스의 답변을 등록하는 create 메서드 수정까지 마쳤으니, 해당 메서드에 SiteUser 객체를 전달하도록 Answer 컨트롤러를 수정해주면 된다.
  ➜ Principal 객체를 통해 사용자명을 얻고, 그 사용자명을 통해 얻은 SiteUser 객체를 답변을 등록하는 AnswerService의 create 메서드에 전달하여 답변을 author 속성과 함께 저장하도록 했다.

...
import com.gdsc.webboard.user.SiteUser;
import com.gdsc.webboard.user.UserService;
...
public class AnswerController {

    private final QuestionService questionService;
    private final AnswerService answerService;
    private final UserService userService;

    @PostMapping("/create/{id}")
    public String createAnswer(Model model, @PathVariable("id") Integer id, 
            @Valid AnswerForm answerForm, BindingResult bindingResult, Principal principal) {
        Question question = this.questionService.getQuestion(id);
        // 사용자명을 통해 SiteUser 객체 조회
        SiteUser siteUser = this.userService.getUser(principal.getName());
        if (bindingResult.hasErrors()) {
            model.addAttribute("question", question);
            return "question_detail";
        }
        this.answerService.create(question, answerForm.getContent(), siteUser);  // SiteUser 객체 전달
        return String.format("redirect:/question/detail/%s", id);
    }
}

 

---

 

질문에 작성자 등록하기

• 답변에 작성자를 등록하는 방법과 동일하다.

 

• 작성자 정보를 저장하기 위해 QuestionService 수정.

...
import com.gdsc.webboard.user.SiteUser;
...
public class QuestionService {

    ...

    public void create(String subject, String content, SiteUser user) {
        Question q = new Question();
        q.setSubject(subject);
        q.setContent(content);
        q.setCreateDate(LocalDateTime.now());
        q.setAuthor(user);  // 작성자에 대한 setter 메서드 추가
        this.questionRepository.save(q);
    }
}

 

• QuestionController 수정.

...
import java.security.Principal;
import com.gdsc.webboard.user.SiteUser;
import com.gdsc.webboard.user.UserService;
...
public class QuestionController {

    private final QuestionService questionService;
    private final UserService userService;  // UserService 객체 주입

    ...

    @PostMapping("/create")
    public String questionCreate(@Valid QuestionForm questionForm, 
            BindingResult bindingResult, Principal principal) {
        if (bindingResult.hasErrors()) {
            return "question_form";
        }
        // 사용자명으로 SiteUser 객체 조회
        SiteUser siteUser = this.userService.getUser(principal.getName());
        // SiteUser 객체 전달
        this.questionService.create(questionForm.getSubject(), questionForm.getContent(), siteUser);
        return "redirect:/question/list";
    }
}

 

---

 

로그인이 필요한, Principal 객체를 사용하는 메서드

• 로그아웃 상태에서 질문이나 답변을 등록하면 다음과 같은 서버오류(500)가 발생한다.

🔻 Principal 객체는 로그인을 해야만 생성되는 객체이기 때문이다.

➜ Principal 객체를 사용하는 메서드에 '@PreAuthorize("istAuthenticate()")' 애너테이션을 사용해야 한다.

 

• @PreAuthorize("istAuthenticate()")
  ➜ 이 애너테이션이 붙은 메서드는 로그인이 필요한 메서드임을 알린다.
  ➜ 따라서, 해당 메서드가 로그아웃 상태에서 호출되면 자동으로 로그인 페이지로 이동된다 !
  ( @PreAuthorize ➜ 해당 메서드를 실행하기 전에 권한을 검사하는 애너테이션이다. )
  

 

• 로그인이 필요한 메서드들에 모두 '@PreAuthorize("istAuthenticate()")' 애너테이션을 적용하면 된다.

...
import org.springframework.security.access.prepost.PreAuthorize;
...
public class QuestionController {

    ...

    @PreAuthorize("isAuthenticated()")
    @GetMapping("/create")
    public String questionCreate(QuestionForm questionForm) {
        return "question_form";
    }

    @PreAuthorize("isAuthenticated()")
    @PostMapping("/create")
    public String questionCreate(@Valid QuestionForm questionForm, 
            BindingResult bindingResult, Principal principal) {
        ...
    }
}

...
import org.springframework.security.access.prepost.PreAuthorize;
...
public class AnswerController {

    ...

    @PreAuthorize("isAuthenticated()")
    @PostMapping("/create/{id}")
    public String createAnswer(Model model, @PathVariable("id") Integer id, @Valid AnswerForm answerForm,
            BindingResult bindingResult, Principal principal) {
        ...
    }
}

 

• 그리고 '@PreAuthorize' 애너테이션이 동작할 수 있도록 스프링 시큐리티 설정도 수정해줘야 한다.
  
  
  • '@EnableMethodSecurity' 애너테이션의 'prePostEnabled = true' 요소.
    ➜ 로그인 여부를 검사하기 위해 사용했던 '@PreAuthorize' 애너테이션을 사용하기 위해 반드시 필요하다 !

...
import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity;

@Configuration
@EnableWebSecurity
@EnableMethodSecurity(prePostEnabled = true)
public class SecurityConfig {
    ...
}

 

• 이제 질문 등록은 로그아웃 상태에선 할 수 없게 되었지만, 답변을 등록할 때엔 로그아웃 상태에서도 글을 작성하는 것까진 가능하다.
  ➜ 그런데 문제가 <저장하기> 버튼을 클리하면 자동으로 로그인 화면으로 이동하게 되는데 작성한 답변이 사라지는 문제가 있다.
  ➜ 그래서 그냥 로그아웃 상태에선 답변 작성조차도 못하게 막는 것이 좋을 것 !
  ➜ question_detail 템플릿을 수정해주면 된다.
  [ /web-board/src/main/resources/templates/question_detail.html ]

<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
    ...
    <!-- 답변 작성 -->
    <form th:action="@{|/answer/create/${question.id}|}" th:object="${answerForm}" method="post" class="my-3">
        <div th:replace="~{form_errors :: formErrorsFragment}"></div>
        <textarea sec:authorize="isAnonymous()" disabled th:field="*{content}" class="form-control" rows="10"></textarea>
        <textarea sec:authorize="isAuthenticated()" th:field="*{content}" class="form-control" rows="10"></textarea>
        <input type="submit" value="답변등록" class="btn btn-primary my-2">
    </form>
</div>
</html>

🔻 로그인 상태가 아닌 경우(sec:authorize="isAnonymous()"), textarea 태그에 'disabled' 속성을 적용해 입력을 못하게 만들었다.

 

• H2 console에서 'AUTHOR_ID' 속성(Attribute, Column)에 글쓴이가 저장된 것을 확인할 수 있다.

 

---

 

스프링 시큐리티 기능

• 스프링 시큐리티는 로그아웃 상태에서 "질문 등록" 버튼을 클리하면 "로그인" 화면으로 이동하고, 이후 로그인을 하게 되면 원래 하려고 했던 "질문 등록" 화면으로 이동한다.

 

---

 

글쓴이 표시 (Front-end)

• 질문 목록 템플릿에 글쓴이 표시 !
  [ /web-board/src/main/resources/templates/question_list.html ]

...
<!-- 질문 -->
<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 class="mb-2">
                    <span th:if="${question.author != null}" th:text="${question.author.username}"></span>
                </div>
                <div th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></div>
            </div>
        </div>
    </div>
</div>
...

 

• 질문 상세 템플릿에 글쓴이 표시 !
  [ /web-board/src/main/resources/templates/question_detail.html ]

...
<!-- 답변 반복 시작 -->
<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 class="mb-2">
                    <span th:if="${answer.author != null}" th:text="${answer.author.username}"></span>
                </div>
                <div th:text="${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm')}"></div>
            </div>
        </div>
    </div>
</div>
<!-- 답변 반복 끝  -->

 

---

▼ 수정 · 삭제

 

수정 일시

 

• 질문이나 답변이 언제 수정되었는지 확인할 수 있도록 Question과 Answer 엔티티에 수정 일시를 의미하는 'modifyDate' 속성을 추가하자.

...

public class Question {
    ...
    privaet LocalDateTime modifyDate;
}

 

---

 

질문 수정

 

• 질문 상세 템플릿에 질문 "수정" 버튼을 추가하자.
  [ /web-board/src/main/resources/templates/question_detail.html ]
  
  
  •  #authentication.getPrincipal().getUsername() == question.author.username
    ➜ 로그인한 유저와 글쓴이가 동일한 경우에만 버튼이 나타나도록 !
    ( #authentication.getPrincipal() : Principal 객체를 리턴하는 타임리프의 유틸리티. )

...
<!-- 질문 -->
<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 class="mb-2">
                    <span th:if="${question.author != null}" th:text="${question.author.username}"></span>
                </div>
                <div th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></div>
            </div>
        </div>
        <!-- 수정 버튼 추가 -->
        <div class="my-3">
            <a th:href="@{|/question/modify/${question.id}|}" class="btn btn-sm btn-outline-secondary"
                sec:authorize="isAuthenticated()"
                th:if="${question.author != null and #authentication.getPrincipal().getUsername() == question.author.username}"
                th:text="수정"></a>
        </div>
    </div>
</div>
(... 생략 ...)

 

• 질문 상세 템플릿에 'GET' 방식의 "/question/modify/질문ID" 형태의 URL 링크 추가까지 해줬으니 이제 질문 컨트롤러를 수정해야 한다.
  ➜ 해당 URL을 'GetMapping' 해주는 'questionModify' 메서드를 생성해자.
  
  
  • return "question_form";
    ➜ 질문 등록시 사용했던 "question_form" 템플릿을 질문 수정할 때도 그대로 사용하는데, 이렇게 할 경우엔 "저장하기" 버튼을 누르게 되면 해당 질문이 수정되는 것이 아니라 새로운 질문이 등록되게 된다.
    ➜ 이러한 문제를 질문 등록 템플릿에서 'form' 태그의 action을 활용하여 해결할 수 있다.

...
import org.springframework.http.HttpStatus;
import org.springframework.web.server.ResponseStatusException;

@RequestMapping("/question")
@RequiredArgsConstructor
@Controller
public class QuestionController {

    ...

    @PreAuthorize("isAuthenticated()")
    @GetMapping("/modify/{id}")
    public String questionModify(QuestionForm questionForm, @PathVariable("id") Integer id, Principal principal) {
        Question question = this.questionService.getQuestion(id);
        if(!question.getAuthor().getUsername().equals(principal.getName())) {
            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "수정 권한이 없습니다.");
        }
        questionForm.setSubject(question.getSubject());
        questionForm.setContent(question.getContent());
        return "question_form";
    }
}

 

• 질문 등록 템플릿을 수정해주자 !
  ➜ form 태그의 action 속성 없이 폼을 전송하게 되면 폼의 action은 현재의 URL(브라우저에 표시되는 URL주소)을 기준으로 전송된다.
  ➜ 즉, '질문 등록시' 전송되는 URL과 '질문 수정시' 전송되는 URL이 달라지게 된다.
  [ /web-board/src/main/resources/templates/question_form.html ]

<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container">
    <h5 class="my-3 border-bottom pb-2">질문등록</h5>
    <!-- form 태그의 'th:action' 속성 삭제 -->
    <form th:object="${questionForm}" method="post">
        <!-- CSRF 값 수동 추가 -->
        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
        <div th:replace="~{form_errors :: formErrorsFragment}"></div>
        <div class="mb-3">
            <label for="subject" class="form-label">제목</label>
            <input type="text" th:field="*{subject}" class="form-control">
        </div>
        <div class="mb-3">
            <label for="content" class="form-label">내용</label>
            <textarea th:field="*{content}" class="form-control" rows="10"></textarea>
        </div>
        <input type="submit" value="저장하기" class="btn btn-primary my-2">
    </form>
</div>
</html>

🔻 'th:action' 속성 삭제

➜ CSRF 값이 자동으로 생성되지 않아 수동으로 추가해줘야 한다.

➜ 스프링 시큐리티의 규칙에 따라 CSRF 값을 수동으로 추가할 경우에 위와 같이 CSRF 값을 설정하기 위한 hidden 형태의 input 엘리먼트를 수동으로 추가해야 한다 !

 

• 질문 데이터를 수정할 수 있는 'modify' 메서드를 Question 서비스에 추가해주자.

...

public class QuestionService {

    ...

    public void modify(Question question, String subject, String content) {
        question.setSubject(subject);
        question.setContent(content);
        question.setModifyDate(LocalDateTime.now());
        this.questionRepository.save(question);
    }
}

 

• 이제 질문 수정 화면에서 질문의 제목이나 내용을 변경하고 "저장하기" 버튼을 눌렀을 때 호출되는 POST 요청을 처리하기 위해 Question 컨트롤러에 'questionModify' 메서드를 추가하자.

...

public class QuestionController {

    ...

    @PreAuthorize("isAuthenticated()")
    @PostMapping("/modify/{id}")
    public String questionModify(@Valid QuestionForm questionForm, BindingResult bindingResult, 
            Principal principal, @PathVariable("id") Integer id) {
        if (bindingResult.hasErrors()) {
            return "question_form";
        }
        Question question = this.questionService.getQuestion(id);
        if (!question.getAuthor().getUsername().equals(principal.getName())) {
            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "수정권한이 없습니다.");
        }
        this.questionService.modify(question, questionForm.getSubject(), questionForm.getContent());
        return String.format("redirect:/question/detail/%s", id);
    }
}

🔻 이제 로그인한 유저와 글쓴이가 같으면 질문 상세 화면에 <수정> 버튼이 나타난다.

 

---

 

질문 삭제

 

• 질문 삭제 버튼이 나타나도록 질문 상세 템플릿에 코드를 추가해주자.

...
<!-- 질문 -->
<h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
<div class="card my-3">
    <div class="card-body">
        ...
        <div class="my-3">
            <a th:href="@{|/question/modify/${question.id}|}" class="btn btn-sm btn-outline-secondary"
                sec:authorize="isAuthenticated()"
                th:if="${question.author != null and #authentication.getPrincipal().getUsername() == question.author.username}"
                th:text="수정"></a>
            <!-- 질문 삭제 버튼 추가 -->
            <a href="javascript:void(0);" th:data-uri="@{|/question/delete/${question.id}|}"
                class="delete btn btn-sm btn-outline-secondary" sec:authorize="isAuthenticated()"
                th:if="${question.author != null and #authentication.getPrincipal().getUsername() == question.author.username}"
                th:text="삭제"></a>
        </div>
    </div>
</div>
...

🔻 <수정> 버튼과 달리 'href' 속성값을 'javascript:void(0)' 으로 설정한 다음, 삭제를 실행할 URL을 얻기 위해 'th:data-uri' 속성을 추가하고, <삭제> 버튼이 눌리는 이벤트를 확인할 수 있도록 class 속성에 "delete" 항목을 추가해줬다.

( 'data-uri' 속성은 자바스크립트에서 클릭 이벤트 발생시 'this.dataset.uri' 를 함께 사용하여 그 값을 얻을 수 있다. )

➜ 'href' 속성값에 삭제 URL로 직접 설정하지 않는 이유는 <삭제> 버튼을 클릭했을 때 "정말로 삭제하시겠습니까" 와 같은 재확인 절차가 필요하기 떄문이다 !

 

• 앞서 말한 확인창을 호출하기 위해선 다음과 같은 자바스크립트 코드가 필요하다.
  ➜ HTML 구조에서 '</body>' 태그 바로 위에 삽입하는 것을 지향하자 !
  ( 화면 렌더링이 완료된 후에 자바스크립트가 실행되기 때문이다. )
  ➜ 그러기 위해선 'layout.html' 을 상속하는 템플릿들에서 'content 블록' 을 구현하게 했던 것처럼, layout 템플릿을 아래처럼 수정해줘야 한다.
  ➜ 이렇게 하면, 이 'layout.html' 을 상속하는 템플릿은 자바스크립트의 삽입 위치를 신경쓸 필요없이 스크립트 블록을 사용하여 자바스크립트를 작성할 수 있게 되는 것이다.
  [ /web-board/src/main/resources/templates/layout.html ]

<!doctype html>
<html lang="ko">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
    <!-- sbb CSS -->
    <link rel="stylesheet" type="text/css" th:href="@{/style.css}">
    <title>Hello, sbb!</title>
</head>
<body>
<!-- 네비게이션바 -->
<nav th:replace="~{navbar :: navbarFragment}"></nav>
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
<th:block layout:fragment="content"></th:block>
<!-- 기본 템플릿 안에 삽입될 내용 End -->
<!-- Bootstrap JS -->
<script th:src="@{/bootstrap.min.js}"></script>
<!-- 자바스크립트 코드 추가 -->
<th:block layout:fragment="script"></th:block>
<!-- 자바스크립트 End -->
</body>
</html>

 

• 이제 질문을 삭제할 수 있는 자바스크립트 블록을 질문 상세 템플릿 하단에 작성해주면 된다.

<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
    ...
</div>
<script layout:fragment="script" type='text/javascript'>
const delete_elements = document.getElementsByClassName("delete");
Array.from(delete_elements).forEach(function(element) {
    element.addEventListener('click', function() {
        if(confirm("정말로 삭제하시겠습니까?")) {
            location.href = this.dataset.uri;
        };
    });
});
</script>
</html>

🔻 <삭제> 버튼을 클릭하고 <확인>을 선택하면 'data-uri' 속성에 저장된 "/question/delete/질문ID" 형태의 URL을 호출하게 된다.

 

• 이렇게 템플릿 파일까지 작성해줬으니, 다음으로 질문을 삭제하는 'delete' 메서드를 Question 서비스에 추가해주자.
  ➜ Question 객체를 인자로 받아 Question 리포지터리를 통해 질문 데이터를 삭제하도록 한다.

...
public class QuestionService {
    
    private final QuestionRepository questionRepository;
    
    ...

    public void delete(Question question) {
        this.questionRepository.delete(question);
    }
}

 

• 질문을 삭제하는 기능을 추가했으니, <삭제> 버튼을 클릭했을 때 호출되는 "/question/delete/질문ID" 형태의 URL을 처리하도록 하는 'questionDelete' 메서드를 Question 컨트롤러에 추가해주자.
  
  
  • question.getAuthor().getUsername().equals(principal.getName())
    ➜ (URL로 전달받은 'id' 값으로 Question 데이터를 조회한 후) 로그인한 유저와 질문 작성자가 동일한 경우 위에서 작성한 서비스의 'delete' 메서드를 호출해 질문을 삭제하도록 한다.
    
    
  • return "redirect:/";
    ➜ 질문 제이터 삭제 후엔 질문 목록 화면으로 돌아갈 수 있도록 루트 페이지 "/" 로 리다이렉트해준다.

...

public class QuestionController {

    ...

    @PreAuthorize("isAuthenticated()")
    @GetMapping("/delete/{id}")
    public String questionDelete(Principal principal, @PathVariable("id") Integer id) {
        Question question = this.questionService.getQuestion(id);
        if (!question.getAuthor().getUsername().equals(principal.getName())) {
            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "삭제권한이 없습니다.");
        }
        this.questionService.delete(question);
        return "redirect:/";
    }
}

 

🔻 이제, 질문을 작성한 유저와 로그인한 유저가 동일할 경우 상세조회 화면에 <삭제> 버튼이 나타날 것이다.

 

---

 

답변 수정

 

• 답변 수정/삭제 기능은 질문 수정/삭제 기능을 구현하는 방식과 거의 비슷하게 구현할 수 있다.
  ➜ 단, 답변 등록 템플릿(answer_form.html)을 추가적으로 생성해줘야 한다.

 

• 답변 수정 버튼 추가 !
  [ /web-board/src/main/resources/templates/question_detail.html ]

...
<!-- 답변 반복 시작 -->
<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 class="mb-2">
                    <span th:if="${answer.author != null}" th:text="${answer.author.username}"></span>
                </div>
                <div th:text="${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm')}"></div>
            </div>
        </div>
        <!-- 답변 수정 버튼 추가 -->
        <div class="my-3">
            <a th:href="@{|/answer/modify/${answer.id}|}" class="btn btn-sm btn-outline-secondary"
                sec:authorize="isAuthenticated()"
                th:if="${answer.author != null and #authentication.getPrincipal().getUsername() == answer.author.username}"
                th:text="수정"></a>
        </div>
    </div>
</div>
<!-- 답변 반복 끝  -->
...

 

• GET 방식으로 요청되는 URL을 처리하기 위해 컨트롤러를 수정하기 전에, Answer 컨트롤러에서 필요로 하는 '답변 조회 기능' 과 '답변 수정 기능' 부터 Answer 서비스에서 구현해주자 !
  
  
  • getAnswer : 답변 ID로 답변 조회
    
    
  • modify : 답변의 내용(content)으로 수정하고 수정 일시도 저장.

...
import java.util.Optional;
import com.mysite.sbb.DataNotFoundException;

public class AnswerService {

    ...

    public Answer getAnswer(Integer id) {
        Optional<Answer> answer = this.answerRepository.findById(id);
        if (answer.isPresent()) {
            return answer.get();
        } else {
            throw new DataNotFoundException("answer not found");
        }
    }

    public void modify(Answer answer, String content) {
        answer.setContent(content);
        answer.setModifyDate(LocalDateTime.now());
        this.answerRepository.save(answer);
    }
}

 

• <수정> 버튼을 클릭했을 때 GET 방식으로 요청되는 '/answer/modify/답변ID' 형태의 URL을 처리할 수 있도록 Answer 컨트롤러에 'answerModify' 메서드를 추가하자.

...
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.server.ResponseStatusException;

public class AnswerController {

    ..

    @PreAuthorize("isAuthenticated()")
    @GetMapping("/modify/{id}")
    public String answerModify(AnswerForm answerForm, @PathVariable("id") Integer id, Principal principal) {
        Answer answer = this.answerService.getAnswer(id); // URL의 답변 id를 통해 조회한 답변 데이터 대입
        if (!answer.getAuthor().getUsername().equals(principal.getName())) {
            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "수정권한이 없습니다.");
        }
        answerForm.setContent(answer.getContent());
        return "answer_form";
    }
}

🔻 답변 수정시 기존의 내용이 필요하므로 AnswerForm 객체(answerForm)에 조회한 값(answer.getContent())를 저장(setContent)해야 한다.

 

• 이제 답변 등록 템플릿을 작성해주자.
  ➜ 답변을 수정할 때도 새로운 답변으로 등록되지 않도록, 답변 등록 템플릿의 폼 태그에도 'action' 속성은 사용하지 않는다 !
  [ /web-board/src/main/resources/templates/answer_form.html ]

<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container">
    <h5 class="my-3 border-bottom pb-2">답변 수정</h5>
    <form th:object="${answerForm}" method="post">
        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
        <div th:replace="~{form_errors :: formErrorsFragment}"></div>
        <div class="mb-3">
            <label for="content" class="form-label">내용</label>
            <textarea th:field="*{content}" class="form-control" rows="10"></textarea>
        </div>
        <input type="submit" value="저장하기" class="btn btn-primary my-2">
    </form>
</div>
</html>

 

• 이제 폼 템플릿을 통해 요청되는 POST 방식의 "/answer/modify/답변ID" 형태의 URL을 처리하는 메서드를 Answer 컨트롤러에 추가해주자.

...
public class AnswerController {

    ...

    @PreAuthorize("isAuthenticated()")
    @PostMapping("/modify/{id}")
    public String answerModify(@Valid AnswerForm answerForm, BindingResult bindingResult,
            @PathVariable("id") Integer id, Principal principal) {
        if (bindingResult.hasErrors()) {
            return "answer_form";
        }
        Answer answer = this.answerService.getAnswer(id);
        if (!answer.getAuthor().getUsername().equals(principal.getName())) {
            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "수정권한이 없습니다.");
        }
        this.answerService.modify(answer, answerForm.getContent());
        return String.format("redirect:/question/detail/%s", answer.getQuestion().getId());
    }
}

🔻 이제 답변 등록 사용자와 로그인 사용자가 동일할 때만 <수정> 버튼이 나타날 것이다.

 

---

 

답변 삭제

 

• 답변 삭제 버튼 추가 !
  [ /web-board/src/main/resources/templates/question_detail.html ]

...
<!-- 답변 반복 시작 -->
<div class="card my-3" th:each="answer : ${question.answerList}">
    <div class="card-body">
        ...
        <div class="my-3">
            <a th:href="@{|/answer/modify/${answer.id}|}" class="btn btn-sm btn-outline-secondary"
                sec:authorize="isAuthenticated()"
                th:if="${answer.author != null and #authentication.getPrincipal().getUsername() == answer.author.username}"
                th:text="수정"></a>
            <!-- 답변 삭제 버튼 추가 -->
            <a href="javascript:void(0);" th:data-uri="@{|/answer/delete/${answer.id}|}"
                class="delete btn btn-sm btn-outline-secondary" sec:authorize="isAuthenticated()"
                th:if="${answer.author != null and #authentication.getPrincipal().getUsername() == answer.author.username}"
                th:text="삭제"></a>
        </div>
    </div>
</div>
<!-- 답변 반복 끝  -->
...

 

• Answer 서비스에 답변을 삭제하는 'delete' 메서드 추가 !

...
public class AnswerService {

    ...

    public void delete(Answer answer) {
        this.answerRepository.delete(answer);
    }
}

 

• Answer 컨트롤러에 <삭제> 버튼 클릭시 요쳥되는 GET 방식의 "/answer/delete/답변ID" 형태의 URL을 처리하는 'answerDelete' 메서드가 추가 !

...
public class AnswerController {

    ...

    @PreAuthorize("isAuthenticated()")
    @GetMapping("/delete/{id}")
    public String answerDelete(Principal principal, @PathVariable("id") Integer id) {
        Answer answer = this.answerService.getAnswer(id);
        if (!answer.getAuthor().getUsername().equals(principal.getName())) {
            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "삭제권한이 없습니다.");
        }
        this.answerService.delete(answer);
        return String.format("redirect:/question/detail/%s", answer.getQuestion().getId());
    }
}

🔻 이제 답변 <삭제> 버튼도 잘 동작할 것이다.

 

---

 

수정일시 표시

 

• 질문과 답변에 이미 표시되고 있는 작성일시 바로 왼쪽에 '수정 일시' 를 추가하자 !

...
<!-- 질문 -->
<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 th:if="${question.modifyDate != null}" class="badge bg-light text-dark p-2 text-start mx-3">
                <div class="mb-2">modified at</div>
                <div th:text="${#temporals.format(question.modifyDate, 'yyyy-MM-dd HH:mm')}"></div>
            </div>
            <div class="badge bg-light text-dark p-2 text-start">
                <div class="mb-2">
                    <span th:if="${question.author != null}" th:text="${question.author.username}"></span>
                </div>
                <div th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></div>
            </div>
        </div>
        (... 생략 ...)
    </div>
</div>
...
<!-- 답변 반복 시작 -->
<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 th:if="${answer.modifyDate != null}" class="badge bg-light text-dark p-2 text-start mx-3">
                <div class="mb-2">modified at</div>
                <div th:text="${#temporals.format(answer.modifyDate, 'yyyy-MM-dd HH:mm')}"></div>
            </div>
            <div class="badge bg-light text-dark p-2 text-start">
                <div class="mb-2">
                    <span th:if="${answer.author != null}" th:text="${answer.author.username}"></span>
                </div>
                <div th:text="${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm')}"></div>
            </div>
        </div>
        ...
    </div>
</div>
<!-- 답변 반복 끝  -->
...