먼저 Comment.js에 전체적인 틀을 만들어준다. 그 후 루트 폼에다만 올릴 수 있는 댓글 창(Root comment form)을 만들겠다.
comment model을 만들어준다. responseTo는 나중에 reply댓글과 본 댓글을 구분하기 위한 필드이다.
Comment.js에 comment를 위한 template을 만들었다.
onChage 함수를 만듦으로 인해서 타이핑할 수 있게 해줌.
form과 버튼에 onClick이벤트를 만들었다. 댓글을 전송할 때, content(댓글 내용), writer(useSelector로 받아옴), productId를 담아서 보낸다.
라우터에서 처리할 부분. 받아온 variables를 Comment객체에 담아 생성하고 저장.
컨솔로 무슨 값이 오나 확인해 보자.
populate해줘서 유저의 자세한 정보까지 들어왔다.
다음에 만들 것은 singleComment. 루트 폼에서 올린 댓글을 보여주고, reply버튼을 눌르면 그에대한 댓글 창도 보이게 할 것이다.
antd에서 comment를 import.
boolean state를 만들어서, true일때만, form을 보이게 해줌.
submit 부분은 comment.js와 똑같아서 그대로 가져왔다. 다만 다른점은, 댓글에 대한 reply이기 때문에, 구분하고자 responseTo 정보를 넣어줘야 하는데, 그전에 모든 Comment 정보를 데이터베이스에서 가져와야한다.
부모 컴포넌트에서 가져오도록한다.
이게 각 애니에 맞는 커멘트를 가져와야, 애니에 맞는 주소창마다 다른 커멘트를 보여줄 수 있다. 컨솔창에서 받아온 데이터를 확인하자.
이 정보들을 detailproductpage에서 프로퍼티로, comment.js에 넣어주고화면에 보여주기 위해서 map으로 풀어준다. 풀어준 comment를 singleComment에서도 프로퍼티로 넣어준다. 대댓글을 첫 화면에 안보여주기 위해, responseTo를 넣어준거다.
이제 comment.js나 singlecomment.js에서 받은 정보를 부모 컴포넌트에다 업데이트를 해야한다.
refreshFucntion을 만들어서 받아준 모습이다.
다음으로 대댓글 컴포넌트를 만들 차례이다.replyComment, comment.js와 거의 같지만, reply에서는 responseTo가 있다, 그래서 조건을 줄 때, 부모 커멘트의 아이디와 responseTo가 같다면 보여주게 한다.
정리하자면, comment.js에서 첫번째 depth, singlecomment가 먼저 렌더링 -> replyComent로 감 -> 여기서 renderReplyComment가 렌더링 되지않음(첫번째 depth는 responseTo가 없기 때문에) -> 다시 replyComent로 가서 부모 comment랑 id가 같은지 확인...(반복)
그럼 부모id를 가져와야 한다. Comment.js에 가서...
comment._id를 주면 된다.
다음은 View1...부분을 reply가 있을때만 보여주려고 한다.
commentLists를 가져와서, responseTo와 부모커멘트아이디와 같은 개수 만큼 카운팅 후(useEffect의 []부분을 비워주면, dom이 랜더링 될 때만 실행되기 때문에, commentLists가 변할 때로 넣어준다.)
0개 이상이면, 보여주게 하면 된다. 다음은 좋아요 싫어요 기능을 만들어 보겠다.
좋아요, 싫어요를 위한 모델을 만든다.
버튼 아래다가 만들어 주기 위해 productInfo.js에 만들겠다.
ui는 antd에서 가져왔다. 다음은 현재 좋아요와 싫어요의 정보를 DB에서 가져오도록 하겠다.
좋아요 싫어요 기능을, 애니에 첨부할 거, 댓글에 첨부할 거를 나눠야 한다.
그래서 부모컴포넌트에서 내려줄때, 프로퍼티로 product를 줘서 variable값을 구분했다. 이제 router부분을 처리해보자.
백에서도 댓글과 애니에 따라 구분 한 모습.
likes로 받아왔기 때문에, likes의 길이로 state로 업뎃해주면, 얼마나 많은 좋아요를 받았는지 알 수 있다. 그리고 내가 좋아요를 눌렀는지의 여부로 state를 업뎃하고나서 좋아요 이모티콘의 색깔(빈 것, 채워진 것)을 조건문으로 구분하려고 한 거다.
여기서 props.userId는 locatstorage에서 가져온, 로그인한 현재 아이디고, like.userId는 좋아요를 눌렀을 때 보낸 정보의 id이다... 지금까진 like에 관한 기능이고, 이제는 dislike에 관한 기능을 이와 반대로만 해주면 된다.
다시와서 보면, LikeAction값으로 다른 아이콘을 추가 했고, 좋아요 옆 숫자도 Likes state로 소프트하게 보여줄 수 있게 됐다. 아이콘의 onclick기능을 상황에 맞게 코딩해야한다.
마지막으로 할 작업이다.
좋아요 버튼이 클릭되어 있지 않을 때를 보자.
like collection에 클릭 정보를 넣어주고, 어짜피 좋아요, 싫어요는 user 한명당 한개만 누르니깐 조건없이 저렇게 바로 지워주면 되는구나.
다시 프론트로 와서, like 설정을 바꿔주고, dislike가 눌러진 상태면 action을 비워주고 dislike를 1 감소시킨다... 지금까진 likeAction이 null, 클릭이 안되었을 때, 처리한거고 클릭이 되어있을 때를 처리해야한다.
여긴 단순히 지워주기만 하면 끝이다.
다음은 onDislike 함수를 만들어야 하는데, 지금까지 onlike 정반대로만 해주면 되서 생략하겠다.
완성!