fix(dropdown) : 드롭다운 외부클릭 시 닫기 기능을 추가합니다.

frontend/src/components/common/Dropdown.tsx

@@ -1,6 +1,7 @@
-import React, { useState, MouseEvent } from 'react';
+import { useState, MouseEvent } from 'react';
 import { IoIosArrowDown } from 'react-icons/io';
 import { BsCheck2 } from 'react-icons/bs';
+import Popover from './Popover';
 
 interface Props<T> {
   defaultValue?: number;
@@ -34,7 +35,7 @@ function Dropdown<T extends string>({ defaultValue: value, list, handleChange, s
   };
 
   return (
-    <div className="relative">
+    <Popover onClose={() => setIsOpen(false)} className="relative">
       <div
         className="flex justify-between items-center px-4 border-1 border-black rounded-md h-11 text-sm"
         onClick={() => setIsOpen((prev) => !prev)}
@@ -60,7 +61,7 @@ function Dropdown<T extends string>({ defaultValue: value, list, handleChange, s
           </ul>
         </div>
       )}
-    </div>
+    </Popover>
   );
 }
 export default Dropdown;

frontend/src/components/common/Popover.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+
+type TProps = {
+  className?: string;
+  children: React.ReactNode;
+  onClose: () => void;
+};
+
+const Popover: React.FC<TProps> = ({ className, children, onClose }) => {
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [wrapperRef]);
+
+  return (
+    <div ref={wrapperRef} className={className}>
+      {children}
+    </div>
+  );
+};
+
+export default Popover;