[TOAST UI Editor] 토스트 에디터 게시글 등록 | 임시저장

 

😉 8개월 차 초보 개발자가 작성한 게시글입니다. 
제 포스팅이 다른 분들에게 0.0001%의 도움이 되길 바라는 마음으로 올바른 정보를 전달하려 노력했습니다.
하지만 아쉽게도 부족한 설명과 오류가 있을 수 있습니다. 멋쟁이 개발자님들의 피드백을 환영합니다.

---

화면단

 

Data Base

Board 테이블

Service/DAO단은 생략

 

 

---

 

게시글 작성 시 필요한 데이터 

게시글 번호, 작성자 회원 번호, 카테고리, 게시글 제목, 내용, 작성일, 첨부파일 경로

 

게시글 임시 저장 시 추가적으로 필요한 데이터

게시글 상태

 

기본적으로 게시글 번호, 작성 인 자동으로 insert 된다. (게시글 작성의 경우 게시글 상태는 default 값인 Y가 insert 되며, 임시 저장 게시글은 게시글 상태를 F로 하여 insert가 됨) 따라서 우리는 사용자가 입력한 값인 아래의 5개 값만 DB로 보내주면 된다.

 

1. 작성자 회원 번호

2. 카테고리

3. 게시글 제목

4. 내용

5. 첨부파일 경로

 

 

토스트 UI

 

토스트 UI 에디터 기본 화면 구현

 

[TOAST UI Editor] 토스트 UI 기본적인 화면 구현하기

 

 

게시글 작성과 임시저장 모두 같은 데이터를 전송하기 때문에 매개변수를 활용하였다.

 

임시 저장의 경우 onclick시 sumbit에 매개변수 2를 담고, 게시글 작성의 경우 등록 버튼을 클릭하면 하단의 모달 창이 출력되면서 OK 버튼 클릭을 해야 submit에 매개변수 1이 담기는 로직이다.

 

 

 

이때 호출되는 submit함수는 다음과 같다.

 

 

$title에는 제목이 담기고, content에는 editor에 작성된 내용이 HTML형식으로 담긴다.

그리고 조건식으로 게시글 작성인지 임시 저장인지를 구분하여 서로 다른 action값을 부여한다. 

 

💡 이번 프로젝트에서는 자식 요소 선택자를 이용해서 값을 가져왔지만, 다음에는 다른 방법으로 값을 가져오는 게 좋을 것 같다. 왜냐하면 input타입이 추가되어서 자신 요소의 순서가 달라지면 JQuery 변수에 제목과 내용이 아닌 다른 데이터들이 담길 수 있으니까 말이다.

 

 

매개 변수가 1이라면 게시글 작성이니까 insert.bo를, 그게 아니라면 임시 저장이니까 conTemSave.bo를 속성 값으로 부여하고 곧바로 submit 하였다. (메소드 체이닝)

 

Controller 단

게시글 작성

게시글 작성의 경우 커뮤니티 게시판과 칼럼 게시판이 같은 메소드를 동작하도록 하였는데, category의 담긴 값을 통해서 조건 검사를 하였다. 만약 category의 담긴 값이 칼럼이라면, 칼럼 전체 목록 페이지로 그렇지 않다면 커뮤니티 전체 목록 페이지로 이동한다.

 

💡 if ~ elseif를 사용해서 좀 더 정교한 조건 검사를 해주면 좋을 것 같다. 지금은 해당 메소드를 혼자 사용하지만, 나중에는 다른 팀원들과 공유해서 작업할 수 있으니까!

 

임시저장

임시 저장이 성공적으로 처리되었다면 result에는 1이 담긴다. 이때 result가 0보다 크면 임시 저장을 성공했다는 메시지가 출력되며 칼럼 전체 목록 페이지로 이동하고, 그렇지 않다면 실패 메시지가 출력된다.