Feat: 로그인 시 토큰 저장 및 middleware 설정

components/start-family/introduce-text/introduce-text.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 17px;
-  padding-top: 72px;
+  padding-top: calc(54px + 72px);
   h2 {
     font-size: 24px;
     span {

middleware.ts

@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server';
+import { NextRequest } from 'next/server';
+
+const PROTECTED_PAGES = ['/start-family'];
+const PUBLIC_PAGES = ['/login'];
+
+export default function middleware(request: NextRequest) {
+  const { cookies, nextUrl } = request;
+  const path = nextUrl.pathname;
+  const isProtectedPage = PROTECTED_PAGES.includes(path);
+  const isPublicPage = PUBLIC_PAGES.includes(path);
+
+  // 로그인 상태 확인
+  const hasCookie = cookies.has('accessToken');
+
+  // 쿼리 파라미터에서 token 값 확인
+  const hasQuery = nextUrl.search.includes('token');
+
+  // /start-family 페이지로 접근하는데 token이 있을 경우 : 페이지 접근
+  // /start-family 페이지로 접근하는데 token이 없을 경우 : 리다이렉션
+  // /start-family 페이지로 접근하는데 token이 없지만 쿠키가 있을 경우 : 페이지 접근
+  // 추후 배포됐을 때 수정.
+  if (path === '/start-family' && hasQuery) {
+    return NextResponse.next();
+  } else if (path === '/start-family' && !hasQuery) {
+    if (hasCookie) {
+      return NextResponse.next();
+    } else {
+      return NextResponse.redirect(new URL('/login', request.nextUrl));
+    }
+  }
+
+  // 비로그인 상태일 때 로그인이 필요한 페이지에 접근 시 리다이렉션
+  if (!hasCookie && isProtectedPage) {
+    return NextResponse.redirect(new URL('/login', request.nextUrl));
+  }
+
+  // 로그인 상태일 때 로그인 페이지에 접근 시 리다이렉션
+  if (hasCookie && isPublicPage) {
+    return NextResponse.redirect(new URL('/', request.nextUrl.origin));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/login', '/start-family'],
+};

pages/start-family/index.tsx

@@ -1,8 +1,23 @@
 import LinkList from '@/components/start-family/link-list/link-list';
 import IntroduceText from '@/components/start-family/introduce-text/introduce-text';
 import styles from './index.module.scss';
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { setCookie } from 'cookies-next';
 
 export default function StartFamily() {
+  const {
+    query: { token },
+    isReady,
+  } = useRouter();
+
+  useEffect(() => {
+    if (!isReady) return;
+    if (token) {
+      setCookie('accessToken', token);
+    }
+  }, [isReady]);
+
   return (
     <article className={styles.article}>
       <IntroduceText />