[이태경] refactor/sprint5

src/components/AuthFormInput/AuthFormInput.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { getAuthValidClassName } from "../../utils/authUtils";
+import PasswordInput from "../PasswordInput/PasswordInput";
+import Input from "../Input/Input";
+
+const AuthFormInput = ({
+  label,
+  type,
+  name,
+  value,
+  onChange,
+  placeholder,
+  validInfo,
+}) => {
+  const handleChangeValue = (e) => {
+    onChange(e.target.value);
+  };
+
+  const hasError = !validInfo.isValid;
+
+  return (
+    <div className="auth-form__item">
+      <label htmlFor={name} className="auth-form__label">
+        {label}
+      </label>
+      {type === "password" ? (
+        <PasswordInput
+          name={name}
+          value={value}
+          onChange={handleChangeValue}
+          placeholder={placeholder}
+          className={getAuthValidClassName(validInfo.isValid)}
+        />
+      ) : (
+        <Input
+          type={type}
+          name={name}
+          value={value}
+          onChange={handleChangeValue}
+          placeholder={placeholder}
+          className={getAuthValidClassName(validInfo.isValid)}
+        />
+      )}
+      {hasError && <p className="auth-form__error-msg">{validInfo.msg}</p>}
+    </div>
+  );
+};
+
+export default AuthFormInput;

src/components/Input/Input.js

@@ -0,0 +1,17 @@
+import styles from "./Input.module.scss";
+
+const Input = ({ type, name, value, onChange, placeholder, className }) => {
+  return (
+    <input
+      type={type}
+      name={name}
+      id={name}
+      placeholder={placeholder}
+      className={`${styles.input} ${className}`}
+      value={value}
+      onChange={onChange}
+    />
+  );
+};
+
+export default Input;

src/components/Input/Input.module.scss

@@ -0,0 +1,5 @@
+@use "../../styles/mixin" as mixin;
+
+.input {
+  @include mixin.defaultInput;
+}