회원가입 컴포넌트 생성하기

미리보기

아이디, 비밀번호, 비밀번호 확인이 있는 회원가입 화면입니다.

 

회원가입 컴포넌트 생성

회원가입 컴포넌트를 만들기 위해 Signup.jsx파일을 생성해줍니다.

스타일을 해줄것이기 때문에 Signup.css파일을 불러와주고 Signup 함수를 생성해줍니다.

다른 곳에서 사용할 수 있게 export default로 Signup 함수를 내보내줍니다.

Signup 함수의 컴포넌트 내용으로는 폼 태그가 있고 폼의 내용으로 회원가입 헤더 태그와 아이디, 비밀번호, 비밀번호 확인으로 입력가능한 input 태그, 회원가입 및 뒤로가기 버튼 태그가 있습니다.

import "./Signup.css";

const Signup = () => {

  return (
    <div className="Signup">
      <form className="signup_form">
        <h4>회원가입</h4>
        <input type="text" name="id" placeholder="아이디"/>
        <input
          type="password"
          name="password"
          placeholder="비밀번호"
        />
        <input
          type="password"
          name="password_confirm"
          placeholder="비밀번호 확인"
        />
        <button type="submit">회원가입</button>
        <button type="button">뒤로가기</button>
      </form>
    </div>
  );
};

export default Signup;

스타일 지정

Signup 컴포넌트의 기본적인 요소들을 작성했으니 스타일을 적용해줍니다.

저번에 만들어둔 Login.css의 내용을 복사해서 Signup.css에 복사해주고 Signup 컴포넌트에 맞게 변경시켜줍니다.

.Signup {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.signup_form {
  display: flex;
  flex-direction: column;

  background-color: rgb(236, 236, 236);
  min-width: 400px;
  padding: 30px;
  border: 1px solid rgb(232, 232, 232);
  box-shadow: rgba(100, 100, 100, 0.2) 0px 0px 29px 0px;
  border-radius: 5px;
}

.signup_form > h4 {
  font-size: 20px;
}

.signup_form > input {
  font-size: 15px;

  background-color: #f8fafc;
  color: #0d0c22;

  line-height: 30px;
  margin: 4px 0px;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 5px;
  outline: none;

  transition: 0.5s ease;
}

.signup_form > input::placeholder {
  color: #94a3b8;
}

.signup_form > input:focus,
.signup_form > input:hover {
  outline: none;
  border-color: rgba(129, 140, 248);
  background-color: #fff;
  box-shadow: 0 0 0 5px rgb(129 140 248 / 30%);
}

.signup_form button {
  background-color: rgb(169, 169, 240);
  padding: 12px;
  border-radius: 5px;
  border: 2.5px solid #e0e1e4;
  box-shadow: 0px 0px 0px 0px;
  cursor: pointer;
  transition: all 0.2s ease-in-out 0ms;
  user-select: none;
}

.signup_form button:hover {
  background-color: rgb(203, 203, 245);
}
.signup_form button:active {
  transform: scale(0.95);
}