이번엔 포스트를 클릭했을 때 나오는 포스트 화면을 구현해보자.
차례대로 분석해보자. 최상단에 포스트 제목이 나온다. 그 아래에는 작성자의 닉네임이 나오고, 포스팅 된 시간이 나온다.
그 후 본문이 나타나고 태그들, 북마크 수, 댓글 수가 나타난다.
그 아래로는 reply 수와 reply들이 나타나게 된다.
reply에는 좋아요 갯수가 표현된다.
그 아래로는 새로운 댓글을 작성할 수 있게 되어있다.
그 외의 기능은 북마크하기, 게시글 수정, 삭제하기, 댓글 수정, 삭제하기 기능이 있다.
우선 이 부가기능을 제외하고 Post 읽어오는 것과 댓글 읽어오는 것 부터 제작해 보자.
Post에서 필요한 데이터를 정리하면
post title, post content, post code, user name, createdDate, post tags, bookmark count, reply count, is bookmarked 이다.
이에 맞춰서 PostDetailDto를 만들어준다.
이 Dto를 반환 받을 수 있도록 service를 만들어보자.
우선 테스트코드부터 작성하자.
다음처럼 테스트를 작성하고 loadPost가 PostDetailDto를 반환하도록 만들어보자.
다음처럼 spring data jpa를 이용한 기본 생성 메서드로 값을 얻어내 PostDetailDto를 만들어 반환해 주었다.
야호! 초록 막대가 떠올랐다!
포스트가 없을 때, 유저가 없을 때의 테스트도 만들어 실험해 주자.
모두 성공적으로 실행되는 걸 확인했다! (테스트가 늘어갈수록 기분이 좋다.)
그럼 이제 api를 만들어주도록 하자.
다음 url로 요청을 해 보자.
http://localhost:8080/api/v1/post?userId=1&postId=2
다음과 같이 값이 잘 오는 걸 확인할 수 있었다.
이렇게 포스트에 대한 읽기를 완성했다.
그럼 이어서 댓글에 대한 부분을 보도록 하자.
댓글 작성자 닉네임, 작성 시간, 프로필 사진, 댓글 내용, 댓글 좋아요 갯수가 읽어오는 데 필요하다.
정리하면 postId, userId, userName, user image, replyId, reply Content, reply like count, is reply liked, created date가 필요하다.
이에 맞게 DTO를 만들어주자.
이제 service에 메서드를 작성하기 위해 테스트 코드를 만들어준다.
우선 reply 작성부터 만들어주어야 리스트를 불러오는 작업을 진행할 수 있다.
이 기능에 대한 테스트부터 제작해 준다.
그 후 댓글 달기 기능을 제작해 준다.
테스트에 초록 막대가 들어왔다!
그럼 다시 원래 만드려던 테스트로 돌아오자.
이어서 searchReplyPageRecent를 제작해주도록 하자.
Custom에서 정의를 해 주고
ReplySearchCondition을 만들어주었다.
다음과 같이 content를 가져오고
다음과 같이 count쿼리를 가져와 Page를 반환해 주었고
사용자 이름, 댓글 내용으로 검색할 수 있도록 하였다.
다시 테스트로 돌아오자. condition이 추가되었으니 condition을 넣어준다.
이런 테스트에 실패했다!
댓글을 우리의 서비스는 최신순으로 보여주고 있는데 테스트는 오래된 순으로 짜버렸다.
테스트를 바꿔주자!
야호! 성공이다!
추후에 댓글 정렬 순서가 추가될 지 모르니 만든 김에 오래된 순도 구현해주자.
오래된 순도 잘 나타나는 걸 확인했다.
그럼 이제 api를 제작해준다.
http://localhost:8080/api/v1/replyListRecent?page=0&size=15&userId=1
위의 url로 요청했을 때
{
"content": [
{
"postId": 2,
"userId": 1,
"image": null,
"userName": "동건",
"replyId": 10,
"replyContent": "test reply",
"createdDate": "2021-09-03T21:59:03.84424",
"replyLikeCount": 0,
"isLiked": 0
}
],
"pageable": {
"sort": {
"sorted": false,
"unsorted": true,
"empty": true
},
"pageNumber": 0,
"pageSize": 15,
"offset": 0,
"paged": true,
"unpaged": false
},
"totalElements": 1,
"totalPages": 1,
"last": true,
"size": 15,
"numberOfElements": 1,
"sort": {
"sorted": false,
"unsorted": true,
"empty": true
},
"number": 0,
"first": true,
"empty": false
}다음처럼 잘 나오는 걸 확인할 수 있었다.
댓글 달기 역시 api를 제작해준다.
다음과 같이 잘 나타나는 걸 확인할 수 있었다.
이제 댓글 좋아요를 만들어주자.
구현해 준다.
북마크와 마찬가지로 존재하면 삭제하는 형태로 구현해 주었다.
테스트도 성공적으로 진행됐다.
댓글 좋아요 취소도 테스트 해 본다.
역시 성공했다.
api를 제작해준다.
http://localhost:8080/api/v1/replyLike 로 요청해주었다.
다음처럼 잘 나타나는 걸 확인할 수 있었다.
이제 댓글 수정 / 삭제를 구현해 주자.
다음과 같이 수정 / 삭제에 대한 테스트를 구현해 주었다.
다음처럼 구현해 주었다.
테스트 역시 통과하는 걸 볼 수 있었다!
그럼 api를 만들어주자.
다음처럼 만들어주었고 동작역시 확인되었다!
이렇게 Post와 Reply에 대한 구현을 마쳤다! 야호!
점점 테스트가 늘어가고 구현이 복잡해질수록 재밌어지고 있따!
일단은 조금 쉬고 다음엔 뭘 구현할지 봐야겠당
