게시글 작성 기능

1. 글 작성 form 요청에 대한 컨트롤러 생성
   • /board/saveForm 요청이 오면 template/board/saveForm.html 을 응답할 수 있도록 컨트롤러에 메서드를 생성하고 매핑합니다.
2. 글 작성 html Form 생성
   • 글 작성 Form에서는 제목과 내용을 입력받고 버튼 클릭 시 api 요청을 보낼 것입니다.
   • 내용 작성은 BootStrap5 환경에서 summernote 라이브러리를 사용하여 입력 받습니다.
3. ajax 통신을 위한 javascript 파일 생성
   • btn-save 버튼 클릭 시 제목, 내용을 json 형식으로 /api/board 에 POST 요청을 전송합니다.
4. api 요청에 대한 Controller 생성
   • Board 객체와 PrincipalDetail 객체를 파라미터로 받아 글쓰기 api를 수행합니다.
5. 비즈니스 로직을 담당하는 Service 파일 생성

1. 글 작성 form 요청에 대한 컨트롤러 생성

/board/saveForm 요청이 오면 template/board/saveForm.html 을 응답할 수 있도록 컨트롤러에 메서드를 생성하고 매핑해줍니다.

@GetMapping("/board/saveForm")
public String saveForm(){
    return "board/saveForm";
}

2. 글 작성 html Form 생성

글 작성 Form에서는 제목과 내용을 입력받고 버튼 클릭 시 api 요청을 보낼 것입니다.

내용 작성은 BootStrap5 환경에서 summernote 라이브러리를 사용하여 입력 받습니다.

<div class="container">

  <form method="post">
    <div class="mb-3 mt-3" style="margin-bottom: 1rem">
      <label for="title" class="form-label">Title</label>
      <input type="text" class="form-control" id="title" placeholder="Enter Title" name="title">
    </div>

    <div class="mb-3" style="margin-bottom: 1rem">
      <label for="content" class="form-label">Content</label>
      <textarea class="form-control summernote" rows="5" id="content" name="content"></textarea>
    </div>
  </form>

  <button id="btn-save" class="btn btn-primary">글쓰기 완료</button>

</div>

<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.js>"
        integrity="sha256-5slxYrL5Ct3mhMAp/dgnb5JSnTYMtkr4dHby34N10qw=" crossorigin="anonymous"></script>

<!-- language pack -->
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/lang/summernote-ko-KR.min.js>"
        integrity="sha256-y2bkXLA0VKwUx5hwbBKnaboRThcu7YOFyuYarJbCnoQ=" crossorigin="anonymous"></script>

<script>
  $('.summernote').summernote({
    placeholder: 'Enter Content',
    tabsize: 2,
    height: 400,
    lang: 'ko-KR', // default: 'en-US'
  });
</script>

<script src="/js/board.js"></script>

btn-save(글쓰기 완료) 버튼을 클릭하면 board.js에 작성되어있는 코드가 실행됩니다.

부트스트랩5 환경에서의 섬머노트 사용법은 해당 포스팅을 활용하였습니다.

Summernote for Bootstrap 5 - 꾸션(ccusean)