개요
이번 프로젝트에서 로그인 기능, 계획 페이지를 구현했다. 우선 로그인을 다 구현을 하고 사용을 해보니 로그인을 안 한 사용자가 게시물을 보다가 기능 사용을 위해 로그인을 했을 때 홈으로 리다이렉트 시키는 부분이 사용자에게 나쁜 경험을 주는 것 같았다. 그래서 로그인시 이전 페이지 이동에 대한 기능을 추가했던 과정이다.
개발 환경: next.js 14.0.0, appRouter
문제
로그인 기능을 넣고 테스트를 하던 중 로그인 안 한 사용자가 게시물을 보다 특정 기능 사용을 위해서 로그인을 진행했을 때 무조건 home으로 리다이렉트 시켜서 유저가 사용하려고 했던 기능을 바로 사용할 수 없다는 문제가 있었다. 이 문제를 해결을 위해서 로그인시 유저의 이전 페이지로 리다이렉트 시키는 기능이 필요했다.
로그인시 무조건 홈으로 리다이렉트 되고 있다.
해결 과정
- window.history.go(-2)
처음에 시도했던 방식은 로그인 성공시 무조건 ‘/home’으로 리다이렉트를 시키는 것이 아니라 historyAPI를 이용해서 뒤로가기를 두번시키는 방법을 생각했다. 한번이 아니라 두번 한 이유는 카카카오톡 로그인 구현을 위해서 중간 과정이 있어서 2번 하는 방식을 생각했다. 하지만 이 방식은 외부에서 접속 후 바로 로그인을 진행하면 외부 페이지로 돌아가는 문제가 있었다.
무조건 뒤로가기를 하면 외부 페이지로 이동
2.이전페이지를 저장하기
두번째 방법은 로그인 페이지에서 이전 페이지를 저장해서 로그인 성공시 저장된 페이지로 이동을 시키려고 했다. 하지만 로그인 페이지에서 이전 페이지에 대한 정보를 어떻게 불러와야 되는지 방법을 잘 몰랐었다. 그래서 넥스트 공식 문서를 찾아 보니 app router에는 router change를 알 수 있는 방법을 소개하는 문서가 있었다.
위의 방법을 통해서 url이 변경되었을때 로그인 페이지가 아니라면 임시로 저장해두고, 로그인 페이지라면 저장된 값을 session storage에 저장하는 방법으로 기능을 구현했다.
//RouterChangeObserver.tsx
'use client';
import { usePathname } from 'next/navigation';
import { useEffect, useRef } from 'react';
export default function RouteChangeObserver() {
const pathName = usePathname();
const previousPage = useRef<string | null>(null); //단순 저장을 위해서 useRef 사용
useEffect(() => {
//로그인 페이지에서 저장된 이전페이지가 있다면 이전 페이지를 sessionStorage에 저장
if (pathName === '/login' && previousPage.current) {
window.sessionStorage.setItem('prev', previousPage.current);
return;
}
//위 조건에 안 맞다면 현재 Path를 저장한다.
previousPage.current = pathName;
}, [pathName]);
return <></>;
}
이 로직은 모든 페이지에 넣는 것 보다 최상단 구조인 RootLayout에 넣는 것이 좋을 거라고 생각해서 훅 형태로 넣으려고 했지만, RootLayout은 서버 컴포넌트로 리액트 훅을 사용할 수 없었다, 그래서 위의 기능만 있는 컴포넌트를 만들어서 넣어주는 방식으로 구현을 했다.
RootLayout으로 위에서 만들었던 observer 컴포넌트를 아래에 넣어줬다.
이제 로그인에 성공했다면 리다이렉트시 session 저장소에서 저장된 값을 꺼내서 이동시켜 주면 되고, 저장된 값이 없다면 home으로 이동시키면 된다. 모든 구현을 마치고 테스트를 해보니 내가 원하던대로 작동은 됐다. 하지만 위 구현에서는 문제가 있다. 로그인에 성공한 이 후에도 이 컴포넌트 로직은 작동이 되고 있고, 어디를 가더라도 작동이 된다는 문제가 있어서 다음에 리팩토링을 할 예정이다.
로그인 성공시 이전에 있었던 페이지로 이동
이제 사용자는 기능 사용을 위해서 로그인을 진행하고 이전에 있던 페이지에서 바로 사용하려고 했던 기능을 사용할 수 있다. !
