220523 패스트캠퍼스

import React from 'react';
import './App.css';
import { useState } from 'react';

const App = () => {
  const id = React.useRef();
  const pwd = React.useRef();
  const btn = React.useRef();
  let [idWarning,setIdWarning] = useState('');
  let [pwdWarning,setPwdWarning] = useState('');
  
  if(id.current.value.length ==0 || pwd.current.value.length ==0) {
    btn.current.disabled = true;
  }
  

  function idChange(){
    if(id.current.value.length>0 && (id.current.value.length<6 || id.current.value.length>20)){
      setIdWarning('유효하지 않은 id입니다.');
    } else if(id.current.value.length ==0){
      btn.current.disabled = true;
    } else {
      setIdWarning('');
      btn.current.disabled = false;
    }
  };

  function pwdChange() {
    if(pwd.current.value.length>0 && (pwd.current.value.length<12 || pwd.current.value.length>20)){
      setPwdWarning('유효하지 않은 password입니다.');
    } else if(pwd.current.value.length ==0){
      btn.current.disabled = true;
    } else {
      setPwdWarning('');
      btn.current.disabled = false;
    }
  }
  const handleClick = (e) => {
    if(id.current.value.length<6 || id.current.value.length>20){
      alert('유효하지 않은 id입니다.');
      id.current.value = "";
      id.current.focus();
      e.preventDefault();
    }
    if(pwd.current.value.length<12 || pwd.current.value.length>20){
      alert('유효하지 않은 password입니다.');
      e.preventDefault();
      pwd.current.value = "";
      pwd.current.focus();
    } 
    if((id.current.value.length>=6 && id.current.value.length<=20)&&(pwd.current.value.length>=12 && pwd.current.value.length<=20)){
      alert('회원가입 성공!');
    }
    
  };
  return (
  <div>
  <div>
  <input
  ref={id}
  type="text"
  name='id'
  min="6"
  max="20"
  onChange={idChange}
  placeholder='6글자 이상 20글자 이하'
  required
  />
  {idWarning}
  </div>
  <div>
  <input
  ref={pwd}
  type="text"
  name='password'
  min="12"
  max="20"
  onChange={pwdChange}
  placeholder='12글자 이상 20글자 이하'
  required
  />
  {pwdWarning}
  </div>
  <button type="button" ref={btn} onClick={handleClick} disabled={false}>회원가입</button>
  </div>
  );
  }

  export default App;