💤 Idle Detection API 완벽 가이드: 키보드·마우스 미입력과 화면 잠금을 감지하는 브라우저 네이티브 유휴 제어

// ❌ 기존 방식: 마우스 movement나 키보드 입력을 매번 캡처하여 타이머 리셋
let idleTimer;

function resetIdleTimer() {
  clearTimeout(idleTimer);
  idleTimer = setTimeout(() => {
    console.log("사용자가 5분간 미입력 상태입니다.");
    setUserStatus("away");
  }, 5 * 60 * 1000);
}

window.addEventListener("mousemove", resetIdleTimer);
window.addEventListener("keydown", resetIdleTimer);
window.addEventListener("scroll", resetIdleTimer);

async function requestIdlePermission() {
  try {
    // 1. Permissions API로 현재 권한 상태 확인
    const state = await navigator.permissions.query({ name: 'idle-detection' });
    
    if (state.state === 'denied') {
      console.warn('사용자가 Idle Detection 권한을 거부했습니다.');
      return false;
    }

    // 2. IdleDetector 권한 요청 (사용자 제스처 내에서 호출 필요)
    const permission = await IdleDetector.requestPermission();
    return permission === 'granted';
  } catch (error) {
    console.error('Idle Detection 권한 확인 중 오류:', error);
    return false;
  }
}

async function startIdleMonitoring() {
  // 1. 브라우저 지원 여부 검사
  if (!('IdleDetector' in window)) {
    console.log('이 브라우저는 Idle Detection API를 지원하지 않습니다.');
    return;
  }

  // 2. 권한 획득
  const isGranted = await requestIdlePermission();
  if (!isGranted) return;

  // 3. AbortController 생성 (감지 중단용)
  const controller = new AbortController();
  const { signal } = controller;

  // 4. IdleDetector 인스턴스 생성
  const idleDetector = new IdleDetector();

  // 5. 상태 변경 이벤트 핸들러 등록
  idleDetector.addEventListener('change', () => {
    const { userState, screenState } = idleDetector;
    console.log(`[상태 변경] User: ${userState}, Screen: ${screenState}`);

    if (userState === 'idle') {
      console.log('사용자가 자리를 비웠습니다.');
    } else if (userState === 'active') {
      console.log('사용자가 돌아와 활동을 시작했습니다.');
    }

    if (screenState === 'locked') {
      console.log('OS 화면이 잠겼거나 스크린세이버가 작동 중입니다.');
    }
  });

  try {
    // 6. 감지 시작 (최소 임계값: 60,000ms = 1분)
    await idleDetector.start({
      threshold: 60000,
      signal
    });
    console.log('Idle Detection 감지가 시작되었습니다.');
  } catch (err) {
    console.error('Idle Detection 감지 시작 실패:', err);
  }

  return controller; // 감지를 중단할 수 있는 컨트롤러 반환
}

idleDetector.addEventListener('change', () => {
  const { userState, screenState } = idleDetector;

  if (screenState === 'locked') {
    // 화면이 잠겼다면 즉시 기밀 데이터 화면 모자이크 처리 및 자동 로그아웃 준비
    maskSensitiveContent();
  } else if (userState === 'idle') {
    // 화면은 켜져 있으나 자리를 비운 경우 '부재중' 태그 표시
    setPresenceStatus('away');
  } else {
    // 정상 활동
    unmaskContent();
    setPresenceStatus('online');
  }
});

import { useEffect, useState } from 'react';

export function useIdleDetection(threshold = 60000) {
  const [idleState, setIdleState] = useState({ userState: 'active', screenState: 'unlocked' });

  useEffect(() => {
    if (!('IdleDetector' in window)) return;

    const controller = new AbortController();
    const idleDetector = new IdleDetector();

    const handleStateChange = () => {
      setIdleState({
        userState: idleDetector.userState,
        screenState: idleDetector.screenState,
      });
    };

    idleDetector.addEventListener('change', handleStateChange);

    async function init() {
      const permission = await IdleDetector.requestPermission();
      if (permission === 'granted') {
        try {
          await idleDetector.start({ threshold, signal: controller.signal });
        } catch (e) {
          if (e.name !== 'AbortError') console.error(e);
        }
      }
    }

    init();

    // Cleanup: 컴포넌트 언마운트 시 AbortSignal을 통한 감지 즉시 중단
    return () => {
      controller.abort();
      idleDetector.removeEventListener('change', handleStateChange);
    };
  }, [threshold]);

  return idleState;
}

idleDetector.addEventListener('change', () => {
  if (idleDetector.userState === 'idle') {
    // 유휴 상태 시 WebSocket 핑 주기를 1초에서 30초로 변경
    webSocketManager.setHeartbeatInterval(30000);
    webSocketManager.sendPresence('away');
  } else {
    // 복귀 시 원래 복구
    webSocketManager.setHeartbeatInterval(1000);
    webSocketManager.sendPresence('active');
  }
});

let logoutTimer = null;

idleDetector.addEventListener('change', () => {
  if (idleDetector.screenState === 'locked') {
    // OS 화면이 잠기면 대기시간 없이 30초 후 즉시 강제 로그아웃
    logoutTimer = setTimeout(forceLogout, 30000);
    showLockScreenModal();
  } else if (idleDetector.userState === 'active') {
    if (logoutTimer) clearTimeout(logoutTimer);
    hideLockScreenModal();
  }
});

// ❌ InvalidTypeError 발생!
await idleDetector.start({ threshold: 10000, signal });

// ✅ 최소 60,000ms 이상 작성
await idleDetector.start({ threshold: 60000, signal });

if ('IdleDetector' in window) { // Modern API 사용
  useNativeIdleDetector();
} else { // Fallback: 기존 이벤트 타이머 사용
  useLegacyTimerFallback();
}