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
d998c4b0
Commit
d998c4b0
authored
Jul 11, 2021
by
한규민
Browse files
비밀번호와 비밀번호 확인 동일여부 체크,
숫자타입 자리수 완료
parent
704bbe96
Changes
3
Hide whitespace changes
Inline
Side-by-side
client/src/components/Login/Login.js
View file @
d998c4b0
...
...
@@ -22,7 +22,7 @@ const Login = () => {
// ... 전개 연산자
// 현재 state에 방금 변화한 값을 다시 저장함
setLoginText
({
...
loginText
,
[
e
.
target
.
name
]:
e
.
target
.
value
,
[
e
.
target
.
name
]:
e
.
target
.
value
})
};
...
...
@@ -36,7 +36,6 @@ const Login = () => {
<
div
className
=
{
`d-flex flex-column col-md-5 col-10`
}
>
{
/* nav-tabs */
}
{
/* {console.log(loginText)} */
}
{
console
.
log
(
guestText
)}
<
ul
className
=
"
nav nav-fill nav-tabs w-100
"
id
=
"
loginTab
"
role
=
"
tablist
"
>
<
li
className
=
"
nav-item fs-6
"
role
=
"
presentation
"
>
<
button
className
=
{
`nav-link active px-2
${
styles
.
fontSize
}
`
}
style
=
{{
color
:
state
?
"
black
"
:
"
#FEDC00
"
,
backgroundColor
:
state
?
"
#FEDC00
"
:
"
black
"
}}
...
...
client/src/components/Signup/Signup.js
View file @
d998c4b0
...
...
@@ -11,36 +11,33 @@ const Signup = () => {
userPassword
:
''
,
userRePassword
:
''
,
})
const
[
passwordError
,
setPasswordError
]
=
useState
(
false
);
const
handleUserOnChange
=
(
e
)
=>
{
setUserState
({
...
userText
,
[
e
.
target
.
name
]:
e
.
target
.
value
})
}
// const handleOnInput = (e) => {
// if (el.value.length > e.target.attributes.docu) {
// el.value
// = el.value.substr(0, maxlength);
// }
// }
if
(
e
.
target
.
name
===
"
userRePassword
"
){
setPasswordError
(
e
.
target
.
value
!==
userText
.
userPassword
);
}}
const
comparePassword
=
()
=>
{
if
(
userText
.
userPassword
!==
userText
.
userRePassword
)
{
return
alert
(
"
비밀번호가 같지 않습니다.
"
)
const
onSubmit
=
(
e
)
=>
{
e
.
preventDefault
();
if
(
userText
.
userPassword
!==
userText
.
userRePassword
){
return
setPasswordError
(
true
);
}
console
.
log
(
userText
);
}
return
(
<
form
className
=
{
`d-flex col-md-6 col-12 justify-content-center`
}
>
<
div
className
=
"
d-flex flex-column
"
>
{
console
.
log
(
userText
)}
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
아이디
<
/label
>
<
div
className
=
"
d-flex col-md-auto
"
>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
userID
"
id
=
"
userID
"
placeholder
=
"
8자리입력
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
8
"
minlength
=
"
8
"
required
/>
<
button
type
=
"
button
"
className
=
{
`
btn btn-primary
rounded-2 mt-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#exampleModal
"
>
중복확인
<
/button
>
<
button
type
=
"
button
"
className
=
{
`rounded-2 mt-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#exampleModal
"
>
중복확인
<
/button
>
<
/div
>
<
/div
>
<
div
className
=
{
styles
.
inputContent
}
>
...
...
@@ -49,25 +46,25 @@ const Signup = () => {
<
/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
}
m
axLength
=
"
6
"
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
${
styles
.
input
.
placeholder
}
`
}
type
=
"
number
"
name
=
"
userBirthday
"
id
=
"
userBirthday
"
placeholder
=
"
6자리(예시: 991225)
"
onChange
=
{
handleUserOnChange
}
m
in
=
"
0
"
max
=
"
999999
"
required
/>
<
/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
}
required
/>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
number
"
name
=
"
userMbnum
"
id
=
"
userMbnum
"
placeholder
=
"
-없이 11자리 입력
"
onChange
=
{
handleUserOnChange
}
min
=
"
0
"
max
=
"
99999999999
"
required
/>
<
/div
>
<
div
className
=
{
`
${
styles
.
inputContent
}
`
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
비밀번호
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userPassword
"
id
=
"
password
"
placeholder
=
"
8자리 입력
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
8
"
minlength
=
"
8
"
required
/>
<
/div
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
비밀번호
확인
<
/label
>
<
div
className
=
"
d-flex col-md-auto
"
>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
userRePassword
"
id
=
"
userRePassword
"
placeholder
=
"
8자리 입력
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
8
"
minlength
=
"
8
"
required
/>
<
button
type
=
"
button
"
className
=
{
`rounded-2 mt-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
comparePassword
}
>
중복확인
<
/button
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
비밀번호
확인
<
/label
>
<
input
className
=
{
`
${
styles
.
input
}
${
styles
.
inputSize
}
`
}
type
=
"
text
"
name
=
"
userRePassword
"
id
=
"
userRePassword
"
placeholder
=
"
8자리 입력
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
8
"
minlength
=
"
8
"
required
/>
<
/div
>
{
passwordError
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
비밀번호가
일치하지
않습니다
.
<
/p>
}
<
/div
>
<
input
className
=
{
`rounded-
2
my-
4
py-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
type
=
"
submit
"
value
=
"
가입하기
"
/>
<
input
className
=
{
`rounded-
1
my-
3
py-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
type
=
"
submit
"
value
=
"
가입하기
"
onClick
=
{
onSubmit
}
/
>
<
/div
>
{
/* 아이디 중복 확인 모달창 */
}
...
...
@@ -82,7 +79,7 @@ const Signup = () => {
이
아이디는
사용가능합니다
.
<
/div
>
<
div
class
=
"
modal-footer
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-secondary
"
data
-
bs
-
dismiss
=
"
modal
"
>
닫기
<
/button
>
<
button
type
=
"
button
"
class
Name
=
"
btn btn-secondary
"
data
-
bs
-
dismiss
=
"
modal
"
>
닫기
<
/button
>
<
/div
>
<
/div
>
<
/div
>
...
...
client/src/components/Signup/signup.module.scss
View file @
d998c4b0
...
...
@@ -21,20 +21,18 @@
padding
:
0
.5rem
0
0
.5rem
0
;
color
:black
;
border-radius
:
3px
;
}
.input.placeholder
{
text-align
:
center
;
}
.inputSize
{
width
:
15rem
;
width
:
15
.3
rem
;
}
input
[
type
=
"number"
]
::-webkit-outer-spin-button
,
input
[
type
=
"number"
]
::-webkit-inner-spin-button
{
-webkit-appearance
:
none
;
}
-webkit-appearance
:
none
;
}
.butterYellowAndBtn
{
color
:
black
;
background-color
:
#FEDC00
;
...
...
@@ -53,4 +51,11 @@ border: 1px solid white ;
color
:
black
;
border-color
:
none
;
box-shadow
:
none
;
}
.passwordConfirmError
{
margin-bottom
:
0
;
margin-top
:
0
.5rem
;
text-align
:
end
;
font-size
:
13px
;
color
:
#FEDC00
;
}
\ No newline at end of file
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