boostcampwm-2024 · Minju9187 · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024
diff --git a/client/src/components/MindMapCanvas/ToolMenu.tsx b/client/src/components/MindMapCanvas/ToolMenu.tsx
@@ -19,7 +19,7 @@ type ToolMenuProps = {
   setDragmode: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export default function ToolMenu({ dimensions, zoomIn, zoomOut, dragmode, setDragmode }: ToolMenuProps) {
-  const { data, selectNode, selectedNode, saveHistory, overrideNodeData } = useNodeListContext();
+  const { data, selectNode, selectedNode, overrideNodeData } = useNodeListContext();
   const intervalRef = useRef(null);
 
   const startZoom = (zoomFn) => {

diff --git a/client/src/components/MindMapCanvas/index.tsx b/client/src/components/MindMapCanvas/index.tsx
@@ -52,15 +52,14 @@ export default function MindMapCanvas({ showMinutes, handleShowMinutes }) {
   useWindowEventListener("keydown", (e) => {
     e.preventDefault();
     if (e.metaKey || e.ctrlKey) {
-      if (e.shiftKey && e.code === "KeyZ") redo();
-      switch (e.code) {
-        case "KeyZ":
-          undo();
-          break;
-        case "KeyR":
-          const url = window.location;
-          location.href = url.pathname + url.search;
-          break;
+      if (e.shiftKey && e.code === "KeyZ") {
+        redo();
+      } else if (e.code === "KeyZ") {
+        undo();
+      }
+      if (e.code === "KeyR") {
+        const url = window.location;
+        location.href = url.pathname + url.search;
       }
     }
 

diff --git a/client/src/components/MindMapHeader/index.tsx b/client/src/components/MindMapHeader/index.tsx
@@ -3,17 +3,25 @@ import Profile from "@/components/MindMapHeader/Profile";
 import { useNodeListContext } from "@/store/NodeListProvider";
 import { useConnectionStore } from "@/store/useConnectionStore";
 import { Input } from "@headlessui/react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { FaPencilAlt } from "react-icons/fa";
 
 export default function MindMapHeader() {
   const { title, updateTitle } = useNodeListContext();
   const originalContent = title;
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const [editMode, setEditMode] = useState(false);
   const handleSocketEvent = useConnectionStore((state) => state.handleSocketEvent);
   const role = useConnectionStore((state) => state.currentRole);
   const currentJobStatus = useConnectionStore((state) => state.currentJobStatus);
 
+  useEffect(() => {
+    if (editMode && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editMode]);
+
   function handleInputBlur() {
     if (!title.length) {
       setEditMode(false);
@@ -48,6 +56,7 @@ export default function MindMapHeader() {
       <MindMapHeaderButtons />
       {editMode ? (
         <Input
+          ref={inputRef}
           className="flex w-80 items-center bg-transparent text-center"
           value={title}
           onChange={(e) => updateTitle(e.target.value)}

diff --git a/client/src/components/MindMapMainSection/ControlSection/ListView/NodeItem.tsx b/client/src/components/MindMapMainSection/ControlSection/ListView/NodeItem.tsx
@@ -47,6 +47,13 @@ export default function NodeItem({ node, parentNodeId, open, handleAccordion, op
     if (isSelected) openAccordion();
   }, [isSelected]);
 
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
   function handleAddButton() {
     selectNode({ nodeId: node.id, parentNodeId: parentNodeId });
     addNode(data, { nodeId: node.id, parentNodeId: parentNodeId }, overrideNodeData, (newNodeId) => {

diff --git a/client/src/konva_mindmap/components/EditableTextInput.tsx b/client/src/konva_mindmap/components/EditableTextInput.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { Html } from "react-konva-utils";
 
 interface EditableTextInputProps {
@@ -23,11 +24,19 @@ export default function EditableTextInput({
   focus,
   scale,
 }: EditableTextInputProps) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const fontSize = scale >= 1 ? 16 : 16 / scale;
 
+  useEffect(() => {
+    if (inputRef.current && focus) {
+      inputRef.current.select();
+    }
+  }, [focus]);
+
   return (
     <Html groupProps={{ offset: { x: offsetX, y: offsetY } }}>
       <input
+        ref={inputRef}
         autoFocus={focus}
         value={value}
         onChange={onChange}

diff --git a/client/src/konva_mindmap/components/MindMapNode.tsx b/client/src/konva_mindmap/components/MindMapNode.tsx
@@ -24,7 +24,7 @@ import useWindowEventListener from "@/hooks/useWindowEventListener";
 
 export default function MindMapNode({ data, parentNode, node, depth, dragmode, scale }: NodeProps) {
   const nodeRef = useRef<Konva.Group>(null);
-  const { saveHistory, updateNode, selectNode, selectedNode, selectedGroup, overrideNodeData, groupRelease } =
+  const { saveHistory, updateNode, selectNode, selectedNode, selectedGroup, setData, overrideNodeData, groupRelease } =
     useNodeListContext();
   const handleSocketEvent = useConnectionStore.getState().handleSocketEvent;
   const [isEditing, setIsEditing] = useState(false);
@@ -82,7 +82,7 @@ export default function MindMapNode({ data, parentNode, node, depth, dragmode, s
 
     if (selectedGroup.length) {
       const groupMove = getMovedNodesLocation(data, selectedGroup, node, dx, dy, currentPos);
-      overrideNodeData(groupMove);
+      setData(groupMove);
       return;
     }
 

diff --git a/client/src/store/NodeListProvider.tsx b/client/src/store/NodeListProvider.tsx
@@ -14,6 +14,7 @@ import useLoading, { MindMapLoadingHook } from "@/hooks/useLoading";
 export type NodeListContextType = {
   stage: RefObject<Konva.Stage>;
   data: NodeData | null;
+  setData: React.Dispatch<React.SetStateAction<NodeData | null>>;
   selectedNode: SelectedNode | null;
   history: string[];
   updateNode: (id: number, node: Partial<Node>) => void;
@@ -151,6 +152,7 @@ export default function NodeListProvider({ children }: { children: ReactNode })
     <NodeListContext.Provider
       value={{
         data,
+        setData,
         updateNode,
         overrideNodeData,
         undoData,