[AWS] 카톡분석 프로젝트-14 / React / 카톡으로 공유하기

 

서비스 배포는 이미 완료했으며 개발간 자잘한 팁들을 포스팅한다.

 

카톡분석 서비스 주소

https://www.advancer-katalk.click

카톡분석 왕 테스트

 

---

 

 

아래와 같이 카톡으로 웹페이지를 공유하는 방법을 알아보자

 

 

---

 

1. 카카오 개발자 사이트에서 웹을 등록

 

Kakao Developers

카카오 API를 사용하는 것이기 때문에 위 작업이 필요하다.

 

가입후 플랫폼 탭에서 아래와 같이 내 사이트를 적어넣어주자 (localhost는 개발용)

 

---

 

2. 코드내에 Kakao init 해주기

 

아래와 같이 여러 키가 존재한다.

 

이 중 JavaScript 키를 사용할것이므로 일단 복사해준다.

 

const Indiresult = () => {
...
  const url = windows.location.href; //현재 url 가져오기
  useEffect(() => {
    try {
      initKakao(); // 카카오 계정 초기화
    } catch (err) {
      this.errorCatch(err);
    }
  }, []);

//JavaScript 키로 카카오 init 
  const initKakao = () => {
    if (window.Kakao) {
      const kakao = window.Kakao;
      if (!kakao.isInitialized()) {
        // kakao.init(process.env.REACT_APP_KAKAO_TOKEN);
        kakao.init("62ced8.......................");
      }
    }
  };
  
  ... 아래 설명에 계속 이어집니다

 

---

 

3. 메인 함수

 

  const shareKakao = () => {
  
  //미리 이미지를 호스팅해놓았다.
    if (king_first === '자발적아싸왕') {
      katalklink = "https://i.esdrop.com/d/f/1snazidKCy/AImaL8W8G2.png"
    }
    else if (king_first === '다한다습왕') {
      katalklink = "https://i.esdrop.com/d/f/1snazidKCy/3SerTihOD8.png"
    }
    
    window.Kakao.Link.sendDefault({ 
      objectType: 'feed',
      content: {
        title: '선물 추천',
        description: '#나는 전생에 어떤왕?',
        imageUrl: 'katalklink',
        link: {
          mobileWebUrl: url,
          webUrl: url,
        },
      },
      social: {
        likeCount: 286,
        commentCount: 45,
        sharedCount: 845,
      },
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: url,
            webUrl: url,
          },
        },
        {
          title: '앱으로 보기',
          link: {
            mobileWebUrl: url,
            webUrl: url,
          },
        },
      ],
    });
  };

  return (
   
        <div className="share-node" onClick={shareKakao}>
            <img src="이미지" alt="카카오공유" />
            <p>카톡</p>
        </div>
  );
};

 

---

 

4. 동작

 

- 아래와 같이 카카오톡 공유 버튼을 누르면

 

 

- 자주 보던 공유 창이 뜨게 된다.

 

- 실제 톡방에는 이와 같이 나타나게 된다.

 

 

 

끝

 

 

본 포스팅에서 개인별 공유 페이지 만들기, 개별이미지 호스팅 부분은 뛰어넘었습니다

질문있으시다면 쪽지나 댓글 남겨주세요~!