project | 로그인 모달 구현

모달 기능 구현

로그인버튼을 눌렀을 때 페이지 이동이 아닌 모달창을 띄우며 좀 더 유저들이 편하게 로그인 기능을 사용할 수 있도록 했습니다.

1. 모달버튼

일단 처음으로 프로젝트에서 헤더부분이 구현되지 않았기 때문에 임시로 로그인버튼을 만들었습니다.

function Loginbtn() {
	const [modalOpen, setModalOpen] = useState(false)

	return (
		<div className="Loginbtn">
			<h1>로그인</h1>
			<button
				className="openModalBtn"
				onClick={() => {
					setModalOpen(true)
				}}
			>
				로그인
			</button>
			{modalOpen && (
				<Loginmodal
					setOpenModal={setModalOpen}
					close={() => {
						setModalOpen(false)
					}}
				/>
			)}
		</div>
	)
}

위와 같이 상태를 사용해서 디폴트 값을 false로 주고 로그인버튼 클릭했을 때 상태를 true로 상태를 바꿔줍니다. 그리고 모달이 켜졌을 때 <Loginmodal> 로그인 로직이 있는 컴포넌트를 불러와 웹상에 모달창으로 보여지게 합니다.

2. 모달 창 닫기

모달창을 닫을 때는 상태를 false로 바꿔 기존의 상태로 돌아갈 수 잇도록 했습니다. 여기서 모달창을 열었을 때 모달창 안을 클릭해도 닫히고 밖을 클릭해도 닫히기 때문에 로그인 폼 전체를 onClick={(e) => e.stopPropagation()}으로 부모태그로의 이벤트 전파를 중지시켜 결과적으로 모달창 내부를 클릭했을 때는 모달창이 꺼지지 않고 바깥부분을 눌렀을 때만 꺼질 수 있도록 사용자의 편의성을 생각했습니다.

글을 줄이며...

기존에는 새로운 페이지로 링크를 걸어 로그인 페이지를 따로 구성하는 방법을 사용했었는데 이번에는 모달창을 사용해 한 페이지 안에서 로그인을 해결할 수 있도록 편의를 개선해봤습니다. 이러한 모달창은 로그인뿐만 아니라 회원가입같은 부분에서도 재사용할 수 있을 것 같습니다.