[common] feat: useSessionExtendConfirm 생성

packages/common/components/src/lib/index.ts

@@ -1,3 +1,4 @@
 export * from "./cookie";
 export * from "./utils";
 export * from "./use-mobile";
+export * from "./use-session-extend-confirm";

packages/common/components/src/lib/use-session-extend-confirm.ts

@@ -0,0 +1,95 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { getRemainingMs, SESSION_EXTEND_CONFIRM_BUFFER_MS } from "@common/auth";
+
+interface UseSessionExtendConfirmOptions {
+  enabled: boolean;
+  getAccessToken: () => string | undefined;
+  silentRefresh: () => Promise<void>;
+  declineSessionExtend: () => void;
+  message?: string;
+  bufferMs?: number;
+}
+
+const DEFAULT_MESSAGE = "로그인을 연장하시겠습니까?";
+
+function useSessionExtendConfirm({
+  enabled,
+  getAccessToken,
+  silentRefresh,
+  declineSessionExtend,
+  message = DEFAULT_MESSAGE,
+}: UseSessionExtendConfirmOptions) {
+  const { confirm } = useConfirm();
+  const confirmTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const dismissedTokenRef = useRef<string | null>(null);
+  const isConfirmingRef = useRef(false);
+
+  const scheduleConfirm = useCallback(() => {
+    if (confirmTimerRef.current) {
+      clearTimeout(confirmTimerRef.current);
+      confirmTimerRef.current = null;
+    }
+
+    const token = getAccessToken();
+    if (!token) return;
+
+    if (dismissedTokenRef.current === token) return;
+
+    const confirmMs = getRemainingMs(token, SESSION_EXTEND_CONFIRM_BUFFER_MS);
+    const isTokenValid = getRemainingMs(token, 0) > 0;
+
+    const showConfirm = async () => {
+      if (isConfirmingRef.current) return;
+
+      const currentToken = getAccessToken();
+      if (!currentToken || getRemainingMs(currentToken, 0) <= 0) return;
+      if (dismissedTokenRef.current === currentToken) return;
+
+      isConfirmingRef.current = true;
+      try {
+        const accepted = await confirm(message);
+        if (accepted) {
+          dismissedTokenRef.current = null;
+          await silentRefresh();
+          scheduleConfirm();
+          return;
+        }
+
+        declineSessionExtend();
+        dismissedTokenRef.current = currentToken;
+      } finally {
+        isConfirmingRef.current = false;
+      }
+    };
+
+    if (!isTokenValid) return;
+
+    if (confirmMs <= 0) {
+      void showConfirm();
+      return;
+    }
+
+    confirmTimerRef.current = setTimeout(() => {
+      void showConfirm();
+    }, confirmMs);
+  }, [message, confirm, getAccessToken, silentRefresh, declineSessionExtend]);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    scheduleConfirm();
+
+    return () => {
+      if (confirmTimerRef.current) {
+        clearTimeout(confirmTimerRef.current);
+        confirmTimerRef.current = null;
+      }
+    };
+  }, [enabled, scheduleConfirm]);
+}
+
+export { useSessionExtendConfirm };
+export type { UseSessionExtendConfirmOptions };

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

