[Next 고캠핑] 뒤로가기 클릭시 모달창 닫기

주소창에 모달 쿼리가 생성된 걸 볼 수 있다.

 

 

모달 창이 열렸을 때 뒤로닫기를 해도 모달창이 닫히게 하고 싶었다. 

찾아보니 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="지역을 선택해주세요!"
    />
  )}

 

 

 

 

 

 

https://velog.io/@sseung-i/query%EC%82%AC%EC%9A%A9-%EB%92%A4%EB%A1%9C%EA%B0%80%EA%B8%B0-%EC%8B%9C-%EB%AA%A8%EB%8B%AC-%EB%8B%AB%EA%B8%B0