[URH-42] useDetectInactivity 신규

[foresec]

👾 Pull Request

• 티켓: useDetectInactivity 신규

• 상태: 신규

1️⃣ Spec

• 지정한 시간(ms) 동안 활동이 없을 때 전달한 콜백 함수를 실행하는 훅
• 설정할 수 있는 시간은 최소 5000ms 이상(EventListener 감지 주기= 5000ms)
• 사용자의 디바이스가 터치 기능을 지원하는지를 판단(isTouchDevice)하여 이벤트 리스너를 설정
• (선택) 반환값으로 비활성상태를 나타내는 boolean값을 받을 수 있음

2️⃣ 변경 사항

• useMousePosition에서 사용된 throttle을 utils로 분리 및 index.ts에 추가

3️⃣ 예시 코드

1. 반환값이 없는 경우

• 임의의 설정시간 5분

function Component() {
  function noActivity() {
    alert('지정된 시간 동안 사용자의 움직임이 감지되지 않았습니다 ');
  }
  useDetectInactivity(300000, noActivity);
}
export default Component;

2. 반환값이 있는 경우

• 임의의 설정시간 5분

function Component() {
  function noActivity() {
    alert('지정된 시간 동안 사용자의 움직임이 감지되지 않았습니다 ');
  }

  const isInactivity = useDetectInactivity(300000, noActivity);

  return <div>{isInactivity ? <h1>비활성상태입니다</h1> : <h1>일반</h1>}</div>;
}

export default Component;

4️⃣ 관련 문서 (선택 사항)

• 없음

---

+) isTouchDevice 라는 함수를 작성해서 현재 상태가 터치기능을 지원하는지 판단하여 상태에따라 등록되는 이벤트를 분리할 수 있도록 했는데, 이 함수가 다른 훅에서도 쓰일 가능성이 있다면 util안으로 분리하고 싶습니다.

[jeongbaebang]

멋진 훅입니다👍 고생하셨습니다.

[bicochan]

고생하셨어요 소현 님!👍🏻✨

[bicochan]

[P4] isClient 유틸 함수를 만들어도 좋겠네요! 저도 사용하고 있고, 추후에 자주 사용될 것 같아서요

[foresec]

@bicochan isClient와 isTouchDevice 둘다 유틸로 분리하는 방향이 좋을까요?

[jeongbaebang]

isClient같은 부분은 저도 많이 사용하는 함수여서 먼저 제 작업 브랜치에서 utils로 분리했어요! 다음 PR에 반영하겠습니다

[foresec]

@jeongbaebang 앗 반영하고 돌아오니 답변이 달렸었네요..아무튼 isTouchDevice도 일단은 활용성이 있어보여서 분리하고 나중에 더 쓰일일이 없다면 합치는걸로 하겠습니다