[♻️ Refactor] 로그인 회원가입 특정 알림 팝업사용으로 교체#221
Conversation
Summary of ChangesHello @eunji0124, 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}
| const errorMessage = getApiErrorMessage( | ||
| err, | ||
| '로그인 중 오류가 발생했습니다.' | ||
| ); | ||
| // 비밀번호 불일치 케이스만 모달팝업으로 표현 | ||
| if (errorMessage.includes('비밀번호가 일치하지 않습니다')) { | ||
| openModal({ | ||
| component: BasicModal, | ||
| props: { | ||
| message: '비밀번호가 일치하지 않습니다', | ||
| buttonText: '확인', | ||
| onClick: () => closeModal(BasicModal), | ||
| }, | ||
| }); | ||
| // 에러 상태 초기화 | ||
| setErrors({ email: '', password: '' }); | ||
| } else if ( | ||
| errorMessage.includes('존재하지 않는') || | ||
| errorMessage.includes('찾을 수 없') || | ||
| errorMessage.includes('not found') | ||
| ) { | ||
| toast.error('등록되지 않은 이메일입니다'); | ||
| } else { | ||
| toast.error('로그인에 실패했습니다. 다시 시도해 주세요.'); | ||
| } |
There was a problem hiding this comment.
API 에러 메시지 문자열에 의존하여 로직을 분기하는 방식은 백엔드 응답이 변경될 경우 예기치 않은 동작을 유발할 수 있어 불안정합니다. 예를 들어, '비밀번호가 일치하지 않습니다'라는 메시지가 약간이라도 변경되면 현재 로직이 깨지게 됩니다.
더 안정적인 오류 처리를 위해 백엔드 API에서 명시적인 에러 코드(예: INVALID_PASSWORD, USER_NOT_FOUND)를 반환하도록 하고, 프론트엔드에서는 이 코드를 기반으로 분기하는 것을 강력히 권장합니다.
만약 백엔드 수정이 당장 어렵다면, 이 구현을 임시방편으로 사용하되 장기적으로는 에러 코드를 도입하는 방향으로 개선하는 것이 좋습니다.
References
- For robust error handling, use API error codes or dedicated field names for branching logic instead of relying on parsing error message strings.
| const errorMessage = getApiErrorMessage( | ||
| error, | ||
| '회원가입 중 오류가 발생했습니다.' | ||
| ); | ||
|
|
||
| //이미 사용중인 이메일 케이스만 모달로 표시 | ||
| if ( | ||
| errorMessage.includes('이미 사용중인 이메일') || | ||
| errorMessage.includes('중복된 이메일') | ||
| ) { | ||
| openModal({ | ||
| component: BasicModal, | ||
| props: { | ||
| message: '이미 사용중인 이메일입니다', | ||
| buttonText: '확인', | ||
| onClick: () => closeModal(BasicModal), | ||
| }, | ||
| }); | ||
| // 에러 상태 초기화 (모달로 표시하므로 input 에러는 제거) | ||
| setErrors({ | ||
| email: '', | ||
| nickname: '', | ||
| password: '', | ||
| passwordConfirm: '', | ||
| }); | ||
| } // 닉네임 중복 toast | ||
| else if ( | ||
| errorMessage.includes('이미 사용중인 닉네임') || | ||
| errorMessage.includes('중복된 닉네임') | ||
| ) { | ||
| toast.error('이미 사용중인 닉네임입니다'); | ||
| } | ||
| // 그 외 에러 | ||
| else { | ||
| toast.error('회원가입에 실패했습니다. 다시 시도해 주세요.'); | ||
| } |
There was a problem hiding this comment.
로그인 페이지와 마찬가지로, 회원가입 과정에서도 API 에러 메시지 문자열을 직접 파싱하여 처리하고 있습니다. '이미 사용중인 이메일'과 같은 문자열에 의존하는 것은 백엔드 메시지가 변경될 때 기능이 오작동할 위험이 있습니다.
안정성을 높이기 위해 백엔드에서 EMAIL_ALREADY_EXISTS, NICKNAME_ALREADY_EXISTS와 같은 명확한 에러 코드를 제공하고, 프론트엔드에서는 이 코드를 사용하여 오류를 처리하는 것이 좋습니다. 이는 코드의 가독성과 유지보수성을 향상시키는 데도 도움이 됩니다.
References
- For API error handling, prefer using explicit error codes from the backend over parsing error message strings. If the backend does not provide error codes, parsing the message is a permissible temporary workaround, but a backend update to include error codes should be prioritized.
Co-authored-by: 양은지 <eunji124@github.com>
2 participants
✅ PR 체크리스트
🔗 이슈 번호
✨ 작업한 내용
♻️ Refactor: 회원가입, 로그인 에러메세지 처리 방식 정리
💁 리뷰 요청 / 코멘트
이미 사용중인 이메일, 비밀번호 일치하지 않을때 두 케이스만 모달 베이직 팝업 적용
인풋 검사는 바로 아래 빨간 글자로 표현,
이외 알림은 토스트 팝업으로 정리
💡 참고사항