Merge pull request #275 from boostcampwm-2024/feature-fe-#15

새로 생성된 노드 auto-focus

Author: yewonJin

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

@@ -8,6 +8,7 @@ import {
   Edge,
   EdgeChange,
   Connection,
+  useReactFlow,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { SocketIOProvider } from "y-socket.io";
@@ -19,7 +20,7 @@ import { calculateBestHandles } from "@/features/canvas/model/calculateHandles";
 import { createSocketIOProvider } from "@/shared/api/socketProvider";
 import { useCollaborativeCursors } from "./useCollaborativeCursors";
 import { getSortedNodes } from "./sortNodes";
-
+import { usePageStore } from "@/features/pageSidebar/model/pageStore";
 export interface YNode extends Node {
   isHolding: boolean;
 }
@@ -41,6 +42,27 @@ export const useCanvas = () => {
   const existingPageIds = useRef(new Set<string>());
   const holdingNodeRef = useRef<string | null>(null);
 
+  const currentPage = usePageStore((state) => state.currentPage);
+  const { fitView } = useReactFlow();
+
+  useEffect(() => {
+    if (currentPage) {
+      setTimeout(() => {
+        fitView({
+          nodes: [{ id: currentPage.toString() }],
+          duration: 500,
+          padding: 0.5,
+        });
+        const nodeElement = document.querySelector(
+          `[data-nodeid="${currentPage}"]`,
+        ) as HTMLInputElement;
+        if (nodeElement) {
+          nodeElement.focus();
+        }
+      }, 100);
+    }
+  }, [currentPage, fitView]);
+
   useEffect(() => {
     const yTitleMap = ydoc.getMap("title");
     const yEmojiMap = ydoc.getMap("emoji");

apps/frontend/src/features/canvas/ui/Node/NoteNode/index.tsx

@@ -11,7 +11,7 @@ export type NoteNodeData = { title: string; id: number; emoji: string };
 export type NoteNodeType = Node<NoteNodeData, "note">;
 
 export function NoteNode({ data }: NodeProps<NoteNodeType>) {
-  const { setCurrentPage } = usePageStore();
+  const { currentPage, setCurrentPage } = usePageStore();
   const { users } = useUserStore();
 
   const [activeUsers, setActiveUsers] = useState(users);
@@ -31,7 +31,7 @@ export function NoteNode({ data }: NodeProps<NoteNodeType>) {
 
   return (
     <div
-      className="h-24 w-48 rounded-lg border-[1px] border-[#eaeaea] bg-white p-3 shadow-sm"
+      className={`h-24 w-48 rounded-lg border-[1px] ${currentPage === data.id ? "border-[#8dbaef]" : "border-[#eaeaea]"} bg-white p-3 shadow-sm`}
       onClick={handleNodeClick}
     >
       <Handle