From d6d07cfd51cb88cf8f383fa0d4b5cfd4c0f68ea1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Thu, 23 May 2024 18:10:55 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20textarea=20auto=20layout=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Experience/YearList.tsx |  2 +-
 src/components/common/Textarea.tsx     | 26 ++++++++++++++++++++++++--
 src/pages/ExperienceDetailPage.tsx     |  1 -
 src/pages/ExperienceEditPage.tsx       |  1 -
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/Experience/YearList.tsx b/src/components/Experience/YearList.tsx
index edbe90f..a58cfcc 100644
--- a/src/components/Experience/YearList.tsx
+++ b/src/components/Experience/YearList.tsx
@@ -82,7 +82,7 @@ const YearList = ({ width, openDeleteModal }: YearListProps) => {
         return index * 250 + 250;
       }
       if (index > hoveredIndex) {
-        return index * 250 + distance + 100;
+        return index * 250 + distance;
       }
     }
     if (hoveredYear) {
diff --git a/src/components/common/Textarea.tsx b/src/components/common/Textarea.tsx
index 4dd97bc..218b5fb 100644
--- a/src/components/common/Textarea.tsx
+++ b/src/components/common/Textarea.tsx
@@ -1,4 +1,4 @@
-import { TextareaHTMLAttributes } from "react";
+import React, { TextareaHTMLAttributes, useRef } from "react";
 import styled from "styled-components";
 
 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -16,6 +16,24 @@ const Textarea = ({
   helperTextStyle,
   ...props
 }: TextareaProps) => {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const adjustTextareaHeight = (textarea: HTMLTextAreaElement) => {
+    textarea.style.height = "auto";
+    textarea.style.height = textarea.scrollHeight + "px";
+  };
+
+  const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    adjustTextareaHeight(event.target);
+  };
+
+  React.useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      adjustTextareaHeight(textarea);
+    }
+  }, []);
+
   return (
     <InputContainer labelStyle={labelStyle} helperTextStyle={helperTextStyle}>
       {label && (
@@ -27,7 +45,7 @@ const Textarea = ({
         </div>
       )}
       {helperText && <div className="helperText">{helperText}</div>}
-      <InputBox {...props} />
+      <InputBox {...props} ref={textareaRef} onInput={handleInput} />
     </InputContainer>
   );
 };
@@ -73,6 +91,10 @@ const InputBox = styled.textarea`
     border: 2px solid ${(props) => props.theme.colors.main500};
     padding: 15px;
   }
+  &.scroll::-webkit-scrollbar {
+    display: none;
+  }
+  overflow-y: hidden;
 `;
 
 export default Textarea;
diff --git a/src/pages/ExperienceDetailPage.tsx b/src/pages/ExperienceDetailPage.tsx
index a3ad11a..1b3213b 100644
--- a/src/pages/ExperienceDetailPage.tsx
+++ b/src/pages/ExperienceDetailPage.tsx
@@ -99,7 +99,6 @@ const ExperienceDetailPage = () => {
                 <Textarea
                   value={item.answer}
                   label={`${index + 1}. ${item.question}`}
-                  rows={8}
                   labelStyle={
                     theme.fonts.title4 + `color: ${theme.colors.neutral700}`
                   }
diff --git a/src/pages/ExperienceEditPage.tsx b/src/pages/ExperienceEditPage.tsx
index 732ad0e..26b76cd 100644
--- a/src/pages/ExperienceEditPage.tsx
+++ b/src/pages/ExperienceEditPage.tsx
@@ -708,7 +708,6 @@ const ExperienceEditPage = () => {
                 required={index === 0 || index === 1}
                 value={expData.contents[index].answer}
                 label={`${index + 1}. ${item.question}`}
-                rows={8}
                 labelStyle={
                   theme.fonts.title4 + `color: ${theme.colors.neutral700}`
                 }