feat: textarea 변경 및 조건 추가

src/components/ProjectPage/Editable/EditableText.jsx

@@ -9,7 +9,6 @@ function EditableText({ id, initialText, onTextChange, onDragEnd, x, y }) {
     const newY = e.target.y();
     onDragEnd(id, { x: newX, y: newY });
   };
-
   const handleDoubleClick = (e) => {
     const stage = e.target.getStage();
     if (!stage) return;
@@ -21,44 +20,68 @@ function EditableText({ id, initialText, onTextChange, onDragEnd, x, y }) {
       x: stageBox.left + textPosition.x,
       y: stageBox.top + textPosition.y,
     };
-    const input = document.createElement('input');
-    document.body.appendChild(input);
-    input.value = text;
-    input.style.position = 'absolute';
-    input.style.top = `${areaPosition.y}px`;
-    input.style.left = `${areaPosition.x}px`;
-    input.style.fontSize = '20px';
-    input.style.border = 'none';
-    input.style.padding = '0';
-    input.style.margin = '0';
-    input.style.overflow = 'hidden';
-    input.style.background = 'none';
-    input.focus();
 
-    const removeInput = () => {
-      if (input.parentNode) {
-        input.parentNode.removeChild(input);
+    const textarea = document.createElement('textarea');
+    document.body.appendChild(textarea);
+    textarea.value = text;
+    textarea.style.position = 'absolute';
+    textarea.style.top = `${areaPosition.y}px`;
+    textarea.style.left = `${areaPosition.x}px`;
+    textarea.style.fontSize = '20px';
+    textarea.style.border = 'none';
+    textarea.style.padding = '0';
+    textarea.style.margin = '0';
+    textarea.style.overflow = 'hidden';
+    textarea.style.resize = 'none';
+    textarea.style.whiteSpace = 'pre-wrap';
+    textarea.style.background = 'none';
+
+    textarea.focus();
+
+    const span = document.createElement('span');
+    span.style.fontSize = '20px';
+    span.style.whiteSpace = 'pre-wrap';
+    span.style.visibility = 'hidden';
+    document.body.appendChild(span);
+
+    const adjustSize = () => {
+      span.textContent = textarea.value;
+      textarea.style.width = `${span.offsetWidth + 10}px`;
+      textarea.style.height = `${span.offsetHeight + 10}px`;
+    };
+
+    adjustSize(); // 초기 크기 조절
+    textarea.addEventListener('input', adjustSize); // 입력 시 크기 조절
+
+    const removeTextarea = () => {
+      if (textarea.parentNode) {
+        textarea.parentNode.removeChild(textarea);
+      }
+      if (span.parentNode) {
+        span.parentNode.removeChild(span);
       }
-      onTextChange(input.value);
+      onTextChange(textarea.value);
       setEditing(false);
     };
 
-    input.addEventListener('blur', () => {
-      setText(input.value);
-      removeInput();
+    textarea.addEventListener('blur', () => {
+      setText(textarea.value);
+      removeTextarea();
     });
   };
 
-  return editing ? null : (
-    <Text
-      text={text}
-      x={x}
-      y={y}
-      fontSize={20}
-      draggable
-      onDblClick={handleDoubleClick}
-      onDragEnd={handleDragEnd}
-    />
+  return (
+    !editing && (
+      <Text
+        text={text}
+        x={x}
+        y={y}
+        fontSize={20}
+        draggable
+        onDblClick={handleDoubleClick}
+        onDragEnd={handleDragEnd}
+      />
+    )
   );
 }