From 65e334e52bbe98bccae04cdbdc9881e34db2d5b0 Mon Sep 17 00:00:00 2001
From: yewonJin <jyw966@naver.com>
Date: Sat, 21 Dec 2024 15:56:10 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=86=8C=EC=BC=93=20=EC=97=B0=EA=B2=B0?=
 =?UTF-8?q?=20=EC=83=81=ED=83=9C=20=ED=91=9C=EC=8B=9C=20Co-authored-by:=20?=
 =?UTF-8?q?=EA=B9=80=EB=8F=99=EC=A4=80=20<djk01281@gmail.com>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/canvas/ui/Canvas/index.tsx   | 23 ++++++++++++--
 .../src/shared/model/useConnectionStatus.ts   | 31 +++++++++++++++++++
 2 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 apps/frontend/src/shared/model/useConnectionStatus.ts

diff --git a/apps/frontend/src/features/canvas/ui/Canvas/index.tsx b/apps/frontend/src/features/canvas/ui/Canvas/index.tsx
index 3906348a..ac9b1269 100644
--- a/apps/frontend/src/features/canvas/ui/Canvas/index.tsx
+++ b/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} />
diff --git a/apps/frontend/src/shared/model/useConnectionStatus.ts b/apps/frontend/src/shared/model/useConnectionStatus.ts
new file mode 100644
index 00000000..879b2733
--- /dev/null
+++ b/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";
+};