Feature: 댓글 api 수정 반영, 커뮤니티 경로 페이지 북마크 추가 및 북마크 토스트 추가#51
Conversation
- 이미지, 닉네임을 댓글에 적용
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Summary of Changes
Hello @FlashingFuture, 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
- 댓글 API 개선: 댓글 API 응답에 작성자의 프로필 이미지와 닉네임 정보를 포함하도록 업데이트되었습니다.
- 커뮤니티 경로 페이지 북마크 기능: 커뮤니티 경로 게시물에 북마크를 추가하거나 해제할 수 있는 기능이 구현되었습니다.
- 북마크 토스트 알림: 북마크 액션(추가/해제)에 대한 성공 또는 실패 토스트 알림이 추가되어 사용자 경험을 향상시켰습니다.
Using Gemini Code Assist
The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in pull request comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.
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
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
이번 PR은 댓글 API 변경사항을 반영하고, 커뮤니티의 경로 공유 게시글에 북마크 기능과 토스트 메시지를 추가하는 내용이네요. 전반적으로 기능 구현은 잘 되었지만, 몇 가지 개선점을 제안합니다. 특히 CommunityDetail 페이지에서 북마크 상태 관리 로직을 단순화하고 타입 안정성을 높이는 부분, 그리고 웹뷰 메신저 훅에서 타입 추론을 개선하는 부분에 대한 피드백을 포함했습니다. 또한 코드의 일관성을 높이기 위한 리팩토링 제안과 불필요한 로그 제거에 대한 내용도 확인해주시면 좋겠습니다.
| const handleToggleBookmark = async () => { | ||
| if (!post || bookmarking) return; | ||
| if (post.category !== 'SHARE' || !post.routeId) return; | ||
|
|
||
| setBookmarking(true); | ||
| try { | ||
| const res = await toggleCourseBookmark(post.routeId); | ||
| setPost((p) => (p ? { ...p, bookmarked: res.bookmarked } : p)); | ||
|
|
||
| if (res.bookmarked) { | ||
| setBookmarked(true); | ||
| sendToast('북마크했어요 ✅', 'success'); | ||
| } else { | ||
| setBookmarked(false); | ||
| sendToast('북마크 해제했어요', 'success'); | ||
| } | ||
| } catch (e) { | ||
| sendToast(getReadablePostError(e), 'error'); | ||
| } finally { | ||
| setBookmarking(false); | ||
| } | ||
| }; |
There was a problem hiding this comment.
handleToggleBookmark 함수 내에서 북마크 상태를 bookmarked state와 post 객체의 bookmarked 속성 두 곳에서 관리하고 있습니다. 이는 상태 불일치를 유발할 수 있으며, Post 타입에 없는 bookmarked 속성을 post 객체에 추가하여 타입 안정성을 저해합니다.1
bookmarked state만 사용하여 상태를 관리하고, post 객체는 수정하지 않는 것이 좋습니다. 이렇게 하면 코드가 더 단순해지고 예측 가능해집니다.
또한, setBookmarked 호출을 res.bookmarked 값에 따라 한 번만 하도록 통합할 수 있습니다.
const handleToggleBookmark = async () => {
if (!post || bookmarking) return;
if (post.category !== 'SHARE' || !post.routeId) return;
setBookmarking(true);
try {
const res = await toggleCourseBookmark(post.routeId);
setBookmarked(res.bookmarked);
if (res.bookmarked) {
sendToast('북마크했어요 ✅', 'success');
} else {
sendToast('북마크 해제했어요', 'success');
}
} catch (e) {
sendToast(getReadablePostError(e), 'error');
} finally {
setBookmarking(false);
}
};
Style Guide References
Footnotes
-
Props, State 등은 interface 또는 type alias로 명시적으로 관리해야 합니다. 동적으로 상태 객체에 속성을 추가하는 것은 타입 안정성을 해칠 수 있습니다. ↩
| const toStr = useCallback((v: unknown) => (v == null ? null : String(v)), []); | ||
| const myId = toStr(myIdRaw); | ||
|
|
||
| const authorId = toStr(post?.authorInfo?.id) ?? null; | ||
| const canEdit = myId !== null && authorId !== null && myId === authorId; |
There was a problem hiding this comment.
현재 canEdit과 canEditComment에서 사용자 ID를 비교하는 방식이 일관되지 않습니다. canEdit에서는 toStr을 사용하여 ID를 문자열로 변환 후 비교하는 반면, canEditComment에서는 Number()를 사용하여 숫자형으로 비교하고 있습니다.
코드의 일관성과 명확성을 위해 ID 비교 로직을 통일하는 것을 제안합니다. post.authorInfo.id를 문자열로 변환하는 대신, myId를 숫자로 변환하여 비교하는 방식으로 통일할 수 있습니다. 이렇게 하면 toStr 헬퍼 함수도 더 이상 필요하지 않게 됩니다.
| const toStr = useCallback((v: unknown) => (v == null ? null : String(v)), []); | |
| const myId = toStr(myIdRaw); | |
| const authorId = toStr(post?.authorInfo?.id) ?? null; | |
| const canEdit = myId !== null && authorId !== null && myId === authorId; | |
| const authorId = post?.authorInfo?.id ?? null; | |
| const canEdit = myId !== null && authorId !== null && Number(myId) === authorId; |
| ) => { | ||
| postToNative({ type: 'toast', payload: { message, variant } }); | ||
| }; | ||
| console.log(post.routeId); |
작업 내용