Feat: create login page

package.json

@@ -19,6 +19,7 @@
     "framer-motion": "^10.16.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.49.2",
     "react-icons": "^4.12.0",
     "react-router-dom": "^6.21.1",
     "recoil": "^0.7.7"
@@ -54,7 +55,7 @@
     "vite": "^5.0.8",
     "vite-plugin-svgr": "^4.2.0"
   },
-    "msw": {
+  "msw": {
     "workerDirectory": "public"
   }
 }

src/components/Auth/Input/Input.module.scss

@@ -0,0 +1,47 @@
+@use "@/sass" as *;
+.container {
+  position: relative;
+
+  label {
+    display: block;
+
+    @include typography(tabLabel);
+    color: $neutral900;
+  }
+
+  &:focus-within {
+    input {
+      outline: none;
+      border-width: 1px;
+      border-color: $primary300;
+    }
+
+    .removeBtn {
+      display: block;
+    }
+  }
+
+  .input {
+    width: 100%;
+    margin-top: 6px;
+    margin-bottom: 24px;
+    padding: 16px;
+    border: 1px solid $neutral200;
+    border-radius: 8px;
+
+    @include typography(bodyLarge);
+    color: $neutral900;
+
+    &::placeholder {
+      color: $neutral400;
+    }
+  }
+
+  .removeBtn {
+    display: none;
+    position: absolute;
+    top: 47px;
+    right: 14px;
+    cursor: default;
+  }
+}

src/components/Auth/Input/InputEmail.tsx

@@ -0,0 +1,44 @@
+import styles from "./Input.module.scss";
+
+import RemoveBtn from "@/assets/icons/removeBtn.svg?react";
+
+import { LoginInput } from "@/types/auth";
+
+function InputEmail({ label, register, dirtyFields, resetField }: LoginInput) {
+  const resetEmail = () => {
+    resetField("email");
+  };
+
+  return (
+    <section className={styles.container}>
+      <label htmlFor="email">{label}</label>
+
+      <input
+        id="email"
+        className={styles.input}
+        type="text"
+        placeholder="이메일 주소를 입력해주세요"
+        {...register("email", {
+          pattern: {
+            value:
+              /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/,
+            message: "이메일 형식이 올바르지 않습니다.",
+          },
+        })}
+      />
+
+      {dirtyFields.email && (
+        <button
+          type="button"
+          className={styles.removeBtn}
+          onClick={resetEmail}
+          tabIndex={-1}
+        >
+          <RemoveBtn className={styles.svg} />
+        </button>
+      )}
+    </section>
+  );
+}
+
+export default InputEmail;

src/components/Auth/Input/InputPassword.tsx

@@ -0,0 +1,48 @@
+import styles from "./Input.module.scss";
+
+import RemoveBtn from "@/assets/icons/removeBtn.svg?react";
+
+import { LoginInput } from "@/types/auth";
+
+function InputPassword({
+  label,
+  register,
+  dirtyFields,
+  resetField,
+}: LoginInput) {
+  const resetPassword = () => {
+    resetField("password");
+  };
+
+  return (
+    <section className={styles.container}>
+      <label htmlFor="password">{label}</label>
+
+      <input
+        id="password"
+        className={styles.input}
+        type="password"
+        placeholder="비밀번호를 입력해주세요"
+        {...register("password", {
+          pattern: {
+            value: /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,16}$/,
+            message: "비밀번호 형식이 올바르지 않습니다.",
+          },
+        })}
+      />
+
+      {dirtyFields.password && (
+        <button
+          type="button"
+          className={styles.removeBtn}
+          onClick={resetPassword}
+          tabIndex={-1}
+        >
+          <RemoveBtn className={styles.svg} />
+        </button>
+      )}
+    </section>
+  );
+}
+
+export default InputPassword;

src/components/Auth/Login/LoginForm.module.scss

@@ -0,0 +1,31 @@
+@use "@/sass" as *;
+
+.container {
+  position: relative;
+
+  small {
+    width: 100%;
+    position: absolute;
+    bottom: 65px;
+    left: 0;
+    text-align: center;
+
+    @include typography(captionSmall);
+    color: $danger300;
+  }
+
+  .submitBtn {
+    width: 100%;
+    padding: 13px 0;
+    background: $primary300;
+    margin-top: 32px;
+    border-radius: 16px;
+
+    @include typography(button);
+    color: $neutral0;
+
+    &:hover {
+      background: $primary400;
+    }
+  }
+}

src/components/Auth/Login/LoginForm.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+import styles from "./LoginForm.module.scss";
+
+import InputEmail from "../Input/InputEmail";
+import InputPassword from "../Input/InputPassword";
+
+import { LoginForm, SubmitResult } from "@/types/auth";
+
+function LoginForm() {
+  const {
+    register,
+    resetField,
+    formState: { errors, dirtyFields },
+  } = useForm<LoginForm>({
+    mode: "onChange",
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const [submitResult, setSubmitResult] = useState<SubmitResult>({
+    try: false,
+    isPassed: false,
+  });
+
+  const clickLogin = () => {
+    setSubmitResult({ ...submitResult, try: true });
+
+    const isError = Object.keys(errors).length > 0;
+    if (isError) {
+      setSubmitResult({ try: true, isPassed: false });
+      return;
+    }
+
+    setSubmitResult({ try: true, isPassed: true });
+
+    // 이메일 비밀번호 validation 성공
+    // 로그인 api 요청
+    /*
+     *
+     *
+     *
+     */
+  };
+
+  return (
+    <form className={styles.container}>
+      <InputEmail
+        label="이메일"
+        register={register}
+        resetField={resetField}
+        dirtyFields={dirtyFields}
+      />
+
+      <InputPassword
+        label="비밀번호"
+        register={register}
+        resetField={resetField}
+        dirtyFields={dirtyFields}
+      />
+
+      {submitResult.try && !submitResult.isPassed ? (
+        <small>이메일 또는 비밀번호를 확인해주세요.</small>
+      ) : null}
+
+      <button className={styles.submitBtn} type="button" onClick={clickLogin}>
+        로그인
+      </button>
+    </form>
+  );
+}
+
+export default LoginForm;