5월부터 주간 업데이트와 관련하여 뉴스레터를 전송하게 되면서,
사용자에게 개인정보수집 및 이용 동의와 마케팅 수신 동의를 받는 과정이 필요하게 되었다.
회원가입 페이지 하단에 체크박스를 제공하고, 체크해야지만 회원가입 버튼이 활성화되도록 구현하였다.
동의서 내용을 확인하려면 '>' 버튼을 눌러 페이지를 이동해야 한다.
- 이는 회원가입 항목이 이미 한 페이지를 가득 채우고 있었는데,
동의서 내용을 표시하기에는 UI/UX 관점에서 내 머리로 빠른 시일 내에 기획하고 만들기에 무리가 있다고 판단했다. (+ 대다수가 잘 읽지 않을 거라는 생각)
동의 기능을 기획하는 과정에서,
신규 사용자뿐 아니라 기존 사용자에게도 동의를 받을 방법도 있어야했다.
우리는 이를 위해, 동의를 한 상태는
state : 1동의 하기 전의 상태는
state : 0로 설정하여, 기존 사용자들에게 0을 부여하고 로그인 시 state가 0이면 동의를 받는 모달창을 띄우도록 기획하였다.
이후, 검토하는 과정에서
고객의 개인정보와 관련되어 포괄적으로 동의를 받는 것은 개인정보 보호법 위반이며, 마케팅이나 광고 활용의 목적으로 개인정보를 수집할 경우에는 해당 내용을 분명히 명시하여 이에 대한 동의를 반드시 따로 받아야 한다.
위와 같이
마케팅 정보 수신 동의에 대해서 선택적 동의를 받아야 한다는 정보를 알게 되었다.
- 기존 체크박스 선택 시에만 활성화시키던 버튼은 그대로 두고 마케팅 수신 동의 여부를 저장하는 useState를 추가하여 body에 담아 통신하였다.
그리고
체크박스 부분을 없애고 회원가입 버튼 (이 경우에는 '다음'버튼으로 변경) 을 누르면 동의 화면으로 이동, 동의 버튼을 누를 시 회원가입이 완료되도록 하자는 의견을 받았다.
즉, 동의 페이지를 하나 더 만들자는 의견이었는데
당일 오후 4시에 업데이트 예정되어있는 건이라, 새롭게 페이지 레이아웃을 짜는 것은 어렵다고 판단하여 로그인 시 띄우는 모달창을 활용하기로 하였다.
이로 인해,
로그인 시 제공되는 모달창과 회원가입 시 제공되는 모달창의 기능 분리가 필요해졌다.
로그인 시 제공되는 모달창은
사용자가 로그인을 하면 메인 페이지에서 user의 동의 상태코드를 받아 모달을 띄우고
.then(data => {
if (data.UserAgreeId === 0) {
setIsAgreement(true);
}제출 버튼 클릭시, 동의 내용을 업데이트 하는 api 통신을 진행하였다.
{isAgreement && (
<AgreementModal
isAdChecked={isAdChecked}
setIsAdChecked={setIsAdChecked}
onCheck={onCheckPolicy}
/>
)} body: JSON.stringify({
agreeId: 1,
addInformation: isAdChecked ? 1 : 0,
}),🧐
회원가입시에는 모든 항목 입력 후 회원가입 버튼을 누를 시 모달을 띄우고
<button
className="signUpBtn"
disabled={!isAllValid}
onClick={handleOpenModal}
>
회원가입
</button>제출 버튼 클릭시, body에 회원가입 정보 + 동의 상태 정보로 회원가입 하는 api 통신을 진행하였다.
{isPolicy && (
<AgreementModal
isAdChecked={isAdChecked}
setIsAdChecked={setIsAdChecked}
onCheck={onSignUp}
/>
)} body: JSON.stringify({
email: formValue.email,
password: formValue.password,
name: formValue.userName,
contact: formValue.contact,
company: Number(formValue.company),
agreeInformation: 1,
addInformation: isAdChecked ? 1 : 0,
}),이외에도
기존 사용자 로그인 시 모달을 메인 진입 전에 띄울지, 메인 진입 후에 띄울지를 고민하다가
- 메인 진입 후에 띄우는 것이 동의를 얻어내는 것에 수월?하다고 생각
- 토큰 확보 쉬움
- 제출 완료 시 해당 페이지 ID로 이동시킬 때 정보 저장 필요
등의 이유로 메인 진입 후 모달을 띄우기로 결정하였다.
허둥지둥 완료!
