feat: 토큰 시간 만료 시 authService.logout 함수 실행

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]);

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 (