refactor: 공용 접속 인원 컴포넌트

Author: yewonJin

apps/frontend/src/components/EditorView.tsx

@@ -5,18 +5,22 @@ import * as Y from "yjs";
 import { SocketIOProvider } from "y-socket.io";
 
 import Editor from "./editor";
-import usePageStore from "@/store/usePageStore";
-import { usePage, useUpdatePage } from "@/hooks/usePages";
 import EditorLayout from "./layout/EditorLayout";
 import EditorTitle from "./editor/EditorTitle";
 import SaveStatus from "./editor/ui/SaveStatus";
+import ActiveUser from "./commons/activeUser";
+
+import usePageStore from "@/store/usePageStore";
+import useUserStore from "@/store/useUserStore";
+import { usePage, useUpdatePage } from "@/hooks/usePages";
 
 export default function EditorView() {
   const { currentPage } = usePageStore();
   const { page, isLoading } = usePage(currentPage);
   const [saveStatus, setSaveStatus] = useState<"saved" | "unsaved">("saved");
   const [ydoc, setYDoc] = useState<Y.Doc | null>(null);
   const [provider, setProvider] = useState<SocketIOProvider | null>(null);
+  const { users } = useUserStore();
 
   useEffect(() => {
     if (!currentPage) return;
@@ -88,6 +92,12 @@ export default function EditorView() {
         currentPage={currentPage}
         pageContent={pageContent}
       />
+      <ActiveUser
+        className="px-12 py-4"
+        users={users.filter(
+          (user) => user.currentPageId === currentPage.toString(),
+        )}
+      />
       <Editor
         key={ydoc.guid}
         initialContent={pageContent}

apps/frontend/src/components/canvas/NoteNode.tsx

@@ -1,7 +1,9 @@
 import { Handle, NodeProps, Position, type Node } from "@xyflow/react";
+
+import ActiveUser from "../commons/activeUser";
+
 import usePageStore from "@/store/usePageStore";
 import useUserStore from "@/store/useUserStore";
-import { cn } from "@/lib/utils";
 
 export type NoteNodeData = { title: string; id: number };
 export type NoteNodeType = Node<NoteNodeData, "note">;
@@ -49,24 +51,12 @@ export function NoteNode({ data }: NodeProps<NoteNodeType>) {
         isConnectable={true}
       />
       {data.title}
-      <div className="flex justify-end gap-2">
-        {users
-          .filter((user) => user.currentPageId === data.id.toString())
-          .map((user) => (
-            <div
-              style={{ backgroundColor: user.color }}
-              className={cn("group relative h-5 w-5 rounded-full")}
-              key={user.clientId}
-            >
-              <div
-                style={{ backgroundColor: user.color }}
-                className="absolute left-2 z-10 hidden px-2 text-sm group-hover:flex"
-              >
-                {user.clientId}
-              </div>
-            </div>
-          ))}
-      </div>
+      <ActiveUser
+        className="justify-end"
+        users={users.filter(
+          (user) => user.currentPageId === data.id.toString(),
+        )}
+      />
     </div>
   );
 }

apps/frontend/src/components/commons/activeUser/index.tsx

@@ -0,0 +1,28 @@
+import { User } from "@/store/useUserStore";
+import { cn } from "@/lib/utils";
+
+interface ActiveUserProps {
+  users: User[];
+  className?: string;
+}
+
+export default function ActiveUser({ users, className }: ActiveUserProps) {
+  return (
+    <div className={cn("flex gap-2", className)}>
+      {users.map((user) => (
+        <div
+          style={{ backgroundColor: user.color }}
+          className={cn("group relative h-5 w-5 rounded-full")}
+          key={user.clientId}
+        >
+          <div
+            style={{ backgroundColor: user.color }}
+            className="absolute left-2 z-10 hidden px-2 text-sm group-hover:flex"
+          >
+            {user.clientId}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}