tdsEvent.addEventListener('navigationAccessoryEvent', {}) 미동작 이슈

개발
1 
    navigationBar: {
        withBackButton: false,
        withHomeButton: false,
        initialAccessoryButton: {
          icon: {
            name: "icon-inbox-mono",
          },
          id: "inbox",
          title: "내서재",
        },
      },
  })


tdsEvent.addEventListener('navigationAccessoryEvent', {
    onEvent: ({ id }) => {
        console.log('moveToInBox');
        if (id === 'inbox') {
            moveToInBox();
        }
    },
});

이벤트가 실행되지 않고 있습니다. “addAccessoryButton” 사용하면 정상 동작을 하나 오른쪽의 “X” 클릭시 알럿이 노출 되지 않네요.

2

금일 안내된 1.2.2 버전에서도 동일합니다.
빠른 확인 부탁 드립니다.

3

@sunwoo 님 안녕하세요

네비게이션 바의 x버튼 클릭 시 얼럿이 노출되지 않는 것으로 이해했어요.

본래도 노출이 안되는 스펙인데 어떤 내용인지 잘 이해되지 않아 다시 여쭤봅니다.

4
  1. addEventListener 오동작 문제
    1.1.3 버전까지는 addEventListener를 통해 네비게이션에 추가된 버튼이 클릭 되나, 이후 버전에서는 클릭 이벤트가 발생되지 않습니다.
    addEventListener가 아닌 “addAccessoryButton”으로 적용하면 이후 버전에서 버튼이 동작을 합니다.
  2. “X” 버튼 클릭시 “앱 종료 안내 팝업”이 노출 문제
    추가 버튼 설정이 없을 경우 “종료 안내 팝업” 노출
    추가 버튼 설정이 있는 경우 “종료 안내 팝업” 미노출

스크린샷 2025-10-21 오후 3.19.48
스크린샷 2025-10-21 오후 3.19.48768×1522 220 KB

해당 팝업은 상단의 “X”를 눌렀을때 나오는 Confirm창으로 저희가 구성한 부분이 아닙니다.

addEventListener를 통해 이벤트를 설정하고, 종료 팝업도 노출되게 하고 싶은데 1.2.X 버전에서는 정상 동작 하지 않는듯 합니다.

5

현재 addAccessoryButton 을 사용하게 되면 TDS 내부적으로 문제가 있어 다른 닫기 버튼이나 더보기 버튼이 동작하지 않습니다.

addAccessoryButton 을 사용하지 않으면 addEventListener 은 문제 없이 동작하고 있어요.

addAccessoryButton 을 제거하고 한번 해보시겠어요?

6 
    navigationBar: {
        withBackButton: false,
        withHomeButton: false,
        initialAccessoryButton: {
          icon: {
            name: "icon-home-mono",
          },
          id: "main",
          title: "홈",
        },
      }


        tdsEvent.addEventListener('navigationAccessoryEvent', {
            onEvent: ({ id }) => {
                if (id === 'inbox') {
                    moveToInBox();
                } else if (id === 'todayfeed') {
                    moveToTodayFeed();
                } else if (id === 'main') {
                    moveToHome();
                }
            },
        });

위 방식으로 구현 하였으나, addEventListener 처리시 아무런 이벤트가 발생되지 않습니다.

참고로 환경은 ReactNative 입니다.

7

안녕하세요 :slight_smile:

  useEffect(() => {
    const cleanup = tdsEvent.addEventListener('navigationAccessoryEvent', {
      onEvent: ({ id }) => {
        if (id === 'inbox') {
          console.log('inbox 클릭됨');
        } else if (id === 'todayfeed') {
          console.log('todayfeed 클릭됨');
        } else if (id === 'main') {
          console.log('main 클릭됨');
        }
      },
    });

    // 컴포넌트 언마운트 시 이벤트 리스너 제거
    return () => {
      cleanup();
    };
  }, []);

로 호출시 정상적으로 console.log가 찍히는 듯 한데, cleanup()과 함께 호출 해보시겠어요 ?!

8 
import { defineConfig } from "@granite-js/react-native/config";
import { router } from "@granite-js/plugin-router";
import { appsInToss } from '@apps-in-toss/framework/plugins';

export default defineConfig({
  scheme: "intoss",
  appName: 'treasurecomics',
  plugins: [appsInToss({
    brand: {
      displayName: '하루스토리',
      icon: 'https://static.treasurecomics.com/toss_mini_icons/app_in_toss_main_logo.png?v=20250811',
      primaryColor: '#0073DD',
      bridgeColorMode: 'basic',
    },
    permissions: [],
    navigationBar: {
        withBackButton: false,
        withHomeButton: false,
        initialAccessoryButton: {
          icon: {
            name: "icon-home-mono",
          },
          id: "main",
          title: "홈",
        },
    },
  }), router()],
});


useEffect(() => {
        const cleanup = tdsEvent.addEventListener('navigationAccessoryEvent', {
            onEvent: ({ id }) => {
                if (id === 'inbox') {
                    console.log('inbox 클릭됨');
                } else if (id === 'todayfeed') {
                    console.log('todayfeed 클릭됨');
                } else if (id === 'main') {
                    console.log('main 클릭됨');
                }
            },
        });
        return () => {
            cleanup();
        };
    }, []);

여전히 동작하지 않습니다.
SDK 1.1.3 사용시에는 문제가 없었는데, 1.2.X 이상 버전부터 발생했습니다.
추가로 확인이 필요한 부분이 있을까요 ?

9

언제 관련 답볍을 받을 수 있을까요?

10

v1.2.2 에서 정상 동작하였습니다 :cry:
import { tdsEvent } from '@toss/tds-react-native'; 를 쓰고 계신거죠 ?

11

'@toss-design-system/react-native’에 있는걸 사용하고 있었네요.
import 변경해서 정상 동작 확인 했습니다.

1개의 좋아요