khusat / khusat-front

Go to a project
Toggle navigation Toggle navigation pinning
이준호
5df3d426 1 parent 4f98305c

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

Inline Side-by-side
Showing 11 changed files with 158 additions and 10 deletions
1 +REACT_APP_KAKAO_KEY=921af7833aba321b82f7c7289d0f1774
...\ No newline at end of file ...\ No newline at end of file
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
9 "@testing-library/user-event": "^12.1.10", 9 "@testing-library/user-event": "^12.1.10",
10 "antd": "^4.8.2", 10 "antd": "^4.8.2",
11 "axios": "^0.21.0", 11 "axios": "^0.21.0",
12 + "dotenv": "^8.2.0",
12 "node-sass": "4", 13 "node-sass": "4",
13 "polished": "^4.0.5", 14 "polished": "^4.0.5",
14 "react": "^17.0.1", 15 "react": "^17.0.1",
...@@ -16,6 +17,7 @@ ...@@ -16,6 +17,7 @@
16 "react-redux": "^7.2.2", 17 "react-redux": "^7.2.2",
17 "react-router-dom": "^5.2.0", 18 "react-router-dom": "^5.2.0",
18 "react-scripts": "4.0.0", 19 "react-scripts": "4.0.0",
20 + "react-social-kr": "^1.1.9",
19 "redux": "^4.0.5", 21 "redux": "^4.0.5",
20 "redux-devtools-extension": "^2.13.8", 22 "redux-devtools-extension": "^2.13.8",
21 "redux-thunk": "^2.3.0", 23 "redux-thunk": "^2.3.0",
......
1 +import React, { useEffect } from "react";
2 +import "./kakaoBtn.scss";
3 +import dotenv from "dotenv";
4 +import kakao from "../../assets/kakao.png";
5 +dotenv.config();
6 +
7 +const KakaoBtn = ({result}) => {
8 + useEffect(() => {
9 + createKakaoButton();
10 + }, []);
11 +
12 + const createKakaoButton = () => {
13 + // kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
14 + if (window.Kakao) {
15 + const kakao = window.Kakao;
16 + // 중복 initialization 방지
17 + if (!kakao.isInitialized()) {
18 + // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
19 + kakao.init(process.env.REACT_APP_KAKAO_KEY);
20 + }
21 + kakao.Link.createDefaultButton({
22 + // Render 부분 id=kakao-link-btn 을 찾아 그부분에 렌더링을 합니다
23 + container: "#kakao-link-btn",
24 + objectType: "feed",
25 + content: {
26 + title: result.low,
27 + description: "성격으로 알아보는 내 보직은? KHUSAT 특별과정!",
28 + imageUrl: result.image, // i.e. process.env.FETCH_URL + '/logo.png'
29 + link: {
30 + webUrl: "http://khusat.herokuapp.com",
31 + },
32 + },
33 + social: {
34 + likeCount: 77,
35 + commentCount: 55,
36 + sharedCount: 333,
37 + },
38 + buttons: [
39 + {
40 + title: "나도 테스트 하기",
41 + link: {
42 + webUrl: "http://khusat.herokuapp.com",
43 + },
44 + },
45 + ],
46 + });
47 + }
48 + };
49 + return (
50 + <div className="kakao-share-button">
51 + {/* Kakao share button */}
52 + <div id="kakao-link-btn" >
53 + <img src={kakao} alt="kakao-share-icon"/>
54 + 카톡으로 공유하기
55 + </div>
56 + </div>
57 + );
58 +};
59 +export default KakaoBtn;
1 +#kakao-link-btn{
2 + display: flex;
3 + justify-content: center;
4 + align-items: center;
5 + border-radius: 1rem;
6 + background-color: #FEE500;
7 + padding: 0.5rem 1rem;
8 + margin-top: 1rem;
9 + margin-bottom: 2rem;
10 + width: 14.5rem;
11 + height: 5rem;
12 + font-size: 1.2rem;
13 + font-weight: bold;
14 + img{
15 + width: 2rem;
16 + height: auto;
17 + }
18 + @media screen and (max-width: 36rem) {
19 + width: 10rem;
20 + height: 4rem;
21 + font-size: 0.9rem;
22 + img{
23 + width: 1rem;
24 + height: auto;
25 + }
26 + }
27 +}
1 +import useScript from "../hooks/useScript";
2 +import KakaoBtn from "../components/kakao/KakaoBtn";
3 +
4 +const KakaoBtnContainer = ({result}) => {
5 + useScript("https://developers.kakao.com/sdk/js/kakao.js");
6 + return (
7 + <div className="layout">
8 + <KakaoBtn result={result} />
9 + </div>
10 + );
11 +};
12 +export default KakaoBtnContainer;
1 +import { useEffect } from "react";
2 +
3 +const useScript = (url) => {
4 + useEffect(() => {
5 + const script = document.createElement("script");
6 + script.src = url;
7 + script.async = true;
8 + document.body.appendChild(script);
9 + return () => {
10 + document.body.removeChild(script);
11 + };
12 + }, [url]);
13 +};
14 +export default useScript;
...@@ -51,7 +51,7 @@ const MainTitle = styled.div` ...@@ -51,7 +51,7 @@ const MainTitle = styled.div`
51 font-weight: bold; 51 font-weight: bold;
52 ${media.phone` 52 ${media.phone`
53 font-size: 3rem; 53 font-size: 3rem;
54 - margin-top: 2rem; 54 + margin-top: 1.6rem;
55 `} 55 `}
56 `; 56 `;
57 57
...@@ -90,6 +90,7 @@ const MainBtn = styled.div` ...@@ -90,6 +90,7 @@ const MainBtn = styled.div`
90 width: 16rem; 90 width: 16rem;
91 height: 4rem; 91 height: 4rem;
92 font-size: 1.2rem; 92 font-size: 1.2rem;
93 + margin-top: 0;
93 `} 94 `}
94 `; 95 `;
95 96
......
1 import React from "react"; 1 import React from "react";
2 import styled, { css } from "styled-components"; 2 import styled, { css } from "styled-components";
3 import { lighten,darken } from "polished"; 3 import { lighten,darken } from "polished";
4 +import KakaoBtn from "../containers/KakaoBtnContainer";
4 5
5 const sizes = { 6 const sizes = {
6 desktop: 102.4, 7 desktop: 102.4,
...@@ -71,8 +72,21 @@ const Description = styled.div` ...@@ -71,8 +72,21 @@ const Description = styled.div`
71 `} 72 `}
72 `; 73 `;
73 74
75 +const DescList = styled.li`
76 + &::marker{
77 + color: #536349;
78 + }
79 + list-style-position: inside;
80 + text-indent: -1.6rem;
81 + padding-left: 1.2rem;
82 + ${media.phone`
83 + text-indent: -0.9rem;
84 + padding-left: 0.8rem;
85 + `}
86 +`;
87 +
74 const ContentBox = styled.div` 88 const ContentBox = styled.div`
75 -margin-top: 1rem; 89 + margin-top: 1rem;
76 background-color: #f2f2f2; 90 background-color: #f2f2f2;
77 text-align: left; 91 text-align: left;
78 border-radius: 1rem; 92 border-radius: 1rem;
...@@ -83,6 +97,16 @@ margin-top: 1rem; ...@@ -83,6 +97,16 @@ margin-top: 1rem;
83 `} 97 `}
84 `; 98 `;
85 99
100 +const BtnWrapper = styled.div`
101 + display: flex;
102 + justify-content: space-between;
103 + align-items: center;
104 + width: 30rem;
105 + ${media.phone`
106 + width: 20rem;
107 + `}
108 +`;
109 +
86 const ResetBtn = styled.div` 110 const ResetBtn = styled.div`
87 cursor: pointer; 111 cursor: pointer;
88 display: flex; 112 display: flex;
...@@ -90,7 +114,7 @@ const ResetBtn = styled.div` ...@@ -90,7 +114,7 @@ const ResetBtn = styled.div`
90 align-items: center; 114 align-items: center;
91 margin-top: 1rem; 115 margin-top: 1rem;
92 margin-bottom: 2rem; 116 margin-bottom: 2rem;
93 - width: 25rem; 117 + width: 14.5rem;
94 height: 5rem; 118 height: 5rem;
95 font-size: 1.6rem; 119 font-size: 1.6rem;
96 font-weight: bold; 120 font-weight: bold;
...@@ -103,15 +127,12 @@ const ResetBtn = styled.div` ...@@ -103,15 +127,12 @@ const ResetBtn = styled.div`
103 background: ${darken(0.1, "#f2f2f2")}; 127 background: ${darken(0.1, "#f2f2f2")};
104 } 128 }
105 ${media.phone` 129 ${media.phone`
106 - width: 16rem; 130 + width: 9rem;
107 height: 4rem; 131 height: 4rem;
108 font-size: 1.2rem; 132 font-size: 1.2rem;
109 `} 133 `}
110 `; 134 `;
111 135
112 -// TODO: 다시하기 and 카카오톡 공유
113 -// 다시하기 : getQuestion dispatch 해준 다음 push('/survey');
114 -
115 function ResultPage({ history, result }) { 136 function ResultPage({ history, result }) {
116 const onClick=()=>{ 137 const onClick=()=>{
117 history.push('/'); 138 history.push('/');
...@@ -124,11 +145,17 @@ function ResultPage({ history, result }) { ...@@ -124,11 +145,17 @@ function ResultPage({ history, result }) {
124 <Position>{result.low}</Position> 145 <Position>{result.low}</Position>
125 <ResultImg src={result.image} /> 146 <ResultImg src={result.image} />
126 <ContentBox> 147 <ContentBox>
127 - <Description>{result.description}</Description> 148 + <Description>
149 + {result.description.map((desc,index)=>
150 + (<DescList key={index}>{desc}</DescList>))}
151 + </Description>
128 </ContentBox> 152 </ContentBox>
129 </Container> 153 </Container>
130 )} 154 )}
131 - <ResetBtn onClick={onClick}>다시하기</ResetBtn> 155 + <BtnWrapper>
156 + <ResetBtn onClick={onClick}>다시하기</ResetBtn>
157 + <KakaoBtn result={result} />
158 + </BtnWrapper>
132 </Wrapper> 159 </Wrapper>
133 ); 160 );
134 } 161 }
......
...@@ -4388,7 +4388,7 @@ dotenv-expand@5.1.0: ...@@ -4388,7 +4388,7 @@ dotenv-expand@5.1.0:
4388 resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0" 4388 resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
4389 integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA== 4389 integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
4390 4390
4391 -dotenv@8.2.0: 4391 +dotenv@8.2.0, dotenv@^8.2.0:
4392 version "8.2.0" 4392 version "8.2.0"
4393 resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a" 4393 resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
4394 integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw== 4394 integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
...@@ -10118,6 +10118,11 @@ react-scripts@4.0.0: ...@@ -10118,6 +10118,11 @@ react-scripts@4.0.0:
10118 optionalDependencies: 10118 optionalDependencies:
10119 fsevents "^2.1.3" 10119 fsevents "^2.1.3"
10120 10120
10121 +react-social-kr@^1.1.9:
10122 + version "1.1.9"
10123 + resolved "https://registry.yarnpkg.com/react-social-kr/-/react-social-kr-1.1.9.tgz#7543f7d3462a89668a549ec7da200366f08905a5"
10124 + integrity sha512-07Sdn+i1uvk1NMBzrpQytbMN96EO6pY4MxRgnNuo3jUcN77vrVUrdoq/xe4p9jAc0pSWhVS0kD/ouuMsvXiDkw==
10125 +
10121 react@^17.0.1: 10126 react@^17.0.1:
10122 version "17.0.1" 10127 version "17.0.1"
10123 resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" 10128 resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
......