fix(ui): TextArea Value prop이 undefined일 경우 발생하는 타입 에러 수정 (#216)

* fix: Textarea value.length undefined * cs
sopt-makers · Nov 26, 2024 · 6d311fd · 6d311fd
1 parent b3e4965
commit 6d311fd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/pretty-eggs-teach.md b/.changeset/pretty-eggs-teach.md
@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': patch
+---
+
+TextArea Value prop이 undefined일 경우 발생하는 타입 에러 수정
diff --git a/apps/docs/src/App.tsx b/apps/docs/src/App.tsx
@@ -70,7 +70,7 @@ function App() {
         rightAddon={{ onClick: () => handleTextareaSubmit() }}
         validationFn={textareaValidation}
         errorMessage='Error Message'
-        value={textarea}
+        // value={textarea}
         onChange={handleTextareaChange}
         maxLength={300}
       />

diff --git a/packages/ui/Input/TextArea.tsx b/packages/ui/Input/TextArea.tsx
@@ -35,7 +35,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, forwarde
     isError,
     validationFn,
     errorMessage,
-    value = '',
+    value,
     disableEnterSubmit = false,
     maxLength,
     fixedHeight,
@@ -45,8 +45,8 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, forwarde
   const { onChange, ...restInputProps } = inputProps;
   const { disabled, readOnly, required } = restInputProps;
 
-  const isValid = validationFn ? validationFn(value) : true;
-  const isEmpty = value.length === 0;
+  const isValid = validationFn ? validationFn(value ?? '') : true;
+  const isEmpty = value && value.length === 0;
 
   const submitButtonRef = useRef<HTMLButtonElement | null>(null);
 
@@ -171,8 +171,8 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, forwarde
           )}
 
           {maxLength ? (
-            <p className={`${S.count} ${value.length > maxLength ? S.maxCount : ''}`}>
-              {value.length}/{maxLength}
+            <p className={`${S.count} ${!isEmpty && value && value.length > maxLength ? S.maxCount : ''}`}>
+              {value?.length}/{maxLength}
             </p>
           ) : null}
         </div>