AOS 뒤로가기 버튼 클릭시, 해당 모달 닫히게 설정

문제 발생 및 원인

웹뷰를 만들어서 native랑 연결하는 서비스를 만들었는데, 모달이 켜진 상태에서 AOS의 뒤로가기 버튼을 누르면 어플이 나가지는 현상을 발견하였다.(safari도 뒤로가기 버튼 작동 문제 발생)

그리고, 다른 페이지로 이동 한 후 모달을 클릭 한 후 뒤로가기 버튼을 누르면 모달만 보이고, 안에 페이지들만 뒤로가게 작동이 되었다. 사실, 조금만 생각해보면 모달로 만들어지다보니, 뒤로가기 버튼을 누르면 당연히 페이지들만 이동이 된다.

해당 이미지는 safari 뒤로가기

해결 방안 1

현재 발생되는 모달은 header에서 파생된 모달들인데, 더보기 메뉴, 검색 메뉴, 알림 메뉴 등이 모달로 만들어져있다. 아무래도 pc가 모달로 구성되어 있고 모바일까지 반응형으로 만들다 보니, 당연스럽게 모바일에서도 해당 메뉴들을 모달로 구현을 했었다.(이 부분으로 인해 문제 발생)

그래서 해결방안으로는 모달을  page 단위로 구성하는 방안이 나왔다. 하지만, 이 부분은 공수가 많이 든다는 단점이 있다. 그냥 page로 바꾸면 되는게 아니라 기존  header에 너무 많은 로직들이 담겨있다보니, 이 부분들을 건드리면 시간적인 측면에서 비효율적이라고 생각이 들었다.

 

해결 방안 2

native 개발자와 이야기를 하다가 해당하는 화면에서만 native로 해당 화면이라고 이벤트를 주고, 후에 native에서 뒤로가기 버튼을 클릭했을 때 다시 front로 이벤트를 주면 front에서 뒤로가기 버튼을 제어하는 로직을 하는게 어떤 지에 대해서 의견을 나누었다. 

여기서 문제점은 wifi가 끊겼을 때, 뒤로가기 버튼이 작동을 못 한다는 문제점이 있었고, 코드가 추가되었기 때문에 다시 앱심사를 받아야한다는 번거로운 점이 존재했다. 

해결 방안 3

native와 이벤트하는 방법도 비효율적이라고 생각이 들어서 해당 방법이 아닌 front에서 처리했을 때 공수가 짧고, 번거롭지 않은 방법이 뭐가 있을까에 대해서 생각을 했다. 그 후 도출한 방법이 query를 이용하는 방법이었다.

뒤로가기 버튼이 router의 history를 이용해서 그 전 페이지로 이동하는 방식으로 작동되기 때문에 이 점을 이용하여 router에 history를 쌓았다.

예를 들어 더보기 메뉴 버튼을 클릭했을 때, 

router.push({ query: { isOpen: 'true' } });

해당 이벤트를 작동하게 하면 뒤로가기 버튼을 클릭 했을 때, 해당 query가 없는 상태로 돌아간다. 

그리고, 웹에서 뒤로가는 버튼의 경우는 따로  아래처럼 설정해서, 모달이 닫히게 설정하였다. 

//1.
router.push({ query: {} });
//2.
router.back();

//해당 컴포넌트 open 조절
<Menu v-if="Boolean(route.query.isOpen)" />

모달이 열렸을 때 뒷 페이지가 스크롤이 안되게 하기 위해서 스크롤 방지 기능의 class가 scroll_hidden인 div를 제작 하였고,  앱 내 뒤로가기 버튼 클릭시, 스크롤 방지 기능도 풀리게 제작하였다.

//스크롤 방지 기능과 엮어서 함수 제작
interface IModalMenu {
	menu: 'Search' | 'Notification';
}
export const openMenuModal = ({ menu }: IModalMenu) => {
	document.body.classList.add('scroll_hidden');
	router.push({ query: { [`is${menu}MenuOpen`]: 'true' } });
};

export const closeMenuModal = () => {
	document.body.classList.remove('scroll_hidden');
	router.push({ query: {} });
};

 

하지만 이 부분에서 문제가 발생하였는데, AOS 및 웹 사이트의 뒤로 가기 버튼 클릭 시, 스크롤  방지 기능이 안풀린다는 문제점이 발생하였다.

 

 

그래서 이 해당 부분을 해결 하기 위해서 해당 ui가 사라질 때, 해당 div의 classList에서 scroll_hidden을 삭제하는 로직을 구현하였다. 하고 있는 서비스에서 vue를 사용하고 있기 때문에 onUnmounted를 사용하였다. (vue의 생명주기 참고)

// 스크롤 방지 기능 삭제
onUnmounted(() => {
	document.body.classList.remove('scroll_hidden');
});