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
67f36cd8
Commit
67f36cd8
authored
Jul 14, 2021
by
Jiwon Yoon
Browse files
Merge branch 'gyumin'
parents
40ce555b
5705d7c5
Changes
1
Hide whitespace changes
Inline
Side-by-side
client/src/components/Signup/Signup.js
View file @
67f36cd8
...
...
@@ -3,79 +3,166 @@ import { useState } from 'react';
const
Signup
=
()
=>
{
const
[
userText
,
setUser
State
]
=
useState
({
userI
D
:
''
,
const
[
userText
,
setUser
Text
]
=
useState
({
userI
d
:
''
,
userName
:
''
,
userBirthday
:
''
,
userMbnum
:
''
,
userPassword
:
''
,
userRePassword
:
''
,
userRePassword
:
''
})
// 비밀번호와 비밀번호 확인 일치여부, 중복확인 창
const
[
passwordError
,
setPasswordError
]
=
useState
(
false
);
const
[
overlapId
,
setOverlapIdError
]
=
useState
(
false
);
//각 타입별 error 유무 state
const
[
errors
,
setErrors
]
=
useState
({
errorId
:
null
,
errorName
:
false
,
errorBirthday
:
false
,
errorMbnum
:
false
,
errorPassword
:
false
,
errorRePassword
:
false
})
// id중복확인 여부 state와 가입하기 누르면 id 임시 저장
const
[
overlapId
,
setOverlapId
]
=
useState
(
false
);
const
[
preId
,
setPreId
]
=
useState
(
""
);
//입력할때마다 state에 저장
const
handleUserOnChange
=
(
e
)
=>
{
setUser
State
({
setUser
Text
({
...
userText
,
[
e
.
target
.
name
]:
e
.
target
.
value
})
if
(
e
.
target
.
name
===
"
userRePassword
"
){
setPasswordError
(
e
.
target
.
value
!==
userText
.
userPassword
);
}}
}
//중복되었으면 중복확인 창 띄우는 여부를 state에 전달
const
handleOverlapIdError
=
(
e
)
=>
{
e
.
preventDefault
();
setOverlapIdError
(
true
);
//id(중복확인 체크, 형식 에러)
const
handleOnClickId
=
(
e
)
=>
{
if
(
userText
.
userId
.
length
<
5
)
{
e
.
preventDefault
();
// e.stopPropagati//on();
setErrors
(
errors
=>
({
...
errors
,
[
e
.
target
.
name
]:
true
}));
if
(
overlapId
===
true
)
{
setOverlapId
(
false
);
};
}
else
{
e
.
preventDefault
();
e
.
stopPropagation
();
setErrors
(
errors
=>
({
...
errors
,
[
e
.
target
.
name
]:
false
}));
setOverlapId
(
true
);
}
}
//가입완료 누르면 콘솔창에 전달하려는 state 보여줌
const
onSubmit
=
(
e
)
=>
{
//유효성 검사 함수
const
vaildationData
=
(
text
,
compareValue
,
error
)
=>
{
if
(
text
!==
compareValue
)
{
setErrors
(
errors
=>
({
...
errors
,
[
error
]:
true
}))
}
else
{
setErrors
(
errors
=>
({
...
errors
,
[
error
]:
false
}))
}
}
//가입하기와 동시에 유효성 검사
const
handleonSubmit
=
(
e
)
=>
{
e
.
preventDefault
();
console
.
log
(
userText
)
setPreId
(()
=>
(
userText
.
userId
));
console
.
log
(
preId
);
//아이디 유효성 검사
if
((
userText
.
userId
.
length
<
5
))
{
setErrors
(
errors
=>
({
...
errors
,
errorId
:
true
}));
}
else
if
((
userText
.
userId
.
length
>=
5
)
&&
(
overlapId
===
true
)){
if
(
preId
!==
userText
.
userId
){
console
.
log
(
preId
);
setOverlapId
(()
=>
(
false
));
}
}
else
if
(
userText
.
userId
>=
5
){
setErrors
(
errors
=>
({
...
errors
,
errorId
:
false
}));
}
console
.
log
(
preId
);
//별명 에러유무 검사
vaildationData
((
userText
.
userName
.
length
===
0
),
false
,
"
errorName
"
);
// 생일 에러유무 검사
vaildationData
(
userText
.
userBirthday
.
length
,
6
,
"
errorBirthday
"
);
// 휴대폰 에러유무 검사
vaildationData
(
userText
.
userMbnum
.
length
,
11
,
"
errorMbnum
"
);
// 비밀번호 에러유무 검사
vaildationData
(
userText
.
userPassword
.
length
,
8
,
"
errorPassword
"
);
// 비밀번호 확인 에러유무 검사
vaildationData
(
userText
.
userRePassword
,
userText
.
userPassword
,
"
errorRePassword
"
);
// 최종 유효성 검사
if
(
overlapId
&&
(
errors
.
errorId
===
false
)
&&
(
errors
.
errorName
===
false
)
&&
(
errors
.
errorBirthday
===
false
)
&&
(
errors
.
errorMbnum
===
false
)
&&
(
errors
.
errorPassword
===
false
)
&&
(
errors
.
errorRePassword
===
false
))
{
console
.
log
(
userText
);
setTimeout
(()
=>
{
console
.
log
(
"
회원가입을 완료했습니다.
"
)},
2000
)
}
}
return
(
// 데이터 입력과 유효성 검사 후 보이는 경고창
<
form
className
=
{
`d-flex col-md-6 col-12 justify-content-center`
}
>
{
console
.
log
(
"
userText==
"
,
userText
,
errors
,
overlapId
)}
<
div
className
=
"
d-flex flex-column
"
>
<
span
className
=
{
styles
.
title
}
>
회원가입
<
/span
>
<
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
=
"
userI
D
"
id
=
"
userI
D
"
placeholder
=
"
8자리입력
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
8
"
minlength
=
"
8
"
required
/>
<
button
type
=
"
button
"
className
=
{
`rounded-2 mt-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
handleO
verlapIdError
}
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#exampleModal
"
>
중복확인
<
/button
>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
userI
d
"
id
=
"
userI
d
"
placeholder
=
"
5~10자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
10
"
required
/>
<
button
type
=
"
button
"
name
=
"
errorId
"
className
=
{
`rounded-2 mt-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
handleO
nClickId
}
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#exampleModal
"
>
중복확인
<
/button
>
<
/div
>
<
/div>
{
overlapId
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
아이디
중복확인이
되었습니다
.
<
/p>
}
<
/div
>
{(
overlapId
===
false
)
&&
errors
.
errorId
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
5
~
10
자리
사이로
입력해주세요
.
<
/p>
}
{
overlapId
&&
(
errors
.
errorId
===
false
)
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
아이디
중복이
확인되었습니다
.
<
/p>
}
{(
errors
.
errorId
===
false
)
&&
(
overlapId
===
false
)
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
아이디
중복확인을
해주세요
.
<
/p>
}
<
/div
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
별명
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userName
"
id
=
"
userName
"
placeholder
=
"
10자리 이내
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
10
"
required
/>
<
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
"
id
=
"
userName
"
placeholder
=
"
10자리 이내
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
10
"
required
/>
<
/div
>
{
errors
.
errorName
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
10
자
이내로
입력해주세요
.
<
/p>
}
<
/div
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
생년월일
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
${
styles
.
input
.
placeholder
}
`
}
type
=
"
number
"
name
=
"
userBirthday
"
id
=
"
userBirthday
"
placeholder
=
"
6자리(예시: 991225)
"
onChange
=
{
handleUserOnChange
}
min
=
"
0
"
max
=
"
999999
"
required
/>
<
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
"
id
=
"
userBirthday
"
placeholder
=
"
6자리(예시: 991225)
"
onChange
=
{
handleUserOnChange
}
min
=
"
0
"
max
=
"
999999
"
required
/>
<
/div
>
{
errors
.
errorBirthday
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
숫자
6
자리를
입력해주세요
.
<
/p>
}
<
/div
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
휴대폰
번호
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
number
"
name
=
"
userMbnum
"
id
=
"
userMbnum
"
placeholder
=
"
-없이 11자리 입력
"
onChange
=
{
handleUserOnChange
}
min
=
"
0
"
max
=
"
99999999999
"
required
/>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
휴대폰
번호
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
number
"
name
=
"
userMbnum
"
id
=
"
userMbnum
"
placeholder
=
"
-없이 11자리 입력
"
onChange
=
{
handleUserOnChange
}
min
=
"
0
"
max
=
"
99999999999
"
required
/>
<
/div
>
{
errors
.
errorMbnum
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>-
없이
숫자
11
자리를
입력해주세요
.
<
/p>
}
<
/div
>
<
div
className
=
{
`
${
styles
.
inputContent
}
`
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
비밀번호
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userPassword
"
id
=
"
password
"
placeholder
=
"
8자리 입력
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
8
"
minlength
=
"
8
"
required
/>
<
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
"
id
=
"
password
"
placeholder
=
"
8자리 입력
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
8
"
required
/>
<
/div
>
{
errors
.
errorPassword
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
8
자리를
입력해주세요
.
<
/p>
}
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
비밀번호
확인
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userRePassword
"
id
=
"
userRePassword
"
placeholder
=
"
8자리 입력
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
8
"
minlength
=
"
8
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
password
"
name
=
"
userRePassword
"
id
=
"
userRePassword
"
placeholder
=
"
8자리 입력
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
8
"
required
/>
<
/div
>
{
p
assword
Error
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
비밀번호가
일치하지
않습니다
.
<
/p>
}
{
errors
.
errorReP
assword
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
비밀번호가
일치하지
않습니다
.
<
/p>
}
<
/div
>
<
buttom
type
=
"
button
"
className
=
{
`rounded
-
my-3 py-2 fs-5
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
type
=
"
submit
"
onClick
=
{
onSubmit
}
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#exampleModal2
"
>
가입하기
<
/buttom
>
<
buttom
className
=
{
`rounded my-3 py-2 fs-5
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
type
=
"
submit
"
onClick
=
{
handle
onSubmit
}
>
가입하기
<
/buttom
>
<
/div
>
{
/* 아이디 중복 확인 모달창 */
}
<
div
class
=
"
modal fade
"
id
=
"
exampleModal
"
tabindex
=
"
-1
"
aria
-
labelledby
=
"
exampleModalLabel
"
aria
-
hidden
=
"
true
"
>
<
div
class
=
"
modal-dialog
"
>
...
...
@@ -92,26 +179,7 @@ const Signup = () => {
<
/div
>
<
/div
>
<
/div
>
{
/* 회원가입 완료 모달창 */
}
<
div
class
=
"
modal fade
"
id
=
"
exampleModal2
"
tabindex
=
"
-1
"
aria
-
labelledby
=
"
exampleModalLabel
"
aria
-
hidden
=
"
true
"
>
<
div
class
=
"
modal-dialog
"
>
<
div
class
=
"
modal-content
"
>
<
div
class
=
"
modal-header
"
>
<
h5
class
=
"
modal-title
"
id
=
"
exampleModalLabel
"
>
회원가입
<
/h5
>
<
/div
>
<
div
class
=
"
modal-body
"
>
회원가입이
완료되었습니다
.
<
/div
>
<
div
class
=
"
modal-footer
"
>
<
button
type
=
"
button
"
className
=
"
btn btn-secondary
"
data
-
bs
-
dismiss
=
"
modal
"
>
닫기
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/form
>
)
}
...
...
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