Input

Input

인풋 공통 컴포넌트입니다.

---

✅ Props

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  title: string;
  padding?: string;
  isError?: boolean;
  errorMessage?: string;
  className?: string;
  showEyeIcon?: boolean;
  maxWidth?: string;
}

---

🔄 동작 방식

• type props를 지정해줘야만 눈 아이콘이 나오게 처리했습니다. password type일 때만 눈 아이콘을 사용하기 때문에 비밀번호 입력 인풋 사용 시 type을 전달해주세요!
• title, placeholder, errorMessage 등은 필요한 content를 props로 넘겨주세요.
• React.InputHTMLAttributes<HTMLInputElement>를 사용한 type 확장을 통해 input의 기본적 태그들은 props가 ...rest로 처리 되게 해놓았습니다. 참고해주세요!

---

🧾 사용 예시

     <Input
        title="title"
        value={value3}
        onChange={e => setValue3(e.target.value)}
        isError={true}
        errorMessage="message"
        showEyeIcon={true}
        padding="1.6rem 2rem"
        maxWidth="35rem"
        type="password"
      />
/>

etc.

2025 06 04 - - 반응형을 고려해봤을 때 input이 padding으로 조절하기에 모호한 부분이 있어 maxWidth로 최대 크기를 조절하는 방식을 선택 했었는데요. 이 방식보단, props를 줄이고 page 내에서 Input 컴포넌트를 사용하고 있는 곳에 Wrapper로 묶어 max-width를 조절하는 방식이 권장사항이라고 합니다!! 그래서 maxWidth props를 제거했습니다.