🔀 역할 검증 로직 개선

[Ethen1264]

💡 배경 및 개요

역할 검증 로직 개선

📃 작업내용

middlware를 사용하여 role을 검증함
middleware에서 검증하 role을 route api에서 호출함

🎸 기타

#71
추후 더욱 좋은 방법을 찾을 필요가 있어보임

작성하지 않은 부분은 삭제하여주시길 바랍니다.

Summary by CodeRabbit

• 새로운 기능

  • 사용자 역할(role) 관리를 위한 새로운 API 엔드포인트 추가
  • 사용자 역할을 동적으로 가져오는 새로운 훅 도입

• 변경 사항

  • 기존 토큰 확인 및 상태 관리 방식 개선
  • 클라이언트 초기화 컴포넌트 제거

• 기타

  • 애플리케이션의 역할 기반 접근 제어 메커니즘 업데이트

[coderabbitai]

Walkthrough

이 풀 리퀘스트는 애플리케이션의 역할(role) 관리 방식을 재설계합니다. 기존의 Zustand 스토어 기반 접근 방식에서 새로운 useRole 훅과 미들웨어를 통한 역할 결정 메커니즘으로 전환했습니다. 주요 변경사항은 역할 정보를 가져오는 API 엔드포인트 추가, 미들웨어를 통한 역할 헤더 설정, 그리고 클라이언트 초기화 컴포넌트 제거를 포함합니다.

Changes

파일	변경 요약
src/api/role/route.ts	새로운 역할 API 엔드포인트 추가
src/middleware.ts	요청 헤더에 역할 설정 미들웨어 도입
src/shared/model/useRole.ts	새로운 useRole 훅 생성
src/entities/layout/Header/model/useNavigation.ts	useStore 에서 useRole로 역할 검색 방식 변경
src/widgets/expo-detail/ui/ExpoActionPanel/index.tsx	역할 훅 변경 및 ClientInitializer 제거

Sequence Diagram

sequenceDiagram
    Client->>Middleware: Request
    Middleware->>Middleware: Check Access Token
    Middleware-->>Client: Set Role Header
    Client->>API: Request Role
    API-->>Client: Return Role
    Client->>Component: Use Role

Loading

Possibly related PRs

• 🔀 excel 다운로드 제작 #68: 엑셀 다운로드 기능의 역할 관리와 관련된 API 상호작용

Suggested labels

📬 Type: API

Suggested reviewers

• answad
• happytaeyoon

Poem

🐰 토끼의 코드 춤, 역할의 변주
미들웨어 춤추고 훅은 노래해
오래된 스토어 안녕, 새 길을 가네
역할은 흐르고, 앱은 빛나네! 🌟

Finishing Touches

• 📝 Generate Docstrings

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 3

🔭 Outside diff range comments (2)

src/entities/layout/Header/model/useNavigation.ts (1)

Line range hint 8-20: 역할 상태 처리 및 타입 안전성 개선 필요

현재 구현에는 다음과 같은 개선이 필요합니다:

1. 로딩 및 에러 상태 처리가 없습니다
2. 역할 값에 대한 타입 안전성이 보장되지 않습니다
3. 하드코딩된 역할 비교 로직이 있습니다

다음과 같이 개선하는 것을 제안합니다:

+const VALID_ROLES = ['user', 'manage'] as const;
+type Role = typeof VALID_ROLES[number];
+
 export const useNavigation = () => {
-  const role = useRole();
+  const { role, isLoading, error } = useRole();
 
   const pathname = usePathname();
 
   const isActive = (path: string): boolean => pathname === path;
 
   const getColor = (path: string): string =>
     isActive(path) ? '#448FFF' : '#909090';
 
-  const navItems: NavItem[] =
-    role === 'user' ? userNavItems : role === 'manage' ? manageNavItems : [];
-  return { navItems, getColor };
+  const navItems: NavItem[] = isLoading
+    ? []
+    : error
+    ? userNavItems
+    : role === 'manage'
+    ? manageNavItems
+    : userNavItems;
+
+  return { navItems, getColor, isLoading, error };
 };

src/widgets/expo-detail/ui/ExpoActionPanel/index.tsx (1)

