[♻️ Refactor/188] 프로필 수정 범위 제한 및 프로필 이미지 변경 로직 추가#210
Conversation
Summary of ChangesHello @jerryko570, 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은 마이페이지의 사용자 프로필 관리 기능을 대폭 개선합니다. 기존 닉네임 및 비밀번호 수정 기능에 더해 프로필 이미지 변경 기능을 추가하고, 이를 위한 API 연동 및 전역 상태 관리 시스템을 구축했습니다. 또한, 폼 처리 로직을 모듈화하고 다양한 API 에러 상황에 대한 체계적인 사용자 피드백을 제공함으로써 사용자 경험과 코드 안정성을 향상시켰습니다. 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에서 프로필 수정 기능 리팩토링과 이미지 변경 로직 추가 작업을 진행해주셨네요. 전반적으로 코드 구조가 크게 개선되었습니다.
특히 useFormState, useErrorHandler, useProfileImage 등 커스텀 훅을 적극적으로 활용하여 관심사를 분리한 점이 인상적입니다. 덕분에 useMyPageForm 훅이 훨씬 간결해지고 테스트하기 좋은 구조가 되었습니다. 또한, ProfileImageContext를 도입하여 프로필 이미지 상태를 전역으로 관리하고 즉시 UI에 반영하는 등 사용자 경험을 세심하게 고려한 점도 훌륭합니다.
몇 가지 추가 개선 제안을 리뷰 코멘트로 남겼습니다. 주로 보안, 안정성, 일관성에 대한 내용이니 확인해보시면 좋겠습니다. 좋은 코드 감사합니다!
| // 401 Unauthorized - 로그인 페이지로 리다이렉트 | ||
| if (error.status === 401) { | ||
| alert('로그인이 필요합니다.'); | ||
| localStorage.removeItem('accessToken'); |
There was a problem hiding this comment.
localStorage에 accessToken을 저장하고 관리하는 것은 XSS(Cross-Site Scripting) 공격에 취약할 수 있습니다. localStorage는 JavaScript로 쉽게 접근할 수 있기 때문입니다.
보안 강화를 위해 accessToken은 변수와 같이 메모리에 저장하고, 리프레시 토큰은 httpOnly 쿠키에 저장하는 방식을 고려해 보세요. 이는 스크립트를 통한 토큰 탈취 위험을 크게 줄여줍니다.
|
|
||
| if (error instanceof ApiError) { | ||
| if (error.status === 413) { | ||
| alert('이미지 파일 크기가 너무 큽니다. (최대 4MB)'); |
There was a problem hiding this comment.
이곳에서는 파일 크기 제한을 4MB로 안내하고 있지만, ProfileEditable.tsx 컴포넌트의 클라이언트 측 유효성 검사에서는 5MB(MAX_SIZE)로 설정되어 있습니다. 사용자 경험의 일관성을 위해 두 값을 일치시키는 것이 좋습니다. ProfileEditable.tsx의 MAX_SIZE를 서버 제한에 맞춰 4 * 1024 * 1024로 수정하는 것을 고려해 보세요.
There was a problem hiding this comment.
프로필 편집 컴포넌트에 등록된 사이즈 제한과 통일하거나 연결해서 재사용하면 좋을거 같아요
얼랏은 토스트 팝업 사용하면 좋을거 같아요
| } | ||
|
|
||
| // 비밀번호 형식 오류 | ||
| if (error.status === 400 && error.message?.includes('password')) { |
There was a problem hiding this comment.
에러 메시지 문자열(error.message?.includes('password'))에 의존하여 로직을 분기하는 방식은 불안정합니다. 백엔드 API의 에러 메시지가 변경되면 이 코드는 오작동할 수 있습니다.
대신 백엔드에서 에러 코드나 에러가 발생한 필드명을 포함한 구조화된 에러 응답을 보내주도록 협의하고, 이를 기반으로 분기하는 것이 더 안정적인 방법입니다. 예를 들어, error.body.field === 'password' 와 같이 확인할 수 있습니다.
References
- For robust error handling, use API error codes or dedicated field names for branching logic instead of relying on parsing error message strings.
| if (!file.type.startsWith('image/')) return; | ||
| if (file.size > MAX_SIZE) { | ||
| //TODO 토스트 모달로 알림 통일 | ||
| alert('파일 크기는 5MB 이하여야 합니다.'); |
There was a problem hiding this comment.
해당 얼랏 토스트 팝업으로 표현해주실 수 있나요?
3 participants
✅ PR 체크리스트
🔗 이슈 번호
✨ 작업한 내용
1. 내 정보 비밀번호 변경 기능 구현
PATCH /users/me) 연동2. 타입 정의 및 API 연동
UpdateUserRequest타입:newPassword필드 추가MyPageFormData타입: 폼 입력 데이터 관리createUpdatePayload함수: 비밀번호 입력 여부에 따라 payload 동적 생성3. 프로필 이미지 전역 동기화 (Context 적용)
4. 에러 핸들링
useErrorHandler커스텀 훅 구현💁 리뷰 요청 / 코멘트
💡 참고사항