언어/Next.js
[Next 고캠핑] 뒤로가기 클릭시 모달창 닫기
홍시_코딩기록
2024. 8. 12. 23:08
모달 창이 열렸을 때 뒤로닫기를 해도 모달창이 닫히게 하고 싶었다.
찾아보니 History.pushState를 많이 사용해서 사용하려 했는데
모달 쿼리를 추가하고 모달 닫기를 누를때 뒤로가기를 생성해서 간단하게 구현을 해보았다.
모달 코드
src> hooks> useModal.ts
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
export function useModal() {
const [currentModal, setCurrentModal] = useState<string | null>(null);
const router = useRouter();
useEffect(() => {
const { modal } = router.query;
setCurrentModal((modal as string) || null);
}, [router.query.modal]);
const openModal = (name: string) => {
void router.push({
pathname: router.pathname,
query: { ...router.query, modal: name },
});
};
const closeModal = () => {
router.back();
};
// const modalToggle = () => {
// setIsShowing((prev) => !prev);
// };
return {
currentModal,
openModal,
closeModal,
};
}
- 기존엔 modalToggle로 모달 상태를 관리해서 모달을 띄웠다면
currentModal에 해당하는 모달 이름을 넣어서 관리하는 것으로 바꿨다.
사용예시
{currentModal === "searchAlert" && (
<Modal
currentModal={currentModal}
hide={onCloseSearchAlret}
message="지역을 선택해주세요!"
/>
)}