FEAT: ✨ esc key 눌리면 닫히도록 구현

src/components/TabList/index.tsx

@@ -4,6 +4,7 @@ import { useGesture } from '@use-gesture/react';
 import { useRef, useState } from 'react';
 
 import { ICategoryResponseDataType, useDeleteCategory } from '@/apis/category';
+import useKeyEvent from '@/hooks/useKeyEvent';
 import useOnClickOutside from '@/hooks/useOnClickOutside';
 import useQueryString from '@/hooks/useQueyString';
 import { cn } from '@/lib/utils';
@@ -102,8 +103,8 @@ const TabList = ({ tabs = [] }: ITabList) => {
     },
   );
 
-  useOnClickOutside([modalRef, selectRef, categoryEditRef], () => setIsControlModalOpen(false));
-
+  useOnClickOutside([modalRef, selectRef, categoryEditRef], () => handleCloseModal());
+  useKeyEvent({ targetKey: ['Escape'], callback: handleCloseModal });
   return (
     <div className='h-40 relative w-[calc(100%-100px)]'>
       <ul

src/hooks/useKeyEvent.ts

@@ -0,0 +1,16 @@
+import useEventListener from './useEventListener';
+
+interface useKeyEventType {
+  targetKey: string[];
+  callback: () => void;
+}
+
+export default function useKeyEvent({ targetKey, callback }: useKeyEventType) {
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (targetKey.includes(e.key)) {
+      callback();
+    }
+  };
+
+  useEventListener('keydown', handleKeyDown);
+}