페이지마다 네비게이션 바에 뒤로가기 버튼 추가 혹은 제거

개발
1

안녕하세요! 수고 많으십니다.

다름이 아니라 현재 Next.js 15, React 18로 웹뷰 서비스를 개발 중인데,

페이지마다 뒤로가기 버튼을 추가하거나 제거하고 싶습니다.

위 3개 링크에서 내용을 다 확인했는데, 페이지마다 동적으로 적용이 안되서 질문 드립니다.
예를 들면, 홈에서 인트로 페이지로 뒤로가기를 방지하기 위해서, 뒤로가기 버튼을 임시로 숨기려고 하는데 안되네요.

혹시 원래 안된다거나, 정석적인 방법이 따로 있을까요?

아래는 granite.config.ts 입니다.

import { defineConfig } from "@apps-in-toss/web-framework/config";

export default defineConfig({
  appName: "...",
  brand: {
    displayName: "...",
    primaryColor: "#4890F0",
    icon: "...",
    bridgeColorMode: "basic",
  },
  web: {
    host: "localhost",
    port: 3000,
    commands: {
      dev: "next dev",
      build: "next build",
    },
  },
  permissions: [],
  outdir: "dist",
  webViewProps: {
    type: "partner",
  },
  navigationBar: {
    withBackButton: true,
    withHomeButton: false,
  },
});

아래는 tds-provider.tsx 입니다.

"use client";

import type { PropsWithChildren } from "react";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { partner, tdsEvent } from "@apps-in-toss/web-framework";
import { TDSMobileAITProvider } from "@toss/tds-mobile-ait";

export function TdsProvider({ children }: PropsWithChildren) {
  const router = useRouter();

  useEffect(() => {
    partner.addAccessoryButton?.({
      id: "go-home",
      title: "홈",
      icon: {
        name: "icon-home-mono",
      },
    });

    const cleanupEvent = tdsEvent.addEventListener("navigationAccessoryEvent", {
      onEvent: ({ id }) => {
        if (id === "go-home") {
          router.push("/home");
        }
      },
    });

    return () => {
      cleanupEvent?.();
      partner.removeAccessoryButton?.();
    };
  }, [router]);

  return <TDSMobileAITProvider>{children}</TDSMobileAITProvider>;
}

감사합니다. ㅠㅠ

2

안녕하세요 :slight_smile:
페이지별 동적으로 아이콘을 추가하거나 삭제하는 기능은 커스텀 아이콘 영역에만 적용됩니다 :cry:
기존 뒤로가기가 있는 영역을 커스터마이징하는건 불가능해요.

graniteEvent 뒤로가기 이벤트를 수신하여 뒤로가기 방지 처리하는 방법은 어떨까요 ?

1개의 좋아요
3

일단 이렇게 해결하기로 하였고, 제공해주신 가이드 대로 하니 아주 잘 작동합니다. 감사합니다!