Skip to content

Commit

Permalink
[CLIENT] Modal.js : 카카오 소셜 로그인 환경 설정
Browse files Browse the repository at this point in the history
  • Loading branch information
@mniYUNSU
mniYUNSU committed Aug 31, 2021
1 parent 9009e28 commit 2577b41
Show file tree
Hide file tree
Showing 16 changed files with 277 additions and 54 deletions.
15 changes: 15 additions & 0 deletions client/package-lock.json
View file

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
View file
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
View file
Binary file not shown.
6 changes: 5 additions & 1 deletion client/public/index.html
View file
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
View file
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
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 72 additions & 9 deletions client/src/comp/Modal.js
View file
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 @@ -392,7 +391,60 @@ function Modal({ setOnModal, setisLogin, setUserInfo, setAccToken, accToken }) {
const selectMenuHandler = (index) => {
setCurrentTab(index);
};
// const kakaoLoginHandler = () => {
// const code = new URL(window.location.href).searchParams.get("code");
// console.log(code);
// };
// const kakaoLoginHandler = async () => {
// await loginWithKakao();
// };

// 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 +458,21 @@ function Modal({ setOnModal, setisLogin, setUserInfo, setAccToken, accToken }) {
</WelcomeBox>

<KakaoWrap>
<KakaoLogin>
<FontAwesomeIcon icon={faComment} id="socialLogin" />
<p>카카오 로그인</p>
</KakaoLogin>
<KaKaoLogin
jsKey="1e2b4e1cf49e438a572407555898e7b1"
onSuccess={(res) => console.log(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
35 changes: 24 additions & 11 deletions client/src/comp/Nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@ const Button1 = styled.button`
height: 7vh;
border: none;
border-radius: 40px;
font-size: 0.98rem;
// font-size: max(1.1rem, 1vw);
font-weight: 700;
display: block;
margin-top: 5vh;
transition: 0.3s;
cursor: pointer;
background-color: white;
background-color: rgba(158, 230, 197, 0.4);
border: 2px solid black;
cursor: pointer;
> a {
Expand All @@ -48,7 +48,7 @@ const Button1 = styled.button`
box-sizing: border-box;
}
:hover {
background-color: black;
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
&:nth-child(1) {
Expand All @@ -61,13 +61,13 @@ const Button2 = styled.button`
min-width: 20vh;
height: 7vh;
border-radius: 40px;
font-size: 0.98rem;
font-size: max(1.1rem, 1vw);
font-weight: 700;
display: block;
margin: 5vh auto 0;
cursor: pointer;
transition: 0.3s;
background-color: white;
background-color: rgba(158, 230, 197, 0.4);
border: 2px solid black;
cursor: pointer;
> a {
Expand All @@ -78,7 +78,7 @@ const Button2 = styled.button`
box-sizing: border-box;
}
:hover {
background-color: black;
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
&:nth-child(1) {
Expand All @@ -96,19 +96,24 @@ const ProfileWrap = styled.div`
border-radius: 25vh;
border: 3px solid black;
margin-bottom: 5vh;
box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.8);
transition: 0.2s;
}
> img:hover {
transform: translateY(-5%);
}
> button {
width: 100%;
min-width: 20vh;
height: 7vh;
border: none;
border-radius: 40px;
font-size: 0.98rem;
font-size: max(1.1rem, 1vw);
font-weight: 700;
display: block;
margin: 0 auto;
cursor: pointer;
background-color: white;
background-color: rgba(158, 230, 197, 0.4);
border: 2px solid black;
box-sizing: border-box;
> a {
Expand All @@ -120,13 +125,13 @@ const ProfileWrap = styled.div`
}
}
> button:hover {
background-color: black;
background-color: rgba(0, 0, 0, 0.8);
color: white;
transition: 0.3s;
}
> p {
margin-top: -3.3vh;
font-size: 1.1rem;
font-size: max(1.1rem, 1vw);
margin-bottom: 1.5vh;
font-weight: 700;
}
Expand Down Expand Up @@ -166,7 +171,8 @@ function Nav({
align-items: center;
overflow: hidden;
}
background-color: #edfff7;
background-color: rgba(237, 255, 247, 0.8);
box-shadow: 10px 0px 100px darkgray;
position: sticky;
top: 0;
flex: 1 1 auto;
Expand Down Expand Up @@ -214,6 +220,13 @@ function Nav({
</NavBtn>
<Navbar>
<div>
<ProfileWrap>
<img src={profile} alt="none" />
<p>
<br></br>
<br></br>로그인하면 원하는 줄임말을 추가할 수 있어요!
</p>
</ProfileWrap>
<Button1 onClick={() => setOnModal(true)}>LOGIN / SIGNUP</Button1>
<Button1 onClick={() => setOnModal(true)}>MYPAGE</Button1>
</div>
Expand Down
Loading

0 comments on commit 2577b41

Please sign in to comment.