fix: textarea auto layout 설정

KUSITMS-29th-TEAM-B · May 23, 2024 · d6d07cf · d6d07cf
1 parent e63dae4
commit d6d07cf
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}`
                 }