[URH-26] useHover 신규 (#29)

* ✨ feat: useHover 신규

* 🔨 refactor: 제너릭 타입 적용

* 🐛 fix: 조건부 렌더링 시 useHover 작동하지 않는 버그

Author: bicochan

src/hooks/useHover.test.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import useHover from './useHover';
+
+const TestComponent = () => {
+  const [hovered, ref] = useHover<HTMLDivElement>();
+
+  return (
+    <div data-testid="test-component" ref={ref}>
+      {`${hovered}`}
+    </div>
+  );
+};
+
+describe('useHover', () => {
+  let testComponent: HTMLElement;
+
+  beforeEach(() => {
+    render(<TestComponent />);
+    testComponent = screen.getByTestId('test-component');
+  });
+
+  test('hovered의 초깃값은 false이다.', () => {
+    expect(testComponent).toHaveTextContent('false');
+  });
+
+  test('ref 컴포넌트에 mouseenter 시 hovered의 값은 true이다.', () => {
+    fireEvent.mouseEnter(testComponent);
+    expect(testComponent).toHaveTextContent('true');
+  });
+
+  test('ref 컴포넌트에 mouseenter 후 mouseleave 시 hovered의 값은 false이다.', () => {
+    fireEvent.mouseEnter(testComponent);
+    expect(testComponent).toHaveTextContent('true');
+    fireEvent.mouseLeave(testComponent);
+    expect(testComponent).toHaveTextContent('false');
+  });
+});

src/hooks/useHover.ts

@@ -0,0 +1,30 @@
+import { useCallback, useRef, useState } from 'react';
+
+const useHover = <T extends HTMLElement>(): [boolean, (node: T) => void] => {
+  const ref = useRef<T | null>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+
+  const callbackRef = useCallback(
+    (node: T) => {
+      if (ref.current) {
+        ref.current.removeEventListener('mouseenter', handleMouseEnter);
+        ref.current.removeEventListener('mouseleave', handleMouseLeave);
+      }
+
+      ref.current = node;
+
+      if (ref.current) {
+        ref.current.addEventListener('mouseenter', handleMouseEnter);
+        ref.current.addEventListener('mouseleave', handleMouseLeave);
+      }
+    },
+    [handleMouseEnter, handleMouseLeave]
+  );
+
+  return [isHovered, callbackRef];
+};
+
+export default useHover;