From 196d31a084c116bf2bce53eb5e86a876d54872bd Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 20 Jul 2026 18:35:14 +0900
Subject: [PATCH] =?UTF-8?q?[common/components]=20feat:=20raw=20fetch=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=EC=97=90=20=ED=86=A0=ED=81=B0=20=EC=A3=BC?=
 =?UTF-8?q?=EC=9E=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/components/src/api/banner.ts  |  6 ++---
 packages/common/components/src/api/menu.ts    | 16 ++++++--------
 packages/common/components/src/api/site.ts    | 11 +++++-----
 .../common/components/src/lib/auth-header.ts  | 22 +++++++++++++++++++
 4 files changed, 37 insertions(+), 18 deletions(-)
 create mode 100644 packages/common/components/src/lib/auth-header.ts

diff --git a/packages/common/components/src/api/banner.ts b/packages/common/components/src/api/banner.ts
index 3f72b46d5..90cc6e0f5 100644
--- a/packages/common/components/src/api/banner.ts
+++ b/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();
diff --git a/packages/common/components/src/api/menu.ts b/packages/common/components/src/api/menu.ts
index f6ace73d3..788118b98 100644
--- a/packages/common/components/src/api/menu.ts
+++ b/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();
diff --git a/packages/common/components/src/api/site.ts b/packages/common/components/src/api/site.ts
index 6d6957dbc..86038ee8a 100644
--- a/packages/common/components/src/api/site.ts
+++ b/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();
 };
diff --git a/packages/common/components/src/lib/auth-header.ts b/packages/common/components/src/lib/auth-header.ts
new file mode 100644
index 000000000..962688504
--- /dev/null
+++ b/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;
+}