refactor: 복잡한 return 수정

Author: djk01281

frontend/src/components/CursorView.tsx

@@ -2,6 +2,7 @@ import { Panel } from "@xyflow/react";
 import { useReactFlow } from "@xyflow/react";
 import { type AwarenessState } from "@/hooks/useCursor";
 import Cursor from "./cursor";
+import { useMemo } from "react";
 
 interface CollaborativeCursorsProps {
   cursors: Map<number, AwarenessState>;
@@ -10,20 +11,23 @@ interface CollaborativeCursorsProps {
 export function CollaborativeCursors({ cursors }: CollaborativeCursorsProps) {
   const { flowToScreenPosition } = useReactFlow();
 
-  return (
-    <Panel position="top-left" className="pointer-events-none">
-      {Array.from(cursors.values()).map((cursor) => {
-        if (!cursor.cursor) return null;
-
-        const position = flowToScreenPosition({
-          x: cursor.cursor.x,
-          y: cursor.cursor.y,
-        });
+  const validCursors = useMemo(
+    () => Array.from(cursors.values()).filter((cursor) => cursor.cursor),
+    [cursors],
+  );
 
-        return (
-          <Cursor key={cursor.clientId} coors={position} color={cursor.color} />
-        );
-      })}
+  return (
+    <Panel>
+      {validCursors.map((cursor) => (
+        <Cursor
+          key={cursor.clientId}
+          coors={flowToScreenPosition({
+            x: cursor.cursor!.x,
+            y: cursor.cursor!.y,
+          })}
+          color={cursor.color}
+        />
+      ))}
     </Panel>
   );
 }