From 80b89db6a782a60eee899f3a057e88edaefd6eb6 Mon Sep 17 00:00:00 2001
From: ttaerrim <ltr0121@naver.com>
Date: Wed, 13 Dec 2023 00:23:18 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Textarea=EC=99=80=20TextLa?=
 =?UTF-8?q?bel=EC=9D=84=20=EB=82=98=EB=88=84=EC=96=B4=20FormTextarea?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FormInput/Textarea.tsx     | 40 +++++++++++++++++++
 app/frontend/src/components/index.ts          |  1 +
 .../MogacoPost/Controller/PostContents.tsx    |  4 +-
 .../src/components/Input/Textarea.css.ts      | 26 ------------
 .../src/components/Input/Textarea.tsx         | 19 ++-------
 .../src/components/Input/index.css.ts         | 12 ++++++
 6 files changed, 58 insertions(+), 44 deletions(-)
 create mode 100644 app/frontend/src/components/FormInput/Textarea.tsx
 delete mode 100644 packages/morak-ui/src/components/Input/Textarea.css.ts

diff --git a/app/frontend/src/components/FormInput/Textarea.tsx b/app/frontend/src/components/FormInput/Textarea.tsx
new file mode 100644
index 000000000..b5bdc4cad
--- /dev/null
+++ 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
index 5e13ea806..e1619cb92 100644
--- 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
index 686bea46e..147e3d2ed 100644
--- 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
deleted file mode 100644
index fc2c6127e..000000000
--- a/packages/morak-ui/src/components/Input/Textarea.css.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-import { input } from './index.css';
-
-export * from './index.css';
-
-export const fullWidth = style({
-  flexGrow: 1,
-});
-
-export const textarea = style([
-  input,
-  {
-    resize: 'none',
-    width: '100%',
-  },
-]);
-
-export const titleWrapper = style({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  width: '100%',
-  minHeight: '1.2rem',
-  marginBottom: '0.4rem',
-});
diff --git a/packages/morak-ui/src/components/Input/Textarea.tsx b/packages/morak-ui/src/components/Input/Textarea.tsx
index 7a851670e..b6040ff92 100644
--- 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
index 6db9759ff..92ccaa560 100644
--- 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%',
+  },
+]);