Conversation
feat: 게시글 삭제 기능 추가 및 삭제 모달 구현
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello @g-hyxn, 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
안녕하세요. PR을 리뷰했습니다.
게시글 삭제 시 window.confirm 대신 커스텀 DeleteModal을 사용하도록 변경하여 사용자 경험을 개선한 점이 좋습니다. 전반적으로 좋은 변화이지만, 몇 가지 중요한 개선점을 제안합니다.
- 삭제 버튼이 모든 사용자에게 노출되고 있습니다. 이는 관리자가 아닌 사용자에게 혼란을 줄 수 있으므로, 이전과 같이 관리자에게만 버튼이 보이도록 조건부 렌더링을 적용해야 합니다.
- API 요청 실패 시 에러 처리를 보강할 필요가 있습니다. 특히, 토큰 갱신 실패 시 발생하는
TokenRefreshError를 별도로 처리하여 사용자에게 재로그인이 필요함을 명확히 알려주는 것이 좋습니다.
자세한 내용은 각 파일의 주석을 확인해주세요.
| if (typeof error === 'object' && error !== null && 'response' in error) { | ||
| const status = (error as { response?: { status?: number } }).response | ||
| ?.status; | ||
|
|
||
| if (status === 401) toast.error('로그인이 필요합니다.'); | ||
| else if (status === 403) toast.error('관리자 권한이 없습니다.'); | ||
| else if (status === 404) toast.error('게시글을 찾을 수 없습니다.'); | ||
| else toast.error('게시글 삭제에 실패했습니다.'); | ||
| if (status === 401) { | ||
| toast.error('로그인이 필요합니다.'); | ||
| } else if (status === 403) { | ||
| toast.error('관리자 권한이 없습니다.'); | ||
| } else if (status === 404) { | ||
| toast.error('게시글을 찾을 수 없습니다.'); | ||
| } else { | ||
| toast.error('게시글 삭제에 실패했습니다.'); | ||
| } | ||
| } else { | ||
| toast.error('서버와 통신할 수 없습니다.'); | ||
| } |
There was a problem hiding this comment.
axios 인터셉터에서 토큰 갱신 실패 시 TokenRefreshError를 발생시키도록 구현되어 있습니다. 현재 catch 블록에서는 이 특정 오류를 처리하지 않고 일반적인 서버 통신 오류로 처리하고 있습니다. 토큰 갱신 실패는 사용자가 다시 로그인해야 하는 중요한 상황이므로, TokenRefreshError를 명시적으로 확인하여 사용자에게 재로그인이 필요함을 알리고 로그인 페이지로 리디렉션하는 등의 처리를 추가하는 것이 좋습니다.
TokenRefreshError를 사용하려면 파일 상단에서 import해야 합니다:
import { instance, TokenRefreshError } from '@/assets/shared/lib/axios'; if (error instanceof TokenRefreshError) {
toast.error('세션이 만료되었습니다. 다시 로그인해주세요.');
// navigate('/login'); // 필요시 로그인 페이지로 리디렉션
return;
}
if (typeof error === 'object' && error !== null && 'response' in error) {
const status = (error as { response?: { status?: number } }).response
?.status;
if (status === 401) {
toast.error('로그인이 필요합니다.');
} else if (status === 403) {
toast.error('관리자 권한이 없습니다.');
} else if (status === 404) {
toast.error('게시글을 찾을 수 없습니다.');
} else {
toast.error('게시글 삭제에 실패했습니다.');
}
} else {
toast.error('서버와 통신할 수 없습니다.');
}
References
- API 인터셉터는 토큰 갱신 실패 시 에러를 던져야 하며, UI 계층은 이 에러를 처리하여 로그인 페이지로 리디렉션하는 등의 작업을 수행해야 합니다.
| <button | ||
| onClick={() => setIsDeleteModalOpen(true)} | ||
| className="cursor-pointer" | ||
| > | ||
| <Delete /> | ||
| </button> |
There was a problem hiding this comment.
관리자 여부를 확인하는 조건부 렌더링이 제거되어 모든 사용자에게 삭제 버튼이 표시됩니다. 이는 관리자가 아닌 사용자에게 혼란을 줄 수 있으며, 삭제 시도를 한 후에야 권한 없음 오류를 보게 되어 사용자 경험을 저해합니다.
이전처럼 관리자에게만 삭제 버튼이 보이도록 조건부 렌더링을 다시 추가하는 것을 고려해 보세요. 사용자 권한을 확인하는 로직(예: 사용자 정보를 담고 있는 context나 store 사용)을 사용하여 버튼의 노출 여부를 결정해야 합니다.
1 participant
💡 배경 및 개요
Resolves: #{이슈번호}
📃 작업내용
🙋♂️ 리뷰노트
✅ PR 체크리스트
.env,노션,README)"API 개발 완료됐어요","환경값 추가되었어요")🎸 기타