React로 멋진 로그인 페이지 만들기

오늘은 새로운 React Startup을 위한 멋진 로그인 페이지를 쉽게 만드는 방법을 보여드리고 싶습니다!
요리하자!😜

1 단계
다음 명령을 실행하여 새 React 프로젝트를 만듭니다.npx create-react-app login-form
그런 다음 즐겨찾는 IDE에서 새로 만든 앱을 엽니다.

2 단계
이것을 index.html 파일에 추가하십시오:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<div id="root"></div>

3단계App.js 파일에서 모든 보일러 지연 코드를 삭제하고 이 코드를 추가하여 새 React 기능 구성 요소를 만듭니다.

const LoginForm = () => {

return (
   <form class="form">
      <div style={formStyle}>
        <div style={{display: "flex", alignSelf: "flex-start", paddingBottom: 20, fontSize: 30}} class="input">
        Login
      </div>
      </div>
   </form>
);
}

또한 이것을 App.css 파일에 추가하십시오.

.form {
  flex-direction: column;
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

.input {
  font-family: 'Montserrat', sans-serif;
  padding-top: 10;
}

우리는 Montserrat라는 Google 글꼴을 사용할 것입니다.

또한 상수에 스타일 변수를 추가합니다.

const formStyle = {
    flexDirection: "column",
    alignSelf: "center",
    width: "30%",
    display: "flex",
    justifyContent: "space-between",
  }

4단계
사용자 입력을 처리하기 위해 변수와 함수를 추가합니다.

  const [login, setLogin] = useState('');
  const [password, setPassword] = useState('');
  const [hover, setHover] = useState();
  const [remember, setRememeber] = useState(false);

  const handleSubmit = (event) => {
    alert('You have successfully signed in!');
    event.preventDefault();
  }

5단계
로그인 및 비밀번호 입력을 추가합니다.

<label style={{color: "blue"}} class="input">
          Username or Email*:
          </label>
          <input 
            class="input"
            type="text" 
            style={inputStyle} 
            value={login} 
            onChange={(event) => setLogin(event.target.value)}
            placeholder={"[email protected]"}/>

<label class="input" style={{color: "blue"}}>
         Password*:
        </label>
          <input 
            class="input"
            type="password" 
            style={inputStyle} 
            value={password} 
            onChange={(event) => setPassword(event.target.value)}
            placeholder={"Min. 8 characters"}/>

<label> 태그를 사용하여 입력에 대한 레이블을 추가합니다. 비밀번호 입력을 생성하기 위해 입력 유형을 "비밀번호"로 지정합니다.

또한 inputStyle 변수를 생성하여 입력에 대한 스타일을 추가합니다.

const inputStyle = {
    padding: 8,
    borderRadius: 15,
    borderWidth: 1,
    margin: 5,
    backgroundColor: "#f5f5f5",
    borderColor: "#d2d2d4",
  }

6단계
또한 사용자가 기억하고 싶은지 여부를 결정하고 Forgot Password? 링크를 추가할 수 있는 확인란을 만들 것입니다.

<div style={{flexDirection: "row", display: "flex", justifyContent: "space-between", height: "100", padding: 5}}>
          <div style={{flexDirection: "row", display: "flex", justifyContent: "space-between"}}>
            <input 
              type="checkbox"
              checked={remember}
              onChange={() => setRememeber(prev => !prev)}/>
          <label>
          <div class="input" style={{fontSize: 12, justifyContent: "flex-start"}}>
            Rememeber me?
        </div>
        </label>
          </div>

          <div style={{justifyContent: "flex-end", display: "flex"}}>
            <a  href="#" class="input" style={{fontSize: 12}}>Forgot password?</a>
          </div>
        </div>

7단계
결국 제출 버튼을 추가합니다.

<div style={{justifyContent: "center", display: 'flex', bakgroundColor: "red", width: "100%"}}>
      <input type="submit" value="Sign In" 
        id="button"
        class="input"
        onMouseOver={handleMouseIn} onMouseOut={handleMouseOut}
          style={ hover ? hoverStyle : btnStyle}
          />

또한 버튼 동작을 처리하기 위해 두 가지 기능을 추가해야 합니다.

const handleMouseIn = () => {
    setHover(true);
  };

  const handleMouseOut = () => {
    setHover(false);
  };

그리고 버튼의 스타일링:

const hoverStyle = {
    margin: 5, padding: 8, borderRadius: 15, width: "100%",
    backgroundColor: "white",
    color: "blue",
    borderWidth: 1,
    borderColor: "blue",
  }

  const btnStyle = {
    margin: 5, padding: 8, borderRadius: 15, width: "100%",
    backgroundColor: "blue",
    color: "white",
    borderWidth: 0
  }

그게 다야! 결국 비슷한 페이지를 볼 수 있어야 합니다.


이 튜토리얼이 마음에 드셨기를 바라며 읽어주셔서 감사합니다!😊