회원 가입 로직 변경 및 로그 삽입과 리팩토링

백엔드 단 중복 이메일과 닉네임 로직 생성

이메일과 닉네임 중복 체크를 위한 상태들과 input 값들의 유효성을 체크하는 리액트 userForm 코드

회원가입 클릭시 중복 체크를 관리하는 상태들을 확인하고 회원가입 redux 디스패치 호출 후 0.5 초후 로그인 페이지로 라우팅

중복을 체크하는 onclick 함수들

유효성을 확인하는 상수 들과 비밀번호와 비밀번호 확인이 같은지 실시간으로 체크하는 useEffect

 return (
    <section className="flex flex-col justify-center m-3  max-w-[400px]">
      <div className=" bg-white rounded-md board">
        <img
          className="mx-auto my-2 w-40 h-15"
          style={{ marginBottom: "3rem" }}
          src={`${process.env.NEXT_PUBLIC_SERVER_URL}/public/BBC_logo.png`}
          alt="BBC 로고"
        />

        <div className="ml-10 mb-5">
          <h1 className="text-lg">
            <span className="font-bold">건물별 소통</span>해보세요.
          </h1>

          <h1 className="text-lg ">
            <span className="font-bold">중고거래</span>와{" "}
            <span className="font-bold">공동구매</span> 더불어{" "}
            <span className="font-bold">친구</span>까지
          </h1>
        </div>

        <form onSubmit={handleSubmit(onSubmit)}>
          <h1 className="mb-1 font-semibold ">대학교</h1>
          <select
            id="university"
            className="  border mb-3 border-gray-300 rounded "
            {...register("university", useruniversity)}
          >
            <option value="광운대학교">광운대학교</option>
            <option value="영철대학교">영철대학교</option>
            <option value="호그와트">호그와트</option>
            <option value="서울대학교">서울대학교</option>
            <option value="연세대학교">연세대학교</option>
            <option value="고려대학교">고려대학교</option>
            <option value="하버드대학교">하버드대학교</option>
            <option value="스텐퍼드대학교">스텐퍼드대학교</option>
          </select>

          <div className="mb-3">
            <label htmlFor="name" className="font-semibold  text-gray-800">
              닉네임
            </label>
            <div className="flex item-center">
              {" "}
              <div>
                {" "}
                <input
                  placeholder="닉네임을 입력해주세요."
                  type="nickName"
                  id="nickName"
                  className=" px-4 py-2 mt-1 text-sm border bg-white rounded-md mr-2 flex-grow"
                  {...register("nickName", usernickName)}
                ></input>
              </div>
              <button
                type="button"
                onClick={nickNameCheck}
                className=" px-4 py-2 mt-1 text-white duration-200 text-sm bg-black rounded-md  hover:bg-gray-700 "
              >
                중복 체크
              </button>{" "}
            </div>
            {errors?.nickName && (
              <div>
                <span className="text-red-500 px-2 py-2 mt-1 text-sm  ">
                  {errors.nickName.message}
                </span>
              </div>
            )}{" "}
          </div>

          <div className="mb-3">
            <label //입력 요소와 텍스트를 연결하는 데 사용 되는 label 태그
              htmlFor="email" //htmlFor 속성은 레이블이 연결된 입력 요소의 ID를 지정
              className=" font-semibold text-gray-800"
            >
              이메일
            </label>

            <div className="flex items-center">
              {" "}
              <div>
                {" "}
                <input
                  placeholder="이메일을 입력해주세요."
                  type="email"
                  id="email"
                  className=" px-4 py-2   text-sm mt-1 border bg-white mr-2 rounded-md flex-grow" //px 외부 여백 py 내부 여백 상하좌우
                  {...register("email", userEmail)} //register() 함수의 반환값은 객체이기 때문에 ... 사용 첫번째 인자는 type
                ></input>
              </div>
              <button
                type="button"
                onClick={emailCheck}
                className=" px-4 py-2 mt-1 text-sm text-white duration-200 bg-black rounded-md  hover:bg-gray-700 "
              >
                중복 체크
              </button>
            </div>

            {errors?.email && (
              <div>
                <span className="text-red-500 px-2 py-2 mt-1 text-sm">
                  {errors.email.message}
                </span>
              </div>
            )}
          </div>

          <div className="mb-3">
            <label htmlFor="password" className="font-semibold text-gray-800">
              PW1(비밀번호)
            </label>
            <input
              placeholder="영어와 숫자 조합으로 4글자 이상으로 입력해주세요."
              type="password"
              id="pasword"
              className="w-full px-4 py-2 mt-1 border text-sm bg-white rounded-md"
              {...register("password", userPassword)}
            ></input>
            {errors?.password && ( //? 는 옵셔널 체크 연산자, password 라는 속성이 없으면 undefined
              <div>
                <span className="text-red-500 px-2 py-2 mt-1 text-sm">
                  {errors.password.message}
                </span>
              </div>
            )}
          </div>

          <div>
            <label
              htmlFor="passwordcheck"
              className="text-sm font-semibold text-gray-800"
            >
              PW2(비밀번호 확인)
            </label>
            <input
              placeholder="비밀번호 확인"
              type="passwordcheck"
              id="passwordcheck"
              className="w-full px-4 py-2  text-sm mt-2 border bg-white rounded-md"
              {...register("passwordCheck", userPasswordCheck)}
            ></input>
            {errors?.passwordCheck && ( //? 는 옵셔널 체크 연산자, password 라는 속성이 없으면 undefined
              <div>
                <span className="text-red-500 px-2 py-2 mt-1 text-sm">
                  {errors.passwordCheck.message}
                </span>
              </div>
            )}
          </div>

          <div className="mt-6">
            <button
              type="submit" //duration hover시 색상 애니이션 지속시간
              className="w-full px-4 py-2 text-white duration-200 bg-black  hover:bg-gray-700 "
            >
              회원가입
            </button>
          </div>
        </form>
      </div>
    </section>
  );
}