✨ Feat: 커뮤니티 게시물 댓글 기능 및 내 활동 조회 기능 구현 - #58
Conversation
- 댓글 목록 조회 API 연동 및 페이지네이션 추가 - 게시글 상세에서 댓글 작성/수정/삭제 기능 구현 - 대댓글 작성 UI 및 인라인 댓글 수정 흐름 추가 - 댓글 API 타입, react-query 훅, 쿼리 키 구성 추가 - 댓글 조회/변경 실패 메시지 및 상태 처리 정리 `DoDo-Project#54`
- 댓글창 및 댓글 목록에 프로필 이미지 제거 - 플레이스 홀더를 한 줄 크 변경 `DoDo-Project#54`
- 내 활동 페이지에 내가 쓴 게시글 목록 조회 연동 - 내 활동 페이지에 내가 쓴 댓글 목록 조회 연동 - 게시글/댓글 탭별 로딩, 에러, 빈 상태 UI 추가 - 내 활동 목록 페이지네이션 및 게시글 상세 이동 연결 - 내 활동용 API 타입, react-query 훅, 쿼리 키 추가 `DoDo-Project#54`
|
@sooloin is attempting to deploy a commit to the sooloin's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![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
This pull request implements comment management and user activity tracking features for the community section, including API integrations, React Query hooks, and UI components for viewing, creating, updating, and deleting comments, as well as listing user-specific posts and comments. Key feedback points out a UX issue with a shared error state that displays far from the active action, a security concern where authorization checks rely on nicknames instead of unique user IDs, and performance inefficiencies where both user posts and comments are fetched simultaneously regardless of the active tab.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| const [draftComment, setDraftComment] = useState(''); | ||
| const [replyTargetId, setReplyTargetId] = useState<number | null>(null); | ||
| const [replyDraft, setReplyDraft] = useState(''); | ||
| const [editingCommentId, setEditingCommentId] = useState<number | null>(null); | ||
| const [editDraft, setEditDraft] = useState(''); | ||
| const [formError, setFormError] = useState(''); |
There was a problem hiding this comment.
현재 formError 상태 하나를 댓글 등록, 답글 등록, 댓글 수정, 댓글 삭제 등 모든 작업에서 공유하고 있습니다. 하지만 이 에러 메시지는 페이지 최하단의 메인 댓글 입력창에만 렌더링되고 있습니다. 이로 인해 사용자가 페이지 상단에서 댓글을 수정하거나 답글을 달 때 에러가 발생하면, 에러 메시지가 현재 포커스된 위치가 아닌 최하단에 표시되어 인지하기 어렵고 혼란을 줄 수 있습니다. 각 작업별로 에러 상태를 분리(예: commentError, replyError, editError)하고, 해당 UI 컴포넌트(ReplyComposer, CommentRow 등) 내부 또는 근처에 에러 메시지를 표시하도록 개선하는 것을 권장합니다.
| const { nickname } = getCommentAuthor(comment); | ||
| const canManage = Boolean( | ||
| currentUserNickname && | ||
| nickname.trim() && | ||
| currentUserNickname.trim() === nickname.trim() && | ||
| !isDeletedComment(comment), | ||
| ); |
There was a problem hiding this comment.
현재 댓글의 수정/삭제 권한(canManage)을 확인하기 위해 사용자의 닉네임(nickname)을 비교하고 있습니다. 하지만 닉네임은 중복 가능성이 있거나 변경될 수 있으며, 특히 익명 댓글 처리 시 오동작할 우려가 있어 보안 및 기능상 취약할 수 있습니다. 닉네임 대신 고유한 식별자인 userId를 비교하여 권한을 검증하는 것이 훨씬 안전하고 정확합니다. (예: currentUser.userId === comment.userId 또는 currentUser.userId === comment.author.userId 형태)
| export function useMyBoardList(params: { page: number; size: number }) { | ||
| return useQuery({ | ||
| queryKey: queryKeys.boards.mine(params), | ||
| queryFn: () => getMyBoardList(params), | ||
| }); | ||
| } |
There was a problem hiding this comment.
useMyBoardList 훅이 항상 실행되는 대신, 특정 조건에서만 실행될 수 있도록 options 매개변수를 추가하여 enabled 설정을 지원하도록 개선하는 것이 좋습니다. 이를 통해 불필요한 API 호출을 방지할 수 있습니다.
| export function useMyBoardList(params: { page: number; size: number }) { | |
| return useQuery({ | |
| queryKey: queryKeys.boards.mine(params), | |
| queryFn: () => getMyBoardList(params), | |
| }); | |
| } | |
| export function useMyBoardList(params: { page: number; size: number }, options?: { enabled?: boolean }) { | |
| return useQuery({ | |
| queryKey: queryKeys.boards.mine(params), | |
| queryFn: () => getMyBoardList(params), | |
| ...options, | |
| }); | |
| } |
| export function useMyCommentList(params: { page: number; size: number }) { | ||
| return useQuery({ | ||
| queryKey: queryKeys.comments.mine(params), | ||
| queryFn: () => getMyCommentList(params), | ||
| }); | ||
| } |
There was a problem hiding this comment.
useMyCommentList 훅이 항상 실행되는 대신, 특정 조건에서만 실행될 수 있도록 options 매개변수를 추가하여 enabled 설정을 지원하도록 개선하는 것이 좋습니다. 이를 통해 불필요한 API 호출을 방지할 수 있습니다.
| export function useMyCommentList(params: { page: number; size: number }) { | |
| return useQuery({ | |
| queryKey: queryKeys.comments.mine(params), | |
| queryFn: () => getMyCommentList(params), | |
| }); | |
| } | |
| export function useMyCommentList(params: { page: number; size: number }, options?: { enabled?: boolean }) { | |
| return useQuery({ | |
| queryKey: queryKeys.comments.mine(params), | |
| queryFn: () => getMyCommentList(params), | |
| ...options, | |
| }); | |
| } |
| const myPostsQuery = useMyBoardList({ page: postsPage, size: PAGE_SIZE }); | ||
| const myCommentsQuery = useMyCommentList({ page: commentsPage, size: PAGE_SIZE }); |
There was a problem hiding this comment.
현재 활성화된 탭(activeTab)에 관계없이 useMyBoardList와 useMyCommentList 쿼리가 항상 동시에 호출되고 있습니다. 이는 사용자가 '내 게시글' 탭에 있을 때도 '내 댓글' API를 조회하게 되어 불필요한 네트워크 요청과 서버 부하를 유발합니다. 각 쿼리에 enabled 옵션을 지정하여 현재 활성화된 탭에 해당하는 쿼리만 실행되도록 개선하는 것을 권장합니다.
| const myPostsQuery = useMyBoardList({ page: postsPage, size: PAGE_SIZE }); | |
| const myCommentsQuery = useMyCommentList({ page: commentsPage, size: PAGE_SIZE }); | |
| const myPostsQuery = useMyBoardList({ page: postsPage, size: PAGE_SIZE }, { enabled: activeTab === 'posts' }); | |
| const myCommentsQuery = useMyCommentList({ page: commentsPage, size: PAGE_SIZE }, { enabled: activeTab === 'comments' }); |
- 댓글 작성, 답글, 수정, 삭제 에러 상태를 작업별로 분리 - 댓글 에러 메시지를 각 입력/액션 위치에 맞게 표시하도록 개선 - 댓글 수정/삭제 권한 판별을 닉네임 비교에서 userId 비교로 변경 - 내 활동 게시글/댓글 조회 훅에 enabled 옵션 추가 - 활성 탭에 따라 필요한 내 활동 쿼리만 호출하도록 최적화 `DoDo-Project#54`
2 participants
📄 작업 내용 (Description)
🔗 관련 이슈 (Related Issues)
✅ 체크리스트 (Checklist)
Style)Test)📸 스크린샷 (Screenshots)
💬 기타 사항 (Etc)