♻️ Textarea와 TextLabel을 나누어 FormTextarea으로 사용하도록 변경

boostcampwm2023 · Dec 13, 2023 · 80b89db · 80b89db
1 parent 59d62f3
commit 80b89db
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 44 deletions.
diff --git a/app/frontend/src/components/FormInput/Textarea.tsx b/app/frontend/src/components/FormInput/Textarea.tsx
@@ -0,0 +1,40 @@
+import { Textarea, TextLabel } from '@morak/ui';
+
+import * as styles from './index.css';
+
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  label?: string;
+  errorMessage?: string;
+  fullWidth?: boolean;
+};
+
+export function FormTextarea({
+  label = '',
+  errorMessage = '',
+  fullWidth = false,
+  ...rest
+}: TextareaProps) {
+  const { value, maxLength, required } = rest;
+
+  return (
+    <div className={styles.container}>
+      {label && (
+        <div className={styles.titleWrapper}>
+          <TextLabel label={label} required={required} />
+          {maxLength && (
+            <span className={styles.count}>
+              {value?.toString()?.length || 0}/{maxLength}
+            </span>
+          )}
+        </div>
+      )}
+      <Textarea
+        maxLength={maxLength}
+        errorMessage={errorMessage}
+        fullWidth={fullWidth}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...rest}
+      />
+    </div>
+  );
+}
diff --git a/app/frontend/src/components/index.ts b/app/frontend/src/components/index.ts
@@ -2,6 +2,7 @@ export * from './Auth';
 export * from './Divider';
 export * from './Error';
 export * from './FormInput';
+export * from './FormInput/Textarea';
 export * from './Group';
 export * from './Header';
 export * from './Label';

diff --git a/app/frontend/src/pages/MogacoPost/Controller/PostContents.tsx b/app/frontend/src/pages/MogacoPost/Controller/PostContents.tsx
@@ -1,8 +1,8 @@
 import { Controller, Control } from 'react-hook-form';
 
 import { RequestCreateMogacoDto } from '@morak/apitype';
-import { Textarea } from '@morak/ui';
 
+import { FormTextarea } from '@/components';
 import { MOGACO_POST } from '@/constants';
 
 type PostContentsProps = {
@@ -22,7 +22,7 @@ export function PostContents({ control }: PostContentsProps) {
         },
       }}
       render={({ field: { onChange, value }, fieldState: { error } }) => (
-        <Textarea
+        <FormTextarea
           label={MOGACO_POST.CONTENTS.LABEL}
           placeholder={MOGACO_POST.CONTENTS.REQUIRED}
           rows={MOGACO_POST.CONTENTS.ROWS}

diff --git a/packages/morak-ui/src/components/Input/Textarea.css.ts b/packages/morak-ui/src/components/Input/Textarea.css.ts
diff --git a/packages/morak-ui/src/components/Input/Textarea.tsx b/packages/morak-ui/src/components/Input/Textarea.tsx
@@ -1,31 +1,18 @@
-import { TextLabel } from '@morak/ui';
-
-import * as styles from './Textarea.css';
+import * as styles from './index.css';
 
 type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
-  label?: string;
   errorMessage?: string;
   fullWidth?: boolean;
 };
 
-export function Textarea({ label = '', errorMessage = '', fullWidth = false, ...rest }: TextareaProps) {
-  const { value, maxLength, disabled, required } = rest;
+export function Textarea({ errorMessage = '', fullWidth = false, ...rest }: TextareaProps) {
+  const { maxLength, disabled } = rest;
 
   return (
     <div
       className={`${styles.container} ${errorMessage && styles.error}
       ${disabled && styles.disabled} ${fullWidth && styles.fullWidth}`}
     >
-      {label && (
-        <div className={styles.titleWrapper}>
-          <TextLabel label={label} required={required} />
-          {maxLength && (
-            <span className={styles.count}>
-              {value?.toString()?.length || 0}/{maxLength}
-            </span>
-          )}
-        </div>
-      )}
       <textarea
         className={styles.textarea}
         disabled={disabled}

diff --git a/packages/morak-ui/src/components/Input/index.css.ts b/packages/morak-ui/src/components/Input/index.css.ts
@@ -35,7 +35,11 @@ export const errorMessage = style([
   },
 ]);
 
+export const fullWidth = style({
+  flexGrow: 1,
+});
 export const hide = style({});
+
 export const input = style([
   fontStyle.sansRegular14,
   {
@@ -68,3 +72,11 @@ export const input = style([
     },
   },
 ]);
+
+export const textarea = style([
+  input,
+  {
+    resize: 'none',
+    width: '100%',
+  },
+]);