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(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(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 (