🔀 역할에 따른 url 처리 진행

src/app/api/admin/route.ts

@@ -24,3 +24,35 @@ export async function GET() {
     return NextResponse.json({ error: message }, { status });
   }
 }
+
+export async function DELETE() {
+  const cookieStore = cookies();
+  const accessToken = cookieStore.get('accessToken')?.value;
+
+  if (!accessToken) {
+    return NextResponse.json(
+      { error: 'Access token not found' },
+      { status: 401 },
+    );
+  }
+
+  try {
+    await apiClient.delete('/admin', {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    const response = NextResponse.json({ success: true });
+    response.cookies.set('accessToken', '', { maxAge: 0 });
+    response.cookies.set('refreshToken', '', { maxAge: 0 });
+    return response;
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      const status = error.response?.status || 500;
+      const message =
+        error.response?.data?.message || 'delete user account failed';
+      return NextResponse.json({ error: message }, { status });
+    }
+  }
+}

src/entities/admin/api/deleteUserAccount.ts

@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+export const deleteUserAccount = async () => {
+  const response = await axios.delete('/api/admin');
+  return response;
+};

src/entities/admin/model/useDeleteUserAccount.ts

@@ -0,0 +1,19 @@
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+import { toast } from 'react-toastify';
+import { deleteUserAccount } from '../api/deleteUserAccount';
+
+export const useDeleteUserAccount = () => {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: () => deleteUserAccount(),
+    onSuccess: () => {
+      toast.success('탈퇴가 완료되었습니다.');
+      router.push('/');
+    },
+    onError: () => {
+      toast.error('유저 탈퇴를 실패했습니다.');
+    },
+  });
+};

src/entities/admin/ui/AdminProfile/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Logout } from '@/shared/assets/icons';
+import { useDeleteUserAccount } from '../../model/useDeleteUserAccount';
 import { useLogout } from '../../model/useLogout';
 
 const ProfileInfo = ({ label, value }: { label: string; value: string }) => (
@@ -11,18 +12,43 @@ const ProfileInfo = ({ label, value }: { label: string; value: string }) => (
 
 const AdminProfile = () => {
   const { mutate: logout } = useLogout();
+  const { mutate: deleteAccount } = useDeleteUserAccount();
+  const [isToggleLogout, setIsToggleLogout] = useState(false);
+
+  const handleLogoutClick = () => {
+    setIsToggleLogout((prev) => !prev);
+  };
+
   return (
-    <div className="flex w-full justify-between">
+    <div className="relative flex w-full justify-between">
       <div className="flex items-center gap-[124px] mobile:flex-col mobile:gap-[30px]">
         <div className="space-y-[32px]">
           <ProfileInfo label="이름" value="김진원" />
           <ProfileInfo label="아이디" value="jin1234" />
           <ProfileInfo label="이메일" value="[email protected]" />
         </div>
       </div>
-      <label onClick={() => logout()}>
-        <Logout />
-      </label>
+      <div>
+        <button onClick={handleLogoutClick}>
+          <Logout />
+        </button>
+        {isToggleLogout && (
+          <div className="absolute right-0 top-[30px] flex h-fit flex-col gap-2 rounded-[6px] border border-gray-200 bg-white p-2 shadow-[0px_4px_4px_0px_rgba(0,_0,_0,_0.25)]">
+            <button
+              onClick={() => logout()}
+              className="w-full rounded-[6px] px-5 py-2 text-body2 text-gray-500 hover:bg-error hover:text-white"
+            >
+              로그아웃
+            </button>
+            <button
+              onClick={() => deleteAccount()}
+              className="w-full rounded-[6px] px-5 py-2 text-body2 text-gray-500 hover:bg-error hover:text-white"
+            >
+              회원탈퇴
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

src/middleware.ts

@@ -1,16 +1,25 @@
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
 
-export function middleware(request: NextRequest) {
-  const accessToken = request.cookies.get('accessToken');
+const MANAGE_RESTRICTED_PATHS = [
+  /^\/signIn$/,
+  /^\/signUp$/,
+  /^\/application\/.+\/(STANDARD|TRAINEE)$/,
+];
 
-  const requestHeaders = new Headers(request.headers);
+const USER_RESTRICTED_PATHS = [
+  /^\/admin$/,
+  /^\/create-exhibition$/,
+  /^\/expo-manage\/.+$/,
+  /^\/name-tag\/.+$/,
+  /^\/sms\/.+\/(STANDARD|TRAINEE)$/,
+  /^\/program(\/.*)?$/,
+];
 
-  if (accessToken) {
-    requestHeaders.set('role', 'manage');
-  } else {
-    requestHeaders.set('role', 'user');
-  }
+function handleApiRole(request: NextRequest): NextResponse {
+  const requestHeaders = new Headers(request.headers);
+  const role = request.cookies.get('accessToken') ? 'manage' : 'user';
+  requestHeaders.set('role', role);
 
   return NextResponse.next({
     request: {
@@ -19,6 +28,44 @@ export function middleware(request: NextRequest) {
   });
 }
 
+function isPathMatch(pathname: string, patterns: RegExp[]): boolean {
+  return patterns.some((pattern) => pattern.test(pathname));
+}
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  if (pathname === '/api/role') {
+    return handleApiRole(request);
+  }
+
+  const accessToken = request.cookies.get('accessToken');
+
+  if (!accessToken && isPathMatch(pathname, USER_RESTRICTED_PATHS)) {
+    return NextResponse.redirect(new URL('/', request.url));
+  }
+
+  if (accessToken && isPathMatch(pathname, MANAGE_RESTRICTED_PATHS)) {
+    return NextResponse.redirect(new URL('/', request.url));
+  }
+
+  return NextResponse.next();
+}
+
 export const config = {
-  matcher: ['/api/role'],
+  matcher: [
+    '/api/role',
+    '/signIn',
+    '/signUp',
+    '/admin',
+    '/create-exhibition',
+    '/expo-manage/:path*',
+    '/name-tag/:path*',
+    '/sms/:path*/STANDARD',
+    '/sms/:path*/TRAINEE',
+    '/program/:path*',
+    '/program/detail/:path*',
+    '/application/:path*/STANDARD',
+    '/application/:path*/TRAINEE',
+  ],
 };