회원가입 기능 구현

회원 가입 화면으로 부터 넘어오는 가입정보를 담을 DTO 객체

@Setter
@NoArgsConstructor
public class MemberFormDto {

    @NotBlank(message = "이름은 필수 입력 값입니다.")
    private String name;
    @NotEmpty(message = "아이디는 필수 입력 값입니다.")
    private String memberId;
    @NotEmpty(message = "비밀번호는 필수 입력 값입니다.")
    @Length(min = 8, max = 16, message = "비밀번호는 8자 이상, 16자 이하로 입력해주세요.")
    private String password;
    @NotEmpty(message = "주소는 필수 입력 값입니다.")
    private int postCode;
    private String address;
    private String additionalAddress;

    @Builder
    public Member toEntity() {
        return Member.builder()
                .name(name)
                .memberId(memberId)
                .password(password)
                .postCode(postCode)
                .address(address)
                .addtionalAddress(additionalAddress)
                .build();
    }
}

빌더 패턴을 사용하기 위해 Member에도 생성자에 @Builder 적용해주기

---

MemberService

@RequiredArgsConstructor
@Service
@Transactional
public class MemberService {
    private final MemberRepository memberRepository;

    public Long save(MemberFormDto memberFormDto) {
        return memberRepository.save(memberFormDto.toEntity()).getId();
    }

    public Optional<Member> findById(Long id) {
        return memberRepository.findById(id);
    }
}

• @RequiredArgsConstructor로 memberRepository DI

회원 가입 테스트

@SpringBootTest
@Transactional
@TestPropertySource(locations = "classpath:application-test.properties")
class MemberServiceTest {

    @Autowired
    MemberService memberService;

    public MemberFormDto createMember() {
        MemberFormDto memberFormDto = new MemberFormDto();
        memberFormDto.setMemberId("test");
        memberFormDto.setName("테스트");
        memberFormDto.setPassword("password");
        memberFormDto.setPostCode(2222);
        memberFormDto.setAddress("테스트");
        memberFormDto.setAdditionalAddress("테스트");

        return memberFormDto;
    }

    @Test
    void 회원_가입_테스트() {
        MemberFormDto memberFormDto = createMember();
        Long id = memberService.save(memberFormDto);
        Optional<Member> savedMember = memberService.findById(id);

        assertEquals(savedMember.get().getMemberId(), memberFormDto.getMemberId());
    }
}

---

MemberController

• GET 요청으로 회원 가입 페이지 넘겨줌
• POST 요쳥으로 넘어온 정보를 MemberFormDto 객체로 받음

입력한 아이디 중복 체크

join.js

function checkDuplicated() {
    var memberId = $('.idInput').val();
    var data = {memberId: memberId}

    if(!memberId){
        alert("아이디를 입력하세요");
        return;
    }

    $.ajax({
        type: "post",
        url: "/members/memberIdCheck",
        data: data,
        success: function (result) {
            if (result != 'fail') {
                $('.id_input_re_1').css("display", "inline-block");
                $('.id_input_re_2').css("display", "none");
            } else {
                $('.id_input_re_1').css("display", "none");
                $('.id_input_re_2').css("display", "inline-block");
            }
        },
    });
}

MemberController

 @RequestMapping(value = "/memberIdCheck", method = RequestMethod.POST)
    @ResponseBody
    public String memberIdCheck(String memberId) {
        int result = memberService.memberIdCheck(memberId);

        if(result != 0)
            return "fail";
        return "success";
    }

🙋‍♀️ 아이디 입력 값을 넘겨 이미 가입 여부 조회

---

주소 검색

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

function findAddress() {
    new daum.Postcode({
        oncomplete: function (data) {
            var addr = ''; // 주소 변수
            var extraAddr = ''; // 참고항목 변수

            //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져옴
            if (data.userSelectedType === 'R') {
                addr = data.roadAddress;
            } else {
                addr = data.jibunAddress;
            }

            // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
            if (data.userSelectedType === 'R') {
                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
                    extraAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if (data.buildingName !== '' && data.apartment === 'Y') {
                    extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if (extraAddr !== '') {
                    extraAddr = ' (' + extraAddr + ')';
                }
                addr += extraAddr;
            } else {
                addr += ' ';
            }

            $(".address_input_1").val(data.zonecode);
            $(".address_input_2").val(addr);

            $(".address_input_3").attr("readonly", false);
            $(".address_input_3").focus();
        }
    }).open();
}

🚀 다음의 API 사용

---

가입완료

function join() {
    var data = {
        name: $('.nameInput').val(),
        memberId: $('.idInput').val(),
        password: $('.passwordInput').val(),
        postCode: $('.address_input_1').val(),
        address: $('.address_input_2').val(),
        additionalAddress: $('.address_input_3').val()
    };

    if (!data.name || !data.memberId || !data.password || !data.postCode || !data.address || !data.additionalAddress) {
        alert('모든 항목을 채워야합니다.');
        return;
    }
    if (data.password.length < 8 || 16 < data.password.length) {
        alert('비밀 번호는 8자 이상, 16자 이하여야 합니다.');
        return;
    }
    if (!isDuplicatedCheck) {
        $.ajax({
            type: "post",
            url: "/members/new",
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(data)
        }).done(function () {
            console.log(data);
            alert('회원가입이 완료되었습니다.');
            window.location.href = '/';
        }).fail(function (error) {
            console.log(data);
            alert(JSON.stringify(error));
        });
    } else {
        alert("중복된 아이디가 존재합니다.");
    }
}

🚀 빈 칸이 있거나, 아이디가 중복이거나, 비밀번호가 8자이상 16자이하가 아니라면, 가입되지 않음!