Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 12 additions & 17 deletions src/components/pages/user/profile/profile-edit-modal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,30 +53,25 @@ export const ProfileEditModal = ({ user }: Props) => {
...(user.mbti !== value.mbti && { mbti }),
};

const promises = [];

// 프로필 정보 업데이트 조건 체크
if (Object.keys(nextProfileInfo).length > 0) {
promises.push(updateUser(nextProfileInfo));
}

// 프로필 이미지 업데이트 조건 체크
const imageFileObject = Object.values(profileImage)[0];
if (imageFileObject) {
promises.push(updateUserImage({ file: imageFileObject }));
}

/*
Promise 체이닝 사용 시 catch를 먹어버리기 때문에 각 mutation의 error가 업데이트 되지않음
따라서 try catch 방식 사용
*/
/*
todo: 이미지 변경과 정보 변경 중 하나라도 실패하면 각 항목에 대한 에러메시지 보여줘야함
*/
try {
await Promise.all(promises);
// 프로필 정보 업데이트 조건 체크
if (Object.keys(nextProfileInfo).length > 0) {
await updateUser(nextProfileInfo);
}
// 프로필 이미지 업데이트 조건 체크
const imageFileObject = Object.values(profileImage)[0];
if (imageFileObject) {
await updateUserImage({ file: imageFileObject });
}
close();
} catch (error) {
/*
todo: 이미지 변경과 정보 변경 중 하나라도 실패하면 각 항목에 대한 에러메시지 보여줘야함
*/
Comment on lines +72 to +74
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

사용자 피드백 누락으로 인한 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.

console.log('요청 실패', error);
}
},
Expand Down