회원가입 중복확인 및 input disabled하기

서지우·2023년 8월 11일

개인프로젝트(파머스토리)

목록 보기

8/8

id중복확인만들기

AuthControllerApiV1.java

id체크를 넘겨줄 controller를 만들어준다!!

    @PostMapping("/id/check")
    public ResponseEntity<?> checkId(@RequestParam(value = "id") String id){
        return authServiceApiV1.checkId(id);
    }

AuthServiceApiV1.java

id를 처리해주는 service를 만들어준다.

    public ResponseEntity<?> checkId(String id) {
        if(id == null || id.equals("")) {
            return new ResponseEntity<>(
                ResponseDTO.builder()
                .code(1)
                .message("아이디를 입력해주세요")
                .build(),HttpStatus.BAD_REQUEST
            );
        } else if (userRepository.existsById(id)) {
            return new ResponseEntity<>(
                    ResponseDTO.builder()
                            .code(1)
                            .message("이미 존재하는 아이디입니다.")
                            .build(),
                    HttpStatus.BAD_REQUEST);
        } else {
            return new ResponseEntity<>(
                    ResponseDTO.builder()
                            .code(0)
                            .message("사용가능한 아이디입니다.")
                            .build(),
                    HttpStatus.OK);
        }
    }

join.html

스크립트를 작성해준다.

    // id중복확인
    const checkId = () => {
        const idEl = document.querySelector("#id").value;

        // const formData = new URLSearchParams();
        // formData.append("id", idEl);

        fetch("/api/v1/auth/id/check?id=" + idEl , {
            method: "POST",
        })
        .then((response) => response.json())
        .then((result) => {
            alert(result.message);
            if (result.code === 0) {
            }
        })
    }

만든함수를 button에 넣어준다.

                <button onclick="checkId()" type="button" class="checkBtn">중복확인</button>

실행해서 보면 db에 있는 아이디로 할 경우 다음과 같이 뜨고

없는 id로 하면 다음과 같이 뜬다.

빈 칸 입력 시 이렇게 된다.

그리고 화면은 못찍었지만 다 입력 후 가입하기를 눌리니 오류가 떴다..

Unique index or primary key violation

h2db랑 mysql이랑 다르기 때문에 data.sql을 변경해줘야 한다.

다른 방법도 있다!
난 그중에 하나 고른 것!
https://velog.io/@youswim96/Unique-index-or-primary-key-violation-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

data.sql

자동증가 때문에 idx를 지워준다.

-- 유저테이블
INSERT INTO `user` (`nickname`, `id`, `password`, `email`, `profile`, `authority`)
VALUES  ('관리자', 'admin', 'admin', 'admin@admin.com', NULL, '3'),
        ('농부', 'farmer', '1234', 'farmer@naver.com', NULL, '1'),
        ('일반인', 'temp', '1234', 'temp@naver.com', NULL, '2');

그럼 회원가입에 성공한다(사진은 못찍음..ㅜㅜ)
h2에도 들어간다.

닉네임 중복확인하기

id하듯이 하면 된다!!

UserRepository.java

repository를 만들어준다.

    // nickname값이 존재하는지
    boolean existsByNickname(String nickname);

AuthControllerApiV1.java

닉네임을 가져올 controller만들기

    @PostMapping("/nickname/check")
    public ResponseEntity<?> checkNickname(@RequestParam(value = "nickname") String nickname){
        return authServiceApiV1.checkNickname(nickname);
    }

AuthServiceApiV1.java

service에서 만들기

    // 이름(닉네임) 중복체크
    public ResponseEntity<?> checkNickname(String nickname) {
        if (nickname == null || nickname.equals("")) {
            return new ResponseEntity<>(
                    ResponseDTO.builder()
                            .code(1)
                            .message("닉네임을 입력해주세요")
                            .build(),
                    HttpStatus.BAD_REQUEST);
        } else if (userRepository.existsByNickname(nickname)) {
            return new ResponseEntity<>(
                    ResponseDTO.builder()
                            .code(1)
                            .message("이미 존재하는 닉네임입니다.")
                            .build(),
                    HttpStatus.BAD_REQUEST);
        } else {
            return new ResponseEntity<>(
                    ResponseDTO.builder()
                            .code(0)
                            .message("사용 가능한 닉네임입니다.")
                            .build(),
                    HttpStatus.OK);
        }
    }

join.html

스크립트를 만들어준다.

    // name중복확인
    const checkNickname = () => {
        const nicknameEl = document.querySelector("#nickname").value;

        fetch("/api/v1/auth/nickname/check?nickname=" + nicknameEl , {
            method: "POST",
        })
        .then((response) => response.json())
        .then((result) => {
            alert(result.message);
            if (result.code === 0) {
            }
        })
    }

이제 실행해보면!!
존재하지 않으면 이렇게 뜬다!

아무것도 안적으면

존재하면 이렇게 된다!!

input disabled만들기

id와 닉네임 중복체크시 사용가능하면 더 이상 입력할 수 없도록 disabled를 만든다.

join.html

    // 중복체크
    document.addEventListener('DOMContentLoaded', () => {
        const idTag = document.querySelector('#id');
        const nicknameTag = document.querySelector("#nickname");
        const idCheckBtnTag = document.querySelector('#idCheckBtn');
        const nicknameCheckBtnTag = document.querySelector('#nicknameCheckBtn');

        // id중복체크
        idCheckBtnTag.addEventListener('click', (event) => {
            const idEl = idTag.value;

            fetch("/api/v1/auth/id/check?id=" + idEl, {
                method: "POST",
            })
            .then((response) => response.json())
            .then((result) => {
                alert(result.message);
                if (result.code === 0) {
                    idTag.disabled = true; // 중복이 아니라면 입력 필드를 비활성화
                }
            });
        });

        // 닉네임중복체크
        nicknameCheckBtnTag.addEventListener('click', (event) => {
            const nicknameEl = nicknameTag.value;

            fetch("/api/v1/auth/nickname/check?nickname=" + nicknameEl, {
                method: "POST",
            })
            .then((response) => response.json())
            .then((result) => {
                alert(result.message);
                if (result.code === 0) {
                    nicknameTag.disabled = true; // 중복이 아니라면 입력 필드를 비활성화
                }
            });
        });
    });