주소 찾기 API 이용하여 회원가입 기능 구현

jihan kong·2023년 5월 23일

Spring Boot 쇼핑몰 프로젝트

목록 보기

22/29

회원가입에 관해서 기능이 추가될 것이 없는지 계속 생각하다가 한 가지 중요한 기능을 빠뜨렸다는 것을 깨달았다.😓 현재 플젝으로 만들고 있는 사이트는 쇼핑몰 사이트라는 것을 감안해볼 때, 고객들이 등록된 상품을 구입할 때, 구입한 상품이 자택 혹은 원하는 배송지로 배송되기 위해서는 사용자의 주소를 알고 있는 것이 가장 중요하다.

물론 전에 회원가입 기능을 구현할 때, 아래와 같이 폼을 통해 주소 값을 입력받게 하였고, Controller 와 Entity 등의 로직들을 통해 실제로 입력된 주소값이 유저 정보로 Insert되는 것은 전혀 문제가 없도록 만들었다.

1. 기존 코드의 문제점

위 코드는 돌아가는데 전혀 문제가 없다. 그러나, 전혀 "user-friendly" 하지 않다.

세상에 어떤 사이트가 사용자에게 자신의 자택 주소나 우편번호을 직접 입력하게 하는가? 당장 내가 만약 회원가입을 해야하는데 직접 우편번호와 자택 주소를 검색해와서 입력해야한다면 깊은 짜증이 몰려올 것이다.🤬 물론 예전에는 그런 경우도 있었겠지만 사용자 친화적인 설계로 개발하는 요즘엔 이렇게 사이트를 구성한다면 수 많은 컴플레인이 접수되는 것은 불보듯 뻔한 상황이다.

어떤 사이트에 접속하여 회원가입을 할 때, 집주소만 입력하면 우편번호와 주소가 자동으로 입력되는 것을 경험해보았을 것이다. 이는 API를 활용한 것으로 이 기능을 통해 전체 주소를 입력하는 번거로움을 덜 수 있다. 여러가지 API가 있지만 나는 다음 주소 API를 사용하여 구현했다.

💡 다음 주소 API
-> 자세한 방법은 http://postcode.map.daum.net/guide 에 가이드가 나와있다.

2. 기능 구현

2-1. Member Entity 수정

일단 가장 먼저 당연히 Member Entity를 손봐야했다. 기존에 address 하나로 뭉뚱그리던 속성을 좀 더 세분화시켰다.

Member.java

package com.shop.entity;

@Builder
@Entity
@Table(name="member")
@Getter
@Setter
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class Member extends BaseEntity{                     

    @Id
    @Column(name="member_id")
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;

    private String name;

    @Column(unique = true)
    private String email;                                  

    private String password;

    private String picture;
	 
    private String address;				// 우편 번호
	
    // 새롭게 추가된 코드
    private String streetaddress;		// 지번 주소
	
    // 새롭게 추가된 코드
    private String detailaddress;		// 상세 주소

    @Enumerated(EnumType.STRING)                            
    private Role role;

    private String provider;  
    private String providerId; 

    public static Member createMember(MemberFormDto memberFormDto,
                                      PasswordEncoder passwordEncoder) {

        Member member = new Member();
        member.setName(memberFormDto.getName());
        member.setEmail(memberFormDto.getEmail());
       
        // member에 각 속성을 set하기 위해 memberFormDto에 추가해야할 내용
        member.setAddress(memberFormDto.getZipcode());
        member.setDetailaddress(memberFormDto.getDetailadr());
        member.setStreetaddress(memberFormDto.getStreetadr());
        
        String password = passwordEncoder.encode(memberFormDto.getPassword());
        member.setPassword(password);
        member.setRole(Role.USER);
        return member;
    }

String address : 기존 주소 값을 저장하던 속성에서 우편번호를 저장하는 속성값으로 변경했다.
String streetaddress : 지번 주소를 저장하는 속성
String detailaddress : 상세 주소를 저장하는 속성

또한, member 클래스에 속성을 받아오기 위해 memberFormDto 에도 같은 속성들을 구현해야한다.

2-2. MemberFormDto에 속성 추가

MemberFormDto.java

package com.shop.dto;

import org.hibernate.validator.constraints.Length;
import javax.validation.constraints.Email;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotEmpty;

@Getter
@Setter
public class MemberFormDto {                        // 회원 가입 화면으로부터 넘어오는 가입정보를 담을 dto

    @NotBlank(message = "이름은 필수 입력 값입니다.")
    private String name;

    @NotEmpty(message = "이메일은 필수 입력 값입니다.")
    @Email(message = "이메일 형식으로 입력해주세요.")
    private String email;

    @NotEmpty(message = "비밀번호는 필수 입력 값입니다.")
    @Length(min=8, max=16, message="비밀번호는 8자 이상, 16자 이하로 입력해주세요")
    private String password;

	// 새롭게 추가된 코드들 
    @NotEmpty(message = "우편번호는 필수 입력 값입니다.")
    private String zipcode;

    private String streetadr;

    private String detailadr;

    private String role;

}