From 791ee9ee0415d4c0543c2ad5c0c5c2c9d4124b90 Mon Sep 17 00:00:00 2001
From: Minju9187 <alswn1583@naver.com>
Date: Thu, 5 Dec 2024 01:43:12 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20input=20=ED=99=9C=EC=84=B1=ED=99=94?=
 =?UTF-8?q?=20=EC=8B=9C=20=EC=9A=94=EC=86=8C=20=EC=A0=84=EC=B2=B4=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20(=20=EC=88=98=EC=A0=95=20=EB=B0=94=EB=A1=9C=20?=
 =?UTF-8?q?=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/MindMapHeader/index.tsx         | 11 ++++++++++-
 .../ControlSection/ListView/NodeItem.tsx              |  7 +++++++
 .../konva_mindmap/components/EditableTextInput.tsx    |  9 +++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/client/src/components/MindMapHeader/index.tsx b/client/src/components/MindMapHeader/index.tsx
index 01a55644..1c3cb526 100644
--- 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
index ffa4eb16..42370f4e 100644
--- 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
index 2bb1f159..372cfd98 100644
--- 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}