KakaoShareButton.js

import React, { useEffect, useState } from "react";
import { useParams } from "react-router";
import kakao_key from "../kakao.config.json";
import userApi from "../apis/user.api";
import catchErrors from "../context/catchError";

const INIT_invite = {
  id: "",
  name: "",
};

const KakaoShareButton = (porps) => {
  const [inviteperson, setProfile] = useState(INIT_invite);
  const [error, setError] = useState("");
  const { roomId } = useParams();
  const invitepersonId = sessionStorage.getItem("user");

  async function getProfile(userID) {
    try {
      const data = await userApi.getUser(userID);
      setProfile(data);
    } catch (error) {
      catchErrors(error, setError);
    }
  }

  useEffect(() => {
    getProfile(invitepersonId);
  }, []);

  useEffect(() => {
    createKakaoButton();
  }, []);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://developers.kakao.com/sdk/js/kakao.js";
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  const createKakaoButton = () => {
    // kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
    if (window.Kakao) {
      const kakao = window.Kakao;
      // 중복 initialization 방지
      if (!kakao.isInitialized()) {
        // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
        kakao.init(kakao_key[0].kakao_key);
      }
      kakao.Link.createDefaultButton({
        container: "#kakao-link-btn",
        objectType: "text",
        text: `${inviteperson.name}님이 당신을 화상회의에 초대했습니다! 초대된 방 코드:${roomId}`,
        link: {
          mobileWebUrl: `http://localhost:3000/invite/${roomId}`,
          webUrl: `http://localhost:3000/invite/${roomId}`,
        },
      });
    }
  };

  return (
    <div className="kakao-share-button">
      {/* Kakao share button */}
      <button
        id="kakao-link-btn"
        type="submit"
        className="col-2 p-1 btn btn-primary"
        data-bs-dismiss="modal"
        style={{ width: "120px" }}
        onClick={() => console.log("안녕")}
      >
        카카오로 초대
      </button>
    </div>
  );
};
export default KakaoShareButton;