Merge pull request #140 from Yangjaecheon-Otter-Guardians/fix/dropdown

24-03-03 00:21 WEB 1.3 BUG FIX

frontend/src/components/ColorSingle.tsx

@@ -4,6 +4,7 @@ import { useRecoilState } from 'recoil';
 import { previewColor } from 'atom';
 import { IoMdClose } from 'react-icons/io';
 import { BsCheck } from 'react-icons/bs';
+import Popover from './common/Popover';
 
 export const singleColorArray = [
   { hex: '#ff3737', name: 'bg-backRed' },
@@ -59,9 +60,9 @@ const ColorSingle = () => {
           >
             <IoMdClose className={'tablet:text-[32px]'} style={{ color: 'black' }} />
           </button>
-          <div className="absolute z-10 right-12 ">
+          <Popover onClose={pop} className="absolute z-10 right-12 ">
             <ChromePicker color={currentColor.color} onChange={(color) => onChange(color.hex)} />
-          </div>
+          </Popover>
         </div>
       ) : (
         <button

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';
+
+interface Props {
+  className?: string;
+  children: React.ReactNode;
+  onClose: () => void;
+}
+
+const Popover = ({ className, children, onClose }: Props) => {
+  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;