From 1a61ae4a1569db64b2790a3efe90c1c4512e9b3a Mon Sep 17 00:00:00 2001
From: HyeongKyeom Kim <97586683+Brokyeom@users.noreply.github.com>
Date: Sun, 24 Nov 2024 19:46:41 +0900
Subject: [PATCH] =?UTF-8?q?fix(ui):=20TextArea=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20forwardRef=20=EC=B6=94=EA=B0=80,=20value?=
 =?UTF-8?q?=20prop=20optional=EB=A1=9C=20=EB=B3=80=EA=B2=BD.=20(#214)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: Add forwardRef in TextArea component, change value prop to optionally

* cs
---
 .changeset/eight-donuts-act.md |  5 +++++
 packages/ui/Input/TextArea.tsx | 21 ++++++++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/eight-donuts-act.md

diff --git a/.changeset/eight-donuts-act.md b/.changeset/eight-donuts-act.md
new file mode 100644
index 00000000..8041b8bb
--- /dev/null
+++ b/.changeset/eight-donuts-act.md
@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': patch
+---
+
+Add forwardRef in TextArea component
diff --git a/packages/ui/Input/TextArea.tsx b/packages/ui/Input/TextArea.tsx
index 3e1dcb81..24e788ce 100644
--- a/packages/ui/Input/TextArea.tsx
+++ b/packages/ui/Input/TextArea.tsx
@@ -1,4 +1,12 @@
-import { useMemo, useRef, type ChangeEvent, type TextareaHTMLAttributes, isValidElement, useState } from 'react';
+import {
+  useMemo,
+  useRef,
+  type ChangeEvent,
+  type TextareaHTMLAttributes,
+  isValidElement,
+  useState,
+  forwardRef,
+} from 'react';
 import * as S from './style.css';
 import AlertCircleIcon from './icons/AlertCircleIcon';
 import SendIcon from './icons/SendIcon';
@@ -11,7 +19,7 @@ interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
   isError?: boolean;
   validationFn?: (input: string) => boolean; // isError가 없을 때만 적용
   errorMessage?: string; // isError 또는 validationFn 결과가 true일 때만 표시
-  value: string; // string 타입으로 한정
+  value?: string; // string 타입으로 한정
 
   disableEnterSubmit?: boolean; // true일 경우, Enter 키는 줄바꿈으로 동작
   maxLength?: number; // 없으면 무제한
@@ -19,7 +27,7 @@ interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
   maxHeight?: number; // px -> 늘어나면서 최대 높이를 제한
 }
 
-function TextArea(props: TextAreaProps) {
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, forwardedRef) => {
   const {
     className,
     topAddon,
@@ -27,7 +35,7 @@ function TextArea(props: TextAreaProps) {
     isError,
     validationFn,
     errorMessage,
-    value,
+    value = '',
     disableEnterSubmit = false,
     maxLength,
     fixedHeight,
@@ -132,6 +140,7 @@ function TextArea(props: TextAreaProps) {
 
       <div className={`${S.textareaWrap} ${hasError ? S.inputError : ''} ${isFocused ? S.focus : ''}`}>
         <textarea
+          ref={forwardedRef}
           {...restInputProps}
           className={`${S.input} ${S.textarea}`}
           id={labelText}
@@ -170,6 +179,8 @@ function TextArea(props: TextAreaProps) {
       ) : null}
     </div>
   );
-}
+});
+
+TextArea.displayName = 'TextArea';
 
 export default TextArea;