From 495a535d17c5506aa573d0fa4b3e4c642980c65d Mon Sep 17 00:00:00 2001
From: EENE Dashboard <eene@dashboard.com>
Date: Mon, 1 Jun 2026 12:00:29 +0900
Subject: [PATCH] fix: context menu backdrop blocks card onClick on close

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/common/ContextMenu.tsx     | 65 ++++++++++---------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/common/ContextMenu.tsx b/frontend/src/components/common/ContextMenu.tsx
index dcaf421..baf049d 100644
--- a/frontend/src/components/common/ContextMenu.tsx
+++ b/frontend/src/components/common/ContextMenu.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useRef } from 'react';
 
 interface MenuItem {
   label: string;
@@ -15,40 +14,42 @@ interface ContextMenuProps {
 }
 
 export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const close = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
-    };
-    document.addEventListener('mousedown', close);
-    return () => document.removeEventListener('mousedown', close);
-  }, [onClose]);
-
   const adjustedY = Math.min(y, window.innerHeight - items.length * 46 - 20);
   const adjustedX = Math.min(x, window.innerWidth - 170);
 
   return (
-    <div
-      ref={ref}
-      style={{ position: 'fixed', top: adjustedY, left: adjustedX, zIndex: 9999 }}
-      className="bg-white rounded-xl shadow-2xl border border-gray-100 py-1.5 min-w-[155px]"
-      onContextMenu={(e) => e.preventDefault()}
-    >
-      {items.map((item, i) => (
-        <button
-          key={i}
-          onClick={() => { item.onClick(); onClose(); }}
-          className={`w-full text-left px-4 py-2.5 text-base font-semibold flex items-center gap-2.5 transition-colors ${
-            item.danger
-              ? 'text-red-600 hover:bg-red-50'
-              : 'text-gray-700 hover:bg-gray-50'
-          }`}
-        >
-          <span className="text-lg leading-none">{item.icon}</span>
-          {item.label}
-        </button>
-      ))}
-    </div>
+    <>
+      {/* 전체 화면 backdrop: mousedown을 잡아 카드 onClick이 발화하지 않도록 막음 */}
+      <div
+        className="fixed inset-0"
+        style={{ zIndex: 9998 }}
+        onMouseDown={(e) => {
+          e.stopPropagation();
+          onClose();
+        }}
+        onClick={(e) => e.stopPropagation()}
+      />
+      <div
+        style={{ position: 'fixed', top: adjustedY, left: adjustedX, zIndex: 9999 }}
+        className="bg-white rounded-xl shadow-2xl border border-gray-100 py-1.5 min-w-[155px]"
+        onMouseDown={(e) => e.stopPropagation()}
+        onContextMenu={(e) => e.preventDefault()}
+      >
+        {items.map((item, i) => (
+          <button
+            key={i}
+            onClick={() => { item.onClick(); onClose(); }}
+            className={`w-full text-left px-4 py-2.5 text-base font-semibold flex items-center gap-2.5 transition-colors ${
+              item.danger
+                ? 'text-red-600 hover:bg-red-50'
+                : 'text-gray-700 hover:bg-gray-50'
+            }`}
+          >
+            <span className="text-lg leading-none">{item.icon}</span>
+            {item.label}
+          </button>
+        ))}
+      </div>
+    </>
   );
 }