4. 로그인, 회원가입 페이지 생성

로그인 페이지에는, 간단한 Form 만 작성합니다.

 

필요한 것은, Email, Password, 정도만 필요하기 때문에 간단하게 만들어줍니다.

 

후에, useState나, useRef 로 값들을 상태에 넣어,

 

fetch 를 통해, 자체 API 에 요청하여. DB 안에 넣을 것입니다.

 

로컬 파일 내에, USERINFO 를 저장하면, 해킹의 위험이 있습니다.

 

import styles from "./login-form.module.css";

import Link from "next/link";

import { useRef, useState } from "react";

function LoginForm() {

  const emailRef = useRef();

  const passwordRef = useRef();

  const router = useRouter();

  return (

    <div className={styles.maindiv}>

      <form className={styles.loginform}>

        <h1> 로그인</h1>

        <div onClick={closeNotification}>

          {message && <Notification message={message} state={status} />}

        </div>

        <div>

          <label htmlFor="email">이메일을 입력하세요</label>

          <input type={"email"} id={"email"} ref={emailRef} />

        </div>

        <div>

          <label htmlFor="password">패스워드를 입력하세요</label>

          <input type={"password"} id={"password"} ref={passwordRef} />

        </div>

        <div className={styles.buttons}>

          <button onClick={submitHandler}> 제출</button>

          <button type="reset"> 취소 </button>

        </div>

        <div className={styles.checkid}>

          <Link href={"/signup"}>아이디가 없으신가요?</Link>

        </div>

      </form>

    </div>

  );

}

export default LoginForm;

별거 없는 페이지들, 다 이렇게 만들어줍니다.! 

끝!