Skip to content

GitLab

Commit 1b314e20 authored by Spark's avatar Spark
Browse files

UI 수정, signup 비밀번호check, fontsize

parent 09a1f37a
Hide whitespace changes
Inline Side-by-side
client/.gitignore
View file @ 1b314e20
...@@ -18,6 +18,8 @@ ...@@ -18,6 +18,8 @@
.env.test.local .env.test.local
.env.production.local .env.production.local
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
client/package-lock.json
View file @ 1b314e20
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"moment": "^2.29.1", "moment": "^2.29.1",
"ngx-spinner": "^12.0.0", "ngx-spinner": "^12.0.0",
"node-sass": "^6.0.1", "node-sass": "^6.0.1",
"nodemailer": "^6.6.2",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "^1.6.1", "react-bootstrap": "^1.6.1",
"react-chartjs-2": "^3.0.3", "react-chartjs-2": "^3.0.3",
...@@ -14724,6 +14725,14 @@ ...@@ -14724,6 +14725,14 @@
"node": ">=0.8.0" "node": ">=0.8.0"
} }
}, },
"node_modules/nodemailer": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.6.2.tgz",
"integrity": "sha512-YSzu7TLbI+bsjCis/TZlAXBoM4y93HhlIgo0P5oiA2ua9Z4k+E2Fod//ybIzdJxOlXGRcHIh/WaeCBehvxZb/Q==",
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/nopt": { "node_modules/nopt": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz", "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
...@@ -34618,6 +34627,11 @@ ...@@ -34618,6 +34627,11 @@
} }
} }
}, },
"nodemailer": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.6.2.tgz",
"integrity": "sha512-YSzu7TLbI+bsjCis/TZlAXBoM4y93HhlIgo0P5oiA2ua9Z4k+E2Fod//ybIzdJxOlXGRcHIh/WaeCBehvxZb/Q=="
},
"nopt": { "nopt": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz", "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
client/package.json
View file @ 1b314e20
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"moment": "^2.29.1", "moment": "^2.29.1",
"ngx-spinner": "^12.0.0", "ngx-spinner": "^12.0.0",
"node-sass": "^6.0.1", "node-sass": "^6.0.1",
"nodemailer": "^6.6.2",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "^1.6.1", "react-bootstrap": "^1.6.1",
"react-chartjs-2": "^3.0.3", "react-chartjs-2": "^3.0.3",
......
client/src/App.css
View file @ 1b314e20
...@@ -15,8 +15,13 @@ body { ...@@ -15,8 +15,13 @@ body {
} }
.card .card-title { .card .card-title {
color: rgb(109, 110, 109); color: rgb(70, 70, 70);
/* background-color: ; */ font-size: 1.5em;
}
.card .card-subtitle {
color: rgb(129, 129, 129);
font-size: 0.8em;
} }
.form-group .form-control { .form-group .form-control {
...@@ -48,7 +53,7 @@ body { ...@@ -48,7 +53,7 @@ body {
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
body { body {
padding: 10px; padding: 30px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
margin: auto; margin: auto;
...@@ -59,7 +64,12 @@ body { ...@@ -59,7 +64,12 @@ body {
} }
#stickyy { #stickyy {
max-width: 300px; max-width: 400px;
}
#contour {
padding: 10px;
color: rgba(195, 195, 195, 0.753);
} }
} }
...@@ -82,8 +92,12 @@ body { ...@@ -82,8 +92,12 @@ body {
top: 40px; top: 40px;
width: fit-content; width: fit-content;
height: fit-content; height: fit-content;
max-width: 240px; max-width: 300px;
}
#contour {
display: none;
} }
} }
\ No newline at end of file
client/src/Utils/Auth.js 0 → 100644
View file @ 1b314e20
import axios from 'axios';
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
}
}
client/src/Utils/CatchError.js 0 → 100644
View file @ 1b314e20
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/SendEmail.js 0 → 100644
View file @ 1b314e20
// 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/Utils/config/email.js 0 → 100644
View file @ 1b314e20
const nodemailer = require('nodemailer');
const smtpTransport = nodemailer.createTransport({
service: "Naver",
auth: {
user: "loot04@naver.com",
pass: "chswkddl04!"
},
tls: {
rejectUnauthorized: false
}
});
module.exports={
smtpTransport
}
\ No newline at end of file
client/src/components/ChartDoughnut.js
View file @ 1b314e20
...@@ -4,16 +4,15 @@ import { Doughnut } from 'react-chartjs-2' ...@@ -4,16 +4,15 @@ import { Doughnut } from 'react-chartjs-2'
function ChartDoughnut() { function ChartDoughnut() {
const cardstyled = { const cardstyled = {
fontSize: '0.5em',
margin: 'auto', margin: 'auto',
padding: '1em', padding: '1em',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
width: '100%', width: '100%',
borderWidth: '1.5px', borderWidth: '3px',
borderRadius: '20px', borderRadius: '20px',
borderColor: '#04AB70', borderColor: 'rgb(110, 189, 142)',
color: 'rgb(110, 189, 142)' color: '#04AB70'
} }
const btnstyled = { const btnstyled = {
background: 'rgb(110, 189, 142)', background: 'rgb(110, 189, 142)',
......
client/src/components/ChartLine.js
View file @ 1b314e20
...@@ -4,16 +4,15 @@ import { Line } from 'react-chartjs-2' ...@@ -4,16 +4,15 @@ import { Line } from 'react-chartjs-2'
function ChartLine() { function ChartLine() {
const cardstyled = { const cardstyled = {
fontSize: '0.5em',
margin: 'auto', margin: 'auto',
padding: '1em', padding: '1em',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
width: '100%', width: '100%',
borderWidth: '1.5px', borderWidth: '3px',
borderRadius: '20px', borderRadius: '20px',
borderColor: '#04AB70', borderColor: 'rgb(110, 189, 142)',
color: 'rgb(110, 189, 142)' color: '#04AB70'
} }
const btnstyled = { const btnstyled = {
background: 'rgb(110, 189, 142)', background: 'rgb(110, 189, 142)',
......
client/src/components/EueSuggest.js
View file @ 1b314e20
...@@ -3,16 +3,15 @@ import { Container, Row, Card, Table, Button } from 'react-bootstrap'; ...@@ -3,16 +3,15 @@ import { Container, Row, Card, Table, Button } from 'react-bootstrap';
function EueSuggest() { function EueSuggest() {
const cardstyled = { const cardstyled = {
fontSize: '0.5em',
margin: 'auto', margin: 'auto',
padding: '1em', padding: '1em',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
width: '100%', width: '100%',
borderWidth: '1.5px', borderWidth: '3px',
borderRadius: '20px', borderRadius: '20px',
borderColor: '#04AB70', borderColor: 'rgb(110, 189, 142)',
color: 'rgb(110, 189, 142)' color: '#04AB70'
} }
const btnstyled = { const btnstyled = {
background: 'rgb(110, 189, 142)', background: 'rgb(110, 189, 142)',
......
client/src/components/Footer.js
View file @ 1b314e20
...@@ -5,40 +5,36 @@ import '../App.css' ...@@ -5,40 +5,36 @@ import '../App.css'
function Footer() { function Footer() {
const cardstyled = { const cardstyled = {
fontSize: '0.5em',
margin: 'auto', margin: 'auto',
padding: '1em', padding: '1em',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
width: '100%', width: '100%',
borderWidth: '1.5px', borderWidth: '3px',
borderRadius: '20px', borderRadius: '20px',
borderColor: '#04AB70', borderColor: 'rgb(110, 189, 142)',
color: 'rgb(110, 189, 142)' color: '#04AB70'
} }
const btnstyled = { const btnstyled2 = {
background: 'white', background: 'white',
margin: '1px', margin: '1px',
maxWidth: 'fit-content', maxWidth: 'fit-content',
borderWidth: '2px', borderWidth: '2px',
fontSize: '10px',
color: 'rgb(110, 189, 142)', color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)', borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px', borderRadius: '20px',
} }
const [donateShow, setDonateShow] = useState(false); const [donateShow, setDonateShow] = useState(false);
const [isCopyshow, setCopyShow] = useState(false);
const HandleClose = () => setDonateShow(false);
function clickAndCopy() { function clickAndCopy() {
return new Promise((resolve) => setTimeout(resolve, 2000)) return new Promise((resolve) => setTimeout(resolve, 2000))
} }
// function CopyShow() {
const [isCopyshow, setCopyShow] = useState(false);
useEffect(() => { useEffect(() => {
if (isCopyshow) { if (isCopyshow) {
clickAndCopy().then(() => { clickAndCopy().then(() => {
...@@ -46,66 +42,72 @@ function Footer() { ...@@ -46,66 +42,72 @@ function Footer() {
}); });
} }
}, [isCopyshow]); }, [isCopyshow]);
// isCopyshow 가 바뀔 때만 effect를 재실행한다.
// }
const handleClick = () => setCopyShow(true); const handleClick = () => setCopyShow(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}>
<Row className='my-1 d-flex justify-content-center' style={{ fontSize: '15px', color: 'rgb(109, 110, 109)' }}> <Card.Title>
서버비용 후원하기 서버비용 후원하기
</Row> </Card.Title>
<Row className='my-1 d-flex justify-content-center'> <Card.Subtitle style={{fontWeight: 'lighter'}}>
이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다. <br /> 이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다. <br />
서버비용 충당 후 후원금이 남을시 UNICEF 에 기부하겠습니다. 서버비용 충당 후 후원금이 남을시 UNICEF 에 기부하겠습니다.
</Row> </Card.Subtitle>
<Row className='my-1 d-flex justify-content-center'> <Row className='my-2 d-flex justify-content-center'>
<Button variant='light' style={btnstyled} onClick={() => setDonateShow(true)}> <Button variant='light' style={btnstyled2} onClick={() => setDonateShow(true)}>
♥ 후원하기 ♥ 후원하기
</Button> </Button>
<Modal <Modal
size='sm' size='md'
show={donateShow} show={donateShow}
onHide={() => setDonateShow(false)} onHide={HandleClose}
style={{ top: '80px', left: '1vw' }} style={{ top: '80px', left: '1vw' }}
> >
<Modal.Header className='d-flex justify-content-center'> <Modal.Header className='d-flex justify-content-center'>
<Modal.Title style={{fontSize: '1em'}}> <Modal.Title>
Thank you for your Donation ♥ Thank you for Donation ♥
</Modal.Title> </Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<Col className='d-flex justify-content-center text-center' style={{ flexDirection: 'column' }}> <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'}>
<CopyToClipboard text={'박상호 3333-16-7299769'}> <p className='m-auto' style={btnstyled2} >
<p className='m-auto' style={btnstyled} > 박상호 3333-16-7299769
박상호 3333-16-7299769 <Button variant='light'
<Button variant='light' disabled={isCopyshow}
disabled={isCopyshow} onClick={!isCopyshow ? handleClick : null}
onClick={!isCopyshow ? handleClick : null} style={{
style={{ background: 'lightgray',
background: 'lightgray', margin: '5px',
margin: '5px', maxWidth: 'fit-content',
maxWidth: 'fit-content', borderWidth: '2px',
borderWidth: '2px', fontSize: '14px',
fontSize: '10px', color: 'black',
color: 'black', border: 'none',
border: 'none', whiteSpace: 'nowrap'
whiteSpace: 'nowrap' }}>
}}> {isCopyshow ? '복사 성공!' : '복사'}
{isCopyshow ? '복사 성공!' : '복사'}
</Button> </Button>
</p> </p>
</CopyToClipboard> </CopyToClipboard>
</Card>
</Col> </Col>
</Modal.Body> </Modal.Body>
<Modal.Footer>
<Button variant='light' style={btnstyled2} onClick={HandleClose}>
닫기
</Button>
</Modal.Footer>
</Modal> </Modal>
</Row> </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> <Col>
<a href='https://www.notion.so/EUE-047f1812c6c24096a528dfd3330c227d' style={{ color: 'rgb(110, 189, 142)' }}>TEAM EUE </a> : 안강민, 박상호, 박예은 <a href='https://www.notion.so/EUE-047f1812c6c24096a528dfd3330c227d' style={{ color: 'rgb(110, 189, 142)' }}>TEAM EUE </a> : 안강민, 박상호, 박예은
</Col> </Col>
......
client/src/components/Trydays.js → client/src/components/LocalCode.js
View file @ 1b314e20
import React from 'react' import React from 'react'
import { Container, Row, Card, Table, Button } from 'react-bootstrap'; import { Container, Row, Card, Table, Button, Col, Modal } from 'react-bootstrap';
import '../App.css' import '../App.css'
function Trydays() { function LocalCode() {
const cardstyled = { const cardstyled = {
fontSize: '0.5em',
margin: 'auto', margin: 'auto',
padding: '1em', padding: '1em',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
width: '100%', width: '100%',
borderWidth: '1.5px', borderWidth: '3px',
borderRadius: '20px', borderRadius: '20px',
borderColor: '#04AB70', borderColor: 'rgba(195, 195, 195, 0.753)',
color: 'rgb(110, 189, 142)' color: 'rgb(110, 189, 142)'
} }
const btnstyled = { const btnstyled2 = {
background: 'rgb(110, 189, 142)', background: 'white',
margin: '1px', margin: 'auto',
maxWidth: '100%', // maxWidth: 'fit-content',
borderWidth: '2px', borderWidth: '2px',
fontSize: '10px', fontSize: '0.5em',
borderColor: 'rgba(195, 195, 195, 0.712)', color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px', borderRadius: '20px',
color: 'white'
} }
return ( return (
<Row className='text-center w-100 my-2'> <>
<Card style={cardstyled}> <Col className='text-center pt-3 pb-2 px-0'>
<Card style={cardstyled} id='localName'>
<Card.Title> <Card.Title>
유저아이디 GUEST
</Card.Title> </Card.Title>
<Card.Subtitle> <Row style={{ alignItems: 'center', margin: 'auto', whiteSpace: 'nowrap' }}>
지역 <Card.Subtitle>
울릉면 지역이름
지역코드 지역코드
<Button variant='light' style={btnstyled}> </Card.Subtitle>
<Button variant='light' className='ml-1' style={btnstyled2}>
변경 변경
</Button> </Button>
</Row>
<Modal>
gd
</Modal>
</Card.Subtitle> 환경을 향한 노력 <br />
<strong>OOO 일 째</strong>
<Card.Text>
환경을 향한 노력 ㅁㅁㅁ일 째 입니다.
</Card.Text>
</Card> </Card>
</Row> </Col>
</>
) )
} }
export default LocalCode;
export default Trydays; \ No newline at end of file
\ No newline at end of file
client/src/components/MainLayer.js
View file @ 1b314e20
...@@ -5,6 +5,9 @@ import { Link } from 'react-router-dom'; ...@@ -5,6 +5,9 @@ import { Link } from 'react-router-dom';
import '../App.css' import '../App.css'
import SignUp from '../pages/SignUp' import SignUp from '../pages/SignUp'
import LoginwithSocial from '../pages/LoginwithSocial'; import LoginwithSocial from '../pages/LoginwithSocial';
import { isLogined } from './../Utils/Auth';
import LocalCode from '../components/LocalCode';
function MainLayer() { function MainLayer() {
...@@ -12,6 +15,7 @@ function MainLayer() { ...@@ -12,6 +15,7 @@ function MainLayer() {
border: 'solid', border: 'solid',
color: 'rgba(195, 195, 195, 0.753)', color: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px', borderRadius: '20px',
borderWidth: '3px',
marginBottom: '1em', marginBottom: '1em',
width: '100%', width: '100%',
backgroundSize: 'contain', backgroundSize: 'contain',
...@@ -26,80 +30,54 @@ function MainLayer() { ...@@ -26,80 +30,54 @@ function MainLayer() {
justifyContent: 'center', justifyContent: 'center',
maxWidth: '100%', maxWidth: '100%',
borderWidth: '2px', borderWidth: '2px',
fontSize: '10px',
borderColor: 'rgba(195, 195, 195, 0.753)', borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px', borderRadius: '20px',
textDecorationColor: 'none', textDecorationColor: 'none',
color: 'white' color: 'white'
} }
const loginstyled = { // const loginstyled = {
margin: 'auto', // margin: 'auto',
padding: '2px', // padding: '2px',
diplay: 'flex', // diplay: 'flex',
justifyContent: 'center', // justifyContent: 'center',
borderRadius: '20px' // borderRadius: '20px'
} // }
const titlesty = { // const titlesty = {
display: 'flex', // display: 'flex',
justifyContent: 'center', // justifyContent: 'center',
background: 'rgb(110, 189, 142)', // background: 'rgb(110, 189, 142)',
text: 'center' // text: 'center'
} // }
const [logshow, setLogshow] = useState(false); const [logshow, setLogshow] = useState(false);
const [signshow, setSignshow] = useState(false); const [signshow, setSignshow] = useState(false);
const [isLogin, setIsLogin] = useState(false)
const user = isLogined()
return ( return (
<> <>
<Row className='d-flex align-items-center m-auto w-100'> <Row className='d-flex align-items-center m-auto w-100'>
<Col className='m-auto '> <Link to='/' className=' m-auto'>
<Link to='/' className=' m-auto'> <Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
<Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} /> </Link>
</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>
</Row> </Row>
<Row className='d-none d-md-flex justify-content-center align-items-center my-3 mx-auto w-100'> <Row className='m-auto d-flex justify-content-center w-100'>
<ButtonGroup vertical className='m-auto' style={{ width: '100%' }}> <LocalCode />
<Button variant='light' style={btnstyled} onClick={() => setLogshow(true)}>LOGIN</Button> </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' }}>
{user ?
<Button variant='light' style={btnstyled} onClick={() => setLogshow(true)}>
로그아웃
</Button>
:
<Button variant='light' style={btnstyled} onClick={() => setLogshow(true)}>
로그인
</Button>
}
<Modal <Modal
size="sm" size="sm"
show={logshow} show={logshow}
...@@ -107,10 +85,8 @@ function MainLayer() { ...@@ -107,10 +85,8 @@ function MainLayer() {
aria-labelledby="example-modal-sizes-title-sm" aria-labelledby="example-modal-sizes-title-sm"
> >
<LoginwithSocial /> <LoginwithSocial />
</Modal> </Modal>
<Button variant='light' style={btnstyled} onClick={() => setSignshow(true)}>회원가입</Button>
<Button variant='light' style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button>
<Modal <Modal
size="md" size="md"
show={signshow} show={signshow}
...@@ -120,9 +96,11 @@ function MainLayer() { ...@@ -120,9 +96,11 @@ function MainLayer() {
<SignUp /> <SignUp />
</Modal> </Modal>
</ButtonGroup> </ButtonGroup>
</Row> </Row>
<Row className='m-auto justify-content-center w-100' id='contour'>
|
</Row>
</> </>
); );
} }
......
client/src/components/TimeNow.js
View file @ 1b314e20
...@@ -6,7 +6,6 @@ import '../App.css' ...@@ -6,7 +6,6 @@ import '../App.css'
function TimeNow() { function TimeNow() {
const cardstyled = { const cardstyled = {
fontSize: '0.5em',
margin: 'auto', margin: 'auto',
padding: '1em', padding: '1em',
display: 'flex', display: 'flex',
......
client/src/pages/Home.js
View file @ 1b314e20
import React from 'react' import React, { useState, useEffect } from 'react'
import { Container, Row, Col } from 'react-bootstrap'; import { Container, Row, Col, Button } from 'react-bootstrap';
import MainLayer from '../components/MainLayer'; import MainLayer from '../components/MainLayer';
import TimeNow from './../components/TimeNow'; import TimeNow from './../components/TimeNow';
import '../App.css' import '../App.css'
import Trydays from './../components/Trydays';
import EueSuggest from '../components/EueSuggest'; 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 { useEffect } from 'react';
function Home() { function Home() {
...@@ -36,20 +34,24 @@ function Home() { ...@@ -36,20 +34,24 @@ function Home() {
console.log('마운트 될때마다 실행'); console.log('마운트 될때마다 실행');
}, []); }, []);
// const [isLogin, setIsLogin] = useState(false)
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' id='stickyy'> <Col xs={12} md={5} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'> <Row style={col1sty} className='m-auto'>
<MainLayer /> <MainLayer />
</Row> </Row>
</Col> </Col>
<Col md={6} style={col2sty}> <Col md={6} style={col2sty}>
<Row style={constyled} className='d-flex mb-2 w-100'> <Row style={constyled} className='d-flex mb-2 w-100'>
{/* <KakaoLogin/> */} {/* <KakaoLogin/> */}
{/* <TimeNow /> */} {/* <TimeNow /> */}
<Trydays />
<EueSuggest /> <EueSuggest />
<ChartLine /> <ChartLine />
<ChartDoughnut /> <ChartDoughnut />
......
client/src/pages/SignUp.js
View file @ 1b314e20
import React from 'react' import React, { useState } from 'react'
import '../App.css' import '../App.css'
import { Form, Modal, Button, Row, Col, Image } from 'react-bootstrap'; import { Form, Modal, Button, Row, Col, Image } from 'react-bootstrap';
// import { KAKAO_AUTH_URL } from '../components/Oauth'; // import { KAKAO_AUTH_URL } from '../components/Oauth';
import { Redirect } from 'react-router-dom';
import axios from 'axios';
import catchErrors from './../Utils/CatchError';
function SignUp() { function SignUp() {
...@@ -13,9 +16,71 @@ function SignUp() { ...@@ -13,9 +16,71 @@ function SignUp() {
justifyContent: 'center', justifyContent: 'center',
margin: 'auto', margin: 'auto',
padding: '1rem' padding: '1rem'
}
function loginWithKakao() {
window.Kakao.Auth.authorize({
redirectUri: 'http://localhost:3000/oauth'
})
}
const INIT_USER = {
username: '',
email: '',
password: '',
password2: '',
}
const [user, setUser] = useState(INIT_USER)
const [error, setError] = useState('')
const [success, setSuccess] = useState(false)
const [validated, setValidated] = useState(false);
function handleChange(event) {
const { name, value } = event.target
setUser({ ...user, [name]: value })
}
async function handleSubmit(event) {
event.preventDefault()
const form = event.currentTarget;
// 이벤트핸들러가 부착된 것을 의미
console.log(form)
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
try {
setError('')
const response = await axios.post('/api/users/signup', user)
setSuccess(true)
} catch (error) {
catchErrors(error, setError)
}
}
function checkPassword(event) {
const p1 = user.password
const p2 = user.password2
if (p1 !== p2) {
event.preventDefault();
//기본적으로 정의된 이벤트 작동 제한
event.stopPropagation();
//부모태그로부터 이벤트의 전파 멈춤
alert('비밀번호가 일치하지 않습니다.')
return false
} else {
return true
}
}
if (success) {
alert('회원가입 되었습니다.')
return <Redirect to='/user' />
} }
return ( return (
<> <>
<Modal.Header className='d-block text-center'> <Modal.Header className='d-block text-center'>
...@@ -29,39 +94,70 @@ function SignUp() { ...@@ -29,39 +94,70 @@ function SignUp() {
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<Form style={inboxstyled}> <Form style={inboxstyled}
noValidate validated={validated}
onSubmit={handleSubmit}
>
<Form.Group controlId="formBasicEmail"> <Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Username" /> <Form.Control
type="text"
name="username"
placeholder="Username"
value={user.username}
onChange={handleChange}
/>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicEmail"> <Form.Group controlId="formBasicEmail">
<Form.Control type="email" placeholder="Email Address" /> <Form.Control
type="email"
name="email"
placeholder="Email Address"
value={user.email}
onChange={handleChange}
/>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicPassword"> <Form.Group controlId="formBsicPassword">
<Form.Control type="password" placeholder="Password" /> <Form.Control
type="password"
name="password"
placeholder="Password"
value={user.password}
onChange={handleChange}
/>
</Form.Group> </Form.Group>
<Form.Group controlId="formBasicPassword"> <Form.Group controlId="formBasicPassword">
<Form.Control type="password2" placeholder="Confirm Password" /> <Form.Control
type="password"
name="password2"
placeholder="Confirm Password"
value={user.password2}
onChange={handleChange}
/>
</Form.Group> </Form.Group>
<Button variant='light' type="submit" className='' id='formbtn'> <Button variant='light' type="submit" id='formbtn' onClick={checkPassword}>
Sign Up Sign Up
</Button> </Button>
</Form> </Form>
<hr /> <hr />
<Row style={{margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}> <Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
{/* <a href={KAKAO_AUTH_URL} target='_blank' id='socialLink' > <a href="#" onClick={loginWithKakao} id='socialLink' >
<Image src='/images/Kakao1.jpg' id='logpng' /> <img src='/images/Kakao1.jpg' id='logpng' />
KAKAO KAKAO
</a> */} </a>
<a href="javascript:loginWithKakao()" id='socialLink'> <a href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/google.png' id='logpng' /> <Image src='/images/google.png' id='logpng' />
GOOGLE GOOGLE
</a> </a>
<a href="javascript:loginWithKakao()" id='socialLink'> <a href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/facebook.png' id='logpng' /> <Image src='/images/facebook.png' id='logpng' />
FACEBOOK FACEBOOK
</a> </a>
</Row> </Row>
</Modal.Body> </Modal.Body>
......
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