Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
eue
Commits
1b314e20
Commit
1b314e20
authored
Jul 12, 2021
by
Spark
Browse files
UI 수정, signup 비밀번호check, fontsize
parent
09a1f37a
Changes
17
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
:
1
0px
;
padding
:
3
0px
;
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.5
px
'
,
borderWidth
:
'
3
px
'
,
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.5
px
'
,
borderWidth
:
'
3
px
'
,
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.5
px
'
,
borderWidth
:
'
3
px
'
,
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.5
px
'
,
borderWidth
:
'
3
px
'
,
borderRadius
:
'
20px
'
,
borderColor
:
'
#04AB70
'
,
color
:
'
rgb(110, 189, 142)
'
borderColor
:
'
rgb(110, 189, 142)
'
,
color
:
'
#04AB70
'
}
const
btnstyled
=
{
const
btnstyled
2
=
{
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-cen
ter
'
>
<
/
Card.Title
>
<
Card
.
Subtitle
style
=
{{
fontWeight
:
'
ligh
ter
'
}}
>
이용하시는데
불편함이
없도록
광고
없이
운영하고
있습니다
.
<
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
=
{
btnstyled
2
}
onClick
=
{()
=>
setDonateShow
(
true
)}
>
♥
후원하기
<
/Button
>
<
Modal
size
=
'
s
m
'
size
=
'
m
d
'
show
=
{
donateShow
}
onHide
=
{
()
=>
setDonateShow
(
fal
se
)
}
onHide
=
{
HandleClo
se
}
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
:
'
1
5
px
'
}}
>
<
Card
style
=
{{
color
:
'
rgb(109, 110, 109)
'
,
paddingTop
:
'
1
0
px
'
}}
>
카카오뱅크
<
/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.5
px
'
,
borderWidth
:
'
3
px
'
,
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
btnstyled
2
=
{
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
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment