댓글 목록 보기

댓글은 라우팅에 따른 페이지 역할이 아니고 게시판 상세보기 하단에 위치하므로 components 폴더 아래에 구현한다.

먼저, DTO 객체인 Comment.ts 인터페이스를 dto 폴더 아래에 추가한다.

components 아래에 CommentList.tsx 컴포넌트를 추가한다.

components 폴더에 CommentList.scss 를 추가한다. CommentList.tsx에는 Comment.scss를 import 해야한다.

BoardView 컴포넌트에서 돌아 가기 버튼 바로 위에 댓글 컴포넌트를 추가한다.

댓글이 있다면 아래와 같이 보일것이다.

댓글 쓰기 구현

게시판 등록 페이지에서는 html5 validation을 사용하지 않았는데 여기서는 html5 validation을 사용해보겠다. 단순히 noValidate 만 제거 하면 된다. 그리고 requried 속성만 추가한다.

댓글이 빈채로 누르게 되면 required 속성을 만족하지 않았으므로 submit이 일어나지 않을것이다.

글을 입력하고 등록을 누르면 서버에 REST api를 호출하게 되고 해당 글을 리턴으로 받아서 바로 위에 추가하게 된다.