이준호

[FIXED] 카카오톡 공유하기 버튼 script 오류 수정

import React, { useEffect } from "react";
import "./kakaoBtn.scss";
import kakao from "../../assets/kakao.png";
import useScript from "../../hooks/useScript";
const KakaoBtn = ({result}) => {
const { loaded } = useScript("https://developers.kakao.com/sdk/js/kakao.js");
useEffect(()=>{
createKakaoButton();
},[]);
if(loaded)
createKakaoButton();
},[loaded]);
const createKakaoButton = () => {
// kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
if (window.Kakao) {
const kakao = window.Kakao;
// 중복 initialization 방지
if (!kakao.isInitialized()) {
// 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
kakao.init(process.env.REACT_APP_KAKAO_KEY);
......@@ -53,4 +58,4 @@ const KakaoBtn = ({result}) => {
</div>
);
};
export default KakaoBtn;
export default KakaoBtn;
\ No newline at end of file
......
import React,{useEffect} from "react";
import useScript from "../hooks/useScript";
import KakaoBtn from "../components/kakao/KakaoBtn";
const KakaoBtnContainer = ({result}) => {
useScript("https://developers.kakao.com/sdk/js/kakao.js");
return (
<div className="layout">
<KakaoBtn result={result} />
</div>
);
};
export default KakaoBtnContainer;
import { useEffect } from "react";
import { useEffect, useState } from "react";
const useScript = (url) => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
const script = document.createElement("script");
script.src = url;
script.async = true;
script.onload = () => {
setLoaded(true);
}
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, [url]);
return { loaded };
};
export default useScript;
export default useScript;
\ No newline at end of file
......
import React,{useEffect} from "react";
import styled, { css } from "styled-components";
import { lighten,darken } from "polished";
import KakaoBtn from "../containers/KakaoBtnContainer";
import KakaoBtn from "../components/kakao/KakaoBtn";
const sizes = {
desktop: 102.4,
......