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

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

 import React,{useEffect} from "react";
 import React,{useEffect} from "react";
 import styled, { css } from "styled-components";
 import styled, { css } from "styled-components";
 import { lighten,darken } from "polished";
 import { lighten,darken } from "polished";
-import KakaoBtn from "../containers/KakaoBtnContainer";
+import KakaoBtn from "../components/kakao/KakaoBtn";
 
 
 const sizes = {
 const sizes = {
   desktop: 102.4,
   desktop: 102.4,