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
butter-studio
Commits
19251ba0
Commit
19251ba0
authored
Aug 07, 2021
by
한규민
Browse files
디버그 해결
서버에서 유효성 중복 검사
parent
3c31b22f
Changes
17
Hide whitespace changes
Inline
Side-by-side
client/src/App.js
View file @
19251ba0
...
...
@@ -22,6 +22,7 @@ function App() {
<
AuthProvider
>
<
Router
>
<
Switch
>
<>
<
Route
path
=
"
/admin
"
component
=
{
AdminPage
}
/
>
<
div
style
=
{{
backgroundColor
:
"
black
"
}}
>
<
Router
>
...
...
@@ -42,6 +43,7 @@ function App() {
<
/Switch
>
<
/Router
>
<
/div
>
<
/
>
<
/Switch
>
<
/Router
>
<
/AuthProvider
>
...
...
client/src/apis/auth.api.js
View file @
19251ba0
...
...
@@ -24,12 +24,6 @@ const signup = async (user) => {
return
data
}
const
compareId
=
async
(
userId
)
=>
{
const
url
=
`
${
baseUrl
}
/api/auth/
${
userId
}
`
const
{
data
}
=
await
axios
.
get
(
url
)
return
data
}
const
confirmMbnum
=
async
(
phone
)
=>
{
const
url
=
`
${
baseUrl
}
/api/auth/phone/
${
phone
}
`
const
{
data
}
=
await
axios
.
post
(
url
);
...
...
@@ -47,7 +41,7 @@ const profile = async (formData) => {
const
{
data
}
=
await
axios
.
post
(
url
,
formData
)
return
data
}
const
getMember
=
async
(
id
)
=>
{
const
getMember
=
async
()
=>
{
const
url
=
`
${
baseUrl
}
/api/auth/member`
const
{
data
}
=
await
axios
.
get
(
url
)
return
data
...
...
@@ -70,7 +64,6 @@ const authApi = {
login
,
logout
,
signup
,
compareId
,
confirmMbnum
,
confirmNum
,
profile
,
...
...
client/src/components/MyInfo/MyInfo.js
View file @
19251ba0
...
...
@@ -91,12 +91,15 @@ const MyInfo = () => {
const
handleOnSummitVerify
=
async
(
e
)
=>
{
e
.
preventDefault
();
try
{
setError
(()
=>
(
""
)
)
;
setLoading
(()
=>
(
true
)
)
;
setError
(
""
);
setLoading
(
true
);
const
pw
=
presentPw
;
console
.
log
(
pw
);
const
confirmPw
=
await
authApi
.
comparePw
(
pw
);
console
.
log
(
"
confirmPw :
"
,
confirmPw
);
if
(
confirmPw
)
{
setPage
(
false
);
setPresentPw
(
""
);
}
else
{
alert
(
"
비밀번호가 일치하지 않습니다.
"
);
}
...
...
@@ -159,31 +162,40 @@ const MyInfo = () => {
const
handleOnSummit
=
async
(
e
)
=>
{
e
.
preventDefault
();
try
{
setError
(()
=>
(
""
)
)
;
setError
(
""
);
//처리가 될때까지 버튼(가입하기)이 안눌리게 지정
setLoading
(()
=>
(
true
)
)
;
setLoading
(
true
);
let
validPw
=
validationPw
();
if
(
validPw
){
const
userData
=
userRe
;
//서버로 전송
const
error
=
await
authApi
.
modifyUser
(
userData
);
setErrorMsg
(
error
);
if
(
error
===
"
성공
"
){
alert
(
"
회원정보 수정 완료
"
);
}
if
(
confirmMb
){
if
(
validPw
){
const
userData
=
userRe
;
//서버로 전송
const
error
=
await
authApi
.
modifyUser
(
userData
);
if
(
error
===
"
성공
"
){
alert
(
"
회원정보수정에 성공하였습니다.
"
)
}
else
{
setErrorMsg
(
error
);
alert
(
"
형식에 맞게 다시 작성해주세요
"
);
}
}
else
{
throw
new
Error
(
"
비밀번호가 일치하지 않습니다.
"
);
}
}
else
{
throw
new
Error
(
"
비밀번호가 일치하지 않습니다
.
"
);
throw
new
Error
(
"
핸드폰 번호를 인증해주세요
.
"
);
}
}
catch
(
error
)
{
//에러전송
catchErrors
(
error
,
setError
);
}
finally
{
setLoading
(()
=>
(
false
)
)
;
setLoading
(
false
);
}
}
const
handleOnclickOut
=
(
e
)
=>
{
setConfirmMb
(
false
);
}
const
handleOnClick
=
(
e
)
=>
{
e
.
preventDefault
();
handleOnclickOut
(
e
);
setPage
(
true
);
}
...
...
@@ -192,14 +204,14 @@ const MyInfo = () => {
{
/* 마이페이지 창 */
}
<
div
className
=
"
d-flex flex-column
"
>
<
span
className
=
{
styles
.
title
}
>
마이페이지
<
/span
>
<
div
className
=
"
d-flex justify-content-around
"
>
<
div
className
=
{
`
${
styles
.
box
}
me-5
`
}
>
<
div
className
=
{
`
d-flex justify-content-around
`
}
>
<
div
className
=
{
`
${
styles
.
box
}
`
}
>
<
p
className
=
{
`
${
styles
.
hoverTxt
}
`
}
>
프로필
변경
<
/p
>
<
img
src
=
{
`/upload/
${
profile
}
`
}
className
=
{
`figure-img img-fluid rounded-circle
${
styles
.
img
}
${
styles
.
profile
}
`
}
role
=
"
button
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#staticBackdrop
"
/>
<
/div
>
<
div
className
=
"
d-flex flex-column py-
4
justify-content-around
"
>
<
div
className
=
"
d-flex flex-column py-
2
justify-content-around
"
>
<
span
className
=
{
`
${
styles
.
userName
}
`
}
>
{
`
${
userNickName
}
`
}
님
반갑습니다
!<
/span
>
<
button
className
=
{
`rounded my-
3
fs-5
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
data
-
bs
-
toggle
=
"
modal
"
href
=
"
#verifyPassword
"
>
회원정보
수정
<
/button
>
<
button
className
=
{
`rounded my-
2
fs-5
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
data
-
bs
-
toggle
=
"
modal
"
href
=
"
#verifyPassword
"
>
회원정보
수정
<
/button
>
<
/div
>
<
/div
>
<
/div
>
...
...
@@ -235,7 +247,7 @@ const MyInfo = () => {
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
"
d-flex justify-content-around align-items-center my-4
"
>
<
label
className
=
{
styles
.
signupLabel
}
>
현재
비밀번호
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userPassword
"
placeholder
=
"
8~11자리 사이
"
onChange
=
{
handlePwOnChange
}
onKeyPress
=
{
enterKey
}
maxLength
=
"
11
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userPassword
"
placeholder
=
"
8~11자리 사이
"
onChange
=
{
handlePwOnChange
}
onKeyPress
=
{
enterKey
}
maxLength
=
"
11
"
/>
<
/div
>
<
/div
>
<
/div
>
...
...
@@ -252,21 +264,21 @@ const MyInfo = () => {
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
이름
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userName
"
placeholder
=
"
이름을 입력해주세요
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
11
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userName
"
placeholder
=
"
이름을 입력해주세요
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
11
"
/>
<
/div
>
{
errorMsg
.
errorName
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
이름을
입력해주세요
<
/p>
}
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
이메일
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
email
"
name
=
"
userEmail
"
placeholder
=
"
이메일을 입력해주세요
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
20
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
email
"
name
=
"
userEmail
"
placeholder
=
"
이메일을 입력해주세요
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
20
"
/>
<
/div
>
{
errorMsg
.
errorEmail
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
이메일을
입력해주세요
<
/p>
}
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
별명
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userNickName
"
placeholder
=
"
10자리 이내
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
10
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userNickName
"
placeholder
=
"
10자리 이내
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
10
"
/>
<
/div
>
{
errorMsg
.
errorNickName
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
10
자
이내로
입력해주세요
.
<
/p>
}
<
/div
>
...
...
@@ -275,7 +287,7 @@ const MyInfo = () => {
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
휴대폰
번호
<
/label
>
<
div
className
=
"
d-flex col-md-auto
"
>
<
input
className
=
{
`
${
styles
.
input
}
`
}
type
=
"
number
"
name
=
"
userMbnum
"
placeholder
=
"
-없이 11자리 입력
"
onChange
=
{
handleUserOnChange
}
min
=
""
max
=
"
99999999999
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
`
}
type
=
"
number
"
name
=
"
userMbnum
"
placeholder
=
"
-없이 11자리 입력
"
onChange
=
{
handleUserOnChange
}
min
=
""
max
=
"
99999999999
"
/>
<
button
type
=
"
button
"
disabled
=
{
loading
}
className
=
{
`rounded-2 mt-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
data
-
bs
-
toggle
=
"
collapse
"
data
-
bs
-
target
=
"
#collapseExample
"
aria
-
expanded
=
"
false
"
aria
-
controls
=
"
collapseExample
"
onClick
=
{
handleOnClickMbnum
}
>
인증번호받기
<
/button
>
<
/div
>
<
/div
>
...
...
@@ -285,7 +297,7 @@ const MyInfo = () => {
<
div
className
=
"
d-flex justify-content-around mt-3
"
>
<
label
className
=
{
`
${
styles
.
confirm
}
`
}
>
인증하기
<
/label
>
<
div
>
<
input
className
=
{
`
${
styles
.
input
}
`
}
type
=
"
number
"
placeholder
=
"
인증번호를 입력
"
onChange
=
{
handleOnChangeMb
}
required
/>
<
input
className
=
{
`
${
styles
.
input
}
`
}
type
=
"
number
"
placeholder
=
"
인증번호를 입력
"
onChange
=
{
handleOnChangeMb
}
/
>
<
button
type
=
"
button
"
className
=
{
`rounded-2 py-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
handleOnClickMbConfirm
}
>
확인
<
/button
>
<
button
type
=
"
button
"
className
=
{
`rounded-2 py-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
handleOnClickMbnum
}
>
재전송
<
/button
>
<
/div
>
...
...
@@ -296,12 +308,10 @@ const MyInfo = () => {
{(
mbError
===
"
실패
"
)
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
인증번호를
다시
입력해주세요
.
<
/p>
}
<
/div
>
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
새
비밀번호
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userPassword
"
placeholder
=
"
8~11자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
11
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userPassword
"
placeholder
=
"
8~11자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
11
"
/>
<
/div
>
{
errorMsg
.
errorPassword
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
8
~
11
자리
사이로
입력해주세요
.
<
/p>
}
...
...
@@ -310,7 +320,7 @@ const MyInfo = () => {
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
새
비밀번호
확인
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userRePassword
"
placeholder
=
"
8~11자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
11
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userRePassword
"
placeholder
=
"
8~11자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
11
"
/>
<
/div
>
{
errorMsg
.
errorRePassword
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
비밀번호가
일치하지
않습니다
.
<
/p>
}
...
...
client/src/components/MyInfo/my-info.module.scss
View file @
19251ba0
...
...
@@ -5,9 +5,6 @@
font-size
:
3rem
;
margin
:
2rem
0
;
}
.img
{
width
:
40%
;
}
.confirm
{
color
:
black
;
...
...
@@ -53,8 +50,10 @@ width: 40%;
}
.box
{
width
:
12rem
;
margin
:
0px
auto
;
margin
:
0px
3rem
;
position
:
relative
;
display
:
flex
;
align-items
:
center
;
}
.box
:hover
{
display
:
block
;
...
...
@@ -75,8 +74,8 @@ width: 40%;
height
:
12rem
;
}
.profile
:hover
{
opacity
:
0
.5
;
}
opacity
:
0
.5
;
}
.input
{
margin
:
0
.5rem
0
0
0
;
padding
:
0
.5rem
0
0
.5rem
0
;
...
...
@@ -103,7 +102,8 @@ width: 40%;
}
.butterYellowAndBtn
{
color
:
black
;
color
:
black
;
font-size
:
1rem
;
background-color
:
#FEDC00
;
border
:
1px
solid
black
;
text-align
:
center
;
...
...
@@ -126,7 +126,36 @@ width: 40%;
font-weight
:
bold
;
color
:
black
;
}
@media
(
max-width
:
403px
)
{
.title
{
display
:
flex
;
justify-content
:
center
;
color
:
#FEDC00
;
font-size
:
2rem
;
margin
:
2rem
0
;
}
.box
{
width
:
8rem
;
margin
:
0px
1
.5rem
0
0
.5rem
;
position
:
relative
;
}
.profile
{
width
:
8rem
;
height
:
8rem
;
}
.userName
{
color
:
white
;
font-size
:
1
.1rem
;
}
.hoverTxt
{
display
:
none
;
position
:absolute
;
top
:
5rem
;
left
:
2
.5rem
;
color
:
#FEDC00
;
font-size
:
1
.5rem
;
}
}
\ No newline at end of file
client/src/components/ReservationDetails/reservation-details.module.scss
View file @
19251ba0
...
...
@@ -3,6 +3,7 @@
display
:
flex
;
justify-content
:
center
;
}
.header
{
display
:
flex
;
justify-content
:
center
;
...
...
@@ -21,4 +22,18 @@
.span
.layout
{
color
:white
;
font-size
:
1
.5rem
;
}
@media
(
max-width
:
403px
)
{
.header
{
display
:
flex
;
justify-content
:
center
;
background-color
:
#FEDC00
;
width
:
80%
;
text-align
:
center
;
font-size
:
1
.5rem
;
margin
:
2rem
;
}
}
\ No newline at end of file
client/src/components/Signup/Signup.js
View file @
19251ba0
...
...
@@ -5,6 +5,7 @@ import { Redirect } from "react-router-dom";
import
catchErrors
from
"
../../utils/catchErrors.js
"
;
const
Signup
=
()
=>
{
//회원정보
const
[
user
,
setUser
]
=
useState
({
userId
:
""
,
userName
:
""
,
...
...
@@ -23,7 +24,7 @@ const Signup = () => {
const
[
mbError
,
setMbError
]
=
useState
(
false
);
const
[
error
,
setError
]
=
useState
(
""
);
const
[
errorMsg
,
setErrorMsg
]
=
useState
({
errorId
:
null
,
errorId
:
false
,
errorName
:
false
,
errorEmail
:
false
,
errorNickName
:
false
,
...
...
@@ -31,10 +32,7 @@ const Signup = () => {
errorMbnum
:
false
,
errorPassword
:
false
,
})
// id중복확인 여부 state와 가입하기 누르면 id 임시 저장
const
[
overlapId
,
setOverlapId
]
=
useState
(
false
);
const
[
confirmMb
,
setConfirmMb
]
=
useState
(
false
);
const
[
preId
,
setPreId
]
=
useState
(
""
);
//입력할때마다 state에 저장
const
handleUserOnChange
=
(
e
)
=>
{
...
...
@@ -49,42 +47,7 @@ const Signup = () => {
})
}
}
//id(중복확인 체크, 형식 에러)
const
handleOnClickId
=
async
(
e
)
=>
{
e
.
preventDefault
();
try
{
setError
(
""
);
if
(
user
.
userId
.
length
<
5
)
{
setErrorMsg
(
errorMsg
=>
({
...
errorMsg
,
[
e
.
target
.
name
]:
true
}));
if
(
overlapId
===
true
)
{
setOverlapId
(()
=>
(
false
));
};
}
else
{
const
userId
=
user
.
userId
;
const
overlapId
=
await
authApi
.
compareId
(
userId
);
if
(
!
overlapId
)
{
alert
(
"
이 아이디는 사용가능합니다.
"
)
setErrorMsg
(
errorMsg
=>
({
...
errorMsg
,
[
e
.
target
.
name
]:
false
}));
setOverlapId
(()
=>
(
true
));
}
else
{
alert
(
"
이미 사용중인 아이디입니다.
"
)
setOverlapId
(()
=>
(
false
));
}
}
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
finally
{
setLoading
(
false
);
}
}
//인증번호 보내기
const
handleOnClickMbnum
=
async
(
e
)
=>
{
e
.
preventDefault
();
try
{
...
...
@@ -103,11 +66,11 @@ const Signup = () => {
setLoading
(
false
);
}
}
//인증번호 입력
const
handleOnChangeMb
=
(
e
)
=>
{
setNumber
(
String
(
e
.
target
.
value
));
}
//인증번호 검증
const
handleOnClickMbConfirm
=
async
(
e
)
=>
{
e
.
preventDefault
();
try
{
...
...
@@ -126,29 +89,36 @@ const Signup = () => {
setLoading
(
false
);
}
}
//비밀번호일치 여부만 클라이언트에서 확인
const
validationPw
=
()
=>
{
if
(
user
.
userPassword
!==
user
.
userRePassword
){
return
false
;
}
else
{
return
true
;}
}
//서버로 전송
const
handleOnSummit
=
async
(
e
)
=>
{
e
.
preventDefault
();
try
{
setError
(()
=>
(
""
)
)
;
setError
(
""
);
//처리가 될때까지 버튼(가입하기)이 안눌리게 지정
setLoading
(()
=>
(
true
)
)
;
setLoading
(
true
);
let
validPw
=
validationPw
();
if
(
validPw
){
const
userData
=
user
;
//서버로 전송
const
error
=
await
authApi
.
signup
(
userData
);
setErrorMsg
(
error
);
if
(
error
===
"
성공
"
){
setSuccess
(
true
);
if
(
confirmMb
){
if
(
validPw
){
const
userData
=
user
;
//서버로 전송
const
error
=
await
authApi
.
signup
(
userData
);
if
(
error
===
"
성공
"
){
setSuccess
(
true
);
}
else
{
setErrorMsg
(
error
);
alert
(
"
형식에 맞게 다시 작성해주세요
"
);
}
}
else
{
throw
new
Error
(
"
비밀번호가 일치하지 않습니다.
"
);
}
}
else
{
throw
new
Error
(
"
비밀번호가 일치하지 않습니다
.
"
);
throw
new
Error
(
"
핸드폰 번호를 인증해주세요
.
"
);
}
}
catch
(
error
)
{
//에러전송
...
...
@@ -170,83 +140,78 @@ const Signup = () => {
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
아이디
<
/label
>
<
div
className
=
"
d-flex col-md-auto
"
>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
userId
"
placeholder
=
"
5~10자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
20
"
required
/>
<
button
type
=
"
button
"
disabled
=
{
loading
}
name
=
"
errorId
"
className
=
{
`rounded-2 mt-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
handleOnClickId
}
>
중복확인
<
/button
>
<
/div
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userId
"
placeholder
=
"
5~10자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
10
"
/>
<
/div
>
{(
overlapId
===
false
)
&&
errorMsg
.
errorId
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
5
~
10
자리
사이로
입력해주세요
.
<
/p>
}
{
overlapId
&&
(
errorMsg
.
errorId
===
false
)
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
아이디
중복이
확인되었습니다
.
<
/p>
}
{(
errorMsg
.
errorId
===
false
)
&&
(
overlapId
===
false
)
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
아이디
중복확인을
해주세요
.
<
/p>
}
{
errorMsg
.
errorId
&&
<
p
className
=
{
styles
.
errorMsg
}
>
5
~
10
자리
사이로
입력해주세요
.
<
/p>
}
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
이름
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userName
"
placeholder
=
"
이름을 입력해주세요
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
20
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userName
"
placeholder
=
"
이름을 입력해주세요
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
20
"
/>
<
/div
>
{
errorMsg
.
errorName
&&
<
p
className
=
{
styles
.
passwordConfirmE
rror
}
>
이름을
입력해주세요
<
/p>
}
{
errorMsg
.
errorName
&&
<
p
className
=
{
styles
.
e
rror
Msg
}
>
이름을
입력해주세요
<
/p>
}
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
이메일
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
email
"
name
=
"
userEmail
"
placeholder
=
"
이메일을 입력해주세요
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
20
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
email
"
name
=
"
userEmail
"
placeholder
=
"
이메일을 입력해주세요
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
20
"
/>
<
/div
>
{
errorMsg
.
errorEmail
&&
<
p
className
=
{
styles
.
passwordConfirmE
rror
}
>
이메일을
입력해주세요
<
/p>
}
{
errorMsg
.
errorEmail
&&
<
p
className
=
{
styles
.
e
rror
Msg
}
>
이메일을
입력해주세요
<
/p>
}
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
별명
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userNickName
"
placeholder
=
"
10자리 이내
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
20
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userNickName
"
placeholder
=
"
10자리 이내
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
20
"
/>
<
/div
>
{
errorMsg
.
errorNickName
&&
<
p
className
=
{
styles
.
passwordConfirmE
rror
}
>
10
자
이내로
입력해주세요
.
<
/p>
}
{
errorMsg
.
errorNickName
&&
<
p
className
=
{
styles
.
e
rror
Msg
}
>
10
자
이내로
입력해주세요
.
<
/p>
}
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
생년월일
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
${
styles
.
input
.
placeholder
}
`
}
type
=
"
number
"
name
=
"
userBirthday
"
placeholder
=
"
6자리(예시: 991225)
"
onChange
=
{
handleUserOnChange
}
min
=
"
0
"
max
=
"
999999
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
${
styles
.
input
.
placeholder
}
`
}
type
=
"
number
"
name
=
"
userBirthday
"
placeholder
=
"
6자리(예시: 991225)
"
onChange
=
{
handleUserOnChange
}
min
=
"
0
"
max
=
"
999999
"
/>
<
/div
>
{
errorMsg
.
errorBirthday
&&
<
p
className
=
{
styles
.
passwordConfirmE
rror
}
>
숫자
6
자리를
입력해주세요
.
<
/p>
}
{
errorMsg
.
errorBirthday
&&
<
p
className
=
{
styles
.
e
rror
Msg
}
>
숫자
6
자리를
입력해주세요
.
<
/p>
}
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
휴대폰
번호
<
/label
>
<
div
className
=
"
d-flex col-md-auto
"
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
input2
}
`
}
type
=
"
number
"
name
=
"
userMbnum
"
placeholder
=
"
-없이 11자리 입력
"
onChange
=
{
handleUserOnChange
}
min
=
"
0
"
max
=
"
99999999999
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
input2
}
`
}
type
=
"
number
"
name
=
"
userMbnum
"
placeholder
=
"
-없이 11자리 입력
"
onChange
=
{
handleUserOnChange
}
min
=
"
0
"
max
=
"
99999999999
"
/>
<
button
type
=
"
button
"
disabled
=
{
loading
}
className
=
{
`rounded-2 mt-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
data
-
bs
-
toggle
=
"
collapse
"
data
-
bs
-
target
=
"
#collapseExample
"
aria
-
expanded
=
"
false
"
aria
-
controls
=
"
collapseExample
"
onClick
=
{
handleOnClickMbnum
}
>
인증번호받기
<
/button
>
<
/div
>
<
/div
>
{
errorMsg
.
errorMbnum
&&
<
p
className
=
{
styles
.
passwordConfirmE
rror
}
>-
없이
숫자
11
자리를
입력해주세요
.
<
/p>
}
{
errorMsg
.
errorMbnum
&&
<
p
className
=
{
styles
.
e
rror
Msg
}
>-
없이
숫자
11
자리를
입력해주세요
.
<
/p>
}
<
div
class
=
"
collapse
"
id
=
"
collapseExample
"
>
<
div
class
Name
=
"
collapse
"
id
=
"
collapseExample
"
>
{
/* <div className="d-flex col-md-auto justify-content-end"> */
}
<
div
className
=
"
d-flex justify-content-between mt-3
"
>
<
label
className
=
{
`
${
styles
.
confirm
}
`
}
>
인증하기
<
/label
>
<
div
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
input2
}
`
}
type
=
"
number
"
placeholder
=
"
인증번호를 입력
"
onChange
=
{
handleOnChangeMb
}
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
input2
}
`
}
type
=
"
number
"
placeholder
=
"
인증번호를 입력
"
onChange
=
{
handleOnChangeMb
}
/
>
<
button
type
=
"
button
"
className
=
{
`rounded-2 py-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
handleOnClickMbConfirm
}
>
확인
<
/button
>
<
button
type
=
"
button
"
className
=
{
`rounded-2 py-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
handleOnClickMbnum
}
>
재전송
<
/button
>
<
/div
>
<
/div
>
{(
mbError
===
"
재전송
"
)
&&
<
p
className
=
{
styles
.
passwordConfirmE
rror
}
>
유효시간이
만료되었습니다
.
재전송해주세요
.
<
/p>
}
{(
mbError
===
"
보냄
"
)
&&
<
p
className
=
{
styles
.
passwordConfirmE
rror
}
>
5
분이내에
입력해주세요
.
<
/p>
}
{(
mbError
===
"
성공
"
)
&&
<
p
className
=
{
styles
.
passwordConfirmE
rror
}
>
인증되었습니다
.
<
/p>
}
{(
mbError
===
"
실패
"
)
&&
<
p
className
=
{
styles
.
passwordConfirmE
rror
}
>
인증번호를
다시
입력해주세요
.
<
/p>
}
{(
mbError
===
"
재전송
"
)
&&
<
p
className
=
{
styles
.
e
rror
Msg
}
>
유효시간이
만료되었습니다
.
재전송해주세요
.
<
/p>
}
{(
mbError
===
"
보냄
"
)
&&
<
p
className
=
{
styles
.
e
rror
Msg
}
>
5
분이내에
입력해주세요
.
<
/p>
}
{(
mbError
===
"
성공
"
)
&&
<
p
className
=
{
styles
.
e
rror
Msg
}
>
인증되었습니다
.
<
/p>
}
{(
mbError
===
"
실패
"
)
&&
<
p
className
=
{
styles
.
e
rror
Msg
}
>
인증번호를
다시
입력해주세요
.
<
/p>
}
<
/div
>
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
`
${
styles
.
inputContent
}
`
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
비밀번호
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userPassword
"
placeholder
=
"
8~11자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
20
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userPassword
"
placeholder
=
"
8~11자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
20
"
/>
<
/div
>
{
errorMsg
.
errorPassword
&&
<
p
className
=
{
styles
.
passwordConfirmE
rror
}
>
8
~
11
자리
사이로
입력해주세요
.
<
/p>
}
{
errorMsg
.
errorPassword
&&
<
p
className
=
{
styles
.
e
rror
Msg
}
>
8
~
11
자리
사이로
입력해주세요
.
<
/p>
}
<
/div
>
<
div
className
=
{
`d-flex
${
styles
.
inputContent
}
`
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
비밀번호
확인
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userRePassword
"
placeholder
=
"
8~11자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
20
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userRePassword
"
placeholder
=
"
8~11자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
20
"
/>
<
/div
>
<
button
className
=
{
`rounded my-3 py-2 fs-5
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
type
=
"
submit
"
disabled
=
{
loading
}
>
가입하기
<
/button
>
...
...
client/src/components/Signup/signup.module.scss
View file @
19251ba0
...
...
@@ -73,7 +73,7 @@ border: 1px solid white ;
text-align
:
center
;
}
.
passwordConfirmE
rror
{
.
e
rror
Msg
{
margin-bottom
:
0
;
margin-top
:
0
.5rem
;
text-align
:
end
;
...
...
server/controllers/user.controller.js
View file @
19251ba0
...
...
@@ -5,6 +5,7 @@ import fs from "fs";
import
CryptoJS
from
"
crypto-js
"
;
import
validator
from
"
validator
"
;
// 현재 유저 상태 결정
const
getUser
=
async
(
req
,
res
)
=>
{
try
{
if
(
req
.
cookies
.
butterStudio
)
{
...
...
@@ -19,7 +20,7 @@ const getUser = async (req, res) => {
return
res
.
status
(
500
).
send
(
"
유저를 가져오지 못했습니다.
"
);
}
}
// 로그인
const
login
=
async
(
req
,
res
)
=>
{
try
{
const
{
id
,
password
}
=
req
.
body
;
...
...
@@ -60,9 +61,8 @@ const login = async (req, res) => {
console
.
error
(
error
);
return
res
.
status
(
500
).
send
(
"
로그인 에러
"
);
}
}
// 로그아웃
const
logout
=
async
(
req
,
res
)
=>
{
try
{
res
.
clearCookie
(
config
.
cookieName
);
...
...
@@ -77,57 +77,41 @@ const logout = async (req, res) => {
}
}
const
compareId
=
async
(
req
,
res
)
=>
{
try
{
const
id
=
req
.
params
.
userId
;
const
userid
=
await
User
.
findOne
({
where
:
{
userId
:
id
}
});
if
(
userid
)
{
return
res
.
json
(
true
);
}
else
{
return
res
.
json
(
false
);
}
}
catch
(
error
)
{
console
.
error
(
error
);
return
res
.
status
(
500
).
send
(
"
아이디 중복 확인 에러
"
);
}
}
// 휴대폰 인증
const
NCP_serviceID
=
'
ncp:sms:kr:270376424445:butterstudio
'
;
const
NCP_accessKey
=
'
GQmVCT2ZFxnEaJOWbrQs
'
;
const
NCP_secretKey
=
'
XLQQ8sd9WxW40hNi0xNBTOG0T8ksRsr8c8sUIEvy
'
;
const
date
=
Date
.
now
().
toString
();
const
uri
=
NCP_serviceID
;
const
secretKey
=
NCP_secretKey
;
const
accessKey
=
NCP_accessKey
;
const
method
=
'
POST
'
;
const
space
=
"
"
;
const
newLine
=
"
\n
"
;
const
url
=
`https://sens.apigw.ntruss.com/sms/v2/services/
${
uri
}
/messages`
;
const
url2
=
`/sms/v2/services/
${
uri
}
/messages`
;
//시크릿 키를 암호화하는 작업
const
hmac
=
CryptoJS
.
algo
.
HMAC
.
create
(
CryptoJS
.
algo
.
SHA256
,
secretKey
);
hmac
.
update
(
method
);
hmac
.
update
(
space
);
hmac
.
update
(
url2
);
hmac
.
update
(
newLine
);
hmac
.
update
(
date
);
hmac
.
update
(
newLine
);
hmac
.
update
(
accessKey
);
const
hash
=
hmac
.
finalize
();
const
signature
=
hash
.
toString
(
CryptoJS
.
enc
.
Base64
);
// 인증번호 발송
const
confirmMbnum
=
async
(
req
,
res
)
=>
{
try
{
// 휴대폰 인증
const
NCP_serviceID
=
process
.
env
.
NCP_serviceID
;
const
NCP_accessKey
=
process
.
env
.
NCP_accessKey
;
const
NCP_secretKey
=
process
.
env
.
NCP_secretKey
;
const
date
=
Date
.
now
().
toString
();
const
uri
=
NCP_serviceID
;
const
accessKey
=
NCP_accessKey
;
const
secretKey
=
NCP_secretKey
;
const
method
=
'
POST
'
;
const
space
=
"
"
;
const
newLine
=
"
\n
"
;
const
url
=
`https://sens.apigw.ntruss.com/sms/v2/services/
${
uri
}
/messages`
;
const
url2
=
`/sms/v2/services/
${
uri
}
/messages`
;
//시크릿 키를 암호화하는 작업
const
hmac
=
CryptoJS
.
algo
.
HMAC
.
create
(
CryptoJS
.
algo
.
SHA256
,
secretKey
);
hmac
.
update
(
method
);
hmac
.
update
(
space
);
hmac
.
update
(
url2
);
hmac
.
update
(
newLine
);
hmac
.
update
(
date
);
hmac
.
update
(
newLine
);
hmac
.
update
(
accessKey
);
const
hash
=
hmac
.
finalize
();
const
signature
=
hash
.
toString
(
CryptoJS
.
enc
.
Base64
);
const
phoneNumber
=
req
.
params
.
phone
;
console
.
log
(
uri
,
secretKey
,
accessKey
);
//인증번호 생성
const
verifyCode
=
Math
.
floor
(
Math
.
random
()
*
(
999999
-
100000
))
+
100000
;
console
.
log
(
"
verifyCode :
"
,
verifyCode
);
...
...
@@ -230,7 +214,7 @@ const validation = (errorMsg, data, minLength, maxLength, dataType) => {
}
};
// 회원정보
const
signup
=
async
(
req
,
res
)
=>
{
const
{
userId
,
userName
,
userEmail
,
userNickName
,
userBirthday
,
userMbnum
,
userPassword
}
=
req
.
body
;
try
{
...
...
@@ -243,6 +227,7 @@ const signup = async (req, res) => {
errorMbnum
:
false
,
errorPassword
:
false
,
};
//유효성 검사
validation
(
errorMsg
,
userId
,
5
,
10
,
"
errorId
"
);
validation
(
errorMsg
,
userName
,
1
,
10
,
"
errorName
"
);
...
...
@@ -253,19 +238,20 @@ const signup = async (req, res) => {
validation
(
errorMsg
,
userPassword
,
8
,
11
,
"
errorPassword
"
);
let
valid
=
!
(
Object
.
values
(
errorMsg
).
some
((
element
)
=>
(
element
)));
// db에서 데이터 중복검사
const
id
=
await
User
.
findOne
({
where
:
{
userId
:
userId
}
});
const
mbnum
=
await
User
.
findOne
({
where
:
{
phoneNumber
:
userMbnum
}
});
const
email
=
await
User
.
findOne
({
where
:
{
email
:
userEmail
}
});
if
(
!
valid
)
{
res
.
json
(
errorMsg
);
}
else
{
if
(
mbnum
&&
email
)
{
return
res
.
status
(
4
22
).
send
(
`이미 있는
이메일, 휴대폰번호
입니다.`
);
}
else
if
(
!
mbnum
&&
email
)
{
return
res
.
status
(
4
22
).
send
(
`이미 있는 이메일입니다.`
);
}
else
if
(
mbnum
&&
!
email
)
{
return
res
.
status
(
4
22
).
send
(
`이미 있는 휴대폰번호입니다.`
);
}
else
{
if
(
id
)
{
return
res
.
status
(
4
01
).
send
(
`이미 있는
아이디
입니다.`
);
}
else
if
(
email
)
{
return
res
.
status
(
4
01
).
send
(
`이미 있는 이메일입니다.`
);
}
else
if
(
mbnum
)
{
return
res
.
status
(
4
01
).
send
(
`이미 있는 휴대폰번호입니다.`
);
}
else
{
const
role
=
await
Role
.
findOne
({
where
:
{
name
:
"
member
"
}
})
await
User
.
create
({
userId
:
userId
,
...
...
@@ -295,14 +281,14 @@ const getMember = async (req, res) => {
const
user
=
await
User
.
findOne
({
where
:
{
id
:
decoded
.
id
}
});
res
.
json
({
nickname
:
user
.
nickname
,
img
:
user
.
img
});
}
else
{
res
.
status
(
401
).
send
(
"
잘못된 접근입니다.
"
);
res
.
status
(
500
).
send
(
"
잘못된 접근입니다.
"
);
}
}
catch
(
error
)
{
console
.
error
(
"
error :
"
,
error
.
message
);
res
.
status
(
500
).
send
(
"
잘못된 접근입니다.
"
);
}
}
// 프로필 변경
const
uploadProfile
=
async
(
req
,
res
)
=>
{
try
{
const
image
=
req
.
file
.
filename
;
...
...
@@ -328,7 +314,7 @@ const uploadProfile = async (req, res) => {
res
.
status
(
500
).
send
(
"
프로필 에러
"
);
}
}
// 기본 비밀번호인지 확인
const
comparePw
=
async
(
req
,
res
)
=>
{
try
{
//쿠키 안 토큰에서 id추출
...
...
@@ -349,7 +335,7 @@ const comparePw = async (req, res) => {
res
.
status
(
500
).
send
(
"
인증 에러
"
);
}
}
// 회원정보 수정할 때 쓰는 함수
const
overlap
=
async
(
decoded
,
dataType
,
data
)
=>
{
try
{
let
overlap
=
await
User
.
findOne
({
where
:
{
id
:
decoded
.
id
}
});
...
...
@@ -369,7 +355,7 @@ const overlap = async (decoded, dataType, data) => {
console
.
error
(
error
.
message
);
}
}
// 회원정보 수정
const
modifyUser
=
async
(
req
,
res
)
=>
{
try
{
const
token
=
req
.
cookies
.
butterStudio
;
...
...
@@ -438,7 +424,6 @@ export default {
getUser
,
login
,
logout
,
compareId
,
confirmMbnum
,
confirmNum
,
signup
,
...
...
server/routes/user.route.js
View file @
19251ba0
...
...
@@ -41,10 +41,6 @@ router
.
route
(
"
/pw/:pw
"
)
.
get
(
userCtrl
.
comparePw
)
router
.
route
(
"
/:userId
"
)
.
get
(
userCtrl
.
compareId
)
router
.
route
(
"
/phone/:phone
"
)
.
post
(
userCtrl
.
confirmMbnum
)
...
...
upload/2e31bfabc8ea560de79cb7d558816ab8
deleted
100644 → 0
View file @
3c31b22f
File deleted
upload/6067224763d32c1427b94ff623bb0098
deleted
100644 → 0
View file @
3c31b22f
File deleted
upload/77a579a5707090a80743dba0dc90e908
deleted
100644 → 0
View file @
3c31b22f
File deleted
upload/7940cc48ad085961f79c68512dbd5126
deleted
100644 → 0
View file @
3c31b22f
File deleted
upload/970aaa79673a39331d45d4b55ca05d25
deleted
100644 → 0
View file @
3c31b22f
File deleted
upload/ba37b9587699577e86c88b4716cde23e
deleted
100644 → 0
View file @
3c31b22f
File deleted
upload/cdbbc4bca59858c1876308b9da9f9a29
deleted
100644 → 0
View file @
3c31b22f
File deleted
upload/d08dd6186c9c0f2e3aa3bca35c0d9cbf
deleted
100644 → 0
View file @
3c31b22f
File deleted
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