Mission 2) Login | 로그인 버튼 활성화 (State & Event)

• 입력한 아이디와 비밀번호가 기준에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 해주세요.

• ex. ID - @ 포함 / PW - 5글자 이상

• 삼항 연산자 적용해서 조건에 따라 버튼 색상에 변화를 주시기 바랍니다.

• 위 순서대로 완료 후 Add : Mission 2 - 로그인 버튼 활성화 기능 구현

• commit message를 남긴 후 push 해주세요.

1. 입력한 아이디와 비밀번호가 조건에 맞는 경우에는 로그인 버튼 색상이 활성화 시킬수 있도록 한다

.login-button{
  width:100%;
  height: 30px;
  background-color:#0095f6;
  border-radius:6px;
  border:solid 0px ;
  color:white;
  font-size: 15px;
  margin-top: 10px;
  
}
.login-buttonDisabled{
  width:100%;
  height: 30px;
  background-color: #9aafdb;
  border-radius:6px;
  border:solid 0px ;
  color:white;
  font-size: 15px;
  margin-top: 10px;
}

/*활성화 일때와 비활성화 일때의 css색상을 다르게 하여 만들어놓는다*/

2 ID - @ 포함 / PW - 5글자 이상

• id 값에 @ 포함되어있고 pw값에 5글자 이상이 들어가는 변수(InputValue)를 선언한다

const InputValue = id.includes('@') && pw.length >= 5;

3. 삼항 연산자 적용해서 조건에 따라 버튼 색상에 변화를 준다.

 className={InputValue ? 'login-button' : 'login-buttonDisabled'}

///InputValue가 true면 'login-button' 클래스 실행 false면
//'login-buttonDisabled' 실행

  <button
 className={InputValue ? 'login-button' : 'login-buttonDisabled'}
 onClick={goTomain}
 disabled={InputValue ? false : true}
              >
 //disabled 속성에 InputValue 조건이 충족되지 않으면 버튼이 비활성화 되야하니 ture 쪽에 false의 값을 입력한다.