KakaoShareButton.js 1.95 KB
Newer Older
권병윤's avatar
0806    
권병윤 committed
1
2
3
4
5
6
7
8
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: "",
Kim, Chaerin's avatar
Kim, Chaerin committed
9
10
  name: "",
};
권병윤's avatar
0806    
권병윤 committed
11
12
13

const KakaoShareButton = (porps) => {
  const [inviteperson, setProfile] = useState(INIT_invite);
Kim, Chaerin's avatar
Kim, Chaerin committed
14
  const [error, setError] = useState("");
권병윤's avatar
0806    
권병윤 committed
15
  const { roomId } = useParams();
이재연's avatar
이재연 committed
16
  const invitepersonId = sessionStorage.getItem("user");
권병윤's avatar
0806    
권병윤 committed
17
18
19
20
21
22
23
24
25
26
27
28
29

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

  useEffect(() => {
    getProfile(invitepersonId);
  }, []);
Kim, Chaerin's avatar
Kim, Chaerin committed
30
31
32
33

  useEffect(() => {
    createKakaoButton();
  }, []);
권병윤's avatar
0806    
권병윤 committed
34

Kim, Chaerin's avatar
Kim, Chaerin committed
35
36
37
38
39
40
41
  const createKakaoButton = () => {
    // kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
    if (window.Kakao) {
      const kakao = window.Kakao;
      // 중복 initialization 방지
      if (!kakao.isInitialized()) {
        // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
권병윤's avatar
0806    
권병윤 committed
42
        kakao.init(kakao_key[0].kakao_key);
Kim, Chaerin's avatar
Kim, Chaerin committed
43
44
      }
      kakao.Link.createDefaultButton({
Kim, Chaerin's avatar
Kim, Chaerin committed
45
46
47
48
49
50
        container: "#kakao-link-btn",
        objectType: "text",
        text: `${inviteperson.name}님이 당신을 화상회의에 초대했습니다! 초대된 방 코드:${roomId}`,
        link: {
          mobileWebUrl: `http://localhost:3000/invite/${roomId}`,
          webUrl: `http://localhost:3000/invite/${roomId}`,
Kim, Chaerin's avatar
Kim, Chaerin committed
51
52
53
54
        },
      });
    }
  };
Kim, Chaerin's avatar
Kim, Chaerin committed
55

Kim, Chaerin's avatar
Kim, Chaerin committed
56
57
58
  return (
    <div className="kakao-share-button">
      {/* Kakao share button */}
Kim, Chaerin's avatar
Kim, Chaerin committed
59
60
61
62
63
64
65
66
      <button
        id="kakao-link-btn"
        type="submit"
        className="col-2 p-1 btn btn-primary"
        data-bs-dismiss="modal"
        style={{ width: "120px" }}
      >
        카카오로 초대
Kim, Chaerin's avatar
Kim, Chaerin committed
67
68
69
70
71
      </button>
    </div>
  );
};
export default KakaoShareButton;