token 리다이렉션 문제 해결

[seungw0o]

버그 설명

사용자가 엑세스 토큰 없이 보호된 경로에 접근했을 때, 즉시 로그인 페이지로 리디렉션되지 않습니다. 대신, 페이지 내 컴포넌트가 API를 호출하고 실패한 후에야 리디렉션이 발생합니다. 이로 인해 사용자는 잠시 보호된 페이지를 보게 되어 좋지 않은 사용자 경험을 유발합니다.
실제로 local에서 실행시켜 바로 메인 페이지로 이동하면 잠시동안 404 not found라는 페이지를 보게 됩니다

해결 방법

모든 보호된 경로를 감싸는 새로운 레이아웃 컴포넌트인 AuthLayout을 구현합니다. 이 컴포넌트는 모든 네비게이션 이벤트에서 사용자의 인증 상태(엑세스 토큰 유무)를 확인하는 역할을 합니다. 만약 사용자가 인증되지 않은 상태로 보호된 페이지에 접근을 시도하면, 즉시 로그인 페이지로 리디렉션합니다. 이를 통해 보호된 콘텐츠의 렌더링을 막고 불필요한 API 호출 실패를 방지할 수 있습니다.

진행 사항

• access_token 존재 여부를 확인하고, 보호된 경로에서 토큰이 없을 경우 리디렉션하는 로직을 포함한 AuthLayout.tsx 컴포넌트 생성
• 보호된 경로들을 감싸도록 router.tsx를 수정하여 AuthLayout을 적용
• 인증되지 않은 사용자가 즉시 로그인 페이지로 리디렉션되는지 확인