Skip to content

GitLab

Commit b2619b51 authored by Spark's avatar Spark
Browse files

please pg

parent e18ae3f6
Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ b2619b51
...@@ -4,5 +4,9 @@ ...@@ -4,5 +4,9 @@
# VScode setting File # VScode setting File
.vscode/* .vscode/*
node_modules/*
package-lock.json
package.json
# Arduino File # Arduino File
arduino/code/test/* arduino/code/test/*
\ No newline at end of file
client/src/App.css
View file @ b2619b51
...@@ -8,9 +8,11 @@ body { ...@@ -8,9 +8,11 @@ body {
#btnlink { #btnlink {
color: white !important; color: white !important;
text-decoration: none !important; text-decoration: none !important;
min-width: 100%;
margin: auto;
height: 100%;
} }
.btn-primary:active { .btn-primary:active {
outline: white !important; outline: white !important;
border-color: white !important; border-color: white !important;
...@@ -21,6 +23,11 @@ body { ...@@ -21,6 +23,11 @@ body {
font-size: 1.5em; font-size: 1.5em;
} }
#impactTitle {
margin: 1em;
font-size: 1.5em;
}
.card .card-subtitle { .card .card-subtitle {
display: flex; display: flex;
color: rgb(129, 129, 129); color: rgb(129, 129, 129);
...@@ -41,18 +48,20 @@ body { ...@@ -41,18 +48,20 @@ body {
} }
#logpng { #logpng {
width: 25px; width: 50%;
height: auto; height: 6em;
margin-right: 1em; object-fit: cover;
} }
#socialLink { #socialLink {
display: flex;
justify-content: center;
align-items: center;
height: 50%;
padding: 0.5em; padding: 0.5em;
margin: 0.5em;
height: 2.5em;
color: gray; color: gray;
font-size: 10px; font-size: 0.8em;
width: fit-content; width: fit-content;
} }
......
client/src/App.js
View file @ b2619b51
...@@ -2,9 +2,9 @@ import React from 'react'; ...@@ -2,9 +2,9 @@ import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom'; import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css'; import './App.css';
import Home from './pages/Home'; import Home from './pages/Home';
import Oauth from './utils/Oauth';
import SignupPage from './pages/SignupPage'; import SignupPage from './pages/SignupPage';
import LoginPage from './pages/LoginPage'; import LoginPage from './pages/LoginPage';
import LocalCodePage from './pages/LocalCodePage';
function App() { function App() {
...@@ -15,7 +15,8 @@ function App() { ...@@ -15,7 +15,8 @@ function App() {
<Route exact path='/' component={Home} /> <Route exact path='/' component={Home} />
<Route exact path='/signup' component={SignupPage} /> <Route exact path='/signup' component={SignupPage} />
<Route exact path='/login' component={LoginPage} /> <Route exact path='/login' component={LoginPage} />
<Route path='/oauth' component={Oauth} /> <Route exact path='/local_code' component={LocalCodePage} />
</> </>
</Router> </Router>
......
client/src/Utils/Oauth.js
View file @ b2619b51
...@@ -7,175 +7,68 @@ import { useHistory } from 'react-router-dom'; ...@@ -7,175 +7,68 @@ import { useHistory } from 'react-router-dom';
const { Kakao } = window; const { Kakao } = window;
export function LoginWithKakao() { export function LoginWithKakao() {
//authObj : response.data에 들어가 있는 부분 object 형식 //authObj : response.data에 들어가 있는 부분 object 형식
Kakao.Auth.loginForm({ Kakao.Auth.loginForm({
scope: 'account_email', // 팝업 + 다른 아이디 로그인시
scope: 'account_email, profile_nickname',
// 추가 동의 받을 동의 항목 ID 목록, 하나의 문자열에 여러 개의 ID를 쉼표(,)로 구분하여 전달
success: function (authObj) { success: function (authObj) {
alert('로그인 되었습니다. @@@@@@@@@') alert('로그인 되었습니다. @@@@@@@@@')
console.log(JSON.stringify(authObj)) console.log(JSON.stringify(authObj))
const accToken = authObj.access_token
localStorage.setItem('Kakao_token', accToken)
console.log('accT ;;', authObj.access_token) console.log('accT ;;', authObj.access_token)
console.log(typeof (localStorage)) console.log(typeof (localStorage))
console.log(Object.keys(localStorage)[0]) console.log(Object.keys(localStorage)[0])
Kakao.API.request({ Kakao.API.request({
// 현재 로그인한 사용자의 카카오계정 정보 불러오기
url: '/v2/user/me', url: '/v2/user/me',
// 사용자 정보 요청 주소
data: { data: {
property_keys: ["kakao_account.email"] property_keys: ["kakao_account.profile", "kakao_account.email"]
// 파라미터를 통해 특정 사용자 정보만 지정해서 요청
}, },
success: function (response) { success: function (response) {
console.log(response); console.log(response);
console.log(response.kakao_account.email); console.log(response.kakao_account.profile);
const userEmail = response.kakao_account.email.split('@')[0]; const nickValue = Object.values(response.kakao_account.profile)
localStorage.setItem('user_email', userEmail) localStorage.setItem('nickname', nickValue)
const user_email = localStorage.getItem('user_email') const nickname = localStorage.getItem('nickname')
console.log(user_email) console.log(nickname)
// window.location.replace('/' + '?kakaoemail='+ `${user_email}`) window.location.replace('/' + '?nickname=' + `${nickname}`)
} }
}); });
}, },
fail: function (err) { fail: function (err) {
alert(JSON.stringify(err)) alert(JSON.stringify(err))
}, },
}) })
} }
export function kakaoLogout() { export function kakaoLogout() {
// 토큰을 만료시켜 더 이상 해당 액세스 토큰으로 카카오 API를 호출할 수 없도록
console.log('geAccesToken()', Kakao.Auth.getAccessToken())
if (!Kakao.Auth.getAccessToken()) { if (!Kakao.Auth.getAccessToken()) {
alert('Not logged in.') alert('Not logged in.')
localStorage.clear(); localStorage.clear();
window.location.replace('/') return;
return
} }
Kakao.Auth.logout(function () { Kakao.Auth.logout(function () {
// 로그인 시 발급받은 토큰을 만료시키는 함수
alert('logout ok\naccess token -> ' + Kakao.Auth.getAccessToken()) alert('logout ok\naccess token -> ' + Kakao.Auth.getAccessToken())
localStorage.clear(); localStorage.clear();
window.location.replace('/') window.location.replace('/')
}) })
}
export function unlinkApp() {
Kakao.API.request({
url: '/v1/user/unlink',
success: function (res) {
alert('success: ' + JSON.stringify(res))
window.location.replace('/')
},
fail: function (err) {
alert('fail: ' + JSON.stringify(err))
window.location.replace('/')
},
})
} }
function Oauth() {
const history = useHistory()
const REST_API_KEY = 'a564b730d6339b084ecf7775a9a09284';
const REDIRECT_URI = 'http://localhost:3000/oauth';
const LOGOUT_REDIRECT_URI = 'http://localhost:3000/logout'
const url = new URL(window.location.href) export function Loading() {
const authorizationCode = url.searchParams.get('code')
console.log('인가 코드', authorizationCode);
const kakaoAuthURl = `https://kauth.kakao.com/oauth/token`
// const kakaoAuthURl = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`
// const payload = {
// grant_type: "authorization_code",
// client_id: `${REST_API_KEY}`,
// redirect_uri: `${REDIRECT_URI}`,
// code: `${authorizationCode}`
// }
const params = new URLSearchParams();
// PAYLOAD
params.append('grant_type', 'authorization_code')
params.append('client_id', `${REST_API_KEY}`)
params.append('redirect_uri', `${REDIRECT_URI}`)
params.append('code', `${authorizationCode}`)
axios.post(kakaoAuthURl, params).then(response => {
console.log('RES_DATA ;;;', response.data);
console.log('acc_token ;;', response.data.access_token);
const accToken = response.data.access_token;
if (accToken) {
console.log('YES login!!!!!!!!!!!!!');
localStorage.setItem('Kakao_token', accToken)
history.push('/')
}
})
// const res = axios.post(kakaoAuthURl, params)
// console.log(res)
// const accessToken = res.data
// console.log(accessToken)
// setTimeout(window.location.replace('/'), 3000)
// const ischecked = () => {
// if (checkAuth) {
// return true;
// }
// else {
// return false;
// }
// }
// console.log(ischecked())
// const isOauthChecked = () => {
// if (checkAuth.access_token) {
// console.log(true)
// return true;
// }
// }
// {
// console.log('accccc', response.data.access_token);
// console.log('%%%', response.data);
// if (response.data.access_token) {
// console.log('YES login!!!!!!!!!!!!!');
// isOauth(true)
// console.log('@@@12', isOauth(true))
// setTimeout(window.location.replace('/'), 3000)
// }
// else {
// isOauth(false)
// }
// })
return ( return (
<Row className='d-block'> <Row className='d-block'>
<Col className='text-center m-auto' style={{ fontSize: '5px' }} >
{/* 인가코드 : {authorizationCode}
<br />
Params : {params} */}
</Col>
<Button id='formbtn' className='d-flex justify-content-center align-items-center m-auto' style={{ width: '200px', height: '200px', flexDirection: 'column' }} disabled> <Button id='formbtn' className='d-flex justify-content-center align-items-center m-auto' style={{ width: '200px', height: '200px', flexDirection: 'column' }} disabled>
<Spinner animation="border" role="status"> <Spinner animation="border" role="status">
<span className="sr-only">Loading...</span> <span className="sr-only">Loading...</span>
...@@ -185,6 +78,4 @@ function Oauth() { ...@@ -185,6 +78,4 @@ function Oauth() {
</Button> </Button>
</Row> </Row>
) )
} }
\ No newline at end of file
export default Oauth;
\ No newline at end of file
client/src/components/LocCodeChange.js 0 → 100644
View file @ b2619b51
import React from 'react'
import '../App.css'
import { Form, Modal, Button, Row, Col, Image, Alert, Card, DropdownButton, Dropdown, ButtonGroup } from 'react-bootstrap';
import Oauth, { LoginWithKakao } from '../utils/Oauth';
import { useEffect } from 'react';
import axios from 'axios';
import { useState } from 'react';
function LocCodeChange() {
const cardstyled = {
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
const inboxstyled = {
display: 'flex',
flexDirection: 'column',
maxWidth: '80%',
justifyContent: 'center',
margin: 'auto',
padding: '10px'
}
const btnstyled2 = {
background: 'white',
margin: '1px',
maxWidth: 'fit-content',
borderWidth: '2px',
color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px'
}
const [locCodeShow, setLocCodeShow] = useState(false)
function handleClickLoc() {
setLocCodeShow(true);
const auth = document.getElementById('loc-code')
auth.style.visibility = 'visible'
}
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title id='impactTitle'>
Local Code
</Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
Please select a region name
</Card.Subtitle>
<hr />
<Card.Text>
<Form style={inboxstyled}>
<Row className='m-auto w-100 d-flex justify-content-center'>
<Col md={12} xs={12} style={{ padding: '0', display: 'flex', justifyContent: 'center', width: '100%' }}>
{['도', '시군구', '읍면동'].map((localname) => (
<DropdownButton
variant='light'
style={btnstyled2}
title='지역코드'
as={ButtonGroup}
title={` ${localname} `}
>
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>Separated link</Dropdown.Item>
</DropdownButton>
))}
<Button variant='light' style={btnstyled2} onClick={!locCodeShow && handleClickLoc}>확인</Button>
</Col>
<Col md={6} xs={4} id='loc-code' style={{
margin: '5px',
border: 'solid',
borderColor: 'rgb(110, 189, 142)',
display: 'flex',
justifyContent: 'center',
padding: '2px',
visibility: 'hidden',
transition: 'all 4s'
}}>
지역코드
</Col>
</Row>
</Form>
</Card.Text>
</Card>
</Row>
)
}
export default LocCodeChange;
\ No newline at end of file
client/src/components/LocalCode.js
View file @ b2619b51
...@@ -3,11 +3,12 @@ import { Container, Row, Card, Table, Button, Col, Modal } from 'react-bootstrap ...@@ -3,11 +3,12 @@ import { Container, Row, Card, Table, Button, Col, Modal } from 'react-bootstrap
// import db from "../db/index" // import db from "../db/index"
import '../App.css' import '../App.css'
import { LoginWithKakao } from '../utils/Oauth'; import { LoginWithKakao } from '../utils/Oauth';
import { Link } from 'react-router-dom';
function LocalCode() { function LocalCode() {
const kakao_accToken = localStorage.getItem('Kakao_token') const logined = localStorage.getItem('nickname')
const cardstyled = { const cardstyled = {
margin: 'auto', margin: 'auto',
...@@ -29,29 +30,30 @@ function LocalCode() { ...@@ -29,29 +30,30 @@ function LocalCode() {
borderColor: 'rgba(195, 195, 195, 0.753)', borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px', borderRadius: '20px',
} }
const [localChange, setLocalChange] = useState(false) const [localChange, setLocalChange] = useState(false)
const user_email = localStorage.getItem('user_email') const nickname = localStorage.getItem('nickname')
return ( return (
<> <>
<Col className='text-center pt-3 pb-2 px-0'> <Col className='text-center pt-3 pb-2 px-0'>
<Card style={cardstyled} id='localName'> <Card style={cardstyled} id='localName'>
<Card.Title> <Card.Title>
{kakao_accToken ? {logined ?
`${user_email}` `${nickname}`
: :
<> <>
GUEST GUEST
</> </>
} }, 환영합니다.
</Card.Title> </Card.Title>
<Row style={{ alignItems: 'center', margin: 'auto', whiteSpace: 'nowrap' }}> <Row style={{ alignItems: 'center', margin: 'auto', whiteSpace: 'nowrap' }}>
<Card.Subtitle> <Card.Subtitle>
지역코드 지역코드
</Card.Subtitle> </Card.Subtitle>
{kakao_accToken && {logined &&
<Button variant='light' className='ml-1' onClick={() => setLocalChange(true)} style={btnstyled2}> <Button variant='light' className='ml-1' style={btnstyled2}>
변경 <Link to='/local_code' style={{ textDecoration: 'none', color: 'rgb(110, 189, 142)' }}>
변경
</Link>
</Button> </Button>
} }
</Row> </Row>
......
client/src/components/LoginComp.js
View file @ b2619b51
...@@ -23,30 +23,22 @@ function LoginComp() { ...@@ -23,30 +23,22 @@ function LoginComp() {
const inboxstyled = { const inboxstyled = {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
maxWidth: '100%', maxWidth: '80%',
justifyContent: 'center', justifyContent: 'center',
margin: 'auto', margin: 'auto',
padding: '10px' padding: '10px'
} }
function loginWithKakao2() {
window.Kakao.Auth.authorize({
redirectUri: 'http://localhost:3000/oauth'
})
}
// useEffect(()=> {
// window.location.replace('/')
// },[localStorage.getItem('Kakao_token')])
return ( return (
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={cardstyled}> <Card style={cardstyled}>
<Card.Title> <Card.Title id='impactTitle'>
LOGIN LOGIN
</Card.Title> </Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
Log in with your social media account or email address
</Card.Subtitle>
<hr /> <hr />
<Card.Text> <Card.Text>
<Form style={inboxstyled}> <Form style={inboxstyled}>
...@@ -54,23 +46,26 @@ function LoginComp() { ...@@ -54,23 +46,26 @@ function LoginComp() {
<Form.Control type="email" placeholder="Email" /> <Form.Control type="email" placeholder="Email" />
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Button variant='light' type="submit" id='formbtn'> <Button variant='light' type="submit" id='formbtn'>
LOGIN LOGIN
</Button> </Button>
</Form> </Form>
<hr />
<Row className='d-flex align-items-center m-2'>
<Col>
<hr />
</Col>
OR
<Col>
<hr />
</Col>
</Row>
<Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}> <Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
<a href="#" onClick={loginWithKakao2} id='socialLink' >
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAO
</a>
<a href="#;" onClick={LoginWithKakao} id='socialLink' > <a href="#;" onClick={LoginWithKakao} id='socialLink' >
{/* 세미콜론이 붙으면 최상단 이동 x */} {/* 세미콜론이 붙으면 최상단 이동 x */}
<img src='/images/Kakao1.jpg' id='logpng' /> <img src='http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg' id='logpng' alt='KAKAO' />
KAKAOHTML
</a> </a>
</Row> </Row>
......
client/src/components/MainLayer.js
View file @ b2619b51
...@@ -27,10 +27,11 @@ function MainLayer() { ...@@ -27,10 +27,11 @@ function MainLayer() {
const btnstyled = { const btnstyled = {
background: 'rgb(110, 189, 142)', background: 'rgb(110, 189, 142)',
margin: '1px', margin: 'auto',
marginBottom: '0.5em',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
maxWidth: '100%', width: '100%',
borderWidth: '2px', borderWidth: '2px',
borderColor: 'rgba(195, 195, 195, 0.753)', borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px', borderRadius: '20px',
...@@ -38,8 +39,7 @@ function MainLayer() { ...@@ -38,8 +39,7 @@ function MainLayer() {
color: 'white' color: 'white'
} }
const [logshow, setLogshow] = useState(false); const logined = localStorage.getItem('nickname')
const kakao_accToken = localStorage.getItem('Kakao_token')
return ( return (
<> <>
...@@ -54,7 +54,7 @@ function MainLayer() { ...@@ -54,7 +54,7 @@ function MainLayer() {
</Row> </Row>
<Row className='d-flex justify-content-center align-items-center my-2 mx-auto w-100'> <Row className='d-flex justify-content-center align-items-center my-2 mx-auto w-100'>
<ButtonGroup vertical className='m-auto' style={{ width: '100%', flexDirection: 'column' }}> <ButtonGroup vertical className='m-auto' style={{ width: '100%', flexDirection: 'column' }}>
{kakao_accToken ? {logined ?
//true //true
<Button variant='light' style={btnstyled} onClick={kakaoLogout}> <Button variant='light' style={btnstyled} onClick={kakaoLogout}>
로그아웃 로그아웃
...@@ -67,27 +67,12 @@ function MainLayer() { ...@@ -67,27 +67,12 @@ function MainLayer() {
</Link> </Link>
</Button> </Button>
} }
<Modal {!logined &&
size="sm"
show={logshow}
onHide={() => setLogshow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<LoginComp />
</Modal>
{!kakao_accToken ?
<Button variant='light' style={btnstyled}> <Button variant='light' style={btnstyled}>
<Link to='/signup' id='btnlink'> <Link to='/signup' id='btnlink'>
회원가입 회원가입
</Link> </Link>
</Button> </Button>
:
<Button variant='light' style={btnstyled} onClick={unlinkApp}>
연결끊기
</Button>
} }
</ButtonGroup> </ButtonGroup>
......
client/src/components/SignupComp.js
View file @ b2619b51
...@@ -4,6 +4,7 @@ import { Form, Modal, Button, Row, Col, Image, DropdownButton, ButtonGroup, Drop ...@@ -4,6 +4,7 @@ import { Form, Modal, Button, Row, Col, Image, DropdownButton, ButtonGroup, Drop
// import { KAKAO_AUTH_URL } from '../components/Oauth'; // import { KAKAO_AUTH_URL } from '../components/Oauth';
import { handleLogin } from '../utils/Auth'; import { handleLogin } from '../utils/Auth';
import { isOauth } from '../utils/Auth'; import { isOauth } from '../utils/Auth';
import { LoginWithKakao } from '../utils/Oauth';
function SignupComp() { function SignupComp() {
...@@ -28,38 +29,22 @@ function SignupComp() { ...@@ -28,38 +29,22 @@ function SignupComp() {
color: '#04AB70' color: '#04AB70'
} }
const btnstyled2 = {
background: 'white',
margin: '1px',
maxWidth: 'fit-content',
borderWidth: '2px',
color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px'
}
const inboxstyled = { const inboxstyled = {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
maxWidth: '100%', maxWidth: '80%',
justifyContent: 'center', justifyContent: 'center',
margin: 'auto', margin: 'auto',
padding: '1rem' padding: '1rem'
} }
const aftershow = { const aftershow = {
display : 'none' display: 'none'
}
function loginWithKakao() {
window.Kakao.Auth.authorize({
redirectUri: 'http://localhost:3000/oauth'
})
} }
const initValues = { const initValues = {
email: '', email: ''
authNumber: '',
} }
const [formValues, setFormValues] = useState(initValues) const [formValues, setFormValues] = useState(initValues)
...@@ -69,7 +54,6 @@ function SignupComp() { ...@@ -69,7 +54,6 @@ function SignupComp() {
function submitForm() { function submitForm() {
console.log('formValues', formValues); console.log('formValues', formValues);
console.log(!formValues['username']); console.log(!formValues['username']);
console.log(!formValues['email']);
console.log('Error', formError) console.log('Error', formError)
} }
...@@ -96,53 +80,26 @@ function SignupComp() { ...@@ -96,53 +80,26 @@ function SignupComp() {
} }
// if (success) {
// alert('회원가입 되었습니다.')
// return <Redirect to='/user' />
// }
const [emailSubm, setEmailSubm] = useState(false) const [emailSubm, setEmailSubm] = useState(false)
const [authCodecheck, setAuthCodecheck] = useState(false)
const [locCodeShow, setLocCodeShow] = useState(false)
function handleClickSubm() { function handleClickSubm() {
// setEmailSubm(true); // setEmailSubm(true);
const subm = document.getElementById("subm-mailSent"); const subm = document.getElementById("subm-mailSent");
subm.style.visibility = 'visible' subm.style.visibility = 'visible'
const aftermail = document.getElementById('AftermailSent'); // const aftermail = document.getElementById('AftermailSent');
aftermail.style.display = '' // aftermail.style.display = ''
}
function handleClickAuth() {
var authToInt = parseInt(formValues.authNumber, 10)
if (authToInt == 0) {
setAuthCodecheck(true);
const auth = document.getElementById('auth-check')
auth.style.visibility = 'visible'
}
else {
setAuthCodecheck(false);
}
console.log(typeof (authToInt))
console.log(authToInt)
}
function handleClickLoc() {
setLocCodeShow(true);
const auth = document.getElementById('loc-code')
auth.style.visibility = 'visible'
} }
console.log(emailSubm); console.log(emailSubm);
// console.log
// const [isOauth, setIsOauth] = useState(false)
const iiiiioauthhh = true
return ( return (
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={cardstyled}> <Card style={cardstyled}>
<Card.Title> <Card.Title id='impactTitle'>
Create an Account Create an Account
</Card.Title> </Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}> <Card.Subtitle style={{ fontWeight: 'lighter' }}>
...@@ -152,60 +109,22 @@ function SignupComp() { ...@@ -152,60 +109,22 @@ function SignupComp() {
<Card.Text> <Card.Text>
<Form style={inboxstyled} <Form style={inboxstyled}
onSubmit={handleSubmit}> onSubmit={handleSubmit}>
{/* isOauth */} <Form.Group controlId="userEmail" className='mb-1'>
{iiiiioauthhh ? <Row className='m-auto d-flex justify-content-center'>
<> <Form.Control
<Form.Group controlId="userEmail" className='mb-1'> type="email"
<Row className='m-auto d-flex justify-content-center'> name="email"
<Col md={9} xs={9}> placeholder="Email Address"
<Form.Control value={formValues.email}
type="email" onChange={handleChange}
name="email" readOnly={emailSubm}
placeholder="Email Address" required
value={formValues.email} />
onChange={handleChange}
readOnly={emailSubm}
required
/>
</Col>
<Col md={3} xs={3} className='p-0 d-flex justify-content-center'>
<Button variant='light' type='submit' style={btnstyled2} onClick={!emailSubm && handleClickSubm} disabled={emailSubm}>{emailSubm ? '제출완료' : '제출'}</Button>
</Col>
</Row>
<Row style={noticestyled} id="subm-mailSent">
메일이 발송되었습니다.
</Row>
</Form.Group>
<Form.Group controlId="authNumber" className='mb-1' style={aftershow} id='AftermailSent'>
<Row className='m-auto d-flex justify-content-center'>
<Col md={9} xs={9}>
<Form.Control
type="text"
name="authNumber"
placeholder="인증코드"
value={formValues.authNumber}
onChange={handleChange}
// readOnly={authCodecheck}
required
/>
</Col>
<Col md={3} xs={3} className='p-0 d-flex justify-content-center'>
<Button variant='light' style={btnstyled2} onClick={!authCodecheck && handleClickAuth}>확인</Button>
</Col>
</Row>
<Row style={noticestyled} id='auth-check'>
인증이
</Row>
</Form.Group>
</>
:
<Row>
암것도안나와~
</Row> </Row>
} </Form.Group>
{/*
<Row className='m-auto w-100 d-flex justify-content-center'> <Row className='m-auto w-100 d-flex justify-content-center'>
<Col md={12} xs={12} style={{ padding: '0', display: 'flex', justifyContent: 'center', width: '100%' }}> <Col md={12} xs={12} style={{ padding: '0', display: 'flex', justifyContent: 'center', width: '100%' }}>
{['도', '시군구', '읍면동'].map((localname) => ( {['도', '시군구', '읍면동'].map((localname) => (
...@@ -237,27 +156,27 @@ function SignupComp() { ...@@ -237,27 +156,27 @@ function SignupComp() {
}}> }}>
지역코드 지역코드
</Col> </Col>
</Row> </Row> */}
<Button variant='light' className='mt-2' type="submit" id='formbtn'> <Button variant='light' className='mt-2' type="submit" id='formbtn'>
Sign Up Sign Up
</Button> </Button>
</Form> </Form>
<Row className='d-flex align-items-center m-2'>
<Col>
<hr />
</Col>
OR
<Col>
<hr />
</Col>
</Row>
<hr />
<Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}> <Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
<a href="#" onClick={loginWithKakao} id='socialLink' > <a href="#;" onClick={LoginWithKakao} id='socialLink' >
<img src='/images/Kakao1.jpg' id='logpng' /> {/* 세미콜론이 붙으면 최상단 이동 x */}
KAKAO <img src='http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg' id='logpng' alt='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> </a>
</Row> </Row>
</Card.Text> </Card.Text>
......
client/src/pages/Home.js
View file @ b2619b51
...@@ -7,8 +7,7 @@ import EueSuggest from '../components/EueSuggest'; ...@@ -7,8 +7,7 @@ import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine'; import ChartLine from '../components/ChartLine';
import ChartDoughnut from '../components/ChartDoughnut'; import ChartDoughnut from '../components/ChartDoughnut';
import Footer from './../components/Footer'; import Footer from './../components/Footer';
import { isOauth } from './../utils/Auth'; import db from '../db/index'
function Home() { function Home() {
...@@ -33,6 +32,8 @@ function Home() { ...@@ -33,6 +32,8 @@ function Home() {
padding: '0' padding: '0'
} }
console.log(db.user.findAll())
...@@ -50,8 +51,6 @@ function Home() { ...@@ -50,8 +51,6 @@ function Home() {
<Row style={constyled} className='d-flex mb-2 w-100'> <Row style={constyled} className='d-flex mb-2 w-100'>
{/* <KakaoLogin/> */}
{/* <TimeNow /> */} {/* <TimeNow /> */}
<EueSuggest /> <EueSuggest />
<ChartLine /> <ChartLine />
......
client/src/pages/LocalCodePage.js 0 → 100644
View file @ b2619b51
import React, { useState, useEffect } from 'react'
import { Container, Row, Col, Button } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import '../App.css'
import LocCodeChange from '../components/LocCodeChange';
function SignupPage() {
const constyled = {
display: 'flex',
justifyContent: 'space-evenly',
width: '100%',
position: 'relative'
}
const col1sty = {
display: 'flex',
justifyContent: 'start',
alignItems: 'center'
}
const col2sty = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
padding: '0'
}
return (
<Container fluid className='m-auto d-flex justify-content-center position-relative'>
<Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<Row style={constyled} className='d-flex mb-2 w-100'>
<LocCodeChange />
</Row>
</Col>
</Row>
</Container>
);
}
export default SignupPage;
\ 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