<aside> 💡 헤더에 로그인 버튼을 클릭하는 것과 별개로 로그인이 필요한 페이지 접속을 할때, 페이지를 띄우기 전에 모달창을 띄우게 하자

</aside>

헤더의 모달창 상태와 전역모달창 상태 구분하기

헤더와 전역 모달창 상태를 구분하여 작성해줘야, 추후에 모달창이 2개가 생긴다는 등의 불상사를 방지할 수 있다.

//Context.js
const [headerModalOpen, setHeaderModalOpen] = useState(false);
const [isLoginOpen, setIsLoginOpen] = useState(false);
...
const headerModalHandler = () => {
		setHeaderModalOpen(!headerModalOpen);
	};
	const loginModalHandler = () => {
		setIsLoginOpen(!isLoginOpen);
		console.log(isLoginOpen);
	};

//Modal.js
const closerModal = e => {
		if (modalRef.current === e.target) {
			if (headerModalOpen) headerModalHandler();
			else loginModalHandler();
		}
	};

const submitHandler = async () => {
		...
		if (headerModalOpen) {
			headerModalHandler();
			document.location.href = './main';
		} else {
			loginModalHandler();
			document.location.href = './main';
		}
	};
//x표를 눌러줬을때 작동하는 함수
const closeButtonHandler = () => {
		if (headerModalOpen) headerModalHandler();
		else loginModalHandler();
	};

현재까지 알아낸 방법으로는 이 방법이 유일하게 깔끔하게 작동하는 것같다...

코드는 상당히 더러워 지지만, 나중에 다른 방법이 생각나면 수정하자!