feat: 댓글 likeCount 응답 포함 및 웹 좋아요 토글 연동#284
Conversation
auto-assign
Bot
requested review from
joonamin,
laggu,
ninaxlee,
rlooo,
sezeme and
yuchem2
Summary of ChangesHello @HeesooJun, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 댓글 기능의 사용자 경험을 향상시키기 위해 서버와 웹 클라이언트 양쪽에서 변경 사항을 도입합니다. 서버는 이제 각 댓글에 대한 좋아요 수를 응답에 포함하며, 웹 애플리케이션은 사용자가 댓글에 좋아요를 누르거나 취소할 수 있는 상호작용적인 토글 버튼을 제공합니다. 이를 통해 사용자는 댓글의 인기도를 쉽게 파악하고 직접 참여할 수 있게 됩니다. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
안녕하세요! 댓글 좋아요 기능 추가와 likeCount 응답 포함을 위한 변경사항 잘 보았습니다. 서버와 웹 양쪽에서 필요한 기능이 잘 구현되었습니다.
서버 측에서는 likeCount를 계산하는 로직이 컨트롤러에 추가되었는데, 이 부분의 중복을 줄이고 모델에서 처리하도록 리팩토링하는 방안에 대해 코멘트를 남겼습니다. 웹 측에서는 react-query를 사용한 좋아요 토글 기능이 잘 동작하지만, 사용자 경험을 더욱 향상시킬 수 있는 낙관적 업데이트(Optimistic Update) 적용에 대한 제안을 드렸습니다.
전반적으로 기능 구현은 훌륭하며, 제안드린 내용들은 코드의 유지보수성과 사용자 경험을 개선하기 위한 것이니 참고해주시면 좋겠습니다. 수고하셨습니다!
| ...comment.toObject(), | ||
| isAuthor: comment.get('userId')?.equals(req.user._id), | ||
| isLiked: comment.get('likes')?.includes(req.user._id), | ||
| likeCount: comment.get('likes')?.length || 0, |
There was a problem hiding this comment.
새로운 likeCount 필드가 응답에 잘 추가되었습니다. 다만, 이 로직은 apps/server/src/models/comments.ts의 toJSON 메서드에 정의된 로직과 중복됩니다. 작성자님께서도 PR 설명에 언급해주셨듯이, 현재는 toObject()를 사용하기 때문에 모델의 toJSON에 정의된 likeCount가 포함되지 않는 문제가 있습니다.
장기적인 유지보수성을 위해, 모델 레이어에서 데이터 가공을 처리하는 것이 좋습니다. 한 가지 방법은 Mongoose의 가상(virtual) 프로퍼티를 사용하는 것입니다. 모델 스키마에 likeCount를 가상 프로퍼티로 정의하고 toObject: { virtuals: true } 옵션을 활성화하면, 컨트롤러에서 별도의 로직 없이 comment.toObject()를 통해 일관되게 likeCount 값을 얻을 수 있습니다. 이는 코드 중복을 줄이고 역할을 명확히 분리하는 데 도움이 될 것입니다. 추후 리팩토링 시 고려해보시면 좋겠습니다.
| const likeMutation = useMutation({ | ||
| mutationFn: ({ eventId, commentId }: { eventId: string; commentId: string }) => toggleEventCommentLike(eventId, commentId), | ||
| onSuccess: async () => { | ||
| await queryClient.invalidateQueries({ queryKey: ['comments', comment.eventId] }) | ||
| }, | ||
| onError: () => { | ||
| toast.error(<span>좋아요 처리에 실패했습니다.</span>) | ||
| }, | ||
| }) |
There was a problem hiding this comment.
좋아요 기능이 useMutation을 사용해 잘 구현되었습니다. 사용자 경험을 한 단계 더 향상시키기 위해 낙관적 업데이트(Optimistic Updates) 적용을 고려해볼 수 있습니다. 현재는 onSuccess에서 invalidateQueries를 호출하여 데이터를 다시 가져오는 방식인데, 이 경우 네트워크 지연에 따라 UI 업데이트가 늦어질 수 있습니다.
낙관적 업데이트를 사용하면, 서버 응답을 기다리지 않고 UI를 먼저 변경하여 사용자에게 즉각적인 피드백을 줄 수 있습니다. 만약 서버 요청이 실패하면 원래 상태로 되돌립니다.
react-query의 onMutate와 onError 콜백을 사용하여 이를 구현할 수 있습니다. onMutate에서 queryClient.setQueryData를 사용해 캐시를 직접 업데이트하고, onError에서 롤백하는 방식입니다. 이 방식은 사용자에게 더 빠르고 부드러운 경험을 제공할 수 있습니다.
| await queryClient.invalidateQueries({ queryKey: ['comments', comment.eventId] }) | ||
| }, | ||
| onError: () => { | ||
| toast.error(<span>좋아요 처리에 실패했습니다.</span>) |
There was a problem hiding this comment.
좋아요가 제대로 반영되지 않았어요. 다시 시도해주세요.
이런것 처럼 문구를 바꾸는게 좋을 것 같아요.
3 participants
DB에는 likes 배열만 저장되고 컨트롤러에서 내려주지 않으면 응답에 없어서
모델쪽에서 toJSON()에서만 likeCount = likes.length 계산
컨트롤러는 toObject() 기반으로 응답 생성 -> ikeCount 미포함
웹: 댓글 좋아요 토글 기능 추가
서버: 댓글 리스트 응답에 likeCount 포함
위 내용을 구현했습니다.
제가 한건 likeCount 계산 위치가 지금 컨트롤러라 추후에 바꿔야 할 수도 있을것 같습니다.