feat: 커서에 clientId 표시

Author: yewonJin

apps/frontend/src/components/CursorView.tsx

@@ -3,6 +3,7 @@ import { useReactFlow } from "@xyflow/react";
 import { type AwarenessState } from "@/hooks/useCursor";
 import Cursor from "./cursor";
 import { useMemo } from "react";
+import useUserStore from "@/store/useUserStore";
 
 interface CollaborativeCursorsProps {
   cursors: Map<number, AwarenessState>;
@@ -11,8 +12,15 @@ interface CollaborativeCursorsProps {
 export function CollaborativeCursors({ cursors }: CollaborativeCursorsProps) {
   const { flowToScreenPosition } = useReactFlow();
 
+  const { currentUser } = useUserStore();
+
   const validCursors = useMemo(
-    () => Array.from(cursors.values()).filter((cursor) => cursor.cursor),
+    () =>
+      Array.from(cursors.values()).filter(
+        (cursor) =>
+          cursor.cursor &&
+          (cursor.clientId as unknown as string) !== currentUser.clientId,
+      ),
     [cursors],
   );
 
@@ -26,6 +34,7 @@ export function CollaborativeCursors({ cursors }: CollaborativeCursorsProps) {
             y: cursor.cursor!.y,
           })}
           color={cursor.color}
+          clientId={cursor.clientId.toString()}
         />
       ))}
     </Panel>

apps/frontend/src/components/cursor/index.tsx

@@ -7,10 +7,15 @@ export interface Coors {
 
 interface CursorProps {
   coors: Coors;
+  clientId: string;
   color?: string;
 }
 
-export default function Cursor({ coors, color = "#ffb8b9" }: CursorProps) {
+export default function Cursor({
+  coors,
+  color = "#ffb8b9",
+  clientId,
+}: CursorProps) {
   const { x, y } = coors;
 
   return (
@@ -35,6 +40,9 @@ export default function Cursor({ coors, color = "#ffb8b9" }: CursorProps) {
           strokeWidth="4"
         />
       </svg>
+      <p className="absolute px-1" style={{ backgroundColor: color }}>
+        {clientId}
+      </p>
     </motion.div>
   );
 }

apps/frontend/src/hooks/useCursor.ts

@@ -2,6 +2,7 @@ import { useReactFlow, type XYPosition } from "@xyflow/react";
 import * as Y from "yjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { SocketIOProvider } from "y-socket.io";
+import useUserStore from "@/store/useUserStore";
 
 const CURSOR_COLORS = [
   "#7d7b94",
@@ -33,10 +34,7 @@ export function useCollaborativeCursors({
   const [cursors, setCursors] = useState<Map<number, AwarenessState>>(
     new Map(),
   );
-  const clientId = useRef<number | null>(null);
-  const userColor = useRef(
-    CURSOR_COLORS[Math.floor(Math.random() * CURSOR_COLORS.length)],
-  );
+  const { currentUser } = useUserStore();
 
   useEffect(() => {
     const wsProvider = new SocketIOProvider(
@@ -55,21 +53,18 @@ export function useCollaborativeCursors({
     );
 
     provider.current = wsProvider;
-    clientId.current = wsProvider.awareness.clientID;
 
     wsProvider.awareness.setLocalState({
       cursor: null,
-      color: userColor.current,
-      clientId: wsProvider.awareness.clientID,
+      color: currentUser.color,
+      clientId: currentUser.clientId,
     });
 
     wsProvider.awareness.on("change", () => {
       const states = new Map(
         Array.from(
           wsProvider.awareness.getStates() as Map<number, AwarenessState>,
-        ).filter(
-          ([key, state]) => key !== clientId.current && state.cursor !== null,
-        ),
+        ).filter(([key, state]) => state.cursor !== null),
       );
       setCursors(states);
     });
@@ -90,8 +85,8 @@ export function useCollaborativeCursors({
 
       provider.current.awareness.setLocalState({
         cursor,
-        color: userColor.current,
-        clientId: provider.current.awareness.clientID,
+        color: currentUser.color,
+        clientId: currentUser.clientId,
       });
     },
     [flowInstance],