query사용 뒤로가기 시 모달 닫기

choi seung-i·2023년 6월 12일

작업로그

목록 보기

12/17

Next13에서 작업하며 고민한 흔적..(next가 아니어도 활용 가능)

페이지컴포넌트 내에서 모달 열 때

그동안 모달을 작업 할 때에는 페이지 내에서 모달을 열고 닫고 할 일만 있었다.

버튼을 누르면 열리고 dimm 또는 닫기 버튼을 두르면 닫힌다.
해당 페이지 내에서 모달컴포넌트가 동작하니 페이지 이동을하면 닫히는것처럼 보인다.
-> 즉, 모달이 열려있는 상태에서 뒤로가기를 할 경우 모달이 닫히기만 하는게 아닌 페이지가 뒤로 가지는 것
(모바일에서는 닫고싶거나 할 때 뒤로가기를 자주 누르는데, 나는 그저 팝업이 닫히길 바랬는데 페이지가 뒤로가지면 불편)

이번 작업에선 로그인을 공통헤더에서 모달형식으로 띄워주기를 하면서 어떻게 구현을 할지 고민이 많았다.

next13의 기능 사용?

next13에서 제공하고있는 Parallel Routes와 Intercepting Routes를 사용하면 페이지이동처럼 히스토리에 '/login' 패스 추가하여 사용할 수 있다고 하여 작업을 해 보았다.

그 결과.. 홈(패스 = '/')에서만 보여지는 header스타일이 있는데 패스가 '/'에서 '/login' 으로 바뀌다 보니 서브 header스타일로 적용이 되면서 홈에서 모달이 열리고 닫힐 때 뒤에 보이는 페이지 레이아웃이 무너지게 되었다.

어느 페이지에서나 모달을 열 수 있는것이기 때문에 패스로 처리하는건 적합하지 않다고 생각하여 다른방법을 찾아보았다.

그렇담... 어떻게 제어 할것인가?

뒤로가기 이벤트 제어

모달이 열릴 때 현재페이지 히스토리를 push()
모달 내부에 뒤로가기 이벤트에서 원래 동작인 back()과 모달 닫히도록 setState변경

혹시나 헤더에서 로그인버튼 클릭이 아닌 다른 경로로 로그인을 띄워야 할 경우가 있다면, 현재 헤더컴포넌트 안에 있는 로그인 모달을 제어하기위해 상태관리를 사용해야 하거나 또다른 처리를 해줘야 할 것 같았다.

그렇지만 쿼리를 사용한다면 어디서든 모달쿼리값을 push()해주면 헤더에서 바뀐 쿼리에 대한 처리를 해서 모달을 띄워 주지 않을까?

✅ 쿼리 값으로 모달 컨트롤

'modal'이란 쿼리 키로 모달을 제어 하였고, 쿼리의 유무로 열고닫기만 하는 것이 아닌 특정 모달이 열릴 수 있도록 해주었다.
(로그인 모달 내에서 회원가입 / 비번찾기 버튼을 누르면 해당 모달을 보여줘야했다.)

next/navigation

import { useRouter, useSearchParams, usePathname } from "next/navigation";

const router = useRouter();
const searchParams = useSearchParams();
const pathname = usePathname();

router : 히스토리 조작
searchParams : 쿼리 확인
pathname : 현재 페이지(path)에 쿼리를 덮어 쓰기 위해

핸들러 3개

히스토리를 조작한다.

1. 히스토리를 쌓는 핸들러 (처음 모달 열때 사용)

const handleOpenMadal = (name: string) => {
    router.push(`${pathname}?modal=${name}`);
};

혹시나 나중에 재사용 하거나 모달내에서 다른 모달을 열었을 경우 순차적으로 뒤로 가야한다면 히스토리를 쌓아야 하기때문에 name을 받아 사용했다.

2. 닫기 또는 dimm 클릭 시 뒤로가기

const handleCloseMadal = () => {
    router.back();
};

3. 히스토리 쌓는게 아닌 바꿔치기 (모달 내에서 다른 모달로 교체할때 사용)

const handleChangeModal = (name: string) => {
    if (pathname === null) return;
    router.replace(`${pathname}?modal=${name}`);
};

로그인 > 회원가입 > 로그인 왔다갔다 해도 뒤로가기 한번이면 모달 닫힘

searchParams

현재 히스토리의 쿼리에 대한 모달상태를 보여준다.

const isModal = searchParams?.get("modal");

return (
  // ...
  {isModal && (
   <Modal>
  		{isModal === "로그인" && <로그인 />}
  		{isModal === "회원가입" && <회원가입 />}
		{isModal === "비번찾기" && <비번찾기 />}
  	</Modal>
   )}
)