[#39] Feat: 미들웨어 설정 및 상수 분리

api/index.ts

@@ -56,6 +56,7 @@ const setupInterceptors = (instance: AxiosInstance) => {
             alert('토큰 갱신을 실패하였습니다. 로그인 페이지로 이동합니다.');
             deleteCookie('refreshToken');
             deleteCookie('accessToken');
+            deleteCookie('isFamily');
             window.location.href = '/login';
             isRefreshing = false;
           }

middleware.ts

@@ -1,44 +1,60 @@
 import { NextResponse } from 'next/server';
 import { NextRequest } from 'next/server';
+import { MiddlewareData } from './utils/constants/middleware-data';
 
-const PROTECTED_PAGES = ['/start-family', '/calendar', '/start-pet'];
-const PUBLIC_PAGES = ['/login'];
-const MATCHER_PAGES = ['/start-family/:path*', '/login', '/start-pet/:path'];
+const { PROTECTED_PAGES, PUBLIC_PAGES, NON_FAMILY_PAGES, FAMILY_PAGES, MATCHER_PAGES } = new MiddlewareData();
 
 export default function middleware(request: NextRequest) {
   const { cookies, nextUrl } = request;
   const path = nextUrl.pathname;
+  const hasCookie = cookies.has('accessToken');
+  const hasFamily = cookies.has('isFamily');
   const isProtectedPage = PROTECTED_PAGES.some((page) => path.startsWith(page));
   const isPublicPage = PUBLIC_PAGES.includes(path);
+  const isNonFamilyPage = NON_FAMILY_PAGES.includes(path);
+  const isFamilyPage = FAMILY_PAGES.includes(path);
+
+  // 정적 파일 요청 필터링
+  if (
+    path.startsWith('/_next/') ||
+    path.startsWith('/images/') ||
+    path.startsWith('/fonts/') ||
+    path === '/favicon.ico'
+  ) {
+    return NextResponse.next();
+  }
 
-  // 로그인 상태 확인
-  const hasCookie = cookies.has('accessToken');
-
-  // 쿼리 파라미터에서 token 값 확인
+  // 배포할 때 삭제----------------------------------------------------------
   const hasQuery = nextUrl.search.includes('accessToken');
-
-  // /start-family 페이지로 접근하는데 token이 있을 경우 : 페이지 접근
-  // /start-family 페이지로 접근하는데 token이 없을 경우 : 리다이렉션
-  // /start-family 페이지로 접근하는데 token이 없지만 쿠키가 있을 경우 : 페이지 접근
-  // 추후 배포됐을 때 수정.
   if (path === '/start-family') {
     if (hasQuery || hasCookie) {
       return NextResponse.next();
     } else {
       return NextResponse.redirect(new URL('/login', request.nextUrl));
     }
   }
+  // -----------------------------------------------------------------------
 
-  // 비로그인 상태일 때 로그인이 필요한 페이지에 접근 시 리다이렉션
+  // 로그인 상태일 때 접근 불가
+  if (hasCookie && isPublicPage) {
+    const redirectUrl = hasFamily ? '/family' : '/start-family';
+    return NextResponse.redirect(new URL(redirectUrl, request.nextUrl.origin));
+  }
+
+  // 비로그인 상태일 때 접근 불가
   if (!hasCookie && isProtectedPage) {
     return NextResponse.redirect(new URL('/login', request.nextUrl));
   }
 
-  // 로그인 상태일 때 로그인 페이지에 접근 시 리다이렉션
-  if (hasCookie && isPublicPage) {
-    return NextResponse.redirect(new URL('/', request.nextUrl.origin));
+  // 가족이 있을 때 접근 불가
+  if (hasFamily && isNonFamilyPage) {
+    return NextResponse.redirect(new URL('/family', request.nextUrl));
   }
 
+  // 가족이 없을 때 접근 불가
+  if (!hasFamily && isFamilyPage) {
+    return NextResponse.redirect(new URL('/start-family', request.nextUrl));
+  }
   return NextResponse.next();
 }
 

pages/start-family/index.tsx

@@ -9,7 +9,7 @@ import { setCookie } from 'cookies-next';
 
 export default function StartFamily() {
   const {
-    query: { accessToken, refreshToken },
+    query: { accessToken, refreshToken, isFamily },
     isReady,
   } = useRouter();
 
@@ -21,6 +21,9 @@ export default function StartFamily() {
     if (refreshToken) {
       setCookie('refreshToken', refreshToken);
     }
+    if (isFamily) {
+      setCookie('isFamily', isFamily);
+    }
   }, [isReady]);
 
   return (

utils/constants/middleware-data.ts

@@ -0,0 +1,17 @@
+export class MiddlewareData {
+  constructor() {}
+  PROTECTED_PAGES = ['/start-family', '/calendar', '/start-pet', '/family', '/mypage', '/diaries'];
+  PUBLIC_PAGES = ['/login'];
+  FAMILY_PAGES = ['/start-pet', '/family', '/mypage', '/diaries', '/calendar'];
+  NON_FAMILY_PAGES = ['/start-family', '/start-family/entry-info', '/start-family/register-code'];
+  MATCHER_PAGES = [
+    '/start-family/:path*',
+    '/login',
+    '/start-pet/:path',
+    '/calendar/:path*',
+    '/family/:path*',
+    '/mypage/:path*',
+    '/diaries/:path*',
+    '/calendar/:path*',
+  ];
+}