From 0c61ef813ce7aa196dd355cdd1b7709a1d7e68c2 Mon Sep 17 00:00:00 2001
From: cje <chej098t@gmail.com>
Date: Wed, 20 Mar 2024 00:19:36 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=88=98=EC=A0=95=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EB=A9=94=EB=AA=A8=20?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=A0=84=EB=B6=80=20=EB=85=B8?=
 =?UTF-8?q?=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/EditInput.tsx"                 | 59 +++++--------------
 1 file changed, 15 insertions(+), 44 deletions(-)

diff --git "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/EditInput.tsx" "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/EditInput.tsx"
index 6abf27b..07d8f9d 100644
--- "a/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/EditInput.tsx"
+++ "b/src/domain/\353\201\204\354\240\201\354\235\264\353\212\224/components/EditInput.tsx"
@@ -1,5 +1,6 @@
-import { type ChangeEvent, type KeyboardEvent, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 
+import { MAIN_INPUT_MAX_LENGTH } from '@constants/config';
 import { type UseInputReturn } from '@hooks/useInput';
 
 import * as styles from './editInput.css';
@@ -10,47 +11,19 @@ interface EditInputProps {
 
 const EditInput = ({ inputProps }: EditInputProps) => {
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
-  const [textareaHeight, setTextareaHeight] = useState<{
-    row: number;
-    lineBreak: Record<number, boolean>;
-  }>({
-    row: inputProps.value.split(/\r\n|\r|\n/).length,
-    lineBreak: {},
-  });
 
-  const handleResize = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    const { scrollHeight, clientHeight, value } = e.target;
+  useEffect(() => {
+    handleResize();
+  }, []);
 
-    if (value.length === 0) {
-      setTextareaHeight((prev) => ({
-        row: 1,
-        lineBreak: { ...prev.lineBreak, [e.target.value.length]: false },
-      }));
-    }
+  const handleResize = () => {
+    if (!inputRef.current) return;
 
-    if (scrollHeight > clientHeight) {
-      setTextareaHeight((prev) => ({
-        row: prev.row + 1,
-        lineBreak: { ...prev.lineBreak, [value.length - 1]: true },
-      }));
-    }
-
-    if (textareaHeight.lineBreak[value.length]) {
-      setTextareaHeight((prev) => ({
-        row: prev.row - 1,
-        lineBreak: { ...prev.lineBreak, [value.length]: false },
-      }));
-    }
-  };
-
-  const handleKeydownEnter = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.code === 'Enter') {
-      setTextareaHeight((prev) => ({
-        row: prev.row + 1,
-        lineBreak: { ...prev.lineBreak, [inputProps.value.length]: true },
-      }));
-      return;
-    }
+    inputRef.current.setAttribute('style', 'height: 0px');
+    inputRef.current.setAttribute(
+      'style',
+      `height: ${inputRef.current.scrollHeight}px`,
+    );
   };
 
   return (
@@ -60,16 +33,14 @@ const EditInput = ({ inputProps }: EditInputProps) => {
         ref={inputRef}
         className={styles.editInput}
         autoComplete="off"
-        rows={textareaHeight.row}
-        maxLength={500}
+        maxLength={MAIN_INPUT_MAX_LENGTH}
         onInput={handleResize}
-        onKeyDown={handleKeydownEnter}
       />
       <p className={styles.editInputTextCount}>
         <span className={styles.editTextCurrentCount}>
-          {inputProps.value.length}
+          {inputProps.value.length}&nbsp;
         </span>
-        / 500
+        /&nbsp;500
       </p>
     </div>
   );