[공지] 공통 네비게이션바 아이콘 추가 안내

[Dylan]

상단 공통 네비게이션바에 아이콘 추가하는 방법을 안내드려요.

1. ReactNative

import { useTopNavigation } from '@apps-in-toss/framework';
  // TopNavigation 설정
  const { addAccessoryButton } = useTopNavigation();
  
  // 하트 아이콘 버튼 추가
  addAccessoryButton({
    title: '하트',
    icon: {
      name: 'icon-heart-mono',
    },
    id: 'heart',
    onPress: () => console.log('테스트'), // 콜백함수 등록
  });

혹은 granite.config.ts 에

navigationBar?: {
  withBackButton?: boolean;
  withHomeButton?: boolean;
  initialAccessoryButton?: InitialAccessoryButton;

//e.g.
import { appsInToss } from '@apps-in-toss/framework/plugins';
import { defineConfig } from '@granite-js/react-native/config';

export default defineConfig({
  scheme: 'intoss',
  appName: 'my-granite-app-1',
  plugins: [
    appsInToss({
      brand: {
        displayName: 'my-granite-app-1', // 화면에 노출될 앱의 한글 이름으로 바꿔주세요.
        primaryColor: '#3182F6', // 화면에 노출될 앱의 기본 색상으로 바꿔주세요.
        icon: "",
        bridgeColorMode: 'basic',
      },
      permissions: [],
      navigationBar: {
        withBackButton: true,
        withHomeButton: true,
        initialAccessoryButton: {
          icon: {
            name: 'icon-heart-mono',
          },
          id: 'heart',
          title: '하트',
        },
      },
    }),
  ],
});

2. Webview

import { partner, tdsEvent } from '@apps-in-toss/web-framework'

  // 하트 아이콘 버튼 추가
  useEffect(() => {
    partner.addAccessoryButton({
      id: 'heart',
      title: '하트',
      icon: {
        name: 'icon-heart-mono',
      },
    });

    // 네비게이션 액세서리 버튼 클릭 이벤트 리스너 등록
    const cleanup = tdsEvent.addEventListener('navigationAccessoryEvent', {
      onEvent: ({ id }) => {
        if (id === 'heart') {
          console.log('테스트');
        }
      },
    });

    return cleanup;
  }, []);

혹은 granite.config.ts 에

navigationBar?: {
  withBackButton?: boolean;
  withHomeButton?: boolean;
  initialAccessoryButton?: InitialAccessoryButton;
};

// e.g.
import { defineConfig } from '@apps-in-toss/web-framework/config';

export default defineConfig({
  appName: 'webview-app-1',
  brand: {
    displayName: 'webview-app-1', // 화면에 노출될 앱의 한글 이름으로 바꿔주세요.
    primaryColor: '#3182F6', // 화면에 노출될 앱의 기본 색상으로 바꿔주세요.
    icon: "",
    bridgeColorMode: 'basic',
  },
  web: {
    host: 'localhost',
    port: 5173,
    commands: {
      dev: 'vite',
      build: 'tsc -b && vite build',
    },
  },
  permissions: [],
  outdir: 'dist',
  navigationBar: {
    withBackButton: true,
    withHomeButton: true,
    initialAccessoryButton: {
      id: 'close',
      title: 'Close',
      icon: {
        name: 'icon-heart-mono',
      },
    }
  },
});

• navigationBar 옵션 추가 → 기존 webViewProps 내 header 옵션으로 사용하고 계셨다면, 마이그레이션이 필요해요
• withHomeButton 옵션 신규 추가
• 초기 노출가능한 버튼 2개 → 1개로 변경