feat: 마이페이지 개발#59
Conversation
Summary of ChangesHello @jungwon123, 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은 사용자가 자신의 계정 정보를 관리할 수 있는 마이페이지 기능을 도입합니다. 사용자 프로필 조회 및 편집, 비밀번호 변경, 프로필 이미지 업로드, 그리고 회원 탈퇴와 같은 핵심 기능들을 포함하며, 사용자 경험을 개선하기 위한 UI와 필요한 백엔드 API 연동이 모두 구현되었습니다. 다양한 기기에서 일관된 사용성을 제공하기 위해 반응형 디자인 원칙이 적용되었습니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
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
The pull request introduces a new Mypage feature, including UI components, API integrations, and a custom hook for user management. The changes are well-structured, separating concerns into API services, types, and a custom React hook. The CSS styling for the Mypage is also added, with responsive adjustments for different screen sizes. Overall, the code is clean and follows modern React practices. However, there are a few areas for improvement regarding error handling consistency, dependency array completeness in useCallback, and potential re-fetching issues. The CSS media queries also have a minor logical inconsistency that could lead to unexpected behavior on certain tablet sizes.
| setError('프로필 수정에 실패했습니다.'); | ||
| return { success: false }; | ||
| } | ||
| }, [name, profileImage]); |
There was a problem hiding this comment.
The updateProfile useCallback hook is missing user?.image in its dependency array. If user.image changes (e.g., after an image upload), hasChanges might not re-evaluate correctly, leading to stale state or incorrect UI behavior regarding unsaved changes.
| }, [name, profileImage]); | |
| }, [name, profileImage, user?.image]); |
| @media (max-width: 767px) { | ||
| .layout { | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| .main { | ||
| padding: 32px 24px; | ||
| } | ||
|
|
||
| .card { | ||
| max-width: 100%; | ||
| } | ||
| } |
There was a problem hiding this comment.
The media query for max-width: 767px sets flex-direction: row for .layout, which conflicts with the max-width: 375px query that sets flex-direction: column. This means for screen widths between 376px and 767px, the layout will be row (tablet landscape), but for screens smaller than 375px (mobile), it will be column. The intent for max-width: 767px seems to be for tablets, but it's overriding the mobile layout. Consider if flex-direction: row is truly desired for all screen sizes up to 767px, or if this rule should be more specific or removed if the default column from the base .layout is intended for smaller screens.
| @media (max-width: 767px) { | |
| .layout { | |
| flex-direction: row; | |
| } | |
| .main { | |
| padding: 32px 24px; | |
| } | |
| .card { | |
| max-width: 100%; | |
| } | |
| } | |
| /* 태블릿 (767px 이하) */ | |
| @media (max-width: 767px) { | |
| .layout { | |
| flex-direction: column; /* Or adjust as per design intent for tablets */ | |
| } | |
| .main { | |
| padding: 32px 24px; | |
| } | |
| .card { | |
| max-width: 100%; | |
| } | |
| } |
| if (result.success && result.url) { | ||
| setProfileImage(result.url); | ||
| setShowToast(true); | ||
| } |
There was a problem hiding this comment.
After a successful image upload, setProfileImage(result.url) is called, but setShowToast(true) is also called immediately after. If the toast is meant to indicate that changes need to be saved, this might be misleading since the image has already been saved to the server. If the toast is for general success, it should probably be a different message or handled more explicitly after the updateProfile call, which would then save both name and image.
if (result.success && result.url) {
setProfileImage(result.url);
// Consider if a toast is needed here, or if it should be part of the overall save action.
// setShowToast(true);
}
| if (!response.ok) { | ||
| throw new Error('유저 정보를 불러오는데 실패했습니다.'); | ||
| } |
There was a problem hiding this comment.
The error message "유저 정보를 불러오는데 실패했습니다." is hardcoded. It would be more robust to include the actual error message from the API response or provide more context to the user if possible. This would help in debugging and providing a better user experience.
| if (!response.ok) { | |
| throw new Error('유저 정보를 불러오는데 실패했습니다.'); | |
| } | |
| if (!response.ok) { | |
| const errorData = await response.json(); | |
| throw new Error(errorData.message || '유저 정보를 불러오는데 실패했습니다.'); | |
| } |
| if (!response.ok) { | ||
| throw new Error('유저 정보 수정에 실패했습니다.'); | ||
| } |
There was a problem hiding this comment.
Similar to getUser, the error message for updateUser is hardcoded. Providing more specific error details from the API response would be beneficial for debugging and user feedback.
| if (!response.ok) { | |
| throw new Error('유저 정보 수정에 실패했습니다.'); | |
| } | |
| if (!response.ok) { | |
| const errorData = await response.json(); | |
| throw new Error(errorData.message || '유저 정보 수정에 실패했습니다.'); | |
| } |
| if (!response.ok) { | ||
| throw new Error('회원 탈퇴에 실패했습니다.'); | ||
| } |
There was a problem hiding this comment.
The error message for deleteUser is hardcoded. It would be better to extract the error message from the API response for more informative feedback.
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || '회원 탈퇴에 실패했습니다.');
}| throw new Error('비밀번호 변경에 실패했습니다.'); | ||
| } | ||
|
|
There was a problem hiding this comment.
The error message for changePassword is hardcoded. Extracting the error message from the API response would provide more useful information.
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || '비밀번호 변경에 실패했습니다.');
}| if (!response.ok) { | ||
| throw new Error('이미지 업로드에 실패했습니다.'); | ||
| } |
There was a problem hiding this comment.
The error message for uploadImage is hardcoded. It would be more helpful to include the actual error message from the API response.
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || '이미지 업로드에 실패했습니다.');
}
…into feat/profile
4 participants
Summary
마이페이지 UI와 API 개발완료입니다.
Get /{teamId}/user 프로필 조회
Patch /{teamId}/user 프로필 이름 수정, 변경사항 저장하기
Delete /{teamId}/user 회원탈퇴
/{teamId}/user/password 비밀번호 변경
/{teamId}/images/upload 프로필 이미지 변경
Issue
#58