롯데월드 클론코딩(react) - 로그인, 회원가입

원래 롯데월드 클론 코딩은 리액트 맛보기를 위해 메인 페이지만 작업하려 했으나 작업하는 도중 로컬 스토리지를 배웠기 때문에 이걸 이용해서 회원가입에서 입력된 유저 정보를 로컬 스토리지에 저장해 보는 작업을 해보기로 했다.

우선 회원가입 페이지만 만들면 구성이 좀 이상해 보여서 로그인 페이지도 만들었다. 물론 아무런 기능은 없다.
헤더와 푸터를 컴포넌트로 만들었는데 잘 나오는 거 같다.

회원가입 페이지는 목표가 유효성 검사/로컬 스토리지에 가입된 유저 정보 저장이라는 목표로 시작했다.

아이디 유효성 검사

const [userId, setUserId] = useState(''); // 사용자 ID 상태
  const [idValue, setidValue] = useState(false); // 유효성 검사 결과 상태
  const idInputCheck = function(item) { 
    const idValue = item.target.value; // 입력된 값
    setUserId(idValue); // 상태 업데이트: 사용자 ID

    // 아이디 정규표현식 정의
    const idRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/;

    // 입력 값 유효성 검사
    if (idRegex.test(idValue)) {
      setidValue(false); // 숫자로 시작하는 경우 유효하지 않음
    } else {
        // 입력 값 유효성 검사
        if (idRegex.test(idValue)) {
            setidValue(true); // 유효성 검사 결과 업데이트: 유효함
        } else {
            setidValue(false); // 유효성 검사 결과 업데이트: 유효하지 않음
        }
    }
  };
  
  
// -------------------------------------------------------------------------- //
  
  
<div>
    <div className="exists-btn">
      <span className="inp-box">
        <input
        type="text"
        name="id"
        placeholder="아이디를 입력하세요."
        className="user-id"
        value={userId || ''}
        onChange={idInputCheck}
        autoComplete="off"
        />
      </span>
      <button
        type="button"
        disabled={!idValue}
      >
        중복확인
      </button>
    </div>
	<p className={idValue ? 'writing-guide check' : 'writing-guide uncheck'}>영문+숫자 8~16자리</p>
</div>

 

아이디 정규식에 따라 idValue가 true/false가 설정된다.
입력된 값에 따라 유효성 검사가 진행되고 조건에 충족해야만 idValue가 true를 받아낸다.
그리고 true를 받아내야 아이디 중복 확인 버튼을 누를 수 있게끔 만들었다.

 

비밀번호 유효성 검사

