Skip to content

GitLab

Commit 3bddb53f authored by KangMin An's avatar KangMin An
Browse files

Merge branch 'merger' into kangmin

parents 2be6215c e92762f2
Expand all Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ 3bddb53f
......@@ -4,10 +4,9 @@
# VScode setting File
.vscode/*
#
nodemodules/*
./package.json
./package-lock.json
node_modules/*
package-lock.json
package.json
# Arduino File
arduino/code/test/*
\ No newline at end of file
client/.gitignore
View file @ 3bddb53f
......@@ -18,6 +18,10 @@
.env.test.local
.env.production.local
#DB
src/db
src/data
npm-debug.log*
yarn-debug.log*
yarn-error.log*
client/package-lock.json
View file @ 3bddb53f
This diff is collapsed.
client/package.json
View file @ 3bddb53f
......@@ -12,6 +12,9 @@
"moment": "^2.29.1",
"ngx-spinner": "^12.0.0",
"node-sass": "^6.0.1",
"nodemailer": "^6.6.2",
"pg": "^8.6.0",
"pg-hstore": "^2.3.4",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-chartjs-2": "^3.0.3",
......@@ -26,6 +29,7 @@
"react-scripts": "4.0.3",
"react-use": "^17.2.4",
"sass": "^1.35.1",
"sequelize": "^6.6.5",
"web-vitals": "^1.1.2"
},
"scripts": {
......
client/public/index.html
View file @ 3bddb53f
......@@ -34,39 +34,8 @@
redirectUri: 'http://localhost:3000/oauth'
})
}
// 아래는 데모를 위한 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();
}
</script>
<script type="text/javascript">
function loginWithKakaoPOP() {
Kakao.Auth.login({
success: function (authObj) {
alert(JSON.stringify(authObj))
},
fail: function (err) {
alert(JSON.stringify(err))
},
})
}
</script>
</script>
</head>
<body>
......
client/src/App.css
View file @ 3bddb53f
......@@ -5,8 +5,12 @@ body {
}
.a:hover {
color: white;
#btnlink {
color: white !important;
text-decoration: none !important;
min-width: 100%;
margin: auto;
height: 100%;
}
.btn-primary:active {
......@@ -15,8 +19,21 @@ body {
}
.card .card-title {
color: rgb(109, 110, 109);
/* background-color: ; */
color: rgb(70, 70, 70);
font-size: 1.5em;
}
#impactTitle {
margin: 1em;
font-size: 1.5em;
}
.card .card-subtitle {
display: flex;
color: rgb(129, 129, 129);
align-items: center;
justify-content: center;
padding: 0.5em;
}
.form-group .form-control {
......@@ -31,24 +48,26 @@ body {
}
#logpng {
width: 25px;
height: auto;
margin-right: 1em;
width: 50%;
height: 6em;
object-fit: cover;
}
#socialLink {
display: flex;
justify-content: center;
align-items: center;
height: 50%;
padding: 0.5em;
margin: 0.5em;
height: 2.5em;
color: gray;
font-size: 10px;
font-size: 0.8em;
width: fit-content;
}
@media (max-width: 767.98px) {
body {
padding: 10px;
padding: 30px;
padding-left: 20px;
padding-right: 20px;
margin: auto;
......@@ -59,7 +78,12 @@ body {
}
#stickyy {
max-width: 300px;
max-width: 400px;
}
#contour {
padding: 10px;
color: rgba(195, 195, 195, 0.753);
}
}
......@@ -82,8 +106,12 @@ body {
top: 40px;
width: fit-content;
height: fit-content;
max-width: 240px;
max-width: 300px;
}
#contour {
display: none;
}
}
\ No newline at end of file
client/src/App.js
View file @ 3bddb53f
......@@ -2,19 +2,24 @@ import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';
import Home from './pages/Home';
import Oauth from './components/Oauth';
import SignupPage from './pages/SignupPage';
import LoginPage from './pages/LoginPage';
import LocalCodePage from './pages/LocalCodePage';
function App() {
return (
<Router>
<>
<Route exact path='/' component={Home} />
<Route path='/oauth' component={Oauth}/>
<Route exact path='/' component={Home} />
<Route exact path='/signup' component={SignupPage} />
<Route exact path='/login' component={LoginPage} />
<Route exact path='/local_code' component={LocalCodePage} />
</>
</Router>
);
}
......
client/src/Utils/Auth.js 0 → 100644
View file @ 3bddb53f
import axios from 'axios';
import { useState } from 'react';
import Oauth from './Oauth';
export function handleLogin({ userId, role, name, tel, email }) {
localStorage.setItem('id', userId)
localStorage.setItem('role', role)
localStorage.setItem('name', name)
localStorage.setItem('tel', tel)
localStorage.setItem('email', email)
}
export async function handleLogout() {
localStorage.clear()
await axios.get('/api/auth/logout')
window.location.href = '/'
}
export function isLogined() {
const userId = localStorage.getItem('id')
if (userId) {
return userId
} else {
return false
}
}
export function isAdmin() {
const role = localStorage.getItem('role')
if (role === 'admin') {
return true
} else {
return false
}
}
export function isOauth(value) {
const TFoauth = value
return TFoauth;
}
// export async function doeCode() {
// const response = await axios.get('http://175.125.254.72:8090/api/data/loccode')
// // console.log('res::', response.data.locCodes)
// const resData = response.data.locCodes
// const doe = resData.DOE
// // console.log('dd', doe) //object
// // console.log('dd::', doe[doe.length-1])
// // console.log('values::', Object.values(doe))
// const doeValue = Object.values(doe)
// // console.log('@@@11', doeValue[0]['code_doe'], typeof(doeValue[0]['code_doe']))
// // console.log('@@@22', doeValue[0]['name_doe'], typeof(doeValue[0]['name_doe']))
// return doeValue
// }
\ No newline at end of file
client/src/Utils/CatchError.js 0 → 100644
View file @ 3bddb53f
function catchErrors(error, displayError) {
let errorMsg
if (error.response) {
errorMsg = error.response.data
console.log(errorMsg)
} else if (error.request) {
errorMsg = error.request
console.log(errorMsg)
} else {
errorMsg = error.message
console.log(errorMsg)
}
displayError(errorMsg)
}
export default catchErrors
client/src/Utils/Oauth.js 0 → 100644
View file @ 3bddb53f
import { Spinner, Button, Row } from 'react-bootstrap';
// export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
const { Kakao } = window;
export function LoginWithKakao() {
//authObj : response.data에 들어가 있는 부분 object 형식
Kakao.Auth.loginForm({
// 팝업 + 다른 아이디 로그인시
scope: 'account_email, profile_nickname',
// 추가 동의 받을 동의 항목 ID 목록, 하나의 문자열에 여러 개의 ID를 쉼표(,)로 구분하여 전달
success: function (authObj) {
alert('로그인 되었습니다. @@@@@@@@@')
console.log(JSON.stringify(authObj))
console.log('accT ;;', authObj.access_token)
Kakao.API.request({
// 현재 로그인한 사용자의 카카오계정 정보 불러오기
url: '/v2/user/me',
// 사용자 정보 요청 주소
data: {
property_keys: ["kakao_account.profile", "kakao_account.email"]
// 파라미터를 통해 특정 사용자 정보만 지정해서 요청
},
success: function (response) {
console.log(response);
console.log(response.kakao_account.profile);
const nickValue = Object.values(response.kakao_account.profile)
localStorage.setItem('nickname', nickValue)
const nickname = localStorage.getItem('nickname')
console.log(nickname)
window.location.replace('/' + '?nickname=' + `${nickname}`)
}
});
},
fail: function (err) {
alert(JSON.stringify(err))
},
})
}
export function kakaoLogout() {
// 토큰을 만료시켜 더 이상 해당 액세스 토큰으로 카카오 API를 호출할 수 없도록
console.log('geAccesToken()', Kakao.Auth.getAccessToken())
if (!Kakao.Auth.getAccessToken()) {
alert('Not logged in.')
localStorage.clear();
return;
}
Kakao.Auth.logout(function () {
// 로그인 시 발급받은 토큰을 만료시키는 함수
alert('logout ok\naccess token -> ' + Kakao.Auth.getAccessToken())
localStorage.clear();
window.location.replace('/')
})
}
export function Loading() {
return (
<Row className='d-block'>
<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">
<span className="sr-only">Loading...</span>
</Spinner>
<br />
Loading...
</Button>
</Row>
)
}
\ No newline at end of file
client/src/Utils/SendEmail.js 0 → 100644
View file @ 3bddb53f
// const { smtpTransport } = require('./config/email');
// const nodemailer = require('nodemailer');
// /* min ~ max까지 랜덤으로 숫자를 생성하는 함수 */
// var generateRandom = function (min, max) {
// var ranNum = Math.floor(Math.random() * (max - min + 1)) + min;
// return ranNum;
// }
// // transporter 생성
// let transporter = nodemailer.createTransport({
// // host: "mail.회사.계정.입력" *** mail. <-요게 핵심이었다!
// host: "mail.abc.co.kr",
// // 보안 무시
// port: 587,
// // 회사 도메인 내 계정 및 비밀번호
// auth: {
// user: "myid@abc.co.kr",
// pass: "mypassword",
// },
// // 서명받지 않은 사이트의 요청도 받겠다.
// tls: {
// rejectUnauthorized: false
// }
// });
// // 메일 관련 옵션
// let mailOptions = {
// // 발송 메일 주소 (위에서 작성한 회사 계정 아이디)
// from: "myid@abc.co.kr",
// // 수신 메일 주소
// to: "receiverid@domain.com",
// // 제목
// subject: "인증 메일입니다.",
// // 인증 URL
// html: `<p>아래의 링크를 클릭하시면 인증이 완료됩니다.</p>
// <a href='http://localhost:3000/auth?etc'>인증하기</a>`,
// };
// // 메일 보내기
// transporter.sendMail(mailOptions, function (err, info) {
// if (err) {
// // 메일 보내기 에러 발생 시, 콘솔 찍어보기
// console.log("메일보내기 에러쓰");
// console.log(err);
// } else {
// // 성공했다!
// console.log("Email sent: " + info.response);
// }
// });
// // export const auth = {
// // SendEmail: async (req, res) => {
// // const number = generateRandom(111111, 999999)
// // const { sendEmail } = req.body;
// // const mailOptions = {
// // from: "정욱이네러버덕",
// // to: sendEmail,
// // subject: "[러버덕]인증 관련 이메일 입니다",
// // text: "오른쪽 숫자 6자리를 입력해주세요 : " + number
// // };
// // const result = await smtpTransport.sendMail(mailOptions, (error, responses) => {
// // if (error) {
// // return res.status(statusCode.OK).send(util.fail(statusCode.BAD_REQUEST, responseMsg.AUTH_EMAIL_FAIL))
// // } else {
// // /* 클라이언트에게 인증 번호를 보내서 사용자가 맞게 입력하는지 확인! */
// // return res.status(statusCode.OK).send(util.success(statusCode.OK, responseMsg.AUTH_EMAIL_SUCCESS, {
// // number: number
// // }))
// // }
// // smtpTransport.close();
// // });
// // }
// // }
\ No newline at end of file
client/src/components/ChartDoughnut.js
View file @ 3bddb53f
import React from 'react'
import { Container, Row, Card, Table, Button } from 'react-bootstrap';
import { Row, Card } from 'react-bootstrap';
import { Doughnut } from 'react-chartjs-2'
function ChartDoughnut() {
const cardstyled = {
fontSize: '0.5em',
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '1.5px',
borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)'
}
const btnstyled = {
background: 'rgb(110, 189, 142)',
margin: '1px',
maxWidth: '100%',
borderWidth: '2px',
fontSize: '10px',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
const options = {
......
client/src/components/ChartLine.js
View file @ 3bddb53f
import React from 'react'
import { Container, Row, Card, Table, Button } from 'react-bootstrap';
import { Row, Card } from 'react-bootstrap';
import { Line } from 'react-chartjs-2'
function ChartLine() {
const cardstyled = {
fontSize: '0.5em',
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '1.5px',
borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)'
}
const btnstyled = {
background: 'rgb(110, 189, 142)',
margin: '1px',
maxWidth: '100%',
borderWidth: '2px',
fontSize: '10px',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
const options = {
legend: {
display: true, // label 보이기 여부
......
client/src/components/EueSuggest.js
View file @ 3bddb53f
import React from 'react'
import { Container, Row, Card, Table, Button } from 'react-bootstrap';
import { Row, Card } from 'react-bootstrap';
function EueSuggest() {
const cardstyled = {
fontSize: '0.5em',
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '1.5px',
borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)'
}
const btnstyled = {
background: 'rgb(110, 189, 142)',
margin: '1px',
maxWidth: '100%',
borderWidth: '2px',
fontSize: '10px',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
return (
......
client/src/components/Footer.js
View file @ 3bddb53f
import React, { useEffect, useRef, useState } from 'react'
import { Container, Row, Card, Table, Button, Col, Modal, ModalTitle, Overlay, Tooltip } from 'react-bootstrap';
import React, { useEffect, useState } from 'react'
import { Row, Card, Button, Col, Modal, } from 'react-bootstrap';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import '../App.css'
function Footer() {
const cardstyled = {
fontSize: '0.5em',
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '1.5px',
borderWidth: '3px',
borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)'
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
const btnstyled = {
const btnstyled2 = {
background: 'white',
margin: '1px',
maxWidth: 'fit-content',
borderWidth: '2px',
fontSize: '10px',
color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
}
const [donateShow, setDonateShow] = useState(false);
const [isCopyshow, setCopyShow] = useState(false);
const HandleClose = () => setDonateShow(false);
function clickAndCopy() {
function clickAndTwoSec() {
return new Promise((resolve) => setTimeout(resolve, 2000))
}
// function CopyShow() {
const [isCopyshow, setCopyShow] = useState(false);
useEffect(() => {
if (isCopyshow) {
clickAndCopy().then(() => {
clickAndTwoSec().then(() => {
setCopyShow(false);
});
}
}, [isCopyshow]);
// isCopyshow 가 바뀔 때만 effect를 재실행한다.
// }
const handleClick = () => setCopyShow(true);
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Row className='my-1 d-flex justify-content-center' style={{ fontSize: '15px', color: 'rgb(109, 110, 109)' }}>
<Card.Title>
서버비용 후원하기
</Row>
<Row className='my-1 d-flex justify-content-center'>
</Card.Title>
<Card.Subtitle style={{fontWeight: 'lighter'}}>
이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다. <br />
서버비용 충당 후 후원금이 남을시 UNICEF 에 기부하겠습니다.
</Row>
<Row className='my-1 d-flex justify-content-center'>
<Button variant='light' style={btnstyled} onClick={() => setDonateShow(true)}>
</Card.Subtitle>
<Row className='my-2 d-flex justify-content-center'>
<Button variant='light' style={btnstyled2} onClick={() => setDonateShow(true)}>
♥ 후원하기
</Button>
<Modal
size='sm'
size='md'
show={donateShow}
onHide={() => setDonateShow(false)}
onHide={HandleClose}
style={{ top: '80px', left: '1vw' }}
>
<Modal.Header className='d-flex justify-content-center'>
<Modal.Title style={{fontSize: '1em'}}>
Thank you for your Donation
<Modal.Title>
♥ Thank you for Donation ♥
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Col className='d-flex justify-content-center text-center' style={{ flexDirection: 'column' }}>
<p style={{ color: 'rgb(109, 110, 109)', margin: '1em', fontSize: '15px' }}>
<Card style={{ color: 'rgb(109, 110, 109)', paddingTop: '10px' }}>
카카오뱅크
</p>
<CopyToClipboard text={'박상호 3333-16-7299769'}>
<p className='m-auto' style={btnstyled} >
박상호 3333-16-7299769
<Button variant='light'
disabled={isCopyshow}
onClick={!isCopyshow ? handleClick : null}
style={{
background: 'lightgray',
margin: '5px',
maxWidth: 'fit-content',
borderWidth: '2px',
fontSize: '10px',
color: 'black',
border: 'none',
whiteSpace: 'nowrap'
}}>
{isCopyshow ? '복사 성공!' : '복사'}
</Button>
</p>
</CopyToClipboard>
<CopyToClipboard text={'박상호 3333-16-7299769'}>
<p className='m-auto' style={btnstyled2} >
박상호 3333-16-7299769
<Button variant='light'
disabled={isCopyshow}
onClick={!isCopyshow ? handleClick : null}
style={{
background: 'lightgray',
margin: '5px',
maxWidth: 'fit-content',
borderWidth: '2px',
fontSize: '14px',
color: 'black',
border: 'none',
whiteSpace: 'nowrap'
}}>
{isCopyshow ? '복사 성공!' : '복사'}
</Button>
</p>
</CopyToClipboard>
</Card>
</Col>
</Modal.Body>
<Modal.Footer>
<Button variant='light' style={btnstyled2} onClick={HandleClose}>
닫기
</Button>
</Modal.Footer>
</Modal>
</Row>
<Row className='my-1 d-flex justify-content-center flex-direction-column' style={{ color: 'rgb(109, 110, 109)', flexDirection: 'column' }}>
<Row className='d-flex justify-content-center flex-direction-column' style={{ color: 'rgb(109, 110, 109)', flexDirection: 'column', fontSize: '0.8em' }}>
<Col>
<a href='https://www.notion.so/EUE-047f1812c6c24096a528dfd3330c227d' style={{ color: 'rgb(110, 189, 142)' }}>TEAM EUE </a> : 안강민, 박상호, 박예은
</Col>
......
client/src/components/LocCodeChange.js 0 → 100644
View file @ 3bddb53f
import React from 'react'
import '../App.css'
import { Form, Button, Row, Col, Card, DropdownButton, Dropdown, ButtonGroup } from 'react-bootstrap';
import { useState } from 'react';
import axios from 'axios';
// import { doeCode } from '../utils/Auth';
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'
}
// console.log(typeof (locCode()))
// console.log(locCode())
// const [ddoe, setDdoe] = useState([])
// async function DoeCode() {
// await doeCode().then((res) => {
// // // // for (let i = 0; i < res.length; i++) {
// // // console.log(res[0]['code_doe'])
// // // console.log(0, res[0]['name_doe'])
// ddoe.push(res[0]['name_doe'])
// ddoe.push(res[1]['name_doe'])
// console.log(ddoe)
// console.log(typeof(ddoe))
// // // }
// })
// }
const res = axios.get("localhost:4500/d/loccode");
// const does = res.data["locCodes"]["DOE"] // object
return (
<Row className='text-center w-100 my-2'>
{/* {DoeCode()} */}
{/* {data} */}
asd
<Card style={cardstyled}>
<Card.Title id='impactTitle'>
Local Code
</Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
Please select a your region
</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></Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</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 0 → 100644
View file @ 3bddb53f
import React, { useState } from 'react'
import { Row, Card, Button, Col, Modal } from 'react-bootstrap';
// import db from "../db/index"
import '../App.css'
import { Link } from 'react-router-dom';
function LocalCode() {
const logined = localStorage.getItem('nickname')
const cardstyled = {
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgba(195, 195, 195, 0.753)',
color: 'rgb(110, 189, 142)'
}
const btnstyled2 = {
background: 'white',
margin: 'auto',
borderWidth: '2px',
fontSize: '0.5em',
color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
}
const [localChange, setLocalChange] = useState(false)
const nickname = localStorage.getItem('nickname')
return (
<>
<Col className='text-center pt-3 pb-2 px-0'>
<Card style={cardstyled} id='localName'>
<Card.Title>
{logined ?
`${nickname}`
:
<>
GUEST
</>
}, 환영합니다.
</Card.Title>
<Row style={{ alignItems: 'center', margin: 'auto', whiteSpace: 'nowrap' }}>
<Card.Subtitle>
지역코드
</Card.Subtitle>
{logined &&
<Button variant='light' className='ml-1' style={btnstyled2}>
<Link to='/local_code' style={{ textDecoration: 'none', color: 'rgb(110, 189, 142)' }}>
변경
</Link>
</Button>
}
</Row>
<Modal
show={localChange}
onHide={() => setLocalChange(false)}
>
<Modal.Header className='d-block text-center'>
<Modal.Title>
마이페이지
</Modal.Title>
</Modal.Header>
<Modal.Body>
지역이름 (지역코드)
</Modal.Body>
</Modal>
환경을 향한 노력 <br />
<strong>OOO 일 째</strong>
</Card>
</Col>
</>
)
}
export default LocalCode;
\ No newline at end of file
client/src/components/LoginComp.js 0 → 100644
View file @ 3bddb53f
import React, { useState } from 'react';
import '../App.css'
import { Form, Button, Row, Col, Card, Alert } from 'react-bootstrap';
import { LoginWithKakao } from '../utils/Oauth';
function LoginComp() {
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 [emailSent, setEmailSent] = useState(false)
const [alertShow, setAlertShow] = useState(true)
function CheckEmailSend() {
setEmailSent(!emailSent)
}
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Card.Title id='impactTitle'>
LOGIN
</Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
Log in with your social media account or email address
</Card.Subtitle>
<hr />
<Card.Text>
<Row className='m-auto d-flex justify-content-center' style={{ width: '80%' }}>
{!emailSent ?
<Alert show={alertShow} variant={'success'}>
<Col>
😍 이메일 전송이 완료 되었습니다.
</Col>
<Alert.Link href='/' style={{ fontSize: '0.8em' }}>
이메일 확인 하러가기 ➞
</Alert.Link>
</Alert>
:
<Alert show={alertShow} variant={'danger'}>
<Col>
😭 이메일을 정확하게 적어주세요.
</Col>
</Alert>
}
<Button onClick={() => setAlertShow(true)}>보여주고</Button>
<Button onClick={() => setAlertShow(false)}>안보여주고</Button>
</Row>
<Form style={inboxstyled}>
<Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Email" />
</Form.Group>
<Button variant='light' type="submit" id='formbtn' onClick={CheckEmailSend}>
LOGIN
</Button>
</Form>
<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' }}>
<a href="#;" onClick={LoginWithKakao} id='socialLink' >
{/* 세미콜론이 붙으면 최상단 이동 x */}
<img src='http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg' id='logpng' alt='KAKAO' />
</a>
</Row>
</Card.Text>
</Card>
</Row>
)
}
export default LoginComp;
\ No newline at end of file
client/src/components/MainLayer.js
View file @ 3bddb53f
import React from 'react'
import { useState } from 'react';
import { Button, Form, Image, Row, ButtonGroup, Modal, Dropdown, Col } from 'react-bootstrap';
import { Button, Image, Row, ButtonGroup, } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import '../App.css'
import SignUp from '../pages/SignUp'
import LoginwithSocial from '../pages/LoginwithSocial';
import LocalCode from '../components/LocalCode';
import { kakaoLogout } from '../utils/Oauth';
function MainLayer() {
......@@ -12,6 +12,7 @@ function MainLayer() {
border: 'solid',
color: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
borderWidth: '3px',
marginBottom: '1em',
width: '100%',
backgroundSize: 'contain',
......@@ -21,108 +22,59 @@ function MainLayer() {
const btnstyled = {
background: 'rgb(110, 189, 142)',
margin: '1px',
margin: 'auto',
marginBottom: '0.5em',
display: 'flex',
justifyContent: 'center',
maxWidth: '100%',
width: '100%',
borderWidth: '2px',
fontSize: '10px',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
textDecorationColor: 'none',
color: 'white'
}
const loginstyled = {
margin: 'auto',
padding: '2px',
diplay: 'flex',
justifyContent: 'center',
borderRadius: '20px'
}
const titlesty = {
display: 'flex',
justifyContent: 'center',
background: 'rgb(110, 189, 142)',
text: 'center'
}
const [logshow, setLogshow] = useState(false);
const [signshow, setSignshow] = useState(false);
const [isLogin, setIsLogin] = useState(false)
const logined = localStorage.getItem('nickname')
return (
<>
<Row className='d-flex align-items-center m-auto w-100'>
<Col className='m-auto '>
<Link to='/' className=' m-auto'>
<Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
</Link>
</Col>
<Dropdown className='d-sm-block d-md-none' style={{ fontSize: '1em' }}
>
<Dropdown.Toggle style={btnstyled} id="dropdown-basic">
</Dropdown.Toggle>
<Dropdown.Menu className='z-index-10'>
<Dropdown.Item href="#/action-1">
<Button variant='light' className='w-100 m-auto' style={btnstyled} onClick={() => setLogshow(true)}>
LOGIN
</Button>
<Modal
size="sm"
show={logshow}
onHide={() => setLogshow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<LoginwithSocial />
</Modal>
</Dropdown.Item>
<Dropdown.Item href="#/action-2">
<Button variant='light' className='w-100 m-auto' style={btnstyled} onClick={() => setSignshow(true)}>
SIGN UP
</Button>
<Modal
size="md"
show={signshow}
onHide={() => setSignshow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<SignUp />
</Modal>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Link to='/' className=' m-auto'>
<Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
</Link>
</Row>
<Row className='d-none d-md-flex justify-content-center align-items-center my-3 mx-auto w-100'>
<ButtonGroup vertical className='m-auto' style={{ width: '100%' }}>
<Button variant='light' style={btnstyled} onClick={() => setLogshow(true)}>LOGIN</Button>
<Modal
size="sm"
show={logshow}
onHide={() => setLogshow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<LoginwithSocial />
</Modal>
<Button variant='light' style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button>
<Modal
size="md"
show={signshow}
onHide={() => setSignshow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<SignUp />
</Modal>
<Row className='m-auto d-flex justify-content-center w-100'>
<LocalCode />
</Row>
<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' }}>
{logined ?
//true
<Button variant='light' style={btnstyled} onClick={kakaoLogout}>
로그아웃
</Button>
:
//false
<Button variant='light' style={btnstyled}>
<Link to='/login' id='btnlink'>
로그인
</Link>
</Button>
}
{!logined &&
<Button variant='light' style={btnstyled}>
<Link to='/signup' id='btnlink'>
회원가입
</Link>
</Button>
}
</ButtonGroup>
</Row>
<Row className='m-auto justify-content-center w-100' id='contour'>
|
</Row>
</>
);
}
......
client/src/components/OAuth.js deleted 100644 → 0
View file @ 2be6215c
import axios from 'axios';
import { Spinner, Button, Col, Row } from 'react-bootstrap';
import { KAKAO_AUTH_URL } from './Oauth';
import { Link, Redirect } from 'react-router-dom';
// export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
function Oauth() {
const REST_API_KEY = 'a564b730d6339b084ecf7775a9a09284';
const REDIRECT_URI = 'http://localhost:3000/oauth';
const url = new URL(window.location.href)
const authorizationCode = url.searchParams.get('code')
console.log('인가 코드', authorizationCode);
const kakaoAuthURl = `https://kauth.kakao.com/oauth/token`
// const KAKAO_AUTH_URL = `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();
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(response))
function locateHome() {
window.location.replace('/')
};
setTimeout(locateHome, 3000)
return (
<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>
<Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
<br />
Loading...
</Button>
</Row>
)
}
export default Oauth;
\ 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