Line range hint 75-86: 일관성 있는 비교 연산자 사용이 필요합니다.

모달 렌더링 로직에서 역할 비교 시 일관성 없는 비교 연산자가 사용되고 있습니다:

• role === 'user'
• role == 'manage' // 느슨한 비교

- {role == 'manage' && (
+ {role === 'manage' && (

🧹 Nitpick comments (4)

src/middleware.ts (1)

22-24: 미들웨어 매처 설정 개선 필요

현재 매처 설정이 /api/role 경로에만 제한되어 있습니다. 역할 기반 접근 제어가 필요한 다른 API 엔드포인트들도 포함하는 것이 좋습니다.

 export const config = {
-  matcher: ['/api/role'],
+  matcher: [
+    '/api/role',
+    '/api/manage/:path*',
+    '/api/protected/:path*'
+  ],
 };

src/widgets/expo-detail/ui/ExpoActionPanel/index.tsx (3)

5-5: 역할 관리 로직이 개선되었습니다! 👍

useStore에서 useRole 훅으로의 전환은 역할 관리를 더 명확하고 집중적으로 만듭니다.

다만, useRole 훅의 반환 타입에 대한 JSDoc 문서화를 추가하면 좋을 것 같습니다:

/**
 * @returns {'user' | 'manage' | undefined} 현재 사용자의 역할
 */

Also applies to: 15-15

---

Line range hint 21-61: 상수 분리 및 타입 안정성 개선이 필요합니다.

역할별 버튼 렌더링 로직에서 다음 사항들을 개선하면 좋을 것 같습니다:

1. 하드코딩된 문자열을 상수로 분리
2. 역할 타입을 명시적으로 정의
3. 라우트 경로를 상수로 분리

예시 코드:

const ROLES = {
  USER: 'user',
  MANAGE: 'manage'
} as const;

type Role = typeof ROLES[keyof typeof ROLES];

const ROUTES = {
  NAME_TAG: (id: number) => `/name-tag/${id}`,
  PROGRAM: (id: number) => `/program/${id}`,
  EXPO_MANAGE: (id: number) => `/expo-manage/${id}`,
} as const;

const MODAL_MESSAGES = {
  APPLICATION: '해당 박람회에 지원하시겠습니까?',
  MESSAGE: '누구에게 문자를 전송하시겠습니까?',
} as const;

---

Line range hint 1-14: 컴포넌트 구조 개선 제안

다음과 같은 개선사항을 고려해보시면 좋을 것 같습니다:

1. 에러 바운더리 추가
2. params 타입을 더 구체적으로 정의
3. 커스텀 훅들의 로딩/에러 상태 처리

예시:

interface ExpoActionPanelProps {
  params: {
    id: number;
    // 필요한 다른 속성들...
  };
}

// 에러 바운더리 예시
class ExpoActionPanelErrorBoundary extends React.Component {
  // 구현...
}

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bf9f25c and 78c8c1e.

📒 Files selected for processing (9)

• src/app/api/role/route.ts (1 hunks)
• src/app/api/tokenCheck/route.ts (0 hunks)
• src/entities/layout/Header/model/useNavigation.ts (1 hunks)
• src/middleware.ts (1 hunks)
• src/shared/components/ClientInitializer.tsx (0 hunks)
• src/shared/model/useRole.ts (1 hunks)
• src/shared/stores/useStore.ts (0 hunks)
• src/widgets/expo-detail/ui/ExpoActionPanel/index.tsx (2 hunks)
• src/widgets/layout/ui/Header/index.tsx (0 hunks)

💤 Files with no reviewable changes (4)

• src/widgets/layout/ui/Header/index.tsx
• src/app/api/tokenCheck/route.ts
• src/shared/components/ClientInitializer.tsx
• src/shared/stores/useStore.ts

[coderabbitai]

🛠️ Refactor suggestion

역할 검증 및 오류 처리 로직 추가 필요

현재 구현에는 다음과 같은 개선이 필요합니다:

1. 유효한 역할 값 검증이 없습니다
2. 요청 오류에 대한 처리가 없습니다
3. 역할 값에 대한 타입 안전성이 보장되지 않습니다

다음과 같이 개선하는 것을 제안합니다:

+const VALID_ROLES = ['user', 'manage'] as const;
+type Role = typeof VALID_ROLES[number];
+
 export async function GET(request: NextRequest) {
-  const role = request.headers.get('role') || 'user';
+  try {
+    const roleHeader = request.headers.get('role');
+    const role = roleHeader || 'user';
+
+    if (!VALID_ROLES.includes(role as Role)) {
+      return NextResponse.json(
+        { error: '유효하지 않은 역할입니다.' },
+        { status: 400 }
+      );
+    }
 
-  return NextResponse.json({ role });
+    return NextResponse.json({ role });
+  } catch (error) {
+    return NextResponse.json(
+      { error: '서버 오류가 발생했습니다.' },
+      { status: 500 }
+    );
+  }
 }

Committable suggestion skipped: line range outside the PR's diff.

[coderabbitai]

🛠️ Refactor suggestion

에러 처리 및 상태 관리 개선 필요

현재 구현에는 다음과 같은 개선이 필요합니다:

1. 네트워크 오류 처리가 없습니다
2. 로딩 상태 관리가 없습니다
3. 에러 상태 관리가 없습니다

다음과 같이 개선하는 것을 제안합니다:

 export const useRole = () => {
   const [role, setRole] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
 
   useEffect(() => {
     const fetchRole = async () => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
         const response = await fetch('/api/role');
+        if (!response.ok) {
+          throw new Error('역할을 가져오는데 실패했습니다.');
+        }
         const data = await response.json();
         setRole(data.role);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('알 수 없는 오류가 발생했습니다.'));
+        setRole(null);
+      } finally {
+        setIsLoading(false);
+      }
     };
 
     fetchRole();
   }, []);
 
-  return role;
+  return { role, isLoading, error };
 };

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	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;
	};
	export const useRole = () => {
	const [role, setRole] = useState<string | null>(null);
	const [isLoading, setIsLoading] = useState(true);
	const [error, setError] = useState<Error | null>(null);
	useEffect(() => {
	const fetchRole = async () => {
	setIsLoading(true);
	setError(null);
	try {
	const response = await fetch('/api/role');
	if (!response.ok) {
	throw new Error('역할을 가져오는데 실패했습니다.');
	}
	const data = await response.json();
	setRole(data.role);
	} catch (err) {
	setError(err instanceof Error ? err : new Error('알 수 없는 오류가 발생했습니다.'));
	setRole(null);
	} finally {
	setIsLoading(false);
	}
	};
	fetchRole();
	}, []);
	return { role, isLoading, error };
	};

