[ML][React] 나는 솔로 테스트 - 출연하면 나의 이름은? AI 모델 teachable machine (카카오톡 공유 javascript sdk) - Part 3

현재까지 진행 완료 된 사항

1. 결과화면을 html2canvas 이용하여 이미지로 추출

2. 추출된 이미지를 서버에 임시 hosting

작업 과정

3. 카카오톡 공유 (javascript sdk)

3-1. 공유 버튼 넣기

3-2. 공유 버튼 기능 테스트

과정 3.  카카오톡 공유 (javascript sdk)

3-1. 공유 버튼 넣기

- container 생성 후 제공되는 createDefaultButton 호출하면된다

<a id="kakaotalk-sharing-btn" href="javascript:;">
  <img src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png"
    alt="카카오톡 공유 보내기 버튼" />
</a>

<script>
  Kakao.Share.createDefaultButton({
    container: '#kakaotalk-sharing-btn',
    objectType: 'feed',
    content: {
      title: '딸기 치즈 케익',
      description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
      imageUrl:
        'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
  });
</script>

- 내 사이트에 적용

 

문제 발생:

createDefaultButton 누르기 전 이미지가 업로드되어 createDefaultButton 시 set되는 url이 이미 생성되어있어야함. 하지만 버튼을 그리기 위해서는 createDefaultButton이 먼저 호출되어야함.

 

Workaround:

버튼 생성 없이 메시지만 보내는 sendDefault 함수 사용

 

관련 코드:

kakao.Share.sendDefault({
  objectType: 'feed',
  content: {
    title: title,
    imageUrl:
      url,
    link: {
      mobileWebUrl: 'https://harang90.github.io',
      webUrl: 'https://harang90.github.io'
    },
  },
});

 

3-2. 공유 버튼 기능 테스트

 

테스트 이유:

이미지 업로드 후 이미지가 공유 하기에 잘 가는지 확인

 

테스트 결과:

실패

 

문제:

1. 공유하기 시 이미지 미리보기 때 이미지가 로딩이 안된채 보임

 

원인:

1. useState 활용하여 메시지 url을 state 값을 넣어주고 있었는데, setState 로 url 값을 넣어주려면 시간이 좀 걸림

 

Workaround:

1. 굳이 useState 를 활용하지 않고, response로 받은 url을 그대로 메시지 url 로 사용

 

재테스트 결과:

성공

최종 결과물

스크린샷:

코드:

const ShareButton = (props) => {

  useEffect(() => {
    if (window.Kakao) {
      const kakao = window.Kakao;
      if (!kakao.isInitialized()) {
        kakao.init('2a0e55e39e3595fb4c32b31dcf0871aa');
      }
    }
  }, []);

  const handleConvertToImageAndUpload = () => {
    html2canvas(props.componentRef.current).then((canvas) => {
      canvas.toBlob(function(blob) {
        var file = new File([blob], "image.png", {type: "image/jpeg", lastModified: Date.now()});

        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);

        if (window.Kakao) {
          const kakao = window.Kakao;
          
          kakao.Share.uploadImage({
            file: dataTransfer.files,
          })
            .then(function(response) {

              var prob = Math.round(props.result[0]["probability"] * 100).toString()
              var title = '당신은 ' + prob + '% ' + props.result[0]["className"] + ' 입니다'

              kakao.Share.sendDefault({
                objectType: 'feed',
                content: {
                  title: title,
                  imageUrl:
                    response.infos.original.url,
                  link: {
                    mobileWebUrl: 'https://harang90.github.io',
                    webUrl: 'https://harang90.github.io'
                  },
                },
              });

            })
            .catch(function(error) {
              console.log(error);
            });
        }

      }, "image/jpeg");
    });
  };

  const shareKakao = () => {
    if (window.Kakao) {
      const kakao = window.Kakao;
      
      if (!kakao.isInitialized()) return;

      handleConvertToImageAndUpload();

    };
  }

  return (
    <Box component="button" onClick={shareKakao}
      sx={{
        width: 300,
        margin: '0 auto',
        border: 'none',
        display: 'flex',
        justifyContent: 'center',
        backgroundColor: 'transparent',
        '&:hover': {
          backgroundColor: 'primary.light',
          opacity: [0.9, 0.9, 0.9],
        },
      }}
    >
      <img src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_small.png" alt="카카오톡 공유 보내기 버튼" /> 
    </Box>
  );
}