middleware 도입

Author: CreatiCoding

frontend/zicdding-class.com/app/(user)/my/_components/MyInfo.tsx

@@ -7,17 +7,6 @@ import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 
-function useLoginPageGuard(nextPage: string) {
-  const { isLogged } = useUser();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!isLogged) {
-      router.push(nextPage);
-    }
-  }, [isLogged, router, nextPage]);
-}
-
 export function MyInfo({ mode }: { mode: 'view' | 'modify' }) {
   const router = useRouter();
   const { user } = useUser();
@@ -38,8 +27,6 @@ export function MyInfo({ mode }: { mode: 'view' | 'modify' }) {
     setValue('phoneNumber', user.phone_num);
   }, [user, setValue]);
 
-  useLoginPageGuard('/login');
-
   return (
     <div className="space-y-4 w-[420px] mx-auto my-0">
       <div className="w-[200px] flex justify-center ml-auto mr-auto mb-8 flex-col">
@@ -100,7 +87,12 @@ export function MyInfo({ mode }: { mode: 'view' | 'modify' }) {
           </Button>
         </div>
       ) : (
-        <Button className="w-full rounded-[20px]" onClick={() => router.push('/my/modify')}>
+        <Button
+          className="w-full rounded-[20px]"
+          onClick={() => {
+            router.push('/my/modify');
+          }}
+        >
           개인정보 수정
         </Button>
       )}

frontend/zicdding-class.com/middleware.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+import { apiV1 } from './app/_remotes';
+
+async function isAuth() {
+  try {
+    await apiV1.users.getMe();
+    return true;
+  } catch {
+    return false;
+  }
+}
+export async function middleware(request: NextRequest) {
+  if (!(await isAuth())) {
+    return NextResponse.redirect(new URL('/login', request.url));
+  }
+
+  return NextResponse.next();
+}
+
+// 미들웨어를 적용할 경로를 지정
+export const config = {
+  matcher: ['/my/:path*'],
+};