fix: page 폴더 바깥에서 next/header 사용할 수 없어서 직접 token 넣어주도록 변경

#186
SW-CSS · Sep 12, 2024 · adf3dfa · adf3dfa
1 parent 59917f7
commit adf3dfa
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git a/frontend/src/app/admin/milestone/list/[slug]/page.tsx b/frontend/src/app/admin/milestone/list/[slug]/page.tsx
@@ -8,6 +8,8 @@ import { convertMilestoneHistoryStatus } from '@/lib/utils/utils';
 import FilePreview from './components/FilePreview';
 import MilestoneHistoryStatusChangeButton from './components/MilestoneHistoryStatusChangeButton';
 import { notFound } from 'next/navigation';
+import { AuthSliceState } from '@/store/auth.slice';
+import { getAuthFromCookie } from '@/lib/utils/auth';
 
 interface MilestoneHistoryDetailPageProps {
   params: {
@@ -16,9 +18,10 @@ interface MilestoneHistoryDetailPageProps {
 }
 
 const Page = async ({ params: { slug } }: MilestoneHistoryDetailPageProps) => {
+  const auth: AuthSliceState = getAuthFromCookie();
   let history;
   try {
-    history = await getMilestoneHistory(slug);
+    history = await getMilestoneHistory(slug, auth.token);
   } catch (e) {
     // TODO: server api error handling...
   }

diff --git a/frontend/src/app/admin/milestone/list/page.tsx b/frontend/src/app/admin/milestone/list/page.tsx
@@ -8,16 +8,20 @@ import { getMilestoneHistories } from '@/lib/api/server.api';
 
 import MilestoneHistoryTable from './components/MilestoneHistoryTable';
 import MilestoneHistoryExcelFileDownloadButton from './components/MilestoneHistoryTable/MilestoneHistoryExcelFileDownloadButton.tsx';
+import { AuthSliceState } from '@/store/auth.slice';
+import { getAuthFromCookie } from '@/lib/utils/auth';
 
 const Page = async ({ searchParams }: { searchParams?: { [key: string]: string | undefined } }) => {
   const headersList = headers();
   const pathname = headersList.get('x-pathname') || '';
 
+  const auth: AuthSliceState = getAuthFromCookie();
+
   const page = searchParams?.page ? parseInt(searchParams.page, 10) : 1;
   const field = searchParams?.field ? parseInt(searchParams.field, 10) : 0;
   const keyword = searchParams?.keyword ? searchParams.keyword : '';
 
-  const milestoneHistories = await getMilestoneHistories(field, keyword, page - 1);
+  const milestoneHistories = await getMilestoneHistories(auth.token, field, keyword, page - 1);
 
   return (
     <div>

diff --git a/frontend/src/lib/api/server.api.ts b/frontend/src/lib/api/server.api.ts
@@ -40,9 +40,16 @@ export async function getMilestoneHistoriesOfStudent(
     .catch((err) => Promise.reject(err));
 }
 
-export async function getMilestoneHistories(field?: number, keyword?: string, page: number = 0, size: number = 10) {
+export async function getMilestoneHistories(
+  token: string,
+  field?: number,
+  keyword?: string,
+  page: number = 0,
+  size: number = 10,
+) {
   return await server
     .get<MilestoneHistoryPageableDto>('/admin/milestones/histories', {
+      headers: { Authorization: token },
       params: removeEmptyField({
         field,
         keyword,
@@ -54,9 +61,9 @@ export async function getMilestoneHistories(field?: number, keyword?: string, pa
     .catch((err) => Promise.reject(err));
 }
 
-export async function getMilestoneHistory(historyId: number) {
+export async function getMilestoneHistory(historyId: number, token: string) {
   return await server
-    .get<MilestoneHistoryDto>(`/admin/milestones/histories/${historyId}`)
+    .get<MilestoneHistoryDto>(`/admin/milestones/histories/${historyId}`, { headers: { Authorization: token } })
     .then((res) => res.data)
     .catch((err) => Promise.reject(err));
 }

diff --git a/frontend/src/lib/api/server.axios.ts b/frontend/src/lib/api/server.axios.ts
@@ -1,19 +1,9 @@
 import axios from 'axios';
 
 import { categorizeError } from '@/types/error';
-import { AuthSliceState } from '@/store/auth.slice';
-import { getAuthFromCookie } from '../utils/auth';
 
 export const server = axios.create({ baseURL: process.env.NEXT_PUBLIC_SERVER_URL, withCredentials: true });
 
-server.interceptors.request.use((config) => {
-  const auth: AuthSliceState = getAuthFromCookie();
-  if (auth.token) {
-    config.headers.Authorization = `Bearer ${auth.token}`;
-  }
-  return config;
-});
-
 server.interceptors.response.use(
   (response) => response,
   (error) => Promise.reject(categorizeError(error)),