Merge pull request #248 from boostcampwm-2024/feature-input-fe

Minju9187 · web-flow · commit 7271b72e1f8d · 2024-12-05T01:55:34.000+09:00
[Feature-input-fe] input 활성화 시 요소 전체선택 ( 수정 바로 할 수 있도록 )
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}
