Kakao.Link.createDefaultButton가 첫번째 호출에서 응답하지 않습니다

메시지 API
1 
   console.log(1, webUrl, container);
    console.log(2, option);

    Kakao.Link.createDefaultButton({
      container,
      objectType: 'feed',
      content: {
        title,
        description,
        imageUrl,
        link: {
          mobileWebUrl: webUrl,
          webUrl,
        },
      },
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: webUrl,
            webUrl,
          },
        },
      ],
    });

실행 직전의 콘솔까지 잘 찍히고 매개변수에 이상이 없는데 첫번째 호출에는 응답하지 않고 두번째 호출부터 팝업이 나옵니다.

2

안녕하세요.

버튼 객체 포함 전체 소스 공유 부탁드려요~

3 
const ShareModal: FunctionComponent<Props> = ({ parcel, closeModal }) => {
  const { addr, roadAddr, id: pnu } = parcel;
  const shareBtnRef = useRef<HTMLButtonElement>(null);
  const { sendKakaotalkMessage } = useKakaoMessage();
  const { origin, pathname } = useLocation();
  const webUrl = `${origin}${pathname}?pnu=${pnu}`;

  const handleShare = () => {
    const imageUrl = `${origin}/static/link_share_kakaotalk_www.png`;
    const description = roadAddr ? roadAddr.replaceAll('|', ' ') : '';
    const container = shareBtnRef.current;

    if (!container) return;

    sendKakaotalkMessage(webUrl, `#${container.id}`, {
      title: addr,
      description,
      imageUrl,
    });
  };

  const handleCopy = () => {
    console.log('클립보드에 복사되었습니다.');
  };

  return (
    <Wrapper>
      <Header>
        <Title>공유하기</Title>
        <CloseButton onClick={closeModal} />
      </Header>

      <ButtonGroup>
        <LabelButton>
          <KakaoButton id="share-btn" ref={shareBtnRef} onClick={handleShare} />
          <Label>카카오톡</Label>
        </LabelButton>

        <CopyToClipboard text={webUrl} onCopy={handleCopy}>
          <LabelButton>
            <LinkButton id="share-btn" ref={shareBtnRef} />
            <Label>링크복사</Label>
          </LabelButton>
        </CopyToClipboard>
      </ButtonGroup>
    </Wrapper>
  );
};

const useKakaoMessage = () => {
  useEffect(() => {
    if (Kakao.isInitialized()) return;

    Kakao.init(process.env.REACT_APP_KAKAO_JAVASCRIPT_KEY);
  }, []);

  const sendKakaotalkMessage = (
    webUrl: string,
    container: string | HTMLElement,
    option: {
      title?: string;
      description?: string;
      imageUrl?: string;
    } = {}
  ) => {
    if (!Kakao.isInitialized()) {
      console.error('kakao.js가 초기화되지 않았습니다.');
      return;
    }

    const { title, description, imageUrl } = option;
    console.log(1, webUrl, container);
    console.log(2, option);

    Kakao.Link.createDefaultButton({
      container,
      objectType: 'feed',
      content: {
        title,
        description,
        imageUrl,
        link: {
          mobileWebUrl: webUrl,
          webUrl,
        },
      },
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: webUrl,
            webUrl,
          },
        },
      ],
    });
  };

  return {
    sendKakaotalkMessage,
  };
};

커스텀훅과 컴포넌트입니다.

4

첫번째 클릭에 onClick={handleShare} 에 Kakao.Link.createDefaultButton 을 실행해서 객체가 생성 되었고
다음번 클릭 이벤트에 생성된 객체로 팝업이 나올 것 같네요.

Kakao.Link.createDefaultButton 이벤트로 먼저 객체 생성하고 클릭 이벤트 받으면 한번에 응답할 것 같아요~

1개의 좋아요