로그인 후 새로고침시 유저정보 없음 오류/ zustand persist

프로젝트에서 로그인/회원가입을 구현하고 있는 중에 마이페이지에서 새로고침하면 날라가는 오류가 발생함.

기존에는 onAuthStateChange를 Header에 넣어놓고 랜더링이 될 때마다 zustand에 넣어주는 식으로 로직을 구성했었다.
그래서 크게 문제가 없을거라고 안일하게 생각했었다ㅠ

// Header.tsx

const setUser = useAuth((state) => state.setUser);

  useEffect(() => {
    supabase.auth.onAuthStateChange((event, session) => {
      if (session) {
        setUser(session.user);
      } else {
        setUser(null);
      }

    });
  }, []);

//zustand

export type AuthStore = {
  user: User | null;
  setUser: (user: User | null) => void;
};

const useAuth = create<AuthStore>(
    (set) => ({
      isAuthInitialized: false,
      user: null,
      setUser: (user) => set(() => ({ user })),
      setIsAuthInitialized: (isAuthInitialized) => set(() => ({ isAuthInitialized }))
    }),

);

이렇게 작성할 경우 매번 랜더링이 될 때마다 유저정보가 들어가지만 새로고침시 유저정보가 날라가고 다시 들어오는 그 사이의 텀이 생기기 때문에 유저정보가 없을시에는 접근이 불가능하게 해놓은 마이페이지에서는 튕기는 것이었다.

어떻게 할지 고민하다가 zustand의 persist를 사용하기로 했다.
persist를 사용시 로컬스토리지에 정보를 저장할 수 있으며 저장된 정보를 기본값으로 가지고 있는다고 한다.

import { User } from '@supabase/supabase-js';
import { create } from 'zustand';
import { createJSONStorage, persist } from 'zustand/middleware';

export type AuthStore = { 
  user: User | null;
  setUser: (user: User | null) => void;
};

const useAuth = create<AuthStore>()(
  persist(
    (set) => ({
      user: null,
      setUser: (user) => set(() => ({ user })),
    }),
    {
      name: 'user-store',
      storage: createJSONStorage(() => localStorage)
    }
  )
);

위와 같이 원래의 로직을 persist로 감싸고 createJSONtorage를 사용해서 로컬스토리지에 'user-store'이라는 이름으로 유저정보를 저장했다.