[React/TypeScript] 최종프로젝트 - Mango(환경오염 줄이기 / 지구 살리기 프로젝트!) (진행 중) - 프로필 업데이트 오류

 

모달이 뜨고 변경 전 프로필이 1초 정도 머물다가 바뀌는 오류가 있었다

 

 

 

기존 코드

  const userProfileUpdateMutation = useMutation({
    mutationFn: async ({ authCurrentUser, displayName, profileImage }: updateProfileInfoProps) =>
      await updateProfileInfo({ authCurrentUser, displayName, profileImage }),
    onSuccess: (updatedUser) => {
      queryClient.invalidateQueries({ queryKey: [`${QUERY_KEYS.USERS}`] });
      if (updatedUser) {
        authContext?.updateCurrentUserInContext(updatedUser);
      }
      setIsEditing(false);

      const onClickSave = () => {
        modal.close();
      };

      const openModalParams: Parameters<typeof modal.open>[0] = {
        title: '프로필이 수정되었습니다.',
        message: '',
        leftButtonLabel: '',
        onClickLeftButton: undefined,
        rightButtonLabel: '확인',
        onClickRightButton: onClickSave
      };
      modal.open(openModalParams);
    },
    onError: (error) => {
      console.error('프로필 업데이트에 문제가 발생했습니다.', error);
      setIsEditing(false);

      const onClickSave = () => {
        modal.close();
      };

      const openModalParams: Parameters<typeof modal.open>[0] = {
        title: '프로필 업데이트에 문제가 발생했습니다.',
        message: '',
        leftButtonLabel: '',
        onClickLeftButton: undefined,
        rightButtonLabel: '확인',
        onClickRightButton: onClickSave
      };
      modal.open(openModalParams);
    }
  });

  //프로필 수정 업데이트
  const onSubmitModifyProfile = async (e: React.FormEvent) => {
    e.preventDefault();

    const onClickSave = () => {
      modal.close();
    };

    if (authCurrentUser!.displayName !== displayName) {
      setIsDisplayNameChanged(true);
    }

    if (authCurrentUser!.photoURL !== profileImage) {
      setIsPhotoURLChanged(true);
    }

    // if (!isChecked && isDisplayNameChanged) {
    if (!isDisplayNameChanged) {
      const openModalParams: Parameters<typeof modal.open>[0] = {
        title: '중복확인 버튼을 눌러주세요',
        message: '',
        leftButtonLabel: '',
        onClickLeftButton: undefined,
        rightButtonLabel: '확인',
        onClickRightButton: onClickSave
      };
      modal.open(openModalParams);
    } else {
      if (authCurrentUser) {
        if (isDisplayNameChanged || isPhotoURLChanged) {
          userProfileUpdateMutation.mutate({ authCurrentUser, displayName, profileImage });
          setIsEditing(false);
          setIsDisplayNameChanged(false);
          setIsPhotoURLChanged(false);
        }
      }
    }
  };

 

 

문제점은 프로필 업데이트와 모달창이 userProfileUpdateMutation의 onSuccess 콜백 안에서 

동시에 이루어지고 있었던 것이다.

 

 const userProfileUpdateMutation = useMutation({
    mutationFn: ({ authCurrentUser, displayName, profileImage }: updateProfileInfoProps) =>
      updateProfileInfo({ authCurrentUser, displayName, profileImage }),
    onSuccess: (updatedUser) => {
      queryClient.invalidateQueries({ queryKey: [`${QUERY_KEYS.USERS}`] });
      if (updatedUser) {
        authContext?.updateCurrentUserInContext(updatedUser);
      }
      setIsEditing(false);
    },
    onError: (error) => {
      console.error('프로필 업데이트에 문제가 발생했습니다.', error);
      setIsEditing(false);

      const onClickSave = () => {
        modal.close();
      };

      const openModalParams: Parameters<typeof modal.open>[0] = {
        title: '프로필 업데이트에 문제가 발생했습니다.',
        message: '',
        leftButtonLabel: '',
        onClickLeftButton: undefined,
        rightButtonLabel: '확인',
        onClickRightButton: onClickSave
      };
      modal.open(openModalParams);
    }
  });

  const onSubmitModifyProfile = async (e: React.FormEvent) => {
    e.preventDefault();

    const onClickSave = async () => {
      if (!authCurrentUser) {
        console.error('현재 사용자 정보가 없습니다.');
        return;
      }

      await userProfileUpdateMutation.mutate({ authCurrentUser, displayName, profileImage });
      modal.close();
    };
    const openModalParams: Parameters<typeof modal.open>[0] = {
      title: '프로필이 수정되었습니다.',
      message: '',
      leftButtonLabel: '',
      onClickLeftButton: undefined,
      rightButtonLabel: '확인',
      onClickRightButton: onClickSave
    };
    modal.open(openModalParams);
  };​

 

 

프로필 업데이트 코드를 밖으로 빼서 수정을 해주었더니 navBar의 프로필이 바뀌지 않는 오류가 발생되었다. 

새로고침을 한 후에야 바뀐다..

 

 

 

---

 

 

const onSubmitModifyProfile = (e: React.FormEvent) => {
    e.preventDefault();

    const onClickSave = () => {
      modal.close();
    };

    const openModalParams: Parameters<typeof modal.open>[0] = {
      title: '프로필이 수정되었습니다.',
      message: '',
      leftButtonLabel: '',
      onClickLeftButton: undefined,
      rightButtonLabel: '확인',
      onClickRightButton: onClickSave
    };
    modal.open(openModalParams);

    if (authCurrentUser!.displayName !== displayName) {
      if (!isDisplayNameChanged) {
        const openModalParams: Parameters<typeof modal.open>[0] = {
          title: '중복확인 버튼을 눌러주세요',
          message: '',
          leftButtonLabel: '',
          onClickLeftButton: undefined,
          rightButtonLabel: '확인',
          onClickRightButton: onClickSave
        };
        modal.open(openModalParams);
      } else {
        if (authCurrentUser) {
          userProfileUpdateMutation.mutate({ authCurrentUser, displayName, profileImage });
          setIsEditing(false);
          setIsDisplayNameChanged(false);
          setIsPhotoURLChanged(false);
        }
      }
    } else if (authCurrentUser) {
      userProfileUpdateMutation.mutate({ authCurrentUser, displayName, profileImage });
      setIsEditing(false);
      setIsDisplayNameChanged(false);
      setIsPhotoURLChanged(false);
    }
  };

 

 

다시 수정했다..

코드 순서도 중요하고 함수 내에서 사용되는 로직도 잘 생각해서 구현해야겠다는 생각이 들었다

 

 

최종