fix: FE 미반영 커밋 반영

Author: fru1tworld

packages/frontend/src/api/load-balancer.ts

@@ -6,7 +6,10 @@ type getRoomNumberBody = {
   urlId: string;
 };
 
-export async function getRoomNumber(type: string, spaceUrlPath: string) {
+export async function getRoomNumber(
+  type: "note" | "space",
+  spaceUrlPath: string | undefined,
+) {
   const response = await http.get<getRoomNumberBody>(
     `/lb/${type}/${spaceUrlPath}`,
   );

packages/frontend/src/components/note/Editor.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import { Milkdown, MilkdownProvider } from "@milkdown/react";
@@ -6,6 +7,7 @@ import { ProsemirrorAdapterProvider } from "@prosemirror-adapter/react";
 
 import { WS_URL } from "@/api/constants";
 import useMilkdownCollab from "@/hooks/useMilkdownCollab";
+import { getRoomNumber } from "@/api/load-balancer";
 import useMilkdownEditor from "@/hooks/useMilkdownEditor";
 
 import { BlockView } from "./Block";
@@ -14,13 +16,28 @@ import "./Editor.css";
 function MilkdownEditor() {
   const { noteId } = useParams<Record<"noteId", string>>();
 
+  const [roomNumber, setRoomNumber] = useState<string>();
+
+  useEffect(() => {
+    const requestRoomNumber = async () => {
+      const response = await getRoomNumber("note", noteId);
+      return response.server;
+    };
+
+    const initRoomNumber = async () => {
+      const roomNumber = await requestRoomNumber();
+      setRoomNumber(roomNumber);
+    };
+
+    initRoomNumber();
+  }, [noteId]);
   const { loading, get } = useMilkdownEditor({
     BlockView,
   });
 
   useMilkdownCollab({
     editor: loading ? null : get() || null,
-    websocketUrl: `${WS_URL}/note`,
+    websocketUrl: roomNumber ? `${WS_URL}/${roomNumber}/note` : null,
     roomName: noteId || "",
   });
   return <Milkdown />;

packages/frontend/src/hooks/useMilkdownCollab.ts

@@ -8,7 +8,7 @@ import * as Y from "yjs";
 
 type useMilkdownCollabProps = {
   editor: Editor | null;
-  websocketUrl: string;
+  websocketUrl: string | null;
   roomName: string;
 };
 
@@ -21,6 +21,7 @@ export default function useMilkdownCollab({
 }: useMilkdownCollabProps) {
   useEffect(() => {
     if (!editor) return undefined;
+    if (!websocketUrl) return undefined;
 
     const doc = new Y.Doc();