Merge pull request #72 from School-of-Company/update/accessToken-role

🔀 역할 검증 로직 개선

src/app/api/role/route.ts

@@ -0,0 +1,7 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const role = request.headers.get('role') || 'user';
+
+  return NextResponse.json({ role });
+}

src/entities/layout/Header/model/useNavigation.ts

@@ -1,11 +1,11 @@
 'use client';
 import { usePathname } from 'next/navigation';
-import useStore from '@/shared/stores/useStore';
+import { useRole } from '@/shared/model/useRole';
 import { userNavItems, manageNavItems } from './navigationItems';
 import { NavItem } from './types';
 
 export const useNavigation = () => {
-  const { role } = useStore();
+  const role = useRole();
 
   const pathname = usePathname();
 

src/middleware.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const accessToken = request.cookies.get('accessToken');
+
+  const requestHeaders = new Headers(request.headers);
+
+  if (accessToken) {
+    requestHeaders.set('role', 'manage');
+  } else {
+    requestHeaders.set('role', 'user');
+  }
+
+  return NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  });
+}
+
+export const config = {
+  matcher: ['/api/role'],
+};

src/shared/model/useRole.ts

@@ -0,0 +1,19 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export const useRole = () => {
+  const [role, setRole] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchRole = async () => {
+      const response = await fetch('/api/role');
+      const data = await response.json();
+      setRole(data.role);
+    };
+
+    fetchRole();
+  }, []);
+
+  return role;
+};

src/widgets/expo-detail/ui/ExpoActionPanel/index.tsx

@@ -2,8 +2,7 @@
 
 import { useRouter } from 'next/navigation';
 import React from 'react';
-import ClientInitializer from '@/shared/components/ClientInitializer';
-import useStore from '@/shared/stores/useStore';
+import { useRole } from '@/shared/model/useRole';
 import { Button, Modal } from '@/shared/ui';
 import { ModalLayout } from '@/widgets/layout';
 import { useExpoActionPanel } from '../../model/useExpoActionPanel';
@@ -13,7 +12,7 @@ interface ExpoActionPanelProps {
 }
 
 const ExpoActionPanel = ({ params }: ExpoActionPanelProps) => {
-  const { role } = useStore();
+  const role = useRole();
   const router = useRouter();
   const { isModalOpen, modalContent, openModal, closeModal } =
     useExpoActionPanel();
@@ -66,7 +65,6 @@ const ExpoActionPanel = ({ params }: ExpoActionPanelProps) => {
 
   return (
     <div>
-      <ClientInitializer />
       <div className="h-fit w-[210px] space-y-[26px] rounded-sm border-1 border-solid border-gray-200 p-[18px] mobile:w-full mobile:border-none mobile:px-[16px]">
         <div className="space-y-2">{getButtons()}</div>
       </div>

src/widgets/layout/ui/Header/index.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import { Logo, Navigation } from '@/entities/layout/Header';
-import ClientInitializer from '@/shared/components/ClientInitializer';
 
 const Header = () => {
   return (
     <div className="mx-auto flex w-full py-5">
-      <ClientInitializer />
       <div className="mx-auto flex w-[1200px] items-center justify-between px-5">
         <Logo />
         <Navigation />