From a3fff8cbd88f476143b0fbc0826bb6c190a7bae7 Mon Sep 17 00:00:00 2001
From: sohee <soheek@fairsquarelab.com>
Date: Wed, 17 Apr 2024 16:11:14 +0900
Subject: [PATCH] hotfix: change inputProps style

---
 apps/docs/src/stories/TextArea.stories.tsx | 9 +++++----
 packages/ui/Input/TextArea.tsx             | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/docs/src/stories/TextArea.stories.tsx b/apps/docs/src/stories/TextArea.stories.tsx
index c446cc1..00285ba 100644
--- a/apps/docs/src/stories/TextArea.stories.tsx
+++ b/apps/docs/src/stories/TextArea.stories.tsx
@@ -12,6 +12,7 @@ interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
   height?: string;
   isError?: boolean;
   onSubmit: () => void;
+  fixedHeight?: number;
 }
 
 const useTextArea = (props: TextAreaProps) => {
@@ -30,7 +31,7 @@ export default {
   tags: ['autodocs'],
   args: {
     value: '',
-    style: { width: '335px', height: '48px' },
+    style: { width: '335px' },
     onSubmit: fn(),
   },
   argTypes: {
@@ -54,19 +55,19 @@ export const Default: StoryObj<TextAreaProps> = {
   }
 };
 
-export const DoubleLine: StoryObj<TextAreaProps> = {
+export const FixedHeight: StoryObj<TextAreaProps> = {
   args: {
     labelText: 'Label',
     descriptionText: 'Description',
     placeholder: 'Placeholder...',
-    value: 'text\ntext',
+    value: 'text\ntext\ntest',
     maxLength: 300,
     isError: false,
     errorMessage: 'error message',
     required: true,
     readOnly: false,
     disabled: false,
-    style: { width: '335px', height: '76px' },
+    fixedHeight: 100,
   }
 };
 
diff --git a/packages/ui/Input/TextArea.tsx b/packages/ui/Input/TextArea.tsx
index 1570e85..82ceecb 100644
--- a/packages/ui/Input/TextArea.tsx
+++ b/packages/ui/Input/TextArea.tsx
@@ -57,12 +57,12 @@ function TextArea(props: TextAreaProps) {
 
   const required = inputProps.required ? <span className={S.required}>*</span> : null;
   const description = descriptionText ? <p className={S.description}>{descriptionText}</p> : null;
-  const input = <textarea {...restInputProps} className={`${S.input} ${S.textarea} ${hasError() ? S.inputError : ''}`} onChange={handleInputChange} onKeyDown={handleKeyPress} style={{ height: `${fixedHeight ?? calcHeight}px` }} value={value} />;
+  const input = <textarea {...restInputProps} className={`${S.input} ${S.textarea} ${hasError() ? S.inputError : ''}`} onChange={handleInputChange} onKeyDown={handleKeyPress} style={{ ...inputProps.style, height: `${fixedHeight ?? calcHeight}px` }} value={value} />;
 
   return <div className={className} style={{ position: 'relative' }}>
     {labelText ? <label className={S.label}><span>{labelText}{required}</span>{description}{input}</label> : <div className={S.inputWrap}>{description}{input}</div>}
 
-    <button className={S.submitButton} disabled={disabled} onClick={onSubmit} style={{ ...inputProps.style, transform: `translateY(-${buttonPosition}px)` }} type="submit"><SendIcon disabled={disabled} /></button>
+    <button className={S.submitButton} disabled={disabled} onClick={onSubmit} style={{ transform: `translateY(-${buttonPosition}px)` }} type="submit"><SendIcon disabled={disabled} /></button>
 
     <div className={S.inputBottom}>
       {hasError() ? <div className={S.errorMessage}><AlertCircleIcon /><p>{errorMessage ?? 'error'}</p></div> : <div> </div>}