PCMOA - 회원가입

백엔드 영역에서만 다루다가 프론트엔드 영역까지 하려고 하니 모르는 부분도 많고 이유를 찾는데도 시간이 좀 많이 걸렸다. 아직 한 두 가지 더 추가해야하지만 오늘 내로 그 부분은 마무리할 예정이어서 해당 게시글에 더 추가해둘 것이다.

 

ERD

ERD라고 하기 좀 거시기하지만 맨 처음부터 설계하고 하려고 했는데 도무지 생각이 안나서 그냥 작업 전에 구상을 했다. 간단히 입력 받을 폼에는 pcmoa_users 테이블에 해당하는 저 컬럼들을 입력받도록 만들었다. 훗날 배송지 부분에서 사용자가 여러 배송지를 등록할 수도 있기 때문에 1:N 관계로 구상해두었다.

 

완성된 모습

현재 default url인 /의 경우에 앞으로 상품이 보여질 메인 페이지라고 볼 수 있다. layout을 나눠 놓아서 header, body, footer로 구성되어 있으며 header에는 네비게이션바가 자리잡도록 했다. 아직 고정은 안해놨는데 차후에 진행할 예정이다.

 

로그인은 단순히 사용자 부분 정도만 구성해두고 아직 서버 쪽의 소스코드는 작성되지 않은 상태이다. 오늘 내로 로그인까지 추가할 예정이다.

 

디자인 감각이 완전 똥인 나에겐 그나마 깔끔하게 했다고 볼 수 있는 부분이다. 각 항목별로 유효성을 서버에서 검증하도록 구상해두었고 가입하기 버튼을 누르면 확인할 수 있다.

 

특히 이 부분에서 신경썼던 것은 비밀번호, 휴대폰 번호에서 사용한 정규 표현식이라고 생각하고 있다.

 

@Pattern(regexp = "^(?=.*[A-Za-z])(?=.*\\d)(?=.*[$@$!%*#?&])[A-Za-z\\d$@$!%*#?&]{8,}$", message = "최소 8자 이상의 문자, 숫자, 특수문자를 포함해주세요.")
private String password;

private String passwordCheck;

@Size(min = 2, max = 10, message = "최소 2자 이상 10자 이하로 입력해주세요.")
private String name;

@Pattern(regexp = "^01(?:0|1|[6-9])-(?:\\d{3}|\\d{4})-\\d{4}$", message = "양식을 다시 확인해주세요. -를 포함해주세요.")
private String phoneNumber;

뭐 물론 내 머릿속에 온전히 있는 것은 아니고 정규 표현식이 뭔지 정도만 알고 있었고 이번에는 겸사겸사 학습하는 김에 시도해보았다. 놓고 보면 어렵지 않은데 빈 백지에 쓰라 그러면 조금 버겁긴 하겠지만 이것도 점차 적응해나가려고 한다.

 

밑부분에는 약관 확인이라는 부분을 추가해보았는데 현재는 html 파일 내에서 모달 창이 나와 그 내용이 적혀있게 되어있다. 어느정도 작업이 진행되면 관리자 페이지에서 약관을 수정한 내용이 들어가도록 조정할 예정이다.

 

모달은 내가 만든건 아니고 역시 부트스트랩이 최고다. 지금은 머릿 속에 있는 내용의 밑거름 정도만 뿌린다고 생각하고 있어 차후엔 관리자에서 수정하는대로 이 내용이 변할 것이다.

 

그렇게 로컬 내의 DB에는 값이 제대로 들어가고 있다.

 

아직 안한 것

회원가입에서도 하라면 할 게 더 많지만 일단 이메일이 중복되었는지 확인하는 버튼을 추가해두려고 한다. 더 바라자면 no-sql 기반으로 이메일 검증 유효 코드를 저장해두고 유효 시간이 지나면 사라지게 하는 것도 하고 싶은데 이 프로젝트는 길게 볼 예정이기 때문에 기회가 된다면 추가할 것이다.

 

+) 2024.03.03 : 이메일 중복되었는지 확인할 수 있도록 버튼을 추가했고 AJAX 호출로 유효성 검증 완료

 

소스코드

소스코드는 깃허브 링크를 따로 첨부해둘 예정이다. 완성되지 않아서 아직은 공개되지 않고 있다. (2024.03.03)