Skip to content

Commit

Permalink
Merge pull request #161 from mniYUNSU/feat/oauth
Browse files Browse the repository at this point in the history
[Client] / #59 / Modal.js : 카카오 소셜 로그인 환경 설정
  • Loading branch information
NAPP4287 authored Sep 1, 2021
2 parents deac43a + 5b13a71 commit 24bc140
Show file tree
Hide file tree
Showing 16 changed files with 339 additions and 64 deletions.
15 changes: 15 additions & 0 deletions client/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"dotenv": "^10.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-kakao-login": "^2.1.0",
"react-router-dom": "^5.2.1",
"react-scripts": "4.0.3",
"styled-components": "^5.3.1",
Expand Down
Binary file modified client/public/favicon.ico
Binary file not shown.
6 changes: 5 additions & 1 deletion client/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>JURIMMA</title>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
Kakao.init("1e2b4e1cf49e438a572407555898e7b1");
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
62 changes: 58 additions & 4 deletions client/src/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,62 @@ button {

body {
line-height: 1;
background: #9ee6c5;
/* background: #9ee6c5; */
padding: 0;
margin: 0;
border: 0;
vertical-align: baseline;
/* background-color: #9ee6c5; */
background: linear-gradient(-45deg, #ff006a, #9ee6c5, #9443df);
box-sizing: border-box;
font-family: "Nanum Gothic", "Noto Sans", sans-serif;
/* background: url("bg.png"); */
position: relative;
animation: backgroundChangeback 15s ease-in-out infinite;
background-size: 6000px 3000px;
background-repeat: no-repeat;
overflow: hidden;
}
body:after {
opacity: 0.2;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url("bg.png");
background-repeat: repeat;
background-size: 3000px 1800px;
overflow: hidden;
/* transform: rotate(15deg) scale(1.3); */
animation: backgroundChange 60s ease-in-out infinite;
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
overflow: hidden;
}
@keyframes backgroundChange {
0% {
background-position: 0% 300%;
}
50% {
background-position: 150% 0%;
}
100% {
background-position: 0 300%;
}
}
@keyframes backgroundChangeback {
0% {
background-position: 100% 0%;
}
50% {
background-position: 0% 100%;
}
100% {
background-position: 100% 0;
}
}
ol,
ul {
Expand Down Expand Up @@ -76,12 +125,15 @@ h1 {
}

#jurimma {
width: 200px;
height: 200px;
width: 250px;
height: 250px;
background-image: url("jurimma_logo.png");
background-repeat: no-repeat;
background-size: 200px 200px;
background-position: center;
background-size: 100%;
transition: 0.3s;
border-radius: 60px;
}
#jurimma:hover {
background-image: url("jurimma_logo_hover.png");
Expand Down Expand Up @@ -109,5 +161,7 @@ footer {
height: 10vh;
line-height: 10vh;
text-align: center;
font-size: max(0.85vw, 11px);
color: rgba(63, 9, 9, 0.5);
font-weight: bold;
font-size: max(0.85vw, 20px);
}
Binary file added client/src/bg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
108 changes: 99 additions & 9 deletions client/src/comp/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import logo from "../jurimma_logo.png";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown, faComment } from "@fortawesome/free-solid-svg-icons";
import { useHistory } from "react-router";
import KaKaoLogin from "react-kakao-login";
import axios from "axios";
import { KAKAO_AUTH_URL } from "./oauth";
const { Kakao } = window;

const checkModule = require("../checkModule");
axios.defaults.withCredentials = true;

Expand Down Expand Up @@ -343,11 +347,6 @@ function Modal({ setOnModal, setisLogin, setUserInfo, setAccToken, accToken }) {
}
};

// signupUsername: "",
// signupEmail: "",
// signupPhone: "",
// signupPassword: "",
// signupRePassword: "",
const handleSignup = async () => {
try {
if (
Expand Down Expand Up @@ -393,6 +392,86 @@ function Modal({ setOnModal, setisLogin, setUserInfo, setAccToken, accToken }) {
setCurrentTab(index);
};

const kakaoLoginHandler = async (res) => {
await loginWithKakao(res);
};

const loginWithKakao = async (res) => {
console.log(res);
const code = await new URL(window.location.href).searchParams.get("code");
const email = await JSON.stringify(res.profile.kakao_account.email);
const username = await JSON.stringify(res.profile.properties.nickname);
const userPic = await JSON.stringify(res.profile.properties.profile_image);
console.log(email, username, userPic);
const data = {
email: email.slice(1, -1),
username: username.slice(1, -1),
userPic: userPic.slice(1, -1),
password: "kakao1234!",
phone: "01077777777",
};
console.log(data);
console.log(data.userPic);
// let signupResult = await axios.post(`${url}/user/signup`, {
// email: email,
// password: "kakao1234login",
// username: username,
// phone: "01088888888",
// userPic: userPic,
// });
// console.log(signupResult.data.message);
// history.push("/");
// setisLogin(true);
// setOnModal(false);
// alert("로그인 완료되었습니다.");
};

// const loginWithKakao = async () => {
// const loginRes = await Kakao.Auth.login({
// success: async function (authObj) {
// // alert(JSON.stringify(authObj));
// let res = await axios({
// url: "https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=1e2b4e1cf49e438a572407555898e7b1&redirect_uri=http://localhost:3000/oauth",
// method: "post",
// accept: "application/json",
// data: JSON.stringify({ access_token: authObj.access_token }),
// });
// await localStorage.setItem("Kakao_token", res.access_token);
// if (res.access_token) {
// setOnModal(false);
// setisLogin(true);
// history.push("/");
// }
// },
// fail: function (err) {
// alert(JSON.stringify(err));
// },
// });
// console.log(loginRes);
// };

// // // 아래는 데모를 위한 UI 코드입니다.
// displayToken();
// function displayToken() {
// const token = getCookie("authorize-access-token");
// if (token) {
// Kakao.Auth.setAccessToken(token);
// Kakao.Auth.getStatusInfo(({ status }) => {
// if (status === "connected") {
// document.getElementById("token-result").innerText =
// "login success. token: " + Kakao.Auth.getAccessToken();
// } else {
// Kakao.Auth.setAccessToken(null);
// }
// });
// }
// }
// function getCookie(name) {
// const value = "; " + document.cookie;
// const parts = value.split("; " + name + "=");
// if (parts.length === 2) return parts.pop().split(";").shift();
// }
// const KaKaoLogin = styled(KakaoLogin)``;
return (
<>
<ModalBack>
Expand All @@ -406,10 +485,21 @@ function Modal({ setOnModal, setisLogin, setUserInfo, setAccToken, accToken }) {
</WelcomeBox>

<KakaoWrap>
<KakaoLogin>
<FontAwesomeIcon icon={faComment} id="socialLogin" />
<p>카카오 로그인</p>
</KakaoLogin>
<KaKaoLogin
jsKey="1e2b4e1cf49e438a572407555898e7b1"
onSuccess={(res) => kakaoLoginHandler(res)}
onFailure={(res) => console.log(res)}
getProfile={true}
onLogout={console.info}
style={{
width: "100%",
}}
>
<KakaoLogin>
<FontAwesomeIcon icon={faComment} id="socialLogin" />
<p>카카오 로그인</p>
</KakaoLogin>
</KaKaoLogin>
</KakaoWrap>
</BoxOne>

Expand Down
Loading

0 comments on commit 24bc140

Please sign in to comment.