로그인 페이지에는, 간단한 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;
별거 없는 페이지들, 다 이렇게 만들어줍니다.!
끝!
'메인-프로젝트 > Next.js - 오늘 뭐먹지? 프로젝트' 카테고리의 다른 글
0. 내가 React, Nextjs 를 선택한 이유 (0) | 2022.12.02 |
---|---|
5. DB 연결 with. MongoDB Atlas 그리고 API (0) | 2022.12.02 |
3. Layout 구성하기 (0) | 2022.12.02 |
2. 메인 페이지 만들기 (0) | 2022.12.02 |
1. project 를 해석해 봅시다. (0) | 2022.12.02 |
댓글