[ADD] Kakao 공유하기 버튼 구현 완료

+REACT_APP_KAKAO_KEY=921af7833aba321b82f7c7289d0f1774
\ No newline at end of file

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^12.1.10",
     "antd": "^4.8.2",
     "axios": "^0.21.0",
+    "dotenv": "^8.2.0",
     "node-sass": "4",
     "polished": "^4.0.5",
     "react": "^17.0.1",
@@ -16,6 +17,7 @@
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "react-social-kr": "^1.1.9",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",

+import React, { useEffect } from "react";
+import "./kakaoBtn.scss";
+import dotenv from "dotenv";
+import kakao from "../../assets/kakao.png";
+dotenv.config();
+
+const KakaoBtn = ({result}) => {
+  useEffect(() => {
+    createKakaoButton();
+  }, []);
+
+  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);
+      }
+      kakao.Link.createDefaultButton({
+        // Render 부분 id=kakao-link-btn 을 찾아 그부분에 렌더링을 합니다
+        container: "#kakao-link-btn",
+        objectType: "feed",
+        content: {
+          title: result.low,
+          description: "성격으로 알아보는 내 보직은? KHUSAT 특별과정!",
+          imageUrl: result.image, // i.e. process.env.FETCH_URL + '/logo.png'
+          link: {
+            webUrl: "http://khusat.herokuapp.com",
+          },
+        },
+        social: {
+          likeCount: 77,
+          commentCount: 55,
+          sharedCount: 333,
+        },
+        buttons: [
+          {
+            title: "나도 테스트 하기",
+            link: {
+              webUrl: "http://khusat.herokuapp.com",
+            },
+          },
+        ],
+      });
+    }
+  };
+  return (
+    <div className="kakao-share-button">
+      {/* Kakao share button */}
+      <div id="kakao-link-btn" >
+        <img src={kakao} alt="kakao-share-icon"/>
+        카톡으로 공유하기
+      </div>
+    </div>
+  );
+};
+export default KakaoBtn;

+#kakao-link-btn{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 1rem;
+    background-color: #FEE500;
+    padding: 0.5rem 1rem;
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    width: 14.5rem;
+    height: 5rem;
+    font-size: 1.2rem;
+    font-weight: bold;
+    img{
+        width: 2rem;
+        height: auto;
+    }
+    @media screen and (max-width: 36rem) {
+    width: 10rem;
+    height: 4rem;
+    font-size: 0.9rem;
+        img{
+            width: 1rem;
+            height: auto;
+        }
+    }
+}

+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";
+
+const useScript = (url) => {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = url;
+    script.async = true;
+    document.body.appendChild(script);
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, [url]);
+};
+export default useScript;

@@ -51,7 +51,7 @@ const MainTitle = styled.div`
   font-weight: bold;
   ${media.phone`
     font-size: 3rem;
-    margin-top: 2rem;
+    margin-top: 1.6rem;
   `}
 `;
 
@@ -90,6 +90,7 @@ const MainBtn = styled.div`
     width: 16rem;
     height: 4rem;
     font-size: 1.2rem;
+    margin-top: 0;
   `}
 `;
 

 import React from "react";
 import styled, { css } from "styled-components";
 import { lighten,darken } from "polished";
+import KakaoBtn from "../containers/KakaoBtnContainer";
 
 const sizes = {
   desktop: 102.4,
@@ -71,8 +72,21 @@ const Description = styled.div`
   `}
 `;
 
+const DescList = styled.li`
+  &::marker{
+    color: #536349;
+  }
+  list-style-position: inside;
+  text-indent: -1.6rem;
+  padding-left: 1.2rem;
+  ${media.phone`
+  text-indent: -0.9rem;
+  padding-left: 0.8rem;
+  `}
+`;
+
 const ContentBox = styled.div`
-margin-top: 1rem;
+  margin-top: 1rem;
   background-color: #f2f2f2;
   text-align: left;
   border-radius: 1rem;
@@ -83,6 +97,16 @@ margin-top: 1rem;
   `}
 `;
 
+const BtnWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 30rem;
+  ${media.phone`
+    width: 20rem;
+  `}
+`;
+
 const ResetBtn = styled.div`
   cursor: pointer;
   display: flex;
@@ -90,7 +114,7 @@ const ResetBtn = styled.div`
   align-items: center;
   margin-top: 1rem;
   margin-bottom: 2rem;
-  width: 25rem;
+  width: 14.5rem;
   height: 5rem;
   font-size: 1.6rem;
   font-weight: bold;
@@ -103,15 +127,12 @@ const ResetBtn = styled.div`
     background: ${darken(0.1, "#f2f2f2")};
   }
   ${media.phone`
-    width: 16rem;
+    width: 9rem;
     height: 4rem;
     font-size: 1.2rem;
   `}
 `;
 
-// TODO: 다시하기 and 카카오톡 공유
-// 다시하기 : getQuestion dispatch 해준 다음 push('/survey');
-
 function ResultPage({ history, result }) {
   const onClick=()=>{
     history.push('/');
@@ -124,11 +145,17 @@ function ResultPage({ history, result }) {
           <Position>{result.low}</Position>
           <ResultImg src={result.image} />
           <ContentBox>
-            <Description>{result.description}</Description>
+            <Description>
+              {result.description.map((desc,index)=>
+                (<DescList key={index}>{desc}</DescList>))}
+            </Description>
           </ContentBox>
         </Container>
       )}
-      <ResetBtn onClick={onClick}>다시하기</ResetBtn>
+      <BtnWrapper>
+        <ResetBtn onClick={onClick}>다시하기</ResetBtn>
+        <KakaoBtn result={result} />
+      </BtnWrapper>
     </Wrapper>
   );
 }

@@ -4388,7 +4388,7 @@ dotenv-expand@5.1.0:
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
   integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
 
-dotenv@8.2.0:
+dotenv@8.2.0, dotenv@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
@@ -10118,6 +10118,11 @@ react-scripts@4.0.0:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-social-kr@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/react-social-kr/-/react-social-kr-1.1.9.tgz#7543f7d3462a89668a549ec7da200366f08905a5"
+  integrity sha512-07Sdn+i1uvk1NMBzrpQytbMN96EO6pY4MxRgnNuo3jUcN77vrVUrdoq/xe4p9jAc0pSWhVS0kD/ouuMsvXiDkw==
+
 react@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"