[Fix] 마이페이지 정보 수정 시 간헐적으로 프로필 정보가 업데이트 되지 않는 버그 수정 #202
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
Walkthrough프로필 편집 모달의 제출 핸들러에서 병렬 뮤테이션(Promise.all)을 순차적 조건부 업데이트로 변경했습니다. 프로필 정보와 이미지 업데이트가 이제 순차적으로 실행되며, 성공 시에만 모달이 닫힙니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎭 Playwright Report✨ E2E Test가 성공적으로 완료되었습니다. Test 요약 내용을 확인해주세요.
📊 Test Summary
📜 Test Details✅ Passed Tests (9)
|
🎨 Storybook Report✅ 변경 사항이 없습니다 모든 Story가 이전 빌드와 동일합니다.
|
📊 Coverage Report
📈 #202을 main에 병합하면 coverage가 Coverage 요약@@ Coverage Diff @@
## main #202 +/- ##
===========================================
+ Coverage 33.94% 33.97% +0.03%
===========================================
Files 154 154 0
Lines 6528 6523 -5
Branches 248 248 0
===========================================
Hits 2216 2216 0
- Misses 4312 4307 -5 영향받은 파일
|
🚀 PR Preview Report✨ Build가 성공적으로 완료되었습니다. Preview에서 변경사항을 확인하세요.
|
Member
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/pages/user/profile/profile-edit-modal/index.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: coverage
🔇 Additional comments (1)
src/components/pages/user/profile/profile-edit-modal/index.tsx (1)
61-69: 순차 실행으로 변경한 것은 적절하지만, 근본 원인 확인 필요병렬 실행에서 순차 실행으로 변경하여 간헐적 버그를 수정한 것으로 보입니다. 이는 race condition이 원인이었다면 적절한 해결책입니다. 다만 다음 사항들을 고려해주세요:
- 성능 트레이드오프: 순차 실행으로 인해 업데이트 시간이 증가합니다 (병렬 대비)
- 부분 실패 처리: 프로필 정보 업데이트가 실패하면 이미지 업데이트가 시도되지 않습니다
다음을 확인해주세요:
- 이 변경이 실제로 간헐적 버그를 해결하는지 테스트
- 부분 실패 시나리오(예: 프로필 정보는 성공했으나 이미지 업로드 실패) 처리 전략 검토
#!/bin/bash # Description: updateUser 및 updateUserImage hook 구현 확인하여 race condition 가능성 분석 # updateUser hook 구현 검색 echo "=== updateUser hook 구현 ===" ast-grep --pattern $'export const useUpdateUser = () => { $$$ }' # useUserImageUpdate hook 구현 검색 echo "=== useUserImageUpdate hook 구현 ===" ast-grep --pattern $'export const useUserImageUpdate = () => { $$$ }' # 관련 mutation 로직 검색 echo "=== mutation 관련 코드 ===" rg -n --type=ts --type=tsx -C5 'mutateAsync.*updateUser|updateUserImage'
Comment on lines
+72
to
+74
| /* | ||
| todo: 이미지 변경과 정보 변경 중 하나라도 실패하면 각 항목에 대한 에러메시지 보여줘야함 | ||
| */ |
Contributor
There was a problem hiding this comment.
사용자 피드백 누락으로 인한 UX 저하
현재 업데이트 실패 시 사용자에게 어떤 오류 메시지도 표시되지 않습니다. 이는 사용자 경험을 크게 저하시킵니다:
- 업데이트가 실패했는지 성공했는지 알 수 없음
- 모달이 열린 채로 유지되지만 이유를 알 수 없음
- 어떤 항목(프로필 정보/이미지)이 실패했는지 구분 불가
최소한 다음을 구현하는 것을 권장합니다:
} catch (error) {
- /*
- todo: 이미지 변경과 정보 변경 중 하나라도 실패하면 각 항목에 대한 에러메시지 보여줘야함
- */
- console.log('요청 실패', error);
+ // 사용자에게 오류 메시지 표시
+ const errorMessage = error instanceof Error ? error.message : '프로필 업데이트에 실패했습니다.';
+ // toast, alert, 또는 form error state를 통해 errorMessage 표시
+ console.error('프로필 업데이트 실패:', error);
}더 세밀한 에러 핸들링 (각 항목별 에러 메시지) 구현을 도와드릴까요?
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/components/pages/user/profile/profile-edit-modal/index.tsx around lines
72-74, the current TODO notes missing user feedback: on update failures no error
is shown, modal stays open with no reason, and failures between profile info vs
image aren’t distinguished. Implement granular error handling: catch errors from
the profile info update and the image upload separately, set field-specific
error state (e.g., imageError, infoError) and render inline messages next to the
affected inputs, and show a general toast/alert for overall failure/success.
Ensure the modal only closes on full success (or provide per-item success
indicators), and surface server/validation messages (fallback to a generic
message if none) so users know what went wrong and how to proceed.
Chiman2937
changed the title
wooktori
approved these changes
Dec 16, 2025
Contributor
wooktori
left a comment
wooktori
left a comment
There was a problem hiding this comment.
아까 예상하셨던게 맞았네요!!
설명 너무 깔끔합니다 완-벽✨✨
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📝 변경 사항
마이페이지에서 간헐적으로 프로필 정보가 업데이트 되지 않는 버그를 수정했습니다.
💡 원인
기존에는 updateUser(프로필 정보 수정), updateUserImage(프로필 이미지 수정) 함수가 병렬적으로 수행됩니다.
이는 api 요청 시간의 최소화를 위한 방식이었습니다.
이 때 비동기 처리의 순차적 실행이 보장되지 않기 때문에 문제가 일어납니다.
예를 들어, 아래와 같이 초기 데이터가 있다고 가정하겠습니다.
{ profileImage: null, nickName: "김치영", profileMessage: null, mbti: null }아래 플로우와 같이 이미지 수정 요청의 응답이 더 늦게 온다면, 사진의 4번 항목이 profile 의 최종 데이터가 되기 때문에 profileMessage와 mbti 필드의 최종 값은 null이 되게 됩니다.
아마 반대의 경우에도 이미지가 null이 return 되는 경우가 있을 거라고 이론적으로는 예상되긴 하는데, 이 부분은 아직 검증하지 못했습니다.
그래서 각 api가 순차적으로 실행되게 만든다면 이 문제를 해결할 수 있습니다.
🔗 관련 이슈
Closes #
🧪 테스트 방법
📸 스크린샷 (선택)
📋 체크리스트
💬 추가 코멘트
CodeRabbit Review는 자동으로 실행되지 않습니다.
Review를 실행하려면 comment에 아래와 같이 작성해주세요
Summary by CodeRabbit
릴리스 노트
버그 수정
개선사항
✏️ Tip: You can customize this high-level summary in your review settings.