🔥 #11 글쓰기 기능

글쓰기 기능을 구현하기 위해 saveForm.jsp 라는 글쓰기 페이지를 만들어야 한다.

빨간색 에러

**상대경로** : '현재 위치한 곳을 기준'으로 해서 '그곳의 위치'

- `/` : 루트 -> 가장 최상의 디렉토리로 이동한다. (Web root)
- `./` : 현재 위치 -> 파일이 현재 디렉토리를 의미한다.
- `../` : 현재 위치의 상단 폴더 -> 상위 디렉토리로 이동한다.

이렇게 변경해준다!

< BoardController >

@Controller
public class BoardController {

    @GetMapping({"", "/"})
    public String index() { // 컨트롤러에서 로그인 된 세션을 찾는 방식 : @AuthenticationPrincipal PrincipalDetail principal
        // /WEB-INF/views/index.jsp
        return "index";
    }

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

BoardController에서 주소 매핑도 해주면 된다.

---

로그인 한 후 인증이 된 상태에서 메인화면을 보면 왼쪽 상단에 글쓰기가 나온다.

글쓰기에는 /board/saveForm 주소가 매핑되어 있다. (index.jsp)

< BoardController >

@Controller
public class BoardController {

    @GetMapping({"", "/"})
    public String index() { // 컨트롤러에서 로그인 된 세션을 찾는 방식 : @AuthenticationPrincipal PrincipalDetail principal
        // /WEB-INF/views/index.jsp
        return "index";
    }

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

따라서 /board/saveForm 주소를 컨트롤러에서 찾아 saveForm 이라는 글쓰기 페이지(jsp)를 리턴해준다.

< saveForm.jsp >

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%@ include file="../layout/header.jsp"%>

<div class="container">

    <form>

        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" class="form-control" placeholder="Enter title" id="title">
        </div>
        <div class="form-group">
            <label for="content">Content</label>
            <textarea class="form-control summernote" rows="5" id="content"></textarea>
        </div>

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

</div>

<script>
    $('.summernote').summernote({
        tabsize: 2,
        height: 300
    });
</script>

<script src="/js/board.js"></script>
<%@ include file="../layout/footer.jsp"%>

summernote에서 짜집기로 가져다가 만들었다!

글쓰기 페이지에서 사용자가 제목(title)과 내용(content)를 입력하고 글쓰기완료 버튼(id = "btn-save")을 누르면 board.js가 작동한다.

< board.js >

let index = {
    init: function () {
        $("#btn-save").on("click", ()=>{
            this.save();
        });
    },

    save: function () {
        let data = {
            title: $("#title").val(),
            content: $("#content").val()
        };

        $.ajax({
            type: "POST",
            url: "/api/board",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        }).done(function (resp) {
            // 결과가 정상이면 done 실행
            alert("글작성이 완료되었습니다.");
            location.href = "/";
        }).fail(function (error) {
            // 실패하면 fail 실행
            alert("회원가입이 실패하였습니다.");
            alert(JSON.stringify(error));
        });
    },
}


index.init();

saveForm에서 가져온 title과 content를 /api/board 주소에 json 데이터 타입으로 보낸다.

< BoardApiController >

// Data만 리턴
@RestController
public class BoardApiController {

    @Autowired
    private BoardService boardService;

    @PostMapping("/api/board")
    public ResponseDto<Integer> save(@RequestBody Board board, @AuthenticationPrincipal PrincipalDetail principal) {
        boardService.글쓰기(board, principal.getUser());
        return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);
    }
}

/api/board 주소가 매핑되어있는 메소드로 왔다.
여기서 매개변수로 받은 board에는 title과 content가 들어있을 것이다.
하지만 board 테이블에는 user의 id도 필요하므로 매개변수에 @AuthenticationPrincipal PrincipalDetail principal 도 추가한다.
이것은 컨트롤러에서 로그인 된 세션을 찾는 방식이다.

board와 principal안에 들어있는 User를 boardService의 글쓰기 함수로 넘긴다.

< BoardService >

@Service // 스프링이 컴포넌트 스캔을 통해서 Bean에 등록을 해줌. (IoC)
public class BoardService {

    @Autowired
    private BoardRepository boardRepository;

    @Transactional // 전체가 성공해야 commit, 실패하면 rollback
    public void 글쓰기(Board board, User user) { // title, content
        board.setCount(0);
        board.setUser(user);
        boardRepository.save(board);
    }
}

Count는 조회수인데 기본을 0으로 set 한다.
User에는 매개변수로 받은 user을 set하고,
레퍼지토리에 save한다.

이렇게 DB에 save까지 정상적으로 완료되면 다시 BoardApiController로 돌아와서 HttpStatus가 정상적으로 리턴된다.
그다음 board.js로 돌아와 결과가 정상이므로 done이 실행되어 글 작성이 완료되었다는 메세지가 띄워지고 / 주소로 가게 된다.

---

순서 정리

1. /board/saveForm으로 들어오면 컨트롤러에서 해당 주소를 찾고 리턴으로 saveForm.jsp 호출
2. saveForm.jsp 에서 title과 content를 가지고 버튼(id = "btn-save")을 누르면 board.js 작동
3. title과 content 가져와서 /api/board에 json 데이터로 날림
4. 그럼 title과 content가 BoardApiController의 해당 주소 메소드로 날라옴
5. BoardApiController의 save 함수 매개변수 board는 title과 content만 들고 있음
6. board(title, content)와 User 같이 들고 BoardService의 글쓰기로 감
7. BoardService의 글쓰기 함수로 와서 조회수 0으로 set하고 User도 들고 온 user로 set함
8. BoardRepository에 save
9. save 후 다시 BoardApiController로 돌아와서 return 으로 정상 응답
10. 그러면 정상 응답이 board.js의 done으로 와서 / 로 이동