admin[user] / 회원가입 페이지/ 회원가입 입력 조건 기재 필요.

[JungYoungSick]

현재 회원가입 시 조건에 대한 기재 내용이 없다. 회원 가입을 진행하기 위해선 사용자가 조건대로 입력 할 수 있도록 안내 표지가 있어야 한다.

• 회원 가입 유효성 검사 : name, username, password, email, phone number
  • name : type : ‘string’ , 띄어쓰기 금지
  • username(ID) : 6~12글자, 영문, 숫자 포함, 특수문자 제한, 중복금지
  • password : 8~20글자, 영문 + 숫자 +특수문자 필수포함
  • email : “@”, “.” 필수 포함 , 편의성을 위해 토글 기능
  • address : 조건 없음
  • phone-number : “-” 있어야 함, 숫자만 가능, ‘000-0000-0000’ 양식
  • 

[JungYoungSick]

admin과 user페이지는 작업 완료했으나 CSS가 아쉬운 부분이 있어 추후 수정이 필요 할 것 같다. 현재 중복검사 버튼은 있으나 기능은 아직 활성화 하지 않았다.

[JungYoungSick]

return (
    <div className="flex flex-col justify-center items-center h-screen">
      <h1 className="mb-10 text-3xl font-bold">회원가입 페이지</h1>
      <form className="w-full max-w-md" onSubmit={handleJoin}>
        <div className="mb-6 flex flex-col">
          <div className="relative mb-4 flex items-center">
            <div className="w-full">
              <input
                className={`w-full border p-2 ${
                  !validation.isValidName ? "border-red-500" : "border-black"
                }`}
                type="text"
                value={formData.name}
                name="name"
                placeholder="이름"
                onChange={handleInputChange}
                // required //! 활성화 시 사용자 오류 미출력
              />
              {validation.isValidName ? null : (
                <p className="text-red-500 text-xs mt-1">이름을 확인하세요</p>
              )}
            </div>
          </div>
          <div className="relative mb-4 flex items-center">
            <div className="w-full">
              <input
                className={`w-full border p-2 ${
                  !validation.isValidUsername
                    ? "border-red-500"
                    : "border-black"
                }`}
                type="text"
                value={formData.username}
                name="username"
                placeholder="아이디"
                onChange={handleInputChange}
                // required //! 활성화 시 사용자 오류 미출력
              />
              {!validation.isValidUsername && (
                <p className="text-red-500 text-xs mt-1">
                  6~12글자, 영문, 숫자로 작성하세요 (특수문자 제한)
                </p>
              )}
            </div>
            <button
              type="button"
              onClick={checkUsername}
              className="bg-blue-500 text-white py-0 px-4 rounded ml-2"
            >
              중복조회
            </button>
          </div>
          <input
            className={`w-full border p-2 mb-4 border-black ${
              !validation.isValidPassword ? "border-red-500" : ""
            }`}
            type="password"
            value={formData.password}
            name="password"
            placeholder="비밀번호"
            onChange={handleInputChange}
          />
          {!validation.isValidPassword && (
            <p style={{ color: "red", fontSize: 10 }}>
              8~20글자, 영문,숫자,특수문자로 작성하세요
            </p>
          )}
          <input
            className={`w-full border p-2 mb-4 border-black ${
              !validation.isValidConfirmPassword ? "border-red-500" : ""
            }`}
            type="password" // 추가: 비밀번호 필드로 변경
            value={formData.confirmPassword}
            name="confirmPassword"
            placeholder="비밀번호 확인"
            onChange={handleInputChange}
          />
          {!validation.isValidConfirmPassword && (
            <p style={{ color: "red", fontSize: 10 }}>
              비밀번호가 일치하지 않습니다
            </p>
          )}
          <div className="relative mb-4 flex items-center">
            <div className="w-full">
              <input
                className={`w-full border p-2 ${
                  !validation.isValidEmail ? "border-red-500" : "border-black"
                }`}
                type="text"
                value={formData.email}
                name="email"
                placeholder="이메일"
                onChange={handleInputChange}
                // required //! 활성화 시 사용자 오류 미출력
              />
              {validation.isValidEmail ? null : (
                <p className="text-red-500 text-xs mt-1">
                  이메일을 다시 확인 후 입력해주세요
                </p>
              )}
            </div>
          </div>
          <input
            className={`w-full border p-2 ${
              !validation.isValidPhoneNumber ? "border-red-500" : "border-black"
            }`}
            type="text"
            value={formData.phoneNumber}
            name="phoneNumber"
            placeholder="전화번호"
            onChange={handleInputChange}
            // required //! 활성화 시 사용자 오류 미출력
          />
          <div className="w-full">
            {validation.isValidPhoneNumber ? null : (
              <p className="text-red-500 text-xs mt-1">
                " - "를 사용하여 작성해주세요.
              </p>
            )}
          </div>
          <div className="relative flex items-center">
            <div className="w-full">
              <div className="flex justify-end">
                <Addr onAddressSelect={handleAddressSelect} />
              </div>
              <input
                className="w-full border p-2 mb-4 border-black"
                type="text"
                value={formData.address}
                name="address"
                placeholder="주소"
                onChange={handleInputChange}
                // required //! 활성화 시 사용자 오류 미출력
              />
              <input
                className="w-full border p-2 border-black"
                type="text"
                value={formData.detailedAddress}
                name="detailedAddress"
                placeholder="상세주소"
                onChange={handleDetailedAddressChange}
              />
              <div className="relative mb-4 flex items-center"></div>
            </div>
          </div>
        </div>
        <button
          type="submit"
          className="bg-green-500 text-white py-2 px-4 rounded mt-4 w-full"
        >
          가입하기
        </button>
      </form>
      <Link className="mt-8" href="/login">
        로그인페이지로
      </Link>
    </div>
  );
}