[coderabbitai]

⚠️ Potential issue

토큰 검증 및 역할 할당 로직 개선 필요

현재 구현에는 다음과 같은 보안 및 기능적 개선이 필요합니다:

1. 액세스 토큰의 유효성 검증이 없습니다
2. 역할 할당이 이진적입니다 (토큰 있음/없음)
3. 토큰 만료 확인이 없습니다

토큰 검증 및 역할 할당 로직을 더 견고하게 구현하는 것을 제안합니다:

 export function middleware(request: NextRequest) {
-  const accessToken = request.cookies.get('accessToken');
+  const accessToken = request.cookies.get('accessToken')?.value;
   const requestHeaders = new Headers(request.headers);
 
-  if (accessToken) {
-    requestHeaders.set('role', 'manage');
-  } else {
+  try {
+    if (!accessToken) {
+      requestHeaders.set('role', 'user');
+      return NextResponse.next({
+        request: { headers: requestHeaders },
+      });
+    }
+
+    // 토큰 검증 로직 추가
+    const decodedToken = verifyAccessToken(accessToken);
+    
+    if (decodedToken.role) {
+      requestHeaders.set('role', decodedToken.role);
+    } else {
+      requestHeaders.set('role', 'user');
+    }
+  } catch (error) {
     requestHeaders.set('role', 'user');
   }
 
   return NextResponse.next({
-    request: {
-      headers: requestHeaders,
-    },
+    request: { headers: requestHeaders },
   });
 }

Committable suggestion skipped: line range outside the PR's diff.