[common/components] feat: raw fetch 헤더에 토큰 주입

packages/common/components/src/api/banner.ts

@@ -1,5 +1,6 @@
 import { getConfig } from "@common/config";
 import { ENDPOINT } from "../config";
+import { getAuthHeaders } from "@/lib/auth-header";
 
 export interface Banner {
   bnrSn: number;
@@ -22,9 +23,8 @@ export const getBannerList = async (siteId: string): Promise<Banner[]> => {
     `${BASE_URL}${ENDPOINT.CMS_SERVICE.BANNERS}/${siteId}`,
     {
       method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
+      headers: getAuthHeaders(),
+      credentials: "include",
     },
   );
   return response.json();

packages/common/components/src/api/menu.ts

@@ -1,3 +1,4 @@
+import { getAuthHeaders } from "@/lib/auth-header";
 import { ENDPOINT } from "../config";
 import { getConfig } from "@common/config";
 
@@ -34,9 +35,8 @@ export const getMenuList = async (siteId: string): Promise<MenuItem[]> => {
     `${BASE_URL}${ENDPOINT.CMS_SERVICE.MENU_ROLES}/${siteId}`,
     {
       method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
+      headers: getAuthHeaders(),
+      credentials: "include",
     },
   );
   return response.json();
@@ -49,9 +49,8 @@ export const getPreviewTreeMenuList = async (
     `${BASE_URL}${ENDPOINT.CMS_SERVICE.MENUS}/${siteId}/tree/preview`,
     {
       method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
+      headers: getAuthHeaders(),
+      credentials: "include",
     },
   );
   return response.json();
@@ -64,9 +63,8 @@ export const getAnonymouseMenuList = async (
     `${BASE_URL}${ENDPOINT.CMS_SERVICE.MENU_ANONYMOUS}/user/${siteId}`,
     {
       method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
+      headers: getAuthHeaders(),
+      credentials: "include",
     },
   );
   return response.json();

packages/common/components/src/api/site.ts

@@ -1,5 +1,6 @@
 import { getConfig } from "@common/config";
 import { ENDPOINT } from "../config";
+import { getAuthHeaders } from "@/lib/auth-header";
 
 export interface SiteInfo {
   siteId: string;
@@ -61,9 +62,8 @@ export const getSiteInfo = async (siteId: string) => {
     `${BASE_URL}${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`,
     {
       method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
+      headers: getAuthHeaders(),
+      credentials: "include",
     },
   );
   return response.json() as Promise<SiteInfo>;
@@ -72,9 +72,8 @@ export const getSiteInfo = async (siteId: string) => {
 export const getSiteList = async (): Promise<SiteListResponse> => {
   const response = await fetch(`${BASE_URL}${ENDPOINT.CMS_SERVICE.SITE_LIST}`, {
     method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
+    headers: getAuthHeaders(),
+    credentials: "include",
   });
   return response.json();
 };

packages/common/components/src/lib/auth-header.ts

@@ -0,0 +1,22 @@
+import Cookies from "js-cookie";
+import { getConfig } from "@common/config";
+
+export function getAuthHeaders(): HeadersInit {
+  const { CLAIM_NAME, AUTH_USER_ID } = getConfig();
+
+  if (!CLAIM_NAME || !AUTH_USER_ID) {
+    throw new Error("Required environment variables are not set");
+  }
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+
+  const token = Cookies.get(CLAIM_NAME);
+  const userId = Cookies.get(AUTH_USER_ID);
+
+  if (token) headers[CLAIM_NAME] = token;
+  if (userId) headers[AUTH_USER_ID] = userId;
+
+  return headers;
+}