const [userPw, setUserPw] = useState('');
const [pwValue, setPwValue] = useState(false);
const pwinputCheck = function(item){
	const pwValue = item.target.value; // 입력된 값
	setUserPw(pwValue); // 상태 업데이트: 사용자 password

    const pwRegex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[a-zA-Z\d!@#$%^&*]{8,16}$/;

    if ( pwRegex.test(pwValue) ) {
      setPwValue(true);
    } else {
      setPwValue(false);
    }
}
  
  
// -------------------------------------------------------------------------- //
  
  
<div>
    <span className="inp-box">
        <input
        type="password"
        name="password"
        placeholder="비밀번호를 입력하세요."
        className="password"
        value={userPw || ''}
        onChange={pwinputCheck}
        />
    </span>
    <p className={pwValue ? 'writing-guide check' : 'writing-guide uncheck'}>
    	영문+숫자+특수문자 8~16자리 [사용가능 특수문자: !,@,#,$,%,^,&,*]
    </p>
</div>

비밀번호 정규식에 따라 pwValue가 true/false가 설정된다.
입력된 값에 따라 유효성 검사가 진행되고 조건에 충족해야만 pwValue가 true를 받아낸다.

 

뭐.. 각각의 유효성 검사에 대한 조건이 다르고 미세하게 다른 부분들이 조금 있지만 거의 대부분 비슷한 방식으로 만들었다고 생각하면 될 것 같다.

 

인증번호 유효성 검사

// 인증번호 6자리 제한
const [userCerf, SetUserCerf] = useState();
const [cerfValue, setCerfValue] = useState(false);
const cerfCheck = function(item) {
    const cerfValue = item.target.value;
    SetUserCerf(cerfValue);

    // 최대 6자리까지만 유지
    if (cerfValue.length >= 6) {
      SetUserCerf(cerfValue.slice(0, 6));
      setCerfValue(true);
    } else {
      setCerfValue(false);
    }
};
  
  
<input
    type="number"
    name="certification"
    className="userCertification"
    placeholder="인증번호를 입력하세요."
    value={userCerf || ''}
    onChange={cerfCheck}
    disabled={!phone1Value || !phone2Value}
/>

여긴 유효성 검사라고 할 것도 없긴 하다. 그냥 <input type="number">에 대한 내용을 적으려는 것뿐이다. 왜냐면 이번에 알았으니까...
인증번호 영역은 그냥 input maxlength="6"을 넣고 6자리 제한하면 되겠지라고 생각했다.
그런데 작업해 보니 maxlength가 왜 안 먹는 거야 왜...
그래서 GPT한테 물어봤는데

뭐.. 이렇단다....
어쨌든 이걸 해결하기 위해서 방법을 물어봤는데 slice를 사용해서 입력한 값 중 인덱스 번호 0번에서 4번째 까지는 남기고 그 이후 작성되는 것들은 잘려나가는 방법을 알려줬다.
slice는 사용해 본 김에 기억할 겸 한번 올려본다.

 

약관동의

// 약관동의 체크박스 상태를 관리
const [termsAllCheck, setTermsAllCheck] = useState(false); // 전체 동의 체크박스 상태
const [termsService, setTermsService] = useState(false); // 서비스 이용 약관 체크박스 상태
const [termsPrivacy, setTermsPrivacy] = useState(false); // 개인정보 수집 및 이용 체크박스 상태
const [termsRealname, setTermsRealname] = useState(false); // 실명 인증 체크박스 상태
const [termsLocation, setTermsLocation] = useState(false); // 위치기반 서비스 이용 약관 체크박스 상태

// useEffect를 사용하여 각각의 개별 약관 체크박스 상태가 변경될 때마다 checkAllChecked 함수를 실행
useEffect(function(){
	checkAllChecked();
}, [termsService, termsPrivacy, termsRealname, termsLocation]);

// "전체 동의하기" 체크박스 클릭을 처리하는 함수
const handleAllCheck = function(){
    const newState = !termsAllCheck; // termsAllCheck 상태를 토글
    setTermsAllCheck(newState); // termsAllCheck 상태 업데이트
    // 모든 개별 약관 체크박스의 상태를 newState에 맞게 업데이트
    setTermsService(newState);
    setTermsPrivacy(newState);
    setTermsRealname(newState);
    setTermsLocation(newState);
}

// 개별 약관 체크박스 클릭을 처리하는 함수
const handleSingleCheck = function(checkbox){
    switch (checkbox) {
      case 'termsService':
        setTermsService(!termsService); // termsService 체크박스를 토글
        break;
      case 'termsPrivacy':
        setTermsPrivacy(!termsPrivacy); // termsPrivacy 체크박스를 토글
        break;
      case 'termsRealname':
        setTermsRealname(!termsRealname); // termsRealname 체크박스를 토글
        break;
      case 'termsLocation':
        setTermsLocation(!termsLocation); // termsLocation 체크박스를 토글
        break;
      default:
        break;
    }
}

// 모든 개별 약관 체크박스가 체크되었는지 확인하고, 이에 따라 전체 동의 체크박스 상태를 업데이트하는 함수
const checkAllChecked = function(){
    if (termsService && termsPrivacy && termsRealname && termsLocation) {
      setTermsAllCheck(true); // 모두 체크되어 있으면 전체 동의 체크박스도 체크
    } else {
      setTermsAllCheck(false); // 하나라도 체크되어 있지 않으면 전체 동의 체크박스도 체크 해제
    }
}

약관 동의는 조건이 생각보다 까다로웠다.
전체 동의 체크 여부에 따라 개별 체크가 전체적으로 on/off가 되는 기능
개별 체크가 1개라도 off가 되면 전체 동의 체크도 off가 되는 걸 만들고 싶은데 이게 너무 어려웠다.

 

우선 전체 동의에 체크를 토글 하는 걸 만들고 전체 동의 상태에 따라 개별 체크들도 같이 토글 하는 기능을 만들었다 그리고 개별 체크의 상태에 대한 전체 체크 상태를 변화하는 함수를 만들었다. 그리고 그 상태를 동작할 때마다 감지하기 위해 useEffect를 사용했다.

 

 

솔직히 이곳의 전체적인 코드들은 GPT가 짜줬다. 나는 그냥 설명을 어떻게든 끄집어 내서 하고 있을 뿐이다. 맞는지도 모르겠다.
앞서 말했다시피 리액트를 한번 맛보기 위해 한 건데 너무 모른다 싶을 정도로 심각한 수준인 거 같다.
그리고 이 유효성 검사에 대한 부분을 내가 자바스크립트에서는 할 수 있었나??라는 생각이 든다. 너무 앞서 나가려고 하는 거 같다. 또 로컬 스토리지는 심지어 작업하다가 너무 지쳐서 우선 여기서는 포기하기로 했다. 그리고 자바스크립트로만 다시 만들어 보려고 한다.

 

어쨌든 리액트 맛보기는 해본 거 같다. 리액트를 더 공부해서 다시 만들어보겠다는 다짐으로 마무리하려 한다.