온보딩 프로젝트 3단계 제출

[yoouyeon]

21일 금요일 리뷰 중에 있었던 에러 보완하여 제출합니다... 🙂

발생 에러

Error: Abort fetching component for route: "/login"

에러 발생 상황

페이지에 URL로 직접 접근 시도
→ 그 이후 로그아웃

예상 원인

로그아웃 후 login 페이지로 이동을 위해서 router.push('/login') 호출
→ 로그아웃 상태이므로 useUser 훅에서 error state가 true로 설정
→ DefaultLayout에서 error 가 true이므로 로그인 에러로 router.push('/login') 호출
→ 에러 발생

해결 방법

• login 페이지로 이동했음에도 불구하고 왜 DefaultLayout의 useEffect 내부 로직이 실행되는지 (login 페이지는 PublicLayout)
• 왜 URL로 직접 접근한 이후에만 에러 조건에 걸리는지 (왜 reload 없이 로그아웃하면 에러 조건에 걸리지 않는지)

위 두가지에 대한 이유를 찾지 못해서...
로그아웃 후에 로그인 페이지로 직접 이동시키지 않고
그 이후에 로그인 에러로 로그인 페이지로 이동되도록 에러만 없애주었습니다... 😕

// src/components/layouts/DefaultLayout.tsx 
  const handleLogout = async () => {
    await logout();
    resetUser();
    // router.push('/login');
  };