addAccessoryButton로 네비게이션에 공유 아이콘을 넣었는데 한번 클릭하면 사라집니다

개발
1

platform에 따라 다른 공유 아이콘을 사용하고 싶어서
App.jsx 파일에서 네비게이션에 addAccessoryButton로 추가했는데,
공유 아이콘을 클릭하면 공유 패널이 열리고, 헤더에서 아이콘이 사라집니다.

 const platform = getPlatformOS();

  useEffect(() => {

partner.addAccessoryButton({  // 아이콘 버튼 추가

id: 'share',

title: '공유하기',

icon: {

name: platform === 'android' ? 'icon-share-dots' : 'icon-share',

      },

    });



// 네비게이션 액세서리 버튼 클릭 이벤트 리스너 등록

const cleanup = tdsEvent.addEventListener('navigationAccessoryEvent', {

onEvent: ({ id }) => {

if (id === 'share') {

console.log('버튼 클릭');

handleClick();

        }

      },

    });



return cleanup;

  }, []);
2

혹시 해결되었을까요? 저희도 partner.addAccessoryButton 로 버튼을 하나 추가했는데, 네비게이션바에 추가된 버튼을 직접 클릭하지 않더라도 url이 변경되면 사라집니다.

개발환경

{
    "@apps-in-toss/web-framework": "^1.1.3",
    "react": "^18.3.1"
}

컴포넌트

// main.tsx
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <TDSMobileAITProvider>
      <AccessoryRenderTest />
    </TDSMobileAITProvider>
  </StrictMode>,
);

function AccessoryRenderTest() {
  useEffect(() => {
    partner.addAccessoryButton({
      id: 'heart',
      title: '하트',
      icon: {
        name: 'icon-heart-mono',
      },
    });
  }, []);

  return (
    <div>
      <Button onClick={() => window.history.pushState({}, '', '/test')}>go to test</Button>
      <Button onClick={() => window.history.pushState({}, '', '/test2')}>go to test2</Button>
    </div>
  )
}
3

확인하고 공유드리겠습니다 :man_bowing:

2개의 좋아요
4

안녕하세요 :man_bowing:
sdk 1.4.5로 업데이트 후 테스트 부탁드려요