마이페이지 프로필 수정 with 트러블슈팅2

최초에 로그인할때 받은 정보가 안뜨는 이슈 발생

위에 영상은 잘 동작했을 때의 화면이지만, 처음 트러블슈팅이 발생했을 때는 최초에 로그인을 하고 설문을 받았을 때 사용자 정보가 뜨지 않고 새로고침시에만 정보를 불러오는 이슈가 발생했다.

원인이 됬던 부분

설문을 받는 3번째 폼 버튼에서 사용자의 정보를 받아오는 부분이 추가적으로 필요했는데, 마이페지이 관련 코드에서만 잘못된 점을 찾던 게 원인이었다. 로그인 쪽에 setUserData를 추가해줬어야 했는어야 됬다. 😂 페이지를 접속해 유저 정보를 받아오는 시점을 콘솔로 보며 생각해보니 최초에 회원가입 할때 3번째 설문 받는 부분이었다. 그래서 Signup03, SignupForm 파일을 더 분석해보기로 했다.

해결 방법

1. Supabase 설정을 Cascade로 연결

먼저, Supabase에서 필요한 데이터가 제대로 연계되지 않아 있어서, 설정을 변경하였다. 이를 통해 사용자가 설문을 완료한 후에도 사용자 데이터가 제대로 유지되도록 했다.

2. UserContextProvider의 useUser에서 setUserData 값을 받아오기

다음으로, 사용자 데이터를 전역 상태에서 관리할 수 있도록 만든 UserContextProvider에서 useUser 훅을 통해 setUserData 값을 받아오도록 했다. 이를 통해 로그인 시 사용자 데이터가 전역 상태로 관리되며, 다른 컴포넌트에서도 이 데이터 값을 받아왔다.

const { setUserData } = useUser();

  return (
    <QueryClientProvider client={queryClient}>
      <UserProvider>
        <ContextProvider>
          <Provider>{children}</Provider>
        </ContextProvider>
      </UserProvider>
    </QueryClientProvider>
  );
};

그리고 추가적으로도 에러 처리했던 "useUser는 UserProvider 안에서만 사용할 수 있습니다." 에러 메세지가 떠서 확인해보니 CombinedProviders 파일을 확인해보니, 모달을 포함한 provider보다 하위에 있어서 발생한 에러여서 UserProvider 위치를 ContextProvider보다 상위로 변경하였다.

3. SignupForm`에서 setUserData를 Props로 전달

마지막으로, SignupForm 컴포넌트에서 setUserData를 Signup03 컴포넌트의 props로 전달하여, 사용자가 설문을 완료했을 때 이 데이터를 업데이트하도록 했다.
콘솔에 console.log(data[0]) 값이 잘 출력되는것을 확인했다.

  return <Signup03 setUserData={setUserData} />;

setUserData(data[0]);

마무리

수정 이후 상단의 영상처럼 잘 나오는 것을 확인했다. 처음에 UserContextProvider와 마이페이지 파일들만 확인했던 부분이 문제였던 것 같다. 다음부터는 처리 과정을 하나 하나 디버깅하면서 원인을 단계별로 분석하며 트러블슈팅을 수정해야겠다는 생각이 들었다.