Skip to content

GitLab

Commit e8659e4a authored by Spark's avatar Spark Committed by KangMin An
Browse files

210705 kakao

parent 52e093f9
Show whitespace changes
Inline Side-by-side
client/package-lock.json
View file @ e8659e4a
...@@ -18,6 +18,8 @@ ...@@ -18,6 +18,8 @@
"react-bootstrap": "^1.6.1", "react-bootstrap": "^1.6.1",
"react-chartjs-2": "^3.0.3", "react-chartjs-2": "^3.0.3",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-google-login": "^5.2.2",
"react-kakao-login": "^2.1.0",
"react-live-clock": "^5.2.0", "react-live-clock": "^5.2.0",
"react-moment": "^1.1.1", "react-moment": "^1.1.1",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
...@@ -17414,11 +17416,32 @@ ...@@ -17414,11 +17416,32 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
}, },
"node_modules/react-google-login": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
"integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
"dependencies": {
"@types/react": "*",
"prop-types": "^15.6.0"
},
"peerDependencies": {
"react": "^16 || ^17",
"react-dom": "^16 || ^17"
}
},
"node_modules/react-is": { "node_modules/react-is": {
"version": "17.0.2", "version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
}, },
"node_modules/react-kakao-login": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-kakao-login/-/react-kakao-login-2.1.0.tgz",
"integrity": "sha512-yvwe9Qc5cG+ucDAWOoIW4QjMB55M0Y97v040pbjcmc3Ud+bYHbQ+SwcVkOBvfDynyQbLPPoGJ+iN8rCRD4lzJw==",
"peerDependencies": {
"react": ">= 15.3.0"
}
},
"node_modules/react-lifecycles-compat": { "node_modules/react-lifecycles-compat": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
...@@ -36569,11 +36592,26 @@ ...@@ -36569,11 +36592,26 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==" "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
}, },
"react-google-login": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
"integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
"requires": {
"@types/react": "*",
"prop-types": "^15.6.0"
}
},
"react-is": { "react-is": {
"version": "17.0.2", "version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
}, },
"react-kakao-login": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-kakao-login/-/react-kakao-login-2.1.0.tgz",
"integrity": "sha512-yvwe9Qc5cG+ucDAWOoIW4QjMB55M0Y97v040pbjcmc3Ud+bYHbQ+SwcVkOBvfDynyQbLPPoGJ+iN8rCRD4lzJw==",
"requires": {}
},
"react-lifecycles-compat": { "react-lifecycles-compat": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
client/package.json
View file @ e8659e4a
...@@ -14,6 +14,8 @@ ...@@ -14,6 +14,8 @@
"react-bootstrap": "^1.6.1", "react-bootstrap": "^1.6.1",
"react-chartjs-2": "^3.0.3", "react-chartjs-2": "^3.0.3",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-google-login": "^5.2.2",
"react-kakao-login": "^2.1.0",
"react-live-clock": "^5.2.0", "react-live-clock": "^5.2.0",
"react-moment": "^1.1.1", "react-moment": "^1.1.1",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
......
client/public/index.html
View file @ e8659e4a
...@@ -23,7 +23,9 @@ ...@@ -23,7 +23,9 @@
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>EUE, make your day</title> <title>EUE, make your day</title>
<script src='https://developers.kakao.com/sdk/js/kakao.min.js'></script>
<script>Kakao.init("29c2c90caed30db77d55580048c53d7b");</script>
<!-- <meta name ="google-signin-client_id" content="217755353555-3msma49ckq4fa47k0tg5tkshatcdh8c9.apps.googleusercontent.com"> -->
</head> </head>
<body> <body>
......
client/src/App.css
View file @ e8659e4a
...@@ -2,6 +2,39 @@ ...@@ -2,6 +2,39 @@
body { body {
font-family: "Noto Sans KR", sans-serif !important; font-family: "Noto Sans KR", sans-serif !important;
}
.a:hover {
color: white;
}
.btn:active {
color : rgb(250, 220, 0);
}
.form-group .form-control {
border-radius: 40px;
}
#formbtn {
width: 100%;
border-radius: 40px;
background-color: rgb(110, 189, 142);
border-color: ivory;
}
#logpng {
width: 25px;
height: auto;
margin-right: 1em;
}
#socialLink {
padding: 0.5em;
margin: 0.5em;
height: 2.5em;
color: gray;
font-size: 10px;
width: fit-content;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
...@@ -10,13 +43,16 @@ body { ...@@ -10,13 +43,16 @@ body {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
margin: auto; margin: auto;
/* font-family: "Noto Sans KR", sans-serif; */
} }
.container-fluid { .container-fluid {
max-width: 480px !important; max-width: 480px !important;
} }
#stickyy {
max-width: 300px;
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {
...@@ -25,18 +61,20 @@ body { ...@@ -25,18 +61,20 @@ body {
padding-left: 50px; padding-left: 50px;
padding-right: 50px; padding-right: 50px;
margin: auto; margin: auto;
/* font-family: "Noto Sans KR", sans-serif; */
} }
.container-fluid { .container-fluid {
max-width: 1200px !important; max-width: 1000px !important;
} }
.container-fluid .row #stickyy { .container-fluid .row #stickyy {
position: sticky !important; position: sticky !important;
position: -webkit-sticky; position: -webkit-sticky;
top: 30px; top: 40px;
min-width: 300px; width: fit-content;
height: fit-content;
max-width: 240px;
} }
} }
\ No newline at end of file
client/src/components/KakaoLogin.js 0 → 100644
View file @ e8659e4a
// import React from 'react'
// import { Image } from 'react-bootstrap'
// import KaKaoLogin from 'react-kakao-login'
// function KakaoLogin() {
// // Kakao.Auth.login({
// // success: function (authObj) {
// // alert(JSON.stringify(authObj))
// // },
// // fail: function (err) {
// // alert(JSON.stringify(err))
// // },
// // })
// return (
// <div>
// <KakaoLogin
// token={'JAVASCRIPT KEY를 입력하세요.!!!'}
// onSuccess={console.log}
// onFail={console.error}
// onLogout={console.info}
// />
// </div>
// )
// }
// export default KakaoLogin;
\ No newline at end of file
client/src/components/MainLayer.js
View file @ e8659e4a
...@@ -3,6 +3,8 @@ import { useState } from 'react'; ...@@ -3,6 +3,8 @@ import { useState } from 'react';
import { Button, Form, Image, Row, ButtonGroup, Modal, Dropdown, Col } from 'react-bootstrap'; import { Button, Form, Image, Row, ButtonGroup, Modal, Dropdown, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import '../App.css' import '../App.css'
import SignUp from '../pages/SignUp'
import LoginwithSocial from '../pages/LoginwithSocial';
function MainLayer() { function MainLayer() {
...@@ -69,58 +71,21 @@ function MainLayer() { ...@@ -69,58 +71,21 @@ function MainLayer() {
onHide={() => setLogshow(false)} onHide={() => setLogshow(false)}
aria-labelledby="example-modal-sizes-title-sm" aria-labelledby="example-modal-sizes-title-sm"
> >
<Modal.Header className='d-flex justify-content-center'> <LoginwithSocial />
<Modal.Title id="example-modal-sizes-title-sm">
LOGIN
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form style={loginstyled}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Button variant="maingreen" type="submit">
Submit
</Button>
</Form>
</Modal.Body>
</Modal> </Modal>
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item href="#/action-2"> <Dropdown.Item href="#/action-2">
<Button className='w-100 m-auto' style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button> <Button className='w-100 m-auto' style={btnstyled} onClick={() => setSignshow(true)}>
SIGN UP
</Button>
<Modal <Modal
size="md" size="md"
show={signshow} show={signshow}
onHide={() => setSignshow(false)} onHide={() => setSignshow(false)}
aria-labelledby="example-modal-sizes-title-sm" aria-labelledby="example-modal-sizes-title-sm"
> >
<Modal.Header className='d-flex justify-content-center'> <SignUp />
<Modal.Title id="example-modal-sizes-title-sm">
Sign Up
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form style={loginstyled}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
<Form.Text>8글자 이상 적어주세요.</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password Check" />
</Form.Group>
<Button variant="maingreen" type="submit">
Submit
</Button>
</Form>
</Modal.Body>
</Modal> </Modal>
</Dropdown.Item> </Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
...@@ -136,25 +101,8 @@ function MainLayer() { ...@@ -136,25 +101,8 @@ function MainLayer() {
onHide={() => setLogshow(false)} onHide={() => setLogshow(false)}
aria-labelledby="example-modal-sizes-title-sm" aria-labelledby="example-modal-sizes-title-sm"
> >
<Modal.Header className='d-flex justify-content-center'> <LoginwithSocial />
<Modal.Title id="example-modal-sizes-title-sm">
LOGIN
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form style={loginstyled}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Button variant="maingreen" type="submit">
Submit
</Button>
</Form>
</Modal.Body>
</Modal> </Modal>
<Button style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button> <Button style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button>
...@@ -164,28 +112,8 @@ function MainLayer() { ...@@ -164,28 +112,8 @@ function MainLayer() {
onHide={() => setSignshow(false)} onHide={() => setSignshow(false)}
aria-labelledby="example-modal-sizes-title-sm" aria-labelledby="example-modal-sizes-title-sm"
> >
<Modal.Header className='d-flex justify-content-center'> <SignUp />
<Modal.Title id="example-modal-sizes-title-sm">
Sign Up
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form style={loginstyled}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
<Form.Text>8글자 이상 적어주세요.</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password Check" />
</Form.Group>
<Button variant="maingreen" type="submit">
Submit
</Button>
</Form>
</Modal.Body>
</Modal> </Modal>
</ButtonGroup> </ButtonGroup>
......
client/src/components/OAuth.js 0 → 100644
View file @ e8659e4a
const CLIENT_ID = 'a564b730d6339b084ecf7775a9a09284';
const REDIRECT_URI = 'http://localhost:3000/oauth';
export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
\ No newline at end of file
client/src/pages/Home.js
View file @ e8659e4a
...@@ -10,7 +10,7 @@ import ChartDoughnut from '../components/ChartDoughnut'; ...@@ -10,7 +10,7 @@ import ChartDoughnut from '../components/ChartDoughnut';
import Footer from './../components/Footer'; import Footer from './../components/Footer';
function Home2() { function Home() {
const constyled = { const constyled = {
display: 'flex', display: 'flex',
justifyContent: 'space-evenly', justifyContent: 'space-evenly',
...@@ -19,13 +19,11 @@ function Home2() { ...@@ -19,13 +19,11 @@ function Home2() {
} }
const col1sty = { const col1sty = {
width: '280px',
display: 'flex', display: 'flex',
justifyContent: 'start', justifyContent: 'start',
alignItems: 'center', alignItems: 'center'
} }
const col2sty = { const col2sty = {
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
...@@ -34,13 +32,15 @@ function Home2() { ...@@ -34,13 +32,15 @@ function Home2() {
padding: '0' padding: '0'
} }
const stickybox = {
zIndex: '10', border: 'solid', borderWidth: '1px', borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '10px', padding: '15px', boxShadow: '0.5px 0.5px gray', margin: '5px', boxSizing:'border-box'
}
return ( return (
<Container fluid className='d-flex justify-content-center position-relative'> <Container fluid className='d-flex justify-content-center position-relative'>
<Row style={constyled}> <Row style={constyled}>
<Col xs={12} md={4} className='d-flex justify-content-center ' style={{ <Col xs={12} md={4} className='d-flex justify-content-center m-2' id='stickyy'>
zIndex: '10', border: 'solid', borderWidth: '1px', borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '10px', padding: '15px', boxShadow: '0.5px 0.5px gray', margin: '5px', boxSizing:'border-box', height: 'auto', maxHeight: '270px'
}} id='stickyy'>
<Row style={col1sty} className='m-auto'> <Row style={col1sty} className='m-auto'>
<MainLayer /> <MainLayer />
</Row> </Row>
...@@ -62,4 +62,4 @@ function Home2() { ...@@ -62,4 +62,4 @@ function Home2() {
); );
} }
export default Home2; export default Home;
\ No newline at end of file \ No newline at end of file
client/src/pages/LoginwithSocial.js 0 → 100644
View file @ e8659e4a
import React from 'react'
import '../App.css'
import { Form, Modal, Button, Row, Col, Image, Alert } from 'react-bootstrap';
import { KAKAO_AUTH_URL } from './../components/OAuth';
function LoginwithSocial() {
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '100%',
justifyContent: 'center',
margin: 'auto',
padding: '10px'
}
return (
<>
<Modal.Header className='d-flex justify-content-center'>
<Modal.Title id="example-modal-sizes-title-sm">
LOGIN
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form style={inboxstyled}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Email" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Button type="submit" id='formbtn'>
LOGIN
</Button>
</Form>
<hr />
<Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
{/* <KakaoLogin /> */}
<a href={KAKAO_AUTH_URL} target='_blank' id='socialLink' >
<Image src='/images/Kakao1.jpg' id='logpng' />
KAKAO
</a>
<a as='button' href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/google.png' id='logpng' />
GOOGLE
</a>
<a as='button' href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/facebook.png' id='logpng' />
FACEBOOK
</a>
</Row>
</Modal.Body>
</>
)
}
export default LoginwithSocial;
\ No newline at end of file
client/src/pages/SignUp.js 0 → 100644
View file @ e8659e4a
import React from 'react'
import '../App.css'
import { Form, Modal, Button, Row, Col, Image } from 'react-bootstrap';
import { KAKAO_AUTH_URL } from './../components/OAuth';
function SignUp() {
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '80%',
justifyContent: 'center',
margin: 'auto',
padding: '1rem'
}
return (
<>
<Modal.Header className='d-block text-center'>
<Modal.Title>
Create an Account
</Modal.Title>
<p style={{ color: 'gray', margin: '10px', fontSize: '0.5em' }}>
Sign up with your social media account or email address
</p>
</Modal.Header>
<Modal.Body>
<Form style={inboxstyled}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Username" />
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Email Address" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password2" placeholder="Confirm Password" />
</Form.Group>
<Button type="submit" className='' id='formbtn'>
Sign Up
</Button>
</Form>
<hr />
{/*
<p className='d-flex justify-content-center'>
<a id="custom-login-btn" href="javascript:loginWithKakao()">
<img
src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
width='200em'
/>
</a>
</p> */}
<Row style={{margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
<a href={KAKAO_AUTH_URL} target='_blank' id='socialLink' >
<Image src='/images/Kakao1.jpg' id='logpng' />
KAKAO
</a>
<a href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/google.png' id='logpng' />
GOOGLE
</a>
<a href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/facebook.png' id='logpng' />
FACEBOOK
</a>
</Row>
</Modal.Body>
</>
)
}
export default SignUp;
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment