From 15a993e9cb2bcc78637752d9cbc000f52ccda26c Mon Sep 17 00:00:00 2001
From: kyuran kim <57716832+gxxrxn@users.noreply.github.com>
Date: Tue, 6 Aug 2024 15:34:07 +0900
Subject: [PATCH] =?UTF-8?q?[#672]=20Menu=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EC=97=90=20dimmed=20=EC=98=81=EC=97=AD=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20(#680)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Menu.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/common/Menu.tsx b/src/components/common/Menu.tsx
index 92c029d6..ea23217d 100644
--- a/src/components/common/Menu.tsx
+++ b/src/components/common/Menu.tsx
@@ -23,10 +23,11 @@ const MenuContext = createContext({} as MenuContextValue);
 
 const Menu = ({ children }: { children?: React.ReactNode }) => {
   const [isOpen, setOpen] = useState(false);
+
   const toggle = useCallback(() => setOpen(prev => !prev), []);
-  const value = useMemo(() => ({ isOpen, toggle }), [isOpen, toggle]);
 
   const ref = useOutsideClickRef<HTMLDivElement>(() => setOpen(false));
+  const value = useMemo(() => ({ isOpen, toggle }), [isOpen, toggle]);
 
   return (
     <div className="relative" ref={ref}>
@@ -50,6 +51,7 @@ const Toggle = () => {
 
 const BottomSheetList = ({ children }: { children?: React.ReactNode }) => {
   const { isOpen, toggle } = useContext(MenuContext);
+
   return (
     <BottomSheet isShow={isOpen} onClose={toggle}>
       {children}
@@ -58,13 +60,18 @@ const BottomSheetList = ({ children }: { children?: React.ReactNode }) => {
 };
 
 const DropdownList = ({ children }: { children?: React.ReactNode }) => {
-  const { isOpen } = useContext(MenuContext);
+  const { isOpen, toggle } = useContext(MenuContext);
+
   return (
     <>
       {isOpen && (
-        <ul className="absolute right-0 top-[3rem] z-50 min-w-[10rem] rounded-[0.5rem] bg-white py-[0.5rem] shadow-[0_0_15px_rgba(0,0,0,0.05),0_1px_2px_rgba(0,0,0,0.1)]">
-          {children}
-        </ul>
+        <>
+          {/** overlay */}
+          <div className="fixed inset-0 z-50 bg-overlay/60" onClick={toggle} />
+          <ul className="absolute right-0 top-[3rem] z-50 min-w-[10rem] rounded-[0.5rem] bg-white py-[0.5rem] shadow-[0_0_15px_rgba(0,0,0,0.05),0_1px_2px_rgba(0,0,0,0.1)]">
+            {children}
+          </ul>
+        </>
       )}
     </>
   );