Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

๐Ÿ”€ ์—ญํ•  ๊ฒ€์ฆ ๋กœ์ง ๊ฐœ์„  #72

Merged
merged 2 commits into from
Jan 10, 2025
Merged

๐Ÿ”€ ์—ญํ•  ๊ฒ€์ฆ ๋กœ์ง ๊ฐœ์„  #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b1f7b0
โœจAdd: middleware role
Ethen1264 Jan 7, 2025
78c8c1e
โ™ป๏ธRefector: check role function
Ethen1264 Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/app/api/role/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 });
}
Comment on lines +3 to +7
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

๐Ÿ› ๏ธ 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.

17 changes: 0 additions & 17 deletions src/app/api/tokenCheck/route.ts
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions src/entities/layout/Header/model/useNavigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();

Expand Down
24 changes: 24 additions & 0 deletions src/middleware.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
},
});
}
Comment on lines +4 to +20
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

โš ๏ธ 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.


export const config = {
matcher: ['/api/role'],
};
34 changes: 0 additions & 34 deletions src/shared/components/ClientInitializer.tsx
View file
Open in desktop

This file was deleted.

19 changes: 19 additions & 0 deletions src/shared/model/useRole.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
};
Comment on lines +5 to +19
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

๐Ÿ› ๏ธ 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 };
};

0 src/shared/hooks/index.tsx โ†’ src/shared/stores/index.ts
View file
Open in desktop
File renamed without changes.
14 changes: 0 additions & 14 deletions src/shared/stores/useStore.ts
View file
Open in desktop

This file was deleted.

6 changes: 2 additions & 4 deletions src/widgets/expo-detail/ui/ExpoActionPanel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 0 additions & 2 deletions src/widgets/layout/ui/Header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />
Expand Down
Loading