Toggle navigation
Toggle navigation
This project
Loading...
Sign in
khusat
/
khusat-front
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
이준호
2020-12-10 18:08:07 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
e0e8ff88b3638041ddc760efcc32acc27cd09cf3
e0e8ff88
1 parent
f333030a
[FIXED] 카카오톡 공유하기 버튼 script 오류 수정
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
18 additions
and
20 deletions
src/components/kakao/KakaoBtn.js
src/containers/KakaoBtnContainer.js
src/hooks/useScript.js
src/pages/ResultPage.js
src/components/kakao/KakaoBtn.js
View file @
e0e8ff8
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
...
...
src/containers/KakaoBtnContainer.js
deleted
100644 → 0
View file @
f333030
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
;
src/hooks/useScript.js
View file @
e0e8ff8
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
...
...
src/pages/ResultPage.js
View file @
e0e8ff8
import
React
,{
useEffect
}
from
"react"
;
import
styled
,
{
css
}
from
"styled-components"
;
import
{
lighten
,
darken
}
from
"polished"
;
import
KakaoBtn
from
"../co
ntainers/KakaoBtnContainer
"
;
import
KakaoBtn
from
"../co
mponents/kakao/KakaoBtn
"
;
const
sizes
=
{
desktop
:
102.4
,
...
...
Please
register
or
login
to post a comment