웹뷰 환경에서 뒤로가기시 종료 팝업이 뜨는 조건이 어떻게 되나요?

개발
1

실행환경

{
  "dependencies": {
    "@apps-in-toss/web-framework": "^1.3.0",
    "@toss-design-system/mobile-ait": "^2.1.0",
    "react": "^18.3.1",
    "react-router": "^7.8.2"
  }
}

코드

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { createBrowserRouter, replace, RouterProvider, useLocation } from 'react-router';
import { TDSMobileAITProvider } from '@toss-design-system/mobile-ait';

function AddressRenderer() {
  const location = useLocation();
  return (
    <div>
      <h1>Current Address:</h1>
      <p>{location.pathname + location.search}</p>
    </div>
  );
}

const exampleLoader = () => {
  if (window.location.pathname === '/') {
    return replace('/approach');
  }
  return null;
};

const routerExample = createBrowserRouter([
  {
    path: '/',
    element: <AddressRenderer />,
    loader: exampleLoader,
  },
  {
    path: '/approach',
    element: <AddressRenderer />,
  },
]);

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <TDSMobileAITProvider>
      <RouterProvider router={routerExample} />
    </TDSMobileAITProvider>
  </StrictMode>,
);

해당 조건에서

  1. /로 접속하여 /approach로 replace시 뒤로가기를 눌러도 종료 팝업이 뜨지 않음
  2. /approach로 접속한 경우 뒤로가기를 누르면 종료 팝업이 등장함

history.length가 둘 다 1인데도 불구하고 종료가 되지 않습니다.

히스토리 초기화나 앱을 종료시키기 위한 다른 API가 있을까요?

2

@max 님 안녕하세요

혹시 도움이 되실까요?

3

빠른 답변 감사드립니다.

문서에 따르면 이 기능은 RN 환경에서만 제공되는 것 같아요. 혹시 웹뷰 환경에서도 적용 가능할까요?

4

넵 import 변경하시면 사용 가능하십니다.

예제 소스도 추가해둘게요

1개의 좋아요
5

closeView를 사용한다고 하더라도 종료 조건을 구현해야하는데, 위 플로우에서 replace로 도달한 페이지에서 뒤로가기를 눌러도 아무런 이벤트가 잡히지 않아요. popstate, useNavigationType 등을 활용해도 잡히지 않습니다.

브라우저 환경에서는 잘 작동하는 것을 보니, 아마도 해당 조건(history.replaceState으로 이동)의 앱인토스 환경에서 일반적인 뒤로가기 이벤트 자체가 발생하지 않는 것 같아요. 혹시 재현되실까요?

6

찾았습니다. 감사합니다~!

2개의 좋아요
@apps-in-toss/web-framework 버전 0.0.37 => 1.2.0 업그레이드 후 첫 진입화면 앱바 뒤로가기 버튼 동작하지 않음
7

메뉴얼엔 따로 안 나와있지만
@apps-in-toss/web-framework 안에 closeView 함수가 기본 내장되어 있습니다.

import { graniteEvent, closeView } from '@apps-in-toss/web-framework';

웹뷰 환경에서는 위처럼 import 해서 바로 사용하시면 됩니다.
다른 분들 필요하실까봐 공유드립니다