프로젝트를 마무리하고 다른 프로젝트를 준비하면서 웹 레퍼런스들을 참고하고 있었는데 login 페이지 URL에 redirect query가 있었다. 저 query의 용도는 무엇일까 확인해보니 내가 로그인 페이지를 오기 전 어느 페이지에 위치해있었는지를 나타내는 것이었다. 즉, 로그인이 성공하면 해당 위치로 되돌아가도록 위치를 기억하는 것이었다. 현재 프로젝트에서는 로그인 후 항상 메인으로 이동시켰는데 이렇게 되면 사용성이 굉장히 높아질 것 같았다. 특히 커뮤니티나 상품 같이 무한스크롤을 이용한 페이지에서 로그인으로 이동 후에 메인으로 되돌아간다면 이전 상품들을 다시 찾아야 하는 번거로움이 생길 것 같았다.
프로젝트에서 로그인 페이지로 이동하는 경우가 굉장히 다양했다.
1. header에 로그인 버튼을 클릭
2. 비회원이 접근 불가능한 페이지를 접속 시 (대부분이 Protected Route로 인해 이동됨)
3. 회원/비회원에 따라 routing 위치를 다르게 설정한 경우
2~3번 경우들은 이제 query를 사용하지 않을 것이기 때문에 그리고 팀원 별로 구현 방식이 다르다보니 어떤 경우는 로그인 여부에 따라 라우팅 위치를 다르게 해주었고 어떤 경우는 Protected Route를 통해 redirect되도록 설정했다. 해당 구현을 사전에 정의했다면 코드를 여러 곳 수정할 필요없었을텐데 사전에 기획된 게 아니다보니 여러 곳들을 수정했어야 했다는 아쉬움이 있다. 최대한 코드를 유사하게 구현하려고 했는데 회의한 뒤 까먹는 경우도 많고 습관도 많아서 그런 듯하다..ㅜ
튼 이번 기회에 하나로 통일하고 싶었지만, 코드가 크게 바뀌는 부분이 생기기도 하고 해서 아쉽게도 완벽하게 해결은 못했다. 그래서 redirect를 통해 로그인 후 이전 페이지로 이동하는 부분에 대해서만 정리한다.
const pathname = usePathname();
*생략*
<Link
href={`/login?redirect=${encodeURIComponent(pathname)}`}
className="text-xs hover:underline"
>
로그인
</Link>usePathname을 통해 현재 주소를 pathname에 저장한다. 이를 인코딩한 값을 query의 값으로 둔다. 여기서 encodeURIComponent을 하는 이유는 pathname이다보니 /이 필수로 들어가게 된다. 하지만 query의 값으로 /을 사용하면 URL에서는 다르게 판단하기 때문에 이를 다른 값으로 변경해주어야 한다. 이를 위해 필요하다.
const param = useSearchParams();
* 생략 *
router.push(`${param ? decodeURIComponent(param.get('redirect')) : '/'}`);로그인 후에 이동을 시켜줄 때는 useSearcgParams를 이용한다. 그러면 param.redirect에는 위에서 입력한 query의 값이 저장되어 있다. 이를 디코딩해주면 처음 pathname이 된다. 해당 위치로 라우팅해주면 된다. 하지만 /login 페이지를 직접 입력해주거나 미처 예외처리를 못한 경우 등이 있을 수 있기 때문에 해당 param이 존재하지 않으면 메인으로 이동하도록 예외처리를 해주어야 한다.
그럼 이제 다음과 같이 redirect가 query로 들어오고 해당 위치로 로그인 후 이동하게 된다.
