feat: 소켓 연결 상태 표시

Co-authored-by: 김동준 <[email protected]>

apps/frontend/src/features/canvas/ui/Canvas/index.tsx

@@ -14,6 +14,7 @@ import { CollaborativeCursors } from "../CollaborativeCursors";
 import { useCanvas } from "../../model/useCanvas";
 import { MemoizedGroupNode, NoteNode, NoteNodeType } from "@/entities/node";
 import { cn } from "@/shared/lib";
+import { useConnectionStatus } from "@/shared/model/useConnectionStatus";
 
 interface CanvasProps {
   className?: string;
@@ -36,6 +37,7 @@ export function Canvas({ className }: CanvasProps) {
     onNodeDragStop,
     onConnect,
   } = useCanvas();
+  const status = useConnectionStatus();
 
   const proOptions = { hideAttribution: true };
 
@@ -75,8 +77,25 @@ export function Canvas({ className }: CanvasProps) {
         selectNodesOnDrag={false}
       >
         <Controls />
-        <div className="fixed bottom-5 left-16 z-30 h-4 w-4 text-neutral-50 hover:cursor-pointer">
-          {/* <button onClick={sortNodes}>Sort</button> */}
+        <div
+          className={cn(
+            status === "connected" && "text-green-500",
+            status === "connecting" && "text-amber-500",
+            status === "disconnected" && "text-red-500",
+            "fixed bottom-5 left-16 z-30 text-xs hover:cursor-pointer",
+          )}
+        >
+          <div className="flex items-center gap-1">
+            <div
+              className={cn(
+                status === "connected" && "bg-green-500",
+                status === "connecting" && "bg-amber-500",
+                status === "disconnected" && "bg-red-500",
+                "h-2 w-2 rounded-full",
+              )}
+            ></div>
+            <div>{status}</div>
+          </div>
         </div>
         <MiniMap />
         <Background variant={BackgroundVariant.Dots} gap={12} size={1} />

apps/frontend/src/shared/model/useConnectionStatus.ts

@@ -0,0 +1,31 @@
+import useConnectionStore, {
+  type ConnectionStatus,
+} from "./useConnectionStore";
+import { usePageStore } from "@/entities/page";
+
+export const useConnectionStatus = (): ConnectionStatus => {
+  const { canvas, editor, user } = useConnectionStore();
+  const { currentPage } = usePageStore();
+
+  if (
+    (currentPage &&
+      canvas.connectionStatus === "connected" &&
+      editor.connectionStatus === "connected" &&
+      user.connectionStatus === "connected") ||
+    (!currentPage &&
+      canvas.connectionStatus === "connected" &&
+      user.connectionStatus === "connected")
+  ) {
+    return "connected";
+  }
+
+  if (
+    canvas.connectionStatus === "connecting" ||
+    editor.connectionStatus === "connecting" ||
+    user.connectionStatus === "connecting"
+  ) {
+    return "connecting";
+  }
+
+  return "disconnected";
+};