구현한 내용
- 새로고침 or 브라우저 종료시 재확인하기
- 헤더를 통해 다른 페이지로 이동시 재확인하기
hooks/usePreventClose.ts
import { useEffect } from "react";
export const usePreventClose = () => {
useEffect(() => {
const preventClose = (e: BeforeUnloadEvent) => {
e.preventDefault();
e.returnValue = "";
};
window.addEventListener("beforeunload", preventClose);
return () => {
window.addEventListener("beforeunload", preventClose);
};
}, []);
};
단, 이 경우엔 브라우저 자체 모달을 반환하기 때문에 커스텀이 불가능하다.(내가 못하는 걸수도)
📌 [React][Javascript] 뒤로 가기 막기 / 창 닫기 막기 / 새로고침 막기
Header.tsx
const leavePresentPage = (e: any) => {
const text = e.target.innerText;
if (
window.location.pathname === "/post" ||
window.location.pathname === `/edit/${window.location.pathname.slice(6)}`
) {
Swal.fire({
title: "이 페이지를 나가시겠습니까?",
icon: "question",
showCancelButton: true,
confirmButtonColor: "#B3261E",
cancelButtonColor: "#50AA72",
confirmButtonText: "네",
cancelButtonText: "아니오",
}).then((result) => {
if (result.isConfirmed) {
if (text === "Nilili") {
navigate(`/`);
}
if (text === userName) {
navigate(`/user/${userID}`);
}
if (text === "검색하기") {
navigate("/search");
}
if (text === "글쓰기") {
dispatch(replaceAllData([]));
navigate("/post");
}
if (text === "로그아웃") {
logoutBtn();
}
}
});
} else {
if (text === "Nilili") {
navigate(`/`);
}
if (text === userName) {
navigate(`/user/${userID}`);
}
if (text === "검색하기") {
navigate("/search");
}
if (text === "글쓰기") {
dispatch(replaceAllData([]));
navigate("/post");
}
if (text === "로그아웃") {
logoutBtn();
}
}
};
글쓰기 페이지와 수정 페이지에서만 모달이 작동해야 하므로 if
문을 사용했다. 코드가 너무 길어서 좀 줄이고 싶은데 여기서 더 줄이는 방법을 고민해봐야겠다.