feat: 선택된 스티커가 없을 때에는 context menu 활성화 되지 않도록 구현

Author: gs0428

apps/web/src/components/(with-side-bar)/topic/context-menu-provider.tsx

@@ -10,6 +10,7 @@ import {
 
 interface ContextMenuProviderProps {
   children: React.ReactNode;
+  isTriggerDisabled: boolean;
 }
 
 const isMac = typeof window !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
@@ -19,7 +20,10 @@ const onEscapeContextMenu = () => {
   document.dispatchEvent(escEvent);
 };
 
-export default function ContextMenuProvider({ children }: ContextMenuProviderProps) {
+export default function ContextMenuProvider({
+  children,
+  isTriggerDisabled,
+}: ContextMenuProviderProps) {
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
 
   const onDuplicate = () => {
@@ -101,7 +105,9 @@ export default function ContextMenuProvider({ children }: ContextMenuProviderPro
 
   return (
     <ContextMenu onOpenChange={setIsContextMenuOpen}>
-      <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+      <ContextMenuTrigger asChild disabled={isTriggerDisabled}>
+        {children}
+      </ContextMenuTrigger>
       <ContextMenuContent className="min-w-60 rounded-2xl bg-[#333] p-5 text-white">
         <ContextMenuItem
           className="flex items-center justify-between rounded-xl px-4 py-1 focus:bg-[#7E4ED7] focus:text-white"

apps/web/src/components/(with-side-bar)/topic/react-flow-canvas.tsx

@@ -71,6 +71,8 @@ function FlowCanvas({
   const { screenToFlowPosition } = useReactFlow();
   const { mutateAsync: createContent } = useCreateContent(id);
 
+  const isTriggerDisabled = selectedNodeIds.length === 0;
+
   const nodeTypes: NodeTypes = useMemo(
     () => ({
       custom: (props: NodeProps) => (
@@ -112,7 +114,7 @@ function FlowCanvas({
   };
 
   return (
-    <ContextMenuProvider>
+    <ContextMenuProvider isTriggerDisabled={isTriggerDisabled}>
       <div
         className="relative flex-1 overflow-hidden rounded-r-lg border border-l-0"
         onDragOver={onDragOver}