[회원가입] 정규 표현식과 아이디 일치 불일치

React

import axios from "axios";
import { useState, useEffect } from "react";

function Join() {
//정규표현식 useState
 	const [id, setId] = useState('');
//중복 id useState
    const [validId, setValidId] = useState(false);
    
// ID의 정규식 표현:첫글자는 영문 대소문자이며, 나머지는 영문 대소문자, 숫자, 밑줄이 가능하고
//총 4~16글자이다.
    const ID_REG = /^[a-zA-Z][a-zA-Z0-9-_]{3,15}$/;
    
 // 정규표현식 일지하는지 검사
    const setIdInfo = (e) => {

        let id = e.target.value;
        setId(id);
        const reg = new RegExp(ID_REG);
        let checkReg = reg.test(id) ? true : false;
        console.log(checkReg);
        if (checkReg) {
            console.log("정규표현식 일치")
            document.getElementById("regTrue").setAttribute("style", "display:show; color: lightGreen;")
            document.getElementById("regFalse").setAttribute("style", "display:none; color: red;")
        }
        if (!checkReg) {
            console.log("정규표현식 불일치")
            document.getElementById("regFalse").setAttribute("style", "display:show; color: red;")
            document.getElementById("regTrue").setAttribute("style", "display:none; color: lightGreen;")
        }

    }
  
  //정규 표현식: 아이디를 입력할 때마다, 정규표현식 검사
      useEffect(() => {
        const result = ID_REG.test(id);
        setValidId(result);
    }, [id])
    
 // 사용 가능한 아이디인지 검사
    const CheckId = (e) => {
        e.preventDefault();
        const formData = new FormData();

        formData.append('id', id)
        axios.post('/login', formData)
            .then((res) => {
                if (res.data === false) {
                    alert("사용 가능한 아이디 입니다.");
                }
                else if (res.data === true) {
                    alert("중복되는 아이디 입니다.")
                }
            }).catch((error) => {
                // alert("중복되는 아이디 입니다.")
                console.log("Error")
            })

    };
    
return (
    <form>
        <section>
            {/* 아이디 */}
            <div>
                <label htmlFor="id">ID</label>
                <input type="text" name="id" id="id" placeholder="id" value={id} onChange={setIdInfo} required />
                <button className="idCheckBtn" onClick={CheckId} >중복 확인</button>

                <p>
                    <span id="regTrue" style={{ display: "none" }}><b>사용 가능한 아이디 입니다.</b></span>
                    <span id="regFalse" style={{ display: "none" }}><b>첫글자는 영문 대소문자이고 영문 대소문자, 숫자, 밑줄이 가능하고 총 4~16글자여야 합니다.</b></span>
                </p>

            </div>                
                <div>
                    <button className="joinBtn">
                        Join
                    </button>
                </div>
            </section>
        </form>
    )
};

export default Join;

 

 

SpringBoot

//entity 패키지는 생략

import lombok.*;
import javax.persistence.*;

@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
@ToString
@Entity
public class User {
    @Id
    private String id;
    }

//repository 임포트는 생략

public interface JoinRepository extends JpaRepository<User,String> {
}

//controller 임포트는 생략

@RestController
public class JoinController {
    @Autowired
    JoinService joinservice;

    @PostMapping("/login")
    public ResponseEntity<Boolean> isExistById(String id) {
        ResponseEntity<Boolean> res = null;
        try{
            Boolean result = joinservice.existsById(id);
//            Boolean result2 = !result1;
            System.out.println("중복 결과 : "+result);
                res = new ResponseEntity<Boolean>(result, HttpStatus.OK);


        } catch (Exception e){
            res = new ResponseEntity<Boolean>(HttpStatus.BAD_REQUEST);

        }
        return res;
    }

//service

@Service
public class JoinService {

    @Autowired
    UserRepository userrepository;

    public Boolean existsById(String id) throws Exception {

        boolean checkId = userrepository.existsById(id);
        System.out.println(checkId);

        return checkId;
    }