project | 회원탈퇴 기능 구현

회원탈퇴 기능 구현

회원탈퇴 기능을 구현해봤습니다. 이번에는 모달창으로 안내문을 띄우고 회원탈퇴를 안내하는 방법을 사용했습니다.

1. 회원탈퇴 기능 구현

먼저 회원탈퇴의 기능적인 구현을 진행했습니다. 회원탈퇴 핸들러를 만들어 axios를 통해 서버와 통신하여 회원탈퇴 버튼을 눌렀을 때 db상의 사용자 정보를 삭제할 수 있도록 로직을 구성했습니다.

	const signoutSubmitHandler = () => {
		if (!accessToken) {
			return
		}
		axios
			.delete('https://localhost:4000/users', {
				headers: { authorization: `Bearer ${accessToken}` },
				'Content-Type': 'application/json',
			})
			.then(res => {
		        localStorage.removeItem('accessToken')
				localStorage.removeItem('email')
				alert('회원 탈퇴가 완료되었습니다.')
				// openAlertHandler();
				window.location.replace('/')
			})
			.catch(err => {
				alert('잘못된 요청입니다')
				// openWarningAlertHandler();
				console.log('회원탈퇴실패', err)
			})

먼저 유저가 토큰을 가지고 있지 않으면 return 시키고 토큰이 있을 시 회원탈퇴로직이 작동하도록 했습니다. axios의 delete 메서드를 사용해 서버에서 지정한 주소에 요청을 보내고 헤더에 토큰을 담아 줬습니다. 그 후 성공적으로 요청을 넘기게 되면 로컬스토리지 상에 있는 토큰과 이메일 값을 removeItem을 통해 삭제 시켰습니다. 임시로 삭제가 성공적으로 이뤄졌을 때 alert창을 통해 회원탈퇴가 정상적으로 이뤄졌는지 웹상에서 알 수 있도록 했고, window.location.replace를 통해 사용자를 메인페이지로 이동시키는 코드를 작성했습니다.

2. 회원탈퇴 안내문 기능을 위한 상태 만들기

처음 의도처럼 회원탈퇴버튼을 눌렀을 때 바로 회원탈퇴가 되는 것이 아니라 모달창이 열리고 동의하는 체크박스와 "회원탈퇴"라는 것을 똑같이 인풋창에 입력했을 때 회원탈퇴 버튼이 활성화 될 수 있도록 만들었습니다.

	const [agreeChecked, setAgreeChecked] = useState(false)
	const [fillinText, setFillinText] = useState('')

	const agreeCheckHandler = () => {
		setAgreeChecked(!agreeChecked)
	}
	const fillinCheckHandler = e => {
		setFillinText(e.target.value)
	}

• 일단 동의 체크박스 상태와 "회원탈퇴" 입력을 똑같이 입력했을 때 작동할 수 있는 상태를 만들었습니다.
• 동의 체크박스 핸들러를 만들어 체크박스를 클릭 했을 때 체크박스가 활성화 될 수 있도록 했습니다. 또한 e.target.value를 통해 현재 인풋값이 무엇인지 알 수 있는 상태를 만들었습니다.

3. 안내문 기능 구현

• 처음으로 안내문을 텍스트로 보여주고, 이에 동의 했을 때 체크박스에 체크를 하면 아까 만든 agreeChekHandler를 작동시켜 체크가 되도록 만듭니다.
• onChange fillinCheckHandler를 통해 인풋값을 확인합니다.

agreeChecked === true && fillinText === '회원탈퇴'

위의 코드처럼 체크박스에 체크가 돼 있고, 인풋값이 회원탈퇴일 때 가장 처음에 만든 회원탈퇴버튼을 활성화 시킬 수 있게 만들었습니다. 이는 삼항연상자를 통해 구현했습니다.

글을 줄이며...

사용자가 회원탈퇴 기능을 사용했을 때 실수할 확률을 줄이고, 한 번 더 회원탈퇴를 하기전에 고민할 수 있도록 이러한 기능들을 추가했고, 좀 더 사용자입장에서 회원탈퇴라는 기능을 잘 사용할 수 있도록 만들었습니다.