From c48a46c7ab3fcd8d554abf67b62180ca7a40c070 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 21 Jul 2026 13:50:19 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=86=A0=ED=81=B0=20=EC=8B=9C=EA=B0=84?=
 =?UTF-8?q?=20=EB=A7=8C=EB=A3=8C=20=EC=8B=9C=20authService.logout=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=8B=A4=ED=96=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/lib/use-session-extend-confirm.ts     | 12 +------
 .../common/components/src/ui/header/index.tsx | 34 ++++++++++++++-----
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/packages/common/components/src/lib/use-session-extend-confirm.ts b/packages/common/components/src/lib/use-session-extend-confirm.ts
index 35e210e34..30c08584a 100644
--- a/packages/common/components/src/lib/use-session-extend-confirm.ts
+++ b/packages/common/components/src/lib/use-session-extend-confirm.ts
@@ -15,14 +15,6 @@ interface UseSessionExtendConfirmOptions {
 
 const DEFAULT_MESSAGE = "로그인을 연장하시겠습니까?";
 
-function formatRemainingMs(remainingMs: number): string {
-  const totalSeconds = Math.floor(remainingMs / 1000);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = totalSeconds % 60;
-
-  return `${minutes}분 ${seconds}초`;
-}
-
 function useSessionExtendConfirm({
   enabled,
   getAccessToken,
@@ -79,10 +71,8 @@ function useSessionExtendConfirm({
       void showConfirm();
       return;
     }
+
     confirmTimerRef.current = setTimeout(() => {
-      console.log(
-        `>>>>>>>>>>>>>>>>>>>> ${formatRemainingMs(confirmMs)} 후 로그인 연장 팝업 표시 <<<<<<<<<<<<<<<<<<<<`,
-      );
       void showConfirm();
     }, confirmMs);
   }, [message, confirm, getAccessToken, silentRefresh, declineSessionExtend]);
diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx
index 457e7d819..4c8c117bf 100644
--- a/packages/common/components/src/ui/header/index.tsx
+++ b/packages/common/components/src/ui/header/index.tsx
@@ -99,7 +99,8 @@ async function legacyLogout(tokenManager?: TokenManager) {
   }
 }
 
-function formatRemainingMs(remainingMs: number): string {
+function formatRemainingMs(remainingMs: number | null): string {
+  if (remainingMs === null) return "-";
   if (remainingMs <= 0) return "만료됨";
 
   const totalSeconds = Math.floor(remainingMs / 1000);
@@ -109,11 +110,14 @@ function formatRemainingMs(remainingMs: number): string {
   return `${minutes}분 ${seconds}초`;
 }
 
-function useTokenRemainingMs(enabled: boolean): number {
-  const [remainingMs, setRemainingMs] = useState(0);
+function useTokenRemainingMs(enabled: boolean): number | null {
+  const [remainingMs, setRemainingMs] = useState<number | null>(null);
 
   useEffect(() => {
-    if (!enabled) return;
+    if (!enabled) {
+      setRemainingMs(null);
+      return;
+    }
 
     const update = () => {
       const token = getCookie(appConfig.CLAIM_NAME ?? "");
@@ -142,12 +146,24 @@ export function Header({
   const [logoWidth, setLogoWidth] = useState(0);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const logoRef = useRef<HTMLImageElement>(null);
-  const remainingMs = useTokenRemainingMs(mounted && isLoggedIn && !viewOnly);
   const siteId = getCookie("site-id-key") ?? "";
 
-  console.log(
-    `/********************* 로그인 만료까지: ${formatRemainingMs(remainingMs)} *********************/`,
-  );
+  const remainingMs = useTokenRemainingMs(mounted && isLoggedIn && !viewOnly);
+
+  useEffect(() => {
+    if (
+      !mounted ||
+      !isLoggedIn ||
+      viewOnly ||
+      !authService ||
+      remainingMs === null ||
+      remainingMs > 0
+    ) {
+      return;
+    }
+
+    void authService.logout();
+  }, [mounted, viewOnly, authService, remainingMs]);
 
   useSessionExtendConfirm({
     enabled:
@@ -399,7 +415,7 @@ function UserMenuContent({
   remainingMs,
   onLogout,
 }: {
-  remainingMs: number;
+  remainingMs: number | null;
   onLogout: () => void;
 }) {
   return (