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 157 additions and 9 deletions
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>
)}
<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"
......