[cs, common/components] feat: 공통 헤더에서 로그아웃 시 tokenManager로 쿠키 제거하도록 변경

apps/cs/app/(with-base-layout)/layout.tsx

@@ -6,6 +6,7 @@ import { BaseLayout } from "@common/components";
 import type { MenuItem } from "@/entities/menu";
 import { useMenuStore } from "@/shared/lib";
 import { PageLayout } from "@/shared/ui/page-layout";
+import { tokenManager } from "@/entities/auth";
 
 export default function WithBaseLayout({
   children,
@@ -26,6 +27,7 @@ export default function WithBaseLayout({
   return (
     <BaseLayout
       queryClient={queryClient}
+      tokenManager={tokenManager}
       currentPath={pathname ?? ""}
       handleMenuClick={handleMenuClick}
     >

apps/cs/middleware.ts

@@ -37,7 +37,7 @@ export function middleware(req: NextRequest) {
 
     logMessages.push(`  Rewritten URL: ${newUrl}`);
     logMessages.push("\n--------------------------------\n");
-    console.log(logMessages.join("\n"));
+    // console.log(logMessages.join("\n"));
 
     const response = NextResponse.rewrite(new URL(newUrl));
     return addSecurityHeaders(response);
@@ -54,7 +54,7 @@ export function middleware(req: NextRequest) {
 
     logMessages.push(`  Rewritten URL: ${newUrl}`);
     logMessages.push("\n--------------------------------\n");
-    console.log(logMessages.join("\n"));
+    // console.log(logMessages.join("\n"));
 
     const response = NextResponse.rewrite(new URL(newUrl), {
       headers: requestHeaders,
@@ -79,7 +79,7 @@ export function middleware(req: NextRequest) {
 
     logMessages.push(`  Link API Rewritten URL: ${newUrl}`);
     logMessages.push("\n--------------------------------\n");
-    console.log(logMessages.join("\n"));
+    // console.log(logMessages.join("\n"));
 
     const response = NextResponse.rewrite(new URL(newUrl), {
       headers: requestHeaders,
@@ -93,7 +93,7 @@ export function middleware(req: NextRequest) {
   }
 
   logMessages.push("\n--------------------------------\n");
-  console.log(logMessages.join("\n"));
+  // console.log(logMessages.join("\n"));
   
   const response = NextResponse.next();
   return addSecurityHeaders(response);

apps/cs/src/entities/auth/index.ts

@@ -1,2 +1,3 @@
 export { login, silentRefresh, logout } from "./api/auth-service";
 export { AuthWrapper } from "./lib/auth-wrapper";
+export { tokenManager } from "./lib/token-manager";

packages/common/auth/token-manager.ts

@@ -1,5 +1,5 @@
+import { getCookie, removeCookie, setCookie } from "./cookie";
 import type { AuthConfig } from "./types";
-import { getCookie, setCookie, removeCookie } from "./cookie";
 
 export function createTokenManager(config: AuthConfig) {
   let refreshTimer: ReturnType<typeof setTimeout> | null = null;
@@ -9,10 +9,7 @@ export function createTokenManager(config: AuthConfig) {
 
     if (config.cookieDomain) return config.cookieDomain;
 
-    const { hostname } = window.location;
-    if (hostname === "localhost" || hostname === "127.0.0.1") return undefined;
-
-    return hostname;
+    return undefined;
   };
 
   return {
@@ -65,7 +62,9 @@ export function createTokenManager(config: AuthConfig) {
     },
 
     getRefreshToken(): string | undefined {
-      return config.refreshToken ? this.getToken(config.refreshToken) : undefined;
+      return config.refreshToken
+        ? this.getToken(config.refreshToken)
+        : undefined;
     },
 
     getUserId(): string | undefined {

packages/common/components/package.json

@@ -27,7 +27,9 @@
   },
   "dependencies": {
     "@common/assets": "workspace:*",
+    "@common/auth": "workspace:*",
     "@common/config": "workspace:*",
+    "@common/network": "workspace:*",
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@minoru/react-dnd-treeview": "^3.5.0",
     "@radix-ui/react-accordion": "^1.2.3",

packages/common/components/src/ui/header/index.tsx

@@ -3,9 +3,10 @@ import "./header.css";
 import { useEffect, useCallback, useState, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { images } from "@common/assets";
+import type { TokenManager } from "@common/auth";
 import { getConfig } from "@common/config";
 import { ENDPOINT } from "../../config";
-import { setCookie, getCookie, removeCookie } from "../../lib";
+import { setCookie, getCookie } from "../../lib";
 import {
   getPopupInfo,
   getUserPopupList,
@@ -28,7 +29,7 @@ const userId = getCookie(appConfig.AUTH_USER_ID ?? "");
 const siteId = getCookie("site-id-key") ?? "";
 const isLoggedIn = !!userId;
 
-export function Header({ viewOnly }: { viewOnly?: boolean }) {
+export function Header({ tokenManager, viewOnly }: { tokenManager?: TokenManager; viewOnly?: boolean }) {
   const [mounted, setMounted] = useState(false);
   const [logoWidth, setLogoWidth] = useState(0);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -85,10 +86,10 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
       clearClientCookies();
 
       // 3. 로컬/세션 스토리지 정리
-      if (typeof window !== "undefined") {
-        localStorage.clear();
-        sessionStorage.clear();
-      }
+      // if (typeof window !== "undefined") {
+      //   localStorage.clear();
+      //   sessionStorage.clear();
+      // }
 
       // 4. 로그인 페이지로 리다이렉트
       window.location.href = "/auth/login";
@@ -133,12 +134,8 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
     cookiesToDelete.forEach((cookieName) => {
       if (!cookieName) return;
 
-      // 방법 1: removeCookie 함수 사용
-      if (domain === "localhost") {
-        removeCookie(cookieName, {});
-      } else {
-        removeCookie(cookieName, { domain });
-      }
+      // 방법 1: removeToken 함수 사용
+      tokenManager?.removeToken(cookieName);
 
       // 방법 2: 직접 document.cookie 설정 (도메인 포함)
       if (domain !== "localhost") {

packages/common/components/src/ui/layout/base.tsx

@@ -1,3 +1,4 @@
+import type { TokenManager } from "@common/auth";
 import type { QueryClient } from "@tanstack/react-query";
 import { QueryProvider } from "../../provider/query-provider";
 import { PopupProvider } from "../../provider/popup-provider";
@@ -13,11 +14,13 @@ import "./common.css";
 export function BaseLayout({
   children,
   queryClient,
+  tokenManager,
   currentPath,
   handleMenuClick,
 }: {
   children: React.ReactNode;
   queryClient?: QueryClient;
+  tokenManager?: TokenManager;
   currentPath?: string;
   handleMenuClick?: (item: MenuItem) => void;
 }) {
@@ -28,7 +31,7 @@ export function BaseLayout({
           <HelpDialogProvider>
             <SidebarProvider>
             <div className="flex-1">
-              <Header />
+              <Header tokenManager={tokenManager} />
               <div className="flex">
                 <LNB
                   currentPath={currentPath}

packages/common/components/tsconfig.json

@@ -14,9 +14,7 @@
     "strict": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"],
-      "@common/config": ["../config/dist/"],
-      "@common/network": ["../network/"]
+      "@/*": ["src/*"]
     }
   },
   "exclude": ["**/node_modules", "**/.*/*", "dist"],