Merge pull request #362 from ttaerrim/361-input

[Refactor] Input 컴포넌트 리팩토링
boostcampwm2023 · Dec 7, 2023 · 20ee8ac · 20ee8ac
2 parents 0ba5d22 + 699d24f
commit 20ee8ac
Showing 1 changed file with 7 additions and 38 deletions.
diff --git a/app/frontend/src/components/Input/index.tsx b/app/frontend/src/components/Input/index.tsx
@@ -1,39 +1,14 @@
 import * as styles from './index.css';
 import { FieldLabel } from '../FieldLabel';
 
-type InputProps = {
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: string;
-  placeholder?: string;
   errorMessage?: string;
-  type?: React.HTMLInputTypeAttribute;
-  disabled?: boolean;
-  maxLength?: number;
-  min?: number | string;
-  max?: number;
-  required?: boolean;
-  defaultValue?: string;
-  value?: string | number;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  onClick?: React.MouseEventHandler<HTMLInputElement>;
-  list?: string;
 };
 
-export function Input({
-  label = '',
-  type = 'input',
-  placeholder = '',
-  errorMessage = '',
-  disabled = false,
-  maxLength,
-  min,
-  max,
-  required = false,
-  defaultValue = '',
-  value,
-  onChange,
-  onClick,
-  list,
-}: InputProps) {
+export function Input({ label = '', errorMessage = '', ...rest }: InputProps) {
+  const { value, maxLength, disabled, required } = rest;
+
   return (
     <div
       className={`${styles.container} ${errorMessage && styles.error} ${
@@ -45,23 +20,17 @@ export function Input({
           <FieldLabel label={label} required={required} />
           {maxLength && (
             <span className={styles.count}>
-              {value ? value.toString().length : 0}/{maxLength}
+              {value?.toString()?.length || 0}/{maxLength}
             </span>
           )}
         </div>
       )}
       <input
         className={styles.input}
-        type={type}
-        placeholder={placeholder}
         disabled={disabled}
         maxLength={maxLength}
-        min={min}
-        max={max}
-        value={value || defaultValue}
-        onChange={onChange}
-        onClick={onClick}
-        list={list}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...rest}
       />
       {!disabled && errorMessage && (
         <p className={styles.errorMessage}>{errorMessage}</p>