🖥️온보딩 화면이란?

앱 온보딩은 사용자가 앱을 처음 실행했을 때 핵심 정보를 전달하고, 앱의 사용 가능한 기능을 소개하는 과정이다.
온보딩 페이지-설명 참고

웹앱에서의 온보딩

위 설명과 같이 사실 앱에 온보딩이 주로 들어가지만 우리는 논의를 통해 웹에서도 간단한 온보딩 페이지를 만들어서 유저가 진입했을 때 사용자의 여행 취향 정보를 수집하도록 하였다.

따라서 나는 next에서 middleware로 유저의 정보를 가지고 redirect하는 과정을 진행하기로 했다.

✅로그인하지 않은 사용자 혹은 첫 진입 유저일 때 온보딩 화면을 띄우게 하고 싶다?

우선 middleware는 서버 측에서 작동하는 코드로 클라이언트에서 보낸 요청을 request로 받아서 확인할 수 있다.

1. supabase로 로그인 한 유저는 cookies에 세션토큰을 남긴다.

request.cookies.get('auth-token이름')

middleware에서는 request 안에 있는 cookies에서 get을 통해 해당 key값에 따른 값을 받을 수 있다.

이 값을 가지고 우리는 진입점에서 로그인했었던 유저인지 아닌지 알 수 있다.

2. 첫 진입 유저인가?

마찬가지로 우리는 이 유저가 첫 진입 유저인지 알려면 request 안에 있는 정보를 통해 확인해야한다.

나는 온보딩 로직을 세울 때 유저에게서 받아야 하는 정보를 localstorage에 넣어서 이 정보를 가지고 redirect 시키려고 했는데, 찾아보니 middleware는 서버 측이라 localstorage같은 클라이언트 측 정보에 접근할 수 없다고 한다.

따라서 나는 submit 버튼을 누를 때 cookie 에 hasTravelType 이라는 값에 true를 넣고, 이 값이 보안을 중요시 하지 않아서 모든 url에서 접근 가능하도록 하기 위해 아래와 같은 코드를 넣었다.

document.cookie = "hasTravelType=true; path=/";

⏩middleware 코드

export async function middleware(request: NextRequest) {
  const url = request.nextUrl.clone();
  const pathname = url.pathname;
  if (pathname === "/") {
    const isLoggedIn = request.cookies.get(
      "cookies에 들어간 로그인 key 이름"
    );
    const hasTravelType = request.cookies.get("hasTravelType");

    if (!isLoggedIn && !hasTravelType) {
      url.pathname = "/onboard";
      return NextResponse.redirect(url);
    }

    return NextResponse.next();
  }

  return await updateSession(request);
}

코드 설명

• const url = request.nextUrl.clone(); : 요청이 들어온 url의 복사본을 만드는 코드
• const pathname = url.pathname : base url 뒤에 붙는 경로 이름을 pathname에 저장
• if (pathname === '/') : 요청 url이 홈페이지 일때 request를 통해 cookies에 내가 원하는 값이 있는지 없는지 저장.
• if (!isLoggedIn && !hasTravelType) : 로그인 정보가 없고 travelType 정보도 없으면 '/onboard'로 redirect 시킨다.