From d254a47d8facc8bddb10c03b2181e7d0bf401e5e Mon Sep 17 00:00:00 2001
From: caseBread <kgu0515@gmail.com>
Date: Sat, 2 Mar 2024 23:40:32 +0900
Subject: [PATCH 1/4] =?UTF-8?q?fix(dropdown)=20:=20=EB=93=9C=EB=A1=AD?=
 =?UTF-8?q?=EB=8B=A4=EC=9A=B4=20=ED=8C=9D=EC=98=A4=EB=B2=84=20=EB=8F=99?=
 =?UTF-8?q?=EC=9E=91=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/Dropdown.tsx |  7 +++--
 frontend/src/components/common/Popover.tsx  | 32 +++++++++++++++++++++
 2 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/common/Popover.tsx

diff --git a/frontend/src/components/common/Dropdown.tsx b/frontend/src/components/common/Dropdown.tsx
index f515bcb..bc8c7fd 100644
--- a/frontend/src/components/common/Dropdown.tsx
+++ b/frontend/src/components/common/Dropdown.tsx
@@ -1,6 +1,7 @@
-import React, { useState, MouseEvent } from 'react';
+import React, { useState, MouseEvent, useRef, useEffect } 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;
diff --git a/frontend/src/components/common/Popover.tsx b/frontend/src/components/common/Popover.tsx
new file mode 100644
index 0000000..1317fef
--- /dev/null
+++ b/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;

From 17ded531eb1472d4ed89ffea58d530eb20f9e1ff Mon Sep 17 00:00:00 2001
From: caseBread <kgu0515@gmail.com>
Date: Sat, 2 Mar 2024 23:50:13 +0900
Subject: [PATCH 2/4] =?UTF-8?q?chore(dropdown)=20:=20=EB=AF=B8=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=20import=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/Dropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/common/Dropdown.tsx b/frontend/src/components/common/Dropdown.tsx
index bc8c7fd..e9921a3 100644
--- a/frontend/src/components/common/Dropdown.tsx
+++ b/frontend/src/components/common/Dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useState, MouseEvent, useRef, useEffect } from 'react';
+import { useState, MouseEvent } from 'react';
 import { IoIosArrowDown } from 'react-icons/io';
 import { BsCheck2 } from 'react-icons/bs';
 import Popover from './Popover';

From c0f76a06df1abc96b11c2c114202d45d25524da2 Mon Sep 17 00:00:00 2001
From: caseBread <kgu0515@gmail.com>
Date: Sun, 3 Mar 2024 00:02:31 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feat(dropdown)=20:=20=EC=BB=AC=EB=9F=AC?=
 =?UTF-8?q?=ED=94=BD=EC=BB=A4=EC=97=90=EB=8F=84=20=EC=99=B8=EB=B6=80?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EB=8B=AB=ED=9E=98=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ColorSingle.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ColorSingle.tsx b/frontend/src/components/ColorSingle.tsx
index d426bf3..9596c3c 100644
--- a/frontend/src/components/ColorSingle.tsx
+++ b/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

From 44edcd8fa231f13c7006c50ffd6a89df5e13d382 Mon Sep 17 00:00:00 2001
From: caseBread <kgu0515@gmail.com>
Date: Sun, 3 Mar 2024 00:09:02 +0900
Subject: [PATCH 4/4] =?UTF-8?q?chore(dropdown)=20:=20=EC=BB=A8=EB=B2=A4?=
 =?UTF-8?q?=EC=85=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/Popover.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/common/Popover.tsx b/frontend/src/components/common/Popover.tsx
index 1317fef..891ddb3 100644
--- a/frontend/src/components/common/Popover.tsx
+++ b/frontend/src/components/common/Popover.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 
-type TProps = {
+interface Props {
   className?: string;
   children: React.ReactNode;
   onClose: () => void;
-};
+}
 
-const Popover: React.FC<TProps> = ({ className, children, onClose }) => {
+const Popover = ({ className, children, onClose }: Props) => {
   const wrapperRef = React.useRef<HTMLDivElement>(null);
 
   useEffect(() => {