✨ Textarea 컴포넌트 글자 수 표시, 높이 조절

boostcampwm2023 · Nov 22, 2023 · 1d4da50 · 1d4da50
1 parent aaf8e48
commit 1d4da50
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/app/frontend/src/components/commons/Input/Textarea.css.ts b/app/frontend/src/components/commons/Input/Textarea.css.ts
@@ -6,6 +6,8 @@ export * from './index.css';
 export const textarea = style([
   input,
   {
+    minHeight: '10rem',
     resize: 'none',
+    overflow: 'hidden',
   },
 ]);
diff --git a/app/frontend/src/components/commons/Input/Textarea.tsx b/app/frontend/src/components/commons/Input/Textarea.tsx
@@ -1,3 +1,5 @@
+import { useRef, useState } from 'react';
+
 import * as styles from './Textarea.css';
 
 type TextareaProps = {
@@ -10,6 +12,8 @@ type TextareaProps = {
   fullWidth?: boolean;
 };
 
+const MIN_HEIGHT = '10rem';
+
 export function Textarea({
   label,
   placeholder = '',
@@ -19,6 +23,17 @@ export function Textarea({
   required = false,
   fullWidth = false,
 }: TextareaProps) {
+  const [textCount, setTextCount] = useState<number>(0);
+  const textRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const handleInput = () => {
+    if (textRef && textRef.current) {
+      setTextCount(textRef.current.value.length);
+      textRef.current.style.height = MIN_HEIGHT;
+      textRef.current.style.height = `${textRef.current.scrollHeight}px`;
+    }
+  };
+
   return (
     <div
       className={`${styles.container} ${errorMessage && styles.error} ${
@@ -30,14 +45,18 @@ export function Textarea({
           {label}
           {required && <span className={styles.required}>*</span>}
         </span>
-        <span className={styles.count}>0/{maxLength}</span>
+        <span className={styles.count}>
+          {textCount}/{maxLength}
+        </span>
       </div>
       <textarea
+        ref={textRef}
         className={styles.textarea}
         placeholder={placeholder}
         disabled={disabled}
         maxLength={maxLength}
         required={required}
+        onChange={handleInput}
       />
       {!disabled && errorMessage && (
         <p className={styles.errorMessage}>{errorMessage}</p>