사용자 정보 전역 관리

메인 화면에서 유저의 email을 유저 네임으로 보여주기 위해 유저 정보가 필요한 상황

1차 시도 ->
필요한 파일마다 useState로 유저 데이터를 관리 (1:1)

const [userData, setUserData] = useState<User | null>(null)

  useEffect(() => {
    const fetchData = async () => {
      const supabase = createClient()
      const { data: { user }, error } = await supabase.auth.getUser()
      setUserData(user)
    }
    fetchData()
  }, [])

  const email = userData ? userData.email : null

유저 데이터 전역에서 관리해버리게 루트에 있는 store 폴더에 유저의 정보를 관리하는 파일을 만들기로 함.

2차 시도 -> (1: N)

// @/store/useUserStore.ts

export const useUserStore = create<UserState>((set) => ({
  user: null,
  fetchUser: async () => {
    const supabase = createClient()
    const { data: { user }, error } = await supabase.auth.getUser()
    /* if (error) ... */
    set({ user })
  },
}))


// 사용
import { useUserStore } from '@/store/useUserStore'

 const user = useUserStore(state => state.user)
 const fetchUser = useUserStore(state => state.fetchUser)

 useEffect(() => {
   fetchUser()
 }, [fetchUser])

 const email = user ? user.email : null

3차 시도 -> (1: N)는 맞는데, 웹페이지에 접근하기만 하면 로그인하지도 않았는데 계속 user의 정보를 fetch 해오려고 하는게 거슬ㄹㅕ서 session 확인 후 로그인이 된 이후 fetch user 해오도록 코드 추가

// @/store/useUserStore.ts

export const useUserStore = create<UserState>((set) => ({
   {/* user: null,*/}
  isLogin: false,
  {/* fetchUser, 같음 */}
  checkisLogin: async() => {
    const supabase = createClient()
    const {
      data: { session },
      error,
    } = await supabase.auth.getSession()
    if (error) {
      console.error('Check isLogin ERROR:', error)
    }
    if (session) {
      set({ isLogin: true })
      await useUserStore.getState().fetchUser()
    } else {
      set({ isLogin: false })
    }
  },
}))