TMI 유저 버그 수정

김진주·2024년 2월 16일
0

:bug: [Fix] 로그인 후 메인으로 넘어올 떄 유저 정보를 받아오지 못하는 버그 수정

로그인하고 메인페이지로 넘어올 때 로그인한 유저 정보가 바로 넘어오지 않는 버그를 발견하였다.
그래서 코드를 뜯어보다 기존 코드의 storageData가 변하지 않아서 리렌더링이 발생하지 않아 생기는 문제라고 판단하여 버그를 해결하기 위해 생각해보았다.
그래서 생각해낸 결과는 다음과 같다.
로그인을 할 때 상태관리를 zustand를 사용하여 하고 있었는데


// zustand를 사용하여 로그인 상태관리
  signIn: async (userNameOrEmail, password) => {
    try {
      const user = await pb
        .collection('users')
        .authWithPassword(userNameOrEmail, password);
      set({ isAuth: true, user, token: user.token }); //
    } catch (error) {
      console.error(error);
      throw new Error('아이디나 비밀번호를 확인해주세요.');
    }
  },

이곳에 유저의 정보를 담기 때문에 그걸 사용하여 적용해주면 되겠다고 생각했다.

  const signInAuthData = useAuthStore((store) => store.user);

  const { storageData } = useStorage('pocketbase_auth');
  const [authModelData, setAuthModelData] = useState(storageData?.model);

  useEffect(() => {
    const pocketBaseAuthData = getData('pocketbase_auth');
    if (pocketBaseAuthData) {
      setAuthModelData(pocketBaseAuthData.model);
      return;
    }
    if (signInAuthData) {
      setAuthModelData(signInAuthData.record);
      return;
    }
  }, [signInAuthData, signInAuthData?.record]);

그래소 위와 같이 코드를 변경했다.
로컬스토리지에 pocketbase_auth정보가 있으면 그걸 가져와서 사용하고 없다면 zustand에 저장되어 있는 user 정보를 받아와서nav 바에 마이페이지 부분에 적용해주었다.

수정전

수정후

profile
진주링딩동🎵

0개의 댓글