내일배움캠프 최종 프로젝트 - 로그인과 회원가입 (9)

회원가입페이지에 약관 동의가 필요해서 맨처음 텍스트를 만들었다.

약관 동의 여부를 확인하는 체크박스와 관련 메시지를 표시하는 기능을 RenderStepJoin 컴포넌트의 case 1에 추가함

const renderStep = () => {
    switch (step) {
      case 1:
        return (
          <div className="mt-[20px] w-[400px]">
            {/* 체크박스 */}
            <div>
              <TermsModal />
              <label className="flex items-center pt-[8px]">
                <Checkbox checked={isAgreedToTerms} size="lg" onChange={e => setIsAgreedToTerms(e.target.checked)} />
                <span className="text-lg">약관에 동의합니다.</span>
              </label>
            </div>
            {termsCheck && <p className="text-red-500 mt-[25px] text-center">{termsCheck}</p>}
            <Button
              className="mt-[20px] w-full bg-[#0051FF] text-white"
              size="lg"
              onClick={() => {
                if (validate()) moveToNextStep();
              }}
              type="button"
            >
              다음
            </Button>
          </div>
        );

사용자가 약관에 동의하지 않았을 경우, termsCheck 상태를 통해 적절한 경고 메시지를 표시함

 const validate = (): boolean => {
    // isVaild는 각 단계에서 입력값의 유효성을 나타낼때 사용함
    let isValid = true;

    if (step === 1 && !isAgreedToTerms) {
      setTermsCheck('약관에 동의하셔야 회원가입이 가능합니다.');
      return false; // 약관에 동의하지 않았으므로 유효하지 않음
    } else {
      setTermsCheck(''); // 약관 동의했으므로 메시지 초기화
    }

오늘의 한줄평 : 천리길도 한걸음 부터, 역시 개발은 재미있다..