Merge pull request #97 from imaginer-dev/96-공용-input-모든-어트리뷰트-받을-수-있도록-수정

96 공용 input 모든 어트리뷰트 받을 수 있도록 수정

Author: gihwan-dev

src/components/common/InputForm.tsx

@@ -1,22 +1,19 @@
-interface Props {
+import { HTMLProps } from 'react';
+
+interface Props extends HTMLProps<HTMLInputElement> {
   title: string;
   placeholder: string;
   hint: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const InputForm: React.FC<Props> = ({ title, placeholder, hint, onChange }) => {
+const InputForm: React.FC<Props> = ({ title, placeholder, hint, onChange, ...rest }) => {
   return (
     <label className="form-control w-full max-w-xs">
       <div className="label">
         <span className="label-text">{title}</span>
       </div>
-      <input
-        type="text"
-        placeholder={placeholder}
-        className="input input-bordered w-full max-w-xs"
-        onChange={onChange}
-      />
+      <input placeholder={placeholder} className="input input-bordered w-full max-w-xs" onChange={onChange} {...rest} />
       <div className="label">
         <span className="label-text-alt">{hint}</span>
       </div>

src/pages/InputFormTest.tsx

@@ -7,6 +7,13 @@ function TestInputForm() {
   return (
     <div>
       <InputForm title="이름" placeholder="이름을 입력하세요" hint="hint text" onChange={onChange} />
+      <InputForm
+        title={'패스워드'}
+        placeholder={'패스워드를 입력하세요'}
+        hint={'hit text'}
+        onChange={onChange}
+        type={'password'}
+      />
     </div>
   );
 }