[URH-25] useMousePosition 신규

[foresec]

👾 Pull Request

• 티켓: [react hooks] useMousePosition

• 상태: 신규

1️⃣ Spec

• 마우스의 현재 위치를 감지하여 반환하는 훅
• 컴포넌트와의 상호작용 등에 쓰일 수 있음

2️⃣ 변경 사항

• 해당 사항 없음

3️⃣ 예시 코드

1. MouseEvent 기본 속성

  const { viewX, viewY, pageX, pageY, screenX, screenY } = useMousePosition();

• viewX : 뷰포트에서의 마우스 x 좌표
• viewY : 뷰포트에서의 마우스 y 좌표
• pageX : 페이지에서의 마우스 x 좌표
• pageY : 페이지에서의 마우스 y 좌표
• screenX : 화면에서의 마우스 x 좌표
• screenY : 화면에서의 마우스 y 좌표

• 2. Element를 지정하여 상대 좌표 및 Element 크기

  const { elementX, elementY, refW, refH, targetRef } = useMousePosition();

• elementX : 지정된 Element left 기준의 마우스 x 좌표
• elementY : 지정된 Element top 기준의 마우스 y 좌표-
• refW : 지정된 Element의 너비
• refH : 지정된 Element의 높이

3. 이벤트핸들링 빈도 및 애니메이션 옵션

  const { viewX, ...} = useMousePosition({delayTime : 100});
  const { viewX, ...} = useMousePosition({animationMode: true});

• delayTime : 이벤트 핸들링을 throttling할 시간 간격 (ms 단위, default=1000/60 ms)
• animationMode : 부드러운 이동 혹은 애니메이션 효과를 위해 애니메이션 모드를 활성화할지 여부

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