[스프링 부트] 19. 수정 구현

1. detail.mustache

{{> layout/header}}

<section>
    <form action="/board/{{model.id}}/delete" method="post">
        <button type="submit">삭제</button>
    </form>
    <form action="/board/{{model.id}}/update" method="get">
        <button type="submit">수정</button>
    </form>
    <div>
        번호: {{model.id}}<br>
        제목: {{model.title}}<br>
        내용: {{model.content}}<br>
        작성일: {{model.createdAt}}<br>
    </div>
</section>

</body>
</html>

• 수정 버튼을 추가하고 form 태그로 감싼다.

• form의 action 속성에 주소값을 설정하고, method는 GET으로 설정한다.

2. update-form.mustache

{{> layout/header}}

<section>
    <form action="/board/{{model.id}}/update" method="post" enctype="application/x-www-form-urlencoded">
        <input type="number" value="{{model.id}}" readonly><br>
        <input type="text" name="title" placeholder="제목" value="{{model.title}}"><br>
        <input type="text" name="content" placeholder="내용" value="{{model.content}}"><br>
        <input type="text" value="{{model.createdAt}}" readonly><br>
        <button type="submit">수정</button>
    </form>
</section>

</body>
</html>

• 모든 input 태그를 form 태그로 감싸서 데이터를 한번에 전송할 수 있도록 한다.

• form태그의 action, method, enctype을 설정한다.
• 스프링을 연습하기 위해 JavaScript 없이 HTML 1.0 버전으로 상정하여 연습하며, GET과 POST만 사용할 수 있으므로 주소에 update를 추가한다.

• id와 createdAt 필드는 수정할 수 없으므로 readonly 속성을 추가한다.

3. BoardRepository

@RequiredArgsConstructor
@Repository
public class BoardRepository {
    private final EntityManager entityManager;

    public void update(int id, String title, String content) {
        Query q = entityManager.createNativeQuery("update board_tb set title=?, content=? where id=?");
        q.setParameter(1, title);
        q.setParameter(2, content);
        q.setParameter(3, id);
        q.executeUpdate();
    }
}

• BoardRepository에 update 메서드를 구현하여, id를 기준으로 title과 content를 DB에서 수정한다.

4. BoardRepositoryTest

@Import(BoardRepository.class)
@DataJpaTest
public class BoardRepositoryTest {
    @Autowired
    BoardRepository boardRepository;

    @Test
    public void update_test() {
        // given
        int id = 1;
        String title = "제목1수정";
        String content = "내용1수정";

        // when
        boardRepository.update(id, title, content);

        // then(eye)
        Board board = boardRepository.findById(id);
        System.out.println(board.getTitle());
        System.out.println(board.getContent());
    }
}

• BoardRepository에서 구현한 update 메서드를 테스트한다.

• 테스트의 3가지 단계
• given : 테스트를 위한 입력 값을 설정하는 단계
• DB에서 수정할 게시글의 id, title, content를 설정한다.
• when : 테스트할 메서드를 실행하는 단계
• boardRepository.update() 메서드를 호출하여 DB에서 게시글을 수정한다.
• then : 결과를 검증하는 단계
• 출력으로 결과를 검증하는 방식으로 대체하였다.

5. BoardController

@RequiredArgsConstructor
@Controller
public class BoardController {
    private final BoardService boardService;

    @PostMapping("/board/{id}/update")
    public String update(@PathVariable int id, BoardRequest.UpdateDTO updateDTO) {
        boardService.게시글수정(id,updateDTO);
        return "redirect:/board/" + id;
    }

    @GetMapping("/board/{id}/update")
    public String updateForm(@PathVariable int id, Model model) {
        BoardResponse.UpdateFormDTO updateFormDTO = boardService.게시글수정화면보기(id);
        model.addAttribute("model", updateFormDTO);
        return "update-form";
    }
}

• update:
• @PostMapping을 통해 /board/{id}/update 경로로 들어오는 POST 요청을 update 메서드에서 처리한다.
• @PathVariable("id") 어노테이션을 사용하여 수정할 게시글의 id를 받아오고, 수정할 내용은 BoardRequest.UpdateDTO 객체로 폼 데이터를 입력받는다.
• boardService에서 게시글수정 메서드를 호출하여 id에 해당하는 게시글을 updateDTO의 정보로 DB에서 수정한다.
• "redirect:/board/" + id 값을 반환하여 상세보기 페이지로 리다이렉트한다.

• updateForm:
• @GetMapping을 통해 /board/{id}/update 경로로 들어오는 GET 요청을 updateForm 메서드에서 처리한다.
• @PathVariable("id") 어노테이션을 사용하여 받아온 id를 사용해 boardService의 게시글수정화면보기() 메서드를 호출하여 게시글 정보를 UpdateFormDTO 형태로 받아오고, 이를 model에 저장한다.
• updateForm 메서드는 "update-form" 뷰를 반환하고, model에 저장된 정보로 뷰를 렌더링한다.

6. BoardResponse, BoardRequest

public class BoardResponse {
    @Data
    public static class UpdateFormDTO {
        private int id;
        private String title;
        private String content;
        private String createdAt;

        public UpdateFormDTO(Board board) {
            this.id = board.getId();
            this.title = board.getTitle();
            this.content = board.getContent();
            this.createdAt = MyDate.formatToStr(board.getCreatedAt());
        }
    }
}
public class BoardRequest {
    @Data
    public class UpdateDTO {
        private String title;
        private String content;
    }
}

• BoardResponse에서 수정 폼에 입력할 데이터를 저장하기 위한 객체 UpdateFormDTO를 정의한다.

• BoardRequest에서 수정 폼에서 입력받은 데이터를 저장하기 위한 객체 UpdateDTO를 정의한다.

7. BoardService

@RequiredArgsConstructor
@Service
public class BoardService {
    private final BoardRepository boardRepository;

    @Transactional
    public void 게시글수정(int id, BoardRequest.UpdateDTO updateDTO) {
        boardRepository.update(id, updateDTO.getTitle(), updateDTO.getContent());
    }

    public BoardResponse.UpdateFormDTO 게시글수정화면보기(int id) {
        Board board = boardRepository.findById(id);
        return new BoardResponse.UpdateFormDTO(board);
    }
}

• 게시글수정 메서드를 구현하여, id와 updateDTO 데이터를 boardRepository의 update 메서드를 사용하여 DB의 내용을 수정한다.

• 게시글수정화면보기 메서드를 구현하여, id에 해당하는 게시글의 정보를 UpdateFormDTO로 반환한다.

• @Transactional 어노테이션을 사용해 DB 트랜잭션을 관리한다.

8. 구현 테스트

• 상세보기 화면에서 수정 버튼을 클릭하여 수정 페이지로 이동한다.

• 제목과 내용을 수정한 후 수정 버튼을 클릭하여 수정을 요청한다.

• 수정 후 올바르게 리다이렉트되었는지 확인하고, 게시글이 제대로 수정되었는지 검증한다.