Merge pull request #339 from boostcampwm-2024/bug-fe-#338

소켓 룸 이름 통일

Author: github-actions[bot]

apps/frontend/src/features/canvas/model/useCanvas.ts

@@ -38,7 +38,6 @@ export const useCanvas = () => {
   const { cursors, handleMouseMove, handleNodeDrag, handleMouseLeave } =
     useCollaborativeCursors({
       ydoc,
-      roomName: `flow-room-${workspace}`,
     });
 
   const provider = useRef<SocketIOProvider>();
@@ -81,7 +80,7 @@ export const useCanvas = () => {
       const existingNode = nodesMap.get(pageId) as YNode;
 
       const newNode: YNode = {
-        id: pageId,
+        id: existingNode.id,
         type: "note",
         data: { title: value, id: pageId, emoji: existingNode.data.emoji },
         position: existingNode.position,
@@ -116,7 +115,7 @@ export const useCanvas = () => {
   useEffect(() => {
     if (!ydoc) return;
 
-    const wsProvider = createSocketIOProvider("flow-room", ydoc);
+    const wsProvider = createSocketIOProvider(`flow-room-${workspace}`, ydoc);
 
     provider.current = wsProvider;
 

apps/frontend/src/features/canvas/model/useCollaborativeCursors.ts

@@ -5,6 +5,7 @@ import { useReactFlow, type XYPosition } from "@xyflow/react";
 
 import { createSocketIOProvider } from "@/shared/api/socketProvider";
 import { useUserStore } from "@/entities/user/model/userStore";
+import { useWorkspace } from "@/shared/lib/useWorkspace";
 
 export interface AwarenessState {
   cursor: XYPosition | null;
@@ -14,13 +15,9 @@ export interface AwarenessState {
 
 interface CollaborativeCursorsProps {
   ydoc: Y.Doc;
-  roomName?: string;
 }
 
-export function useCollaborativeCursors({
-  ydoc,
-  roomName = "cursor-room",
-}: CollaborativeCursorsProps) {
+export function useCollaborativeCursors({ ydoc }: CollaborativeCursorsProps) {
   const flowInstance = useReactFlow();
   const provider = useRef<SocketIOProvider>();
   const [cursors, setCursors] = useState<Map<number, AwarenessState>>(
@@ -29,8 +26,10 @@ export function useCollaborativeCursors({
   const { currentUser } = useUserStore();
   const { color, clientId } = currentUser;
 
+  const workspace = useWorkspace();
+
   useEffect(() => {
-    const wsProvider = createSocketIOProvider("flow-room", ydoc);
+    const wsProvider = createSocketIOProvider(`flow-room-${workspace}`, ydoc);
     provider.current = wsProvider;
 
     wsProvider.awareness.setLocalState({
@@ -53,7 +52,7 @@ export function useCollaborativeCursors({
     return () => {
       wsProvider.destroy();
     };
-  }, [ydoc, roomName, color, clientId]);
+  }, [ydoc, color, clientId, workspace]);
 
   const updateCursorPosition = useCallback(
     (x: number | null, y: number | null) => {

apps/frontend/src/features/workspace/ui/ShareTool/SharePanel.tsx

@@ -1,73 +1,27 @@
 import { Switch } from "@/shared/ui/Switch";
 import { Globe2, Lock, Copy, CheckCheck } from "lucide-react";
-import { useState, useEffect } from "react";
-import {
-  useWorkspaceStatus,
-  useToggleWorkspaceStatus,
-} from "@/features/workspace/model/useWorkspaceStatus";
-import { useCreateWorkspaceInviteLink } from "@/features/workspace/model/useWorkspaceInvite";
-import { useWorkspace } from "@/shared/lib/useWorkspace";
-import { useInviteLinkStore } from "@/features/workspace/model/useInviteLinkStore";
-
-const createFrontendUrl = (apiUrl: string, currentWorkspaceId: string) => {
-  const searchParams = new URLSearchParams();
-
-  searchParams.set("workspaceId", currentWorkspaceId);
-  searchParams.set("token", new URL(apiUrl).searchParams.get("token") || "");
-  return `${window.location.origin}/join?${searchParams.toString()}`;
-};
+import { useState } from "react";
 
 export function SharePanel() {
   const [copied, setCopied] = useState(false);
-  const currentWorkspaceId = useWorkspace();
-  const workspaceStatus = useWorkspaceStatus();
-
-  const { inviteLink, setInviteLink } = useInviteLinkStore();
-
-  const { mutate: toggleStatus, isPending: isTogglingStatus } =
-    useToggleWorkspaceStatus(workspaceStatus);
-  const { mutate: createLink, isPending: isCreatingLink } =
-    useCreateWorkspaceInviteLink();
-
-  const isPublic = workspaceStatus === "public";
-  const isLoading = isTogglingStatus || isCreatingLink;
+  const [isPublic, setIsPublic] = useState(false);
 
-  useEffect(() => {
-    if (isPublic) {
-      setInviteLink(window.location.href);
-    } else if (!inviteLink && currentWorkspaceId) {
-      createLink(currentWorkspaceId, {
-        onSuccess: (inviteUrl) => {
-          const frontendUrl = createFrontendUrl(inviteUrl, currentWorkspaceId);
-          setInviteLink(frontendUrl);
-        },
-      });
-    }
-  }, [isPublic, currentWorkspaceId]);
+  const url = "https://octodocs.com";
 
   const handleCopy = async () => {
-    const linkToCopy = isPublic ? window.location.href : inviteLink;
-    if (!linkToCopy) return;
-
-    await navigator.clipboard.writeText(linkToCopy);
+    await navigator.clipboard.writeText(url);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };
 
-  const handleSwitchChange = () => {
-    toggleStatus();
-  };
-
-  const displayedLink = isPublic ? window.location.href : inviteLink;
-
   return (
     <div className="w-full">
       <div className="flex w-full items-center gap-2 p-1">
         <div className="flex-row text-sm text-slate-400">공개 범위</div>
         <div className="flex items-center space-x-2">
           <Switch
             checked={isPublic}
-            onChange={handleSwitchChange}
+            onChange={setIsPublic}
             CheckedIcon={Globe2}
             UncheckedIcon={Lock}
           />
@@ -79,13 +33,13 @@ export function SharePanel() {
         }`}
       >
         <div className="w-48 flex-1 truncate rounded-md bg-gray-100 px-3 py-2 text-sm text-gray-600">
-          {isLoading ? "링크 생성 중..." : displayedLink}
+          {isPublic ? url : "비공개 모드입니다."}
         </div>
         <button
           onClick={handleCopy}
           className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-gray-100 disabled:cursor-not-allowed disabled:hover:bg-transparent"
           aria-label="Copy URL"
-          disabled={isLoading || !displayedLink}
+          disabled={!isPublic}
         >
           {copied ? (
             <CheckCheck className="h-4 w-4 text-green-500" />