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 @@
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
client/package-lock.json
View file @ 1b314e20
......@@ -16,6 +16,7 @@
"moment": "^2.29.1",
"ngx-spinner": "^12.0.0",
"node-sass": "^6.0.1",
"nodemailer": "^6.6.2",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-chartjs-2": "^3.0.3",
......@@ -14724,6 +14725,14 @@
"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": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
......@@ -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": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
client/package.json
View file @ 1b314e20
......@@ -12,6 +12,7 @@
"moment": "^2.29.1",
"ngx-spinner": "^12.0.0",
"node-sass": "^6.0.1",
"nodemailer": "^6.6.2",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-chartjs-2": "^3.0.3",
......
client/src/App.css
View file @ 1b314e20
......@@ -15,8 +15,13 @@ body {
}
.card .card-title {
color: rgb(109, 110, 109);
/* background-color: ; */
color: rgb(70, 70, 70);
font-size: 1.5em;
}
.card .card-subtitle {
color: rgb(129, 129, 129);
font-size: 0.8em;
}
.form-group .form-control {
......@@ -48,7 +53,7 @@ body {
@media (max-width: 767.98px) {
body {
padding: 10px;
padding: 30px;
padding-left: 20px;
padding-right: 20px;
margin: auto;
......@@ -59,7 +64,12 @@ body {
}
#stickyy {
max-width: 300px;
max-width: 400px;
}
#contour {
padding: 10px;
color: rgba(195, 195, 195, 0.753);
}
}
......@@ -82,8 +92,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/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'
function ChartDoughnut() {
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 = {
background: 'rgb(110, 189, 142)',
......
client/src/components/ChartLine.js
View file @ 1b314e20
......@@ -4,16 +4,15 @@ 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',
borderWidth: '3px',
borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)'
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
const btnstyled = {
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';
function EueSuggest() {
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 = {
background: 'rgb(110, 189, 142)',
......
client/src/components/Footer.js
View file @ 1b314e20
......@@ -5,40 +5,36 @@ 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() {
return new Promise((resolve) => setTimeout(resolve, 2000))
}
// function CopyShow() {
const [isCopyshow, setCopyShow] = useState(false);
useEffect(() => {
if (isCopyshow) {
clickAndCopy().then(() => {
......@@ -46,66 +42,72 @@ function Footer() {
});
}
}, [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/Trydays.js → client/src/components/LocalCode.js
View file @ 1b314e20
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'
function Trydays() {
function LocalCode() {
const cardstyled = {
fontSize: '0.5em',
margin: 'auto',
padding: '1em',
display: 'flex',
justifyContent: 'center',
width: '100%',
borderWidth: '1.5px',
borderWidth: '3px',
borderRadius: '20px',
borderColor: '#04AB70',
borderColor: 'rgba(195, 195, 195, 0.753)',
color: 'rgb(110, 189, 142)'
}
const btnstyled = {
background: 'rgb(110, 189, 142)',
margin: '1px',
maxWidth: '100%',
const btnstyled2 = {
background: 'white',
margin: 'auto',
// maxWidth: 'fit-content',
borderWidth: '2px',
fontSize: '10px',
borderColor: 'rgba(195, 195, 195, 0.712)',
fontSize: '0.5em',
color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
color: 'white'
}
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>
유저아이디
GUEST
</Card.Title>
<Card.Subtitle>
지역
울릉면
지역코드
<Button variant='light' style={btnstyled}>
<Row style={{ alignItems: 'center', margin: 'auto', whiteSpace: 'nowrap' }}>
<Card.Subtitle>
지역이름
지역코드
</Card.Subtitle>
<Button variant='light' className='ml-1' style={btnstyled2}>
변경
</Button>
</Row>
<Modal>
gd
</Modal>
</Card.Subtitle>
<Card.Text>
환경을 향한 노력 ㅁㅁㅁ일 째 입니다.
</Card.Text>
환경을 향한 노력 <br />
<strong>OOO 일 째</strong>
</Card>
</Row>
</Col>
</>
)
}
export default Trydays;
\ No newline at end of file
export default LocalCode;
\ No newline at end of file
client/src/components/MainLayer.js
View file @ 1b314e20
......@@ -5,6 +5,9 @@ import { Link } from 'react-router-dom';
import '../App.css'
import SignUp from '../pages/SignUp'
import LoginwithSocial from '../pages/LoginwithSocial';
import { isLogined } from './../Utils/Auth';
import LocalCode from '../components/LocalCode';
function MainLayer() {
......@@ -12,6 +15,7 @@ function MainLayer() {
border: 'solid',
color: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px',
borderWidth: '3px',
marginBottom: '1em',
width: '100%',
backgroundSize: 'contain',
......@@ -26,80 +30,54 @@ function MainLayer() {
justifyContent: 'center',
maxWidth: '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 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 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 user = isLogined()
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>
<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' }}>
{user ?
<Button variant='light' style={btnstyled} onClick={() => setLogshow(true)}>
로그아웃
</Button>
:
<Button variant='light' style={btnstyled} onClick={() => setLogshow(true)}>
로그인
</Button>
}
<Modal
size="sm"
show={logshow}
......@@ -107,10 +85,8 @@ function MainLayer() {
aria-labelledby="example-modal-sizes-title-sm"
>
<LoginwithSocial />
</Modal>
<Button variant='light' style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button>
<Button variant='light' style={btnstyled} onClick={() => setSignshow(true)}>회원가입</Button>
<Modal
size="md"
show={signshow}
......@@ -120,9 +96,11 @@ function MainLayer() {
<SignUp />
</Modal>
</ButtonGroup>
</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'
function TimeNow() {
const cardstyled = {
fontSize: '0.5em',
margin: 'auto',
padding: '1em',
display: 'flex',
......
client/src/pages/Home.js
View file @ 1b314e20
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap';
import React, { useState, useEffect } from 'react'
import { Container, Row, Col, Button } from 'react-bootstrap';
import MainLayer from '../components/MainLayer';
import TimeNow from './../components/TimeNow';
import '../App.css'
import Trydays from './../components/Trydays';
import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine';
import ChartDoughnut from '../components/ChartDoughnut';
import Footer from './../components/Footer';
import { useEffect } from 'react';
function Home() {
......@@ -36,20 +34,24 @@ function Home() {
console.log('마운트 될때마다 실행');
}, []);
// const [isLogin, setIsLogin] = useState(false)
return (
<Container fluid className='d-flex justify-content-center position-relative'>
<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'>
<MainLayer />
</Row>
</Col>
<Col md={6} style={col2sty}>
<Row style={constyled} className='d-flex mb-2 w-100'>
{/* <KakaoLogin/> */}
{/* <TimeNow /> */}
<Trydays />
<EueSuggest />
<ChartLine />
<ChartDoughnut />
......
client/src/pages/SignUp.js
View file @ 1b314e20
import React from 'react'
import React, { useState } from 'react'
import '../App.css'
import { Form, Modal, Button, Row, Col, Image } from 'react-bootstrap';
// import { KAKAO_AUTH_URL } from '../components/Oauth';
import { Redirect } from 'react-router-dom';
import axios from 'axios';
import catchErrors from './../Utils/CatchError';
function SignUp() {
......@@ -13,9 +16,71 @@ function SignUp() {
justifyContent: 'center',
margin: 'auto',
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 (
<>
<Modal.Header className='d-block text-center'>
......@@ -29,39 +94,70 @@ function SignUp() {
</Modal.Header>
<Modal.Body>
<Form style={inboxstyled}>
<Form style={inboxstyled}
noValidate validated={validated}
onSubmit={handleSubmit}
>
<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 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 controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
<Form.Group controlId="formBsicPassword">
<Form.Control
type="password"
name="password"
placeholder="Password"
value={user.password}
onChange={handleChange}
/>
</Form.Group>
<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>
<Button variant='light' type="submit" className='' id='formbtn'>
<Button variant='light' type="submit" id='formbtn' onClick={checkPassword}>
Sign Up
</Button>
</Form>
<hr />
<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 style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
<a href="#" onClick={loginWithKakao} id='socialLink' >
<img 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>
......
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