[Fix] fetcher 클래스에서 클라이언트, 서버 로직 둘 다 수용할 수 있도록 수정

.github/workflows/build.yml

@@ -34,7 +34,7 @@ jobs:
           run_install: false
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --no-frozen-lockfile
 
       - name: Run build
         run: pnpm run build

apps/admin/apis/auth/dashboardApi.ts

@@ -1,21 +1,14 @@
 import { fetcher } from "@wow-class/utils";
 import { apiPath } from "constants/apiPath";
 import { tags } from "constants/tags";
-import { cookies } from "next/headers";
-import type { DashboardApiResponseDto } from "types/dto/auth";
+import type { DashboardApiResponseDto } from "types/dtos/auth";
 
 export const dashboardApi = {
   getDashboardInfo: async () => {
-    const cookieStore = cookies();
-    const accessToken = cookieStore.get("accessToken")?.value;
-
     const response = await fetcher.get<DashboardApiResponseDto>(
       apiPath.dashboard,
       {
         next: { tags: [tags.dashboard] },
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-        },
       }
     );
 

apps/admin/middleware.ts

@@ -25,11 +25,8 @@ const middleware = async (req: NextRequest) => {
 
     return NextResponse.redirect(new URL("/auth", url));
   }
-  const response = NextResponse.next();
 
-  response.headers.set("Authorization", `Bearer ${accessToken}`);
-
-  return response;
+  return NextResponse.next();
 };
 
 export default middleware;

apps/client/apis/dashboardApi.ts

@@ -1,22 +1,14 @@
 import { fetcher } from "@wow-class/utils";
 import { apiPath } from "constants/apiPath";
 import { tags } from "constants/tags";
-import { cookies } from "next/headers";
 import type { DashboardApiResponseDto } from "types/dtos/auth";
 
 export const dashboardApi = {
   getDashboardInfo: async () => {
-    const cookieStore = cookies();
-    const accessToken = cookieStore.get("accessToken")?.value;
-
-    // NOTE: middleware에서 호출하기 위해서 별도로 헤더 주입
     const response = await fetcher.get<DashboardApiResponseDto>(
       apiPath.dashboard,
       {
         next: { tags: [tags.dashboard] },
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-        },
       }
     );
 

package.json

@@ -46,7 +46,6 @@
     "clsx": "^2.1.1",
     "wowds-icons": "^0.1.3",
     "wowds-tokens": "^0.1.1",
-    "wowds-ui": "^0.1.8",
-    "wowds-icons": "^0.1.2"
+    "wowds-ui": "^0.1.8"
   }
 }

packages/utils/package.json

@@ -10,11 +10,14 @@
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
+    "@wow-class/eslint-config": "workspace:*",
     "@wow-class/typescript-config": "workspace:*",
     "jest": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
-    "ts-jest": "^29.2.4",
-    "@wow-class/eslint-config": "workspace:*",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "ts-jest": "^29.2.4"
+  },
+  "dependencies": {
+    "next": "^14.2.5"
   }
 }

packages/utils/src/fetcher/index.ts

@@ -87,9 +87,14 @@ class Fetcher {
   ): Promise<ApiResponse<T>> {
     options = await this.interceptRequest(options);
 
+    const fetchOptions: RequestInit = {
+      ...options,
+      credentials: "include",
+    };
+
     const fullUrl = this.baseUrl + url;
 
-    let response: ApiResponse = await fetch(fullUrl, options);
+    let response: ApiResponse = await fetch(fullUrl, fetchOptions);
 
     await this.handleError(response);
 
@@ -157,6 +162,8 @@ class Fetcher {
   }
 }
 
+const isClient = typeof window !== "undefined";
+
 const fetcher = new Fetcher({
   baseUrl:
     process.env.NODE_ENV === "production"
@@ -165,4 +172,22 @@ const fetcher = new Fetcher({
   defaultHeaders: { "Content-Type": "application/json" },
 });
 
+if (!isClient) {
+  fetcher.addRequestInterceptor(async (options) => {
+    const { cookies } = await import("next/headers");
+
+    const cookieStore = cookies();
+    const accessToken = cookieStore.get("accessToken")?.value;
+
+    if (accessToken) {
+      options.headers = {
+        ...options.headers,
+        Authorization: `Bearer ${accessToken}`,
+      };
+    }
+
+    return options;
+  });
+}
+
 export default fetcher;