✨ feat: useOutsideInteraction 개선

Author: Choozii

src/hooks/index.ts

@@ -16,7 +16,7 @@ export { useLocalStorage } from './useLocalStorage';
 export { useLongPress } from './useLongPress';
 export { useMousePosition } from './useMousePosition';
 export { useOnlineStatus } from './useOnlineStatus';
-export { useOutsideInteraction } from './useOutsideInteraction';
+export { useOutsideClick } from './useOutsideClick';
 export { usePrefersColorScheme } from './usePrefersColorScheme';
 export { useScrollLock } from './useScrollLock';
 export { useScrollY } from './useScrollY';
@@ -27,3 +27,4 @@ export { useTranslation } from './useTranslation';
 export { useUnmountEffect } from './useUnmountEffect';
 export { useWindowSize } from './useWindowSize';
 export { useWorker } from './useWorker';
+export { useKeyDown } from './useKeyDown';

src/hooks/useKeyDown/index.ts

@@ -0,0 +1 @@
+export { default as useKeyDown } from './useKeyDown';

src/hooks/useKeyDown/type.ts

@@ -0,0 +1,4 @@
+export interface UseKeyDownProps {
+  key: string;
+  onKeyPress: () => void;
+}

src/hooks/useKeyDown/useKeyDown.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { UseKeyDownProps } from '@/hooks/useKeyDown/type';
+
+/**
+ * 주어진 키 입력에 대한 이벤트를 처리하는 훅
+ *
+ * @param {string} key - 감지할 키 값 (예: 'Escape', 'Enter' 등)
+ * @param {() => void} onKeyPress - 지정된 키가 눌렸을 때 실행할 콜백 함수
+ *
+ * @returns {void}
+ */
+const useKeyDown = ({ key, onKeyPress }: UseKeyDownProps): void => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === key && !event.repeat) {
+        onKeyPress();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [key, onKeyPress]);
+};
+
+export default useKeyDown;

src/hooks/useOutsideClick/index.ts

@@ -0,0 +1 @@
+export { default as useOutsideClick } from './useOutsideClick';

src/hooks/useOutsideClick/type.ts

@@ -0,0 +1,6 @@
+export type EventType = 'mousedown' | 'mouseup' | 'touchstart' | 'touchend';
+
+export interface UseOutsideClickProps {
+  onClickOutside: () => void;
+  events?: EventType[];
+}

src/hooks/useOutsideClick/useOutsideClick.ts

@@ -0,0 +1,50 @@
+import { useCallback, useEffect, useRef, RefObject } from 'react';
+import { EventType, UseOutsideClickProps } from './type';
+
+const defaultEvents: EventType[] = ['mousedown', 'touchstart'];
+
+/**
+ * 지정된 element 외부의 click event를 감지하는 hook
+ * onClickOutside 함수를 통해 마우스 클릭 이벤트를 처리할 수 있습니다.
+ *
+ * @param {Object} props - hook props
+ * @param {() => void} props.onClickOutside - 외부 interaction 발생 시 실행될 콜백 함수
+ * @param {EventType[]} [props.events] - 감지할 이벤트 (default :['mousedown', 'touchstart'])
+ *
+ * @returns {React.RefObject<HTMLElement>} element에 연결할 ref 객체
+ */
+
+const useOutsideClick = ({
+  onClickOutside,
+  events = defaultEvents,
+}: UseOutsideClickProps): RefObject<HTMLElement> => {
+  const ref = useRef<HTMLElement>(null);
+
+  const handleClick = useCallback(
+    (event: Event) => {
+      const target = event.target as Node | null;
+      if (!target) return;
+
+      if (ref.current && !ref.current.contains(target)) {
+        onClickOutside();
+      }
+    },
+    [onClickOutside]
+  );
+
+  useEffect(() => {
+    if (events.length === 0) return;
+
+    events.forEach((event) => document.addEventListener(event, handleClick));
+
+    return () => {
+      events.forEach((event) =>
+        document.removeEventListener(event, handleClick)
+      );
+    };
+  }, [handleClick, events]);
+
+  return ref;
+};
+
+export default useOutsideClick;