[ToyProject-Todomate] 투두메이트 클론 프로젝트 10

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

 

오늘은 로그인 화면을 구현해본다.

 

어제 작업한 라우터를 통해 /signin 경로로 들어간다.

 

 

로그인 화면은 기본적으로 입력할 수 있는 input 태그와 입력한 값을 전송하는 button으로 이루어져 있고, 이들을 form 태그로 감싸야 한다.

 

 

 

1. input 태그 2개 넣기

 

MUI 컴포넌트에서 입력을 할 수 있는 input 태그와 같은 텍스트필드 컴포넌트를 화면에 넣어본다.

두 개의 input 태그 중 한 가지는 password이기 때문에 password와 관련된 컴포넌트를 찾아서 사용해본다.

 

 

위의 password가 마음에 들어서 해당 코드를 찾아 Signin 컴포넌트에 붙여 넣었다.

 

 

<TextField
  id="standard-password-input"
  label="Password"
  type="password"
  autoComplete="current-password"
  variant="standard"
/>

 

 

여기서 TextField 라는 컴포넌트가 필요하기 때문에 자동완성을 통해 상단에 import 될 수 있도록 해줬다.

그럼 이 TextField의 id와 label 등을 설정하면 email도 만들 수 있지 않을까?

<form> 태그를 최상단 컴포넌트로 해서 TextField 컴포넌트를 두 개 연속으로 삽입했다.

 

 

import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { TextField } from '@mui/material';

function Signin(){

    return (
    <form>
    <TextField
        id="standard-email-input"
        label="Email"
        type="email"
        autoComplete="current-email"
        variant="standard"
      />
      <TextField
        id="standard-password-input"
        label="Password"
        type="password"
        autoComplete="current-password"
        variant="standard"
      />
      </form>)

}

export default Signin;

 

 

여기서 TextField의 props들을 주어서 여러가지 형태를 만들 수 있다

가장 큰 형태를 설정하는 것은 variant props인데 아래의 그림과 같다. 내가 선택한 것이 Standard 타입이다.

 

 

 

그리고 나는 화면에 거의 가득한 input영역을 만들고 싶기 때문에 fullWidth props를 넣어준다.

그럼 최상단 form의 크기에 맞게 가득 차게 된다. CSS를 이용해 form 크기를 잡아준다.

margin 값은 margin props를 이용한다.

그리고 HelperText라는 props를 이용해 placeholder 대신에 하단에 설명을 띄워준다.

 

 

import React from 'react';
import '../stylesheets/Signin.css';
import { TextField } from '@mui/material';

function Signin(){

    return (
    <form>
    <TextField
        id="standard-email-input"
        label="Email"
        type="email"
        autoComplete="current-email"
        variant="standard"
        helperText="Please enter Email"
        margin="dense"
        fullWidth 
      />
      <TextField
        id="standard-password-input"
        label="Password"
        type="password"
        autoComplete="current-password"
        variant="standard"
        helperText="Please enter Password"
        margin="dense"
        fullWidth 
      />
      </form>)

}

export default Signin;

 

이렇게 작성할 수 있고 구현된 화면은 아래와 같다.

 

아주 그럴싸하군

 

 

2. 버튼과 form 기능을 위해 React-Hook-Form 설치

 

하단에 버튼을 이용해 form 제출을 해야 한다.

생각해보니 React-Hook-Form 이라는 3rd Party 기능을 사용하기로 해서 React-Hook-Form에서 코드를 가지고 오기로 했다.

 

npm install react-hook-form 을 이용해 react-hook-form을 설치한다.

그리고 예제와 같이 hook 을 입력해준다.

 

그리고 submit 버튼과 비밀번호를 잊었다면? 을 구현해주고

todomate 의 로그인 화면과 같게 placeholder를 한국어로 바꿔주면 아래와 같은 화면이 나온다.

(별도로 CSS도 import)

 

코드는 하단에!

 

 

 

 

import React from 'react';
import { useState } from "react";
import { useForm } from "react-hook-form";
import '../stylesheets/Signin.css';
import { TextField } from '@mui/material';
import { Link } from 'react-router-dom';

function Signin(){

    const { register, handleSubmit } = useForm();
    const [result, setResult] = useState("");
    const onSubmit = (data) => setResult(JSON.stringify(data));
  

    return (
    <form onSubmit={handleSubmit(onSubmit)}>
    <TextField
    {...register("Email")} 
        id="standard-email-input"
        label="이메일"
        type="email"
        autoComplete="current-email"
        variant="standard"
        helperText="Please enter Email"
        margin="dense"
        fullWidth 
      />
      <TextField
       {...register("Password")} 
        id="standard-password-input"
        label="비밀번호"
        type="password"
        autoComplete="current-password"
        variant="standard"
        helperText="Please enter Password"
        margin="dense"
        fullWidth 
      />
      <input className="login_btn" type="submit" value={"로그인"}/>
      <Link to="/"><p className='forgotPwd'>비밀번호를 잊었다면?</p></Link>
      </form>)

}

export default Signin;