@@ -4,9 +4,12 @@ import { useEffect, useCallback, useState, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { images } from "@common/assets";
 import type { AuthService, TokenManager } from "@common/auth";
+import { getRemainingMs } from "@common/auth";
 import { getConfig } from "@common/config";
+import { getAuthLoginRedirectUrl, isAtLoginRedirectUrl } from "@common/network";
 import { ENDPOINT } from "../../config";
 import { setCookie, getCookie } from "../../lib";
+import { useSessionExtendConfirm } from "../../lib/use-session-extend-confirm";
 import {
   getPopupInfo,
   getUserPopupList,
@@ -97,6 +100,35 @@ async function legacyLogout(tokenManager?: TokenManager) {
   }
 }
 
+function formatRemainingMs(remainingMs: number): string {
+  if (remainingMs <= 0) return "만료됨";
+
+  const totalSeconds = Math.floor(remainingMs / 1000);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return `${minutes}분 ${seconds}초`;
+}
+
+function useTokenRemainingMs(enabled: boolean): number {
+  const [remainingMs, setRemainingMs] = useState(0);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const update = () => {
+      const token = getCookie(appConfig.CLAIM_NAME ?? "");
+      setRemainingMs(token ? getRemainingMs(token) : 0);
+    };
+
+    update();
+    const id = setInterval(update, 1000);
+    return () => clearInterval(id);
+  }, [enabled]);
+
+  return remainingMs;
+}
+
 export function Header({
   authService,
   tokenManager,
@@ -111,6 +143,19 @@ export function Header({
   const [logoWidth, setLogoWidth] = useState(0);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const logoRef = useRef<HTMLImageElement>(null);
+  const remainingMs = useTokenRemainingMs(mounted && isLoggedIn && !viewOnly);
+
+  useSessionExtendConfirm({
+    enabled:
+      mounted &&
+      isLoggedIn &&
+      !viewOnly &&
+      !!authService &&
+      !isAtLoginRedirectUrl(getAuthLoginRedirectUrl()),
+    getAccessToken: () => getCookie(appConfig.CLAIM_NAME ?? ""),
+    silentRefresh: authService?.silentRefresh ?? (async () => {}),
+    declineSessionExtend: authService?.declineSessionExtend ?? (() => {}),
+  });
 
   const { data: userInfo } = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.USERS],
@@ -261,18 +306,11 @@ export function Header({
                   <i className="diveicon di-chevron-down static p-0 transition-transform group-data-[state=open]:rotate-180" />
                 </Button>
               </PopoverTrigger>
-              <PopoverContent align="end" className="w-48 border-border p-1">
-                <ul>
-                  <li className="cursor-pointer rounded-sm p-3 text-xl hover:bg-accent">
-                    <NoticePopover />
-                  </li>
-                  <li
-                    onClick={handleLogout}
-                    className="cursor-pointer rounded-sm p-3 text-xl hover:bg-accent"
-                  >
-                    로그아웃
-                  </li>
-                </ul>
+              <PopoverContent align="end" className="w-48 border-border p-1.5">
+                <UserMenuContent
+                  remainingMs={remainingMs}
+                  onLogout={handleLogout}
+                />
               </PopoverContent>
             </Popover>
           )}
@@ -337,18 +375,11 @@ export function Header({
                   <i className="diveicon di-chevron-down static p-0 transition-transform group-data-[state=open]:rotate-180" />
                 </Button>
               </PopoverTrigger>
-              <PopoverContent align="end" className="w-48 border-border p-1">
-                <ul>
-                  <li className="cursor-pointer rounded-sm p-3 text-xl hover:bg-accent">
-                    <NoticePopover />
-                  </li>
-                  <li
-                    onClick={handleLogout}
-                    className="cursor-pointer rounded-sm p-3 text-xl hover:bg-accent"
-                  >
-                    로그아웃
-                  </li>
-                </ul>
+              <PopoverContent align="end" className="w-48 border-border p-1.5">
+                <UserMenuContent
+                  remainingMs={remainingMs}
+                  onLogout={handleLogout}
+                />
               </PopoverContent>
             </Popover>
           )
@@ -359,3 +390,31 @@ export function Header({
     </header>
   );
 }
+
+function UserMenuContent({
+  remainingMs,
+  onLogout,
+}: {
+  remainingMs: number;
+  onLogout: () => void;
+}) {
+  return (
+    <ul>
+      <li className="rounded-sm px-3 py-2 text-sm text-muted-foreground">
+        <span className="block text-sm">로그인 만료까지</span>
+        <span className="block text-lg font-medium text-foreground">
+          {formatRemainingMs(remainingMs)}
+        </span>
+      </li>
+      <li className="cursor-pointer rounded-sm px-3 py-2 text-xl hover:bg-accent">
+        <NoticePopover />
+      </li>
+      <li
+        onClick={onLogout}
+        className="cursor-pointer rounded-sm px-3 py-2 text-xl hover:bg-accent"
+      >
+        로그아웃
+      </li>
+    </ul>
+  );
+}