Merge pull request #452 from js43o/refactor-input

[Refactor] Input, Textarea 컴포넌트 리팩토링
boostcampwm2023 · Dec 12, 2023 · 25a48c7 · 25a48c7
2 parents 110777e + 2efc2cf
commit 25a48c7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 35 deletions.
diff --git a/app/frontend/src/components/FieldLabel/index.css.ts b/app/frontend/src/components/FieldLabel/index.css.ts
@@ -1,11 +1,10 @@
 import { style } from '@vanilla-extract/css';
 
-import { vars } from '@/styles';
-import { sansRegular12 } from '@/styles/font.css';
+import { vars, fontStyle } from '@/styles';
 
 const { grayscaleBlack } = vars.color;
 export const label = style([
-  sansRegular12,
+  fontStyle.sansRegular14,
   {
     color: grayscaleBlack,
   },

diff --git a/app/frontend/src/components/Input/Textarea.tsx b/app/frontend/src/components/Input/Textarea.tsx
@@ -1,56 +1,41 @@
 import * as styles from './Textarea.css';
 import { FieldLabel } from '../FieldLabel';
 
-type TextareaProps = {
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
   label?: string;
-  maxLength: number;
-  placeholder?: string;
   errorMessage?: string;
-  disabled?: boolean;
-  required?: boolean;
   fullWidth?: boolean;
-  rows?: number;
-  value?: string;
-  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
 };
 
 export function Textarea({
-  label,
-  placeholder = '',
+  label = '',
   errorMessage = '',
-  disabled = false,
-  maxLength,
-  required = false,
   fullWidth = false,
-  rows = 2,
-  value,
-  onChange,
-  onKeyDown,
+  ...rest
 }: TextareaProps) {
+  const { value, maxLength, disabled, required } = rest;
+
   return (
     <div
-      className={`${styles.container} ${errorMessage && styles.error} ${
-        disabled && styles.disabled
-      } ${fullWidth && styles.fullWidth}`}
+      className={`${styles.container} ${errorMessage && styles.error}
+      ${disabled && styles.disabled} ${fullWidth && styles.fullWidth}`}
     >
       {label && (
         <div className={styles.titleWrapper}>
           <FieldLabel label={label} required={required} />
-          <span className={styles.count}>
-            {value ? value.length : 0}/{maxLength}
-          </span>
+          {maxLength && (
+            <span className={styles.count}>
+              {value?.toString()?.length || 0}/{maxLength}
+            </span>
+          )}
         </div>
       )}
       <textarea
-        rows={rows}
         className={styles.textarea}
-        placeholder={placeholder}
         disabled={disabled}
         maxLength={maxLength}
-        value={value}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...rest}
       />
       {!disabled && errorMessage && (
         <p className={styles.errorMessage}>{errorMessage}</p>

diff --git a/app/frontend/src/components/Input/index.css.ts b/app/frontend/src/components/Input/index.css.ts
@@ -9,7 +9,7 @@ export const container = style({
 });
 
 export const count = style([
-  fontStyle.sansRegular12,
+  fontStyle.sansRegular14,
   {
     visibility: 'hidden',
 
@@ -25,7 +25,7 @@ export const disabled = style({});
 export const error = style({});
 
 export const errorMessage = style([
-  fontStyle.sansRegular12,
+  fontStyle.sansRegular14,
   {
     color: vars.color.morakRed,
     marginTop: '0.4rem',
@@ -38,7 +38,7 @@ export const fullWidth = style({
 
 export const hide = style({});
 export const input = style([
-  fontStyle.sansRegular12,
+  fontStyle.sansRegular14,
   {
     padding: '0.8rem',
     color: vars.color.grayscale500,