71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
|
/**
|
||
|
|
* @file features/auth/components/session-timer.tsx
|
||
|
|
* @description 헤더에 표시되는 세션 만료 카운트다운 컴포넌트
|
||
|
|
* @remarks
|
||
|
|
* - [레이어] Components/UI
|
||
|
|
* - [사용자 행동] 남은 시간 확인 -> 만료 임박 시 붉은색 경고
|
||
|
|
* - [데이터 흐름] Zustand Store -> Calculation -> UI
|
||
|
|
* - [연관 파일] stores/session-store.ts, features/layout/header.tsx
|
||
|
|
*/
|
||
|
|
|
||
|
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { useSessionStore } from "@/stores/session-store";
|
||
|
|
import { SESSION_TIMEOUT_MS } from "@/features/auth/constants";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 세션 만료 타이머 컴포넌트
|
||
|
|
* 남은 시간을 mm:ss 형태로 표시 (10분 미만 시 경고 스타일)
|
||
|
|
* @returns 시간 표시 배지 (모바일 숨김)
|
||
|
|
* @remarks 1초마다 리렌더링 발생
|
||
|
|
* @see header.tsx - 로그인 상태일 때 헤더에 표시
|
||
|
|
*/
|
||
|
|
export function SessionTimer() {
|
||
|
|
const lastActive = useSessionStore((state) => state.lastActive);
|
||
|
|
|
||
|
|
// [State] 남은 시간 (밀리초)
|
||
|
|
const [timeLeft, setTimeLeft] = useState<number>(SESSION_TIMEOUT_MS);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const calculateTimeLeft = () => {
|
||
|
|
const now = Date.now();
|
||
|
|
const passed = now - lastActive;
|
||
|
|
|
||
|
|
// [Step 1] 남은 시간 계산 (음수 방지)
|
||
|
|
const remaining = Math.max(0, SESSION_TIMEOUT_MS - passed);
|
||
|
|
setTimeLeft(remaining);
|
||
|
|
};
|
||
|
|
|
||
|
|
calculateTimeLeft(); // 초기 실행
|
||
|
|
|
||
|
|
// [Step 2] 1초마다 남은 시간 갱신
|
||
|
|
const interval = setInterval(calculateTimeLeft, 1000);
|
||
|
|
|
||
|
|
return () => clearInterval(interval);
|
||
|
|
}, [lastActive]);
|
||
|
|
|
||
|
|
// [Step 3] 시간 포맷팅 (mm:ss)
|
||
|
|
const minutes = Math.floor(timeLeft / 60000);
|
||
|
|
const seconds = Math.floor((timeLeft % 60000) / 1000);
|
||
|
|
|
||
|
|
// [Step 4] 10분 미만일 때 긴급 스타일 적용
|
||
|
|
const isUrgent = timeLeft < 10 * 60 * 1000;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`text-sm font-medium tabular-nums px-3 py-1.5 rounded-md border bg-background/50 backdrop-blur-md hidden md:block transition-colors ${
|
||
|
|
isUrgent
|
||
|
|
? "text-red-500 border-red-200 bg-red-50/50 dark:bg-red-900/20 dark:border-red-800"
|
||
|
|
: "text-muted-foreground border-border/40"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{/* ========== 라벨 ========== */}
|
||
|
|
<span className="mr-2">세션 만료</span>
|
||
|
|
{/* ========== 시간 표시 ========== */}
|
||
|
|
{minutes.toString().padStart(2, "0")}:
|
||
|
|
{seconds.toString().padStart(2, "0")}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|