Toggle navigation
Toggle navigation
This project
Loading...
Sign in
김건희
/
OSSW_Weather_Briefing
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
김건희
2022-05-16 21:23:00 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
8cbc3ff6d0fcd751d98e3f97879c6ad82e2338f3
8cbc3ff6
1 parent
67c6e916
[Add] LoginPage View
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
165 additions
and
1 deletions
weather_briefing/src/App.js
weather_briefing/src/component/views/LoginPage/LoginPage.js
weather_briefing/src/component/views/style/LoginPage.scss
weather_briefing/src/App.js
View file @
8cbc3ff
import
'./App.css'
;
import
RegisterPage
from
'./component/views/RegisterPage/RegisterPage'
;
import
LoginPage
from
'./component/views/LoginPage/LoginPage'
;
function
App
()
{
return
(
<
div
>
<
Register
Page
/>
<
Login
Page
/>
<
/div
>
);
}
...
...
weather_briefing/src/component/views/LoginPage/LoginPage.js
View file @
8cbc3ff
import
React
,
{
useCallback
,
useState
}
from
"react"
;
import
"../style/LoginPage.scss"
function
LoginPage
(
props
)
{
const
[
Id
,
setId
]
=
useState
(
""
);
const
[
Password
,
setPassword
]
=
useState
(
""
);
const
[
checkIdError
,
setCheckIdError
]
=
useState
(
false
);
const
[
checkPasswordError
,
setCheckPasswordError
]
=
useState
(
false
);
const
[
checkLoginError
,
setCheckLoginError
]
=
useState
(
false
);
const
idRegex
=
/^
(?=
.*
[
a-zA-Z
])(?=
.*
[
0-9
])
.
{6,14}
$/
;
const
passwordRegex
=
/^
(?=
.*
[
a-zA-Z
])(?=
.*
[
!@#$%^*+=-?
])(?=
.*
[
0-9
])
.
{8,25}
$/
;
const
onIdHandler
=
useCallback
((
event
)
=>
{
setId
(
event
.
currentTarget
.
value
);
// 아이디 유효성 검사
if
(
!
idRegex
.
test
(
event
.
currentTarget
.
value
))
{
setCheckIdError
(
true
);
}
else
{
setCheckIdError
(
false
);
}
},
[
checkIdError
]);
const
onPasswordHandler
=
useCallback
((
event
)
=>
{
setPassword
(
event
.
currentTarget
.
value
);
// 비밀번호 유효성 검사
if
(
!
passwordRegex
.
test
(
event
.
currentTarget
.
value
))
{
setCheckPasswordError
(
true
);
}
else
{
setCheckPasswordError
(
false
);
}
},
[
checkPasswordError
]);
const
onSubmitHandler
=
useCallback
((
event
)
=>
{
event
.
preventDefault
();
if
(
checkIdError
||
Id
===
""
)
{
setCheckLoginError
(
true
);
}
else
if
(
checkPasswordError
||
Password
===
""
)
{
setCheckLoginError
(
true
);
}
else
{
setCheckLoginError
(
false
);
}
if
(
!
checkLoginError
)
{
const
UserData
=
{
id
:
Id
,
password
:
Password
,
};
}
},
[
checkIdError
,
checkPasswordError
,
Password
]);
return
(
<
div
id
=
"body"
>
<
div
className
=
"login-box"
>
<
h2
>
로그인
<
/h2
>
<
div
className
=
"input-area"
>
<
input
placeholder
=
"아이디"
type
=
"text"
value
=
{
Id
}
onChange
=
{
onIdHandler
}
/
>
<
/div
>
<
div
className
=
"check-variable"
>
{
checkIdError
&&
<
div
style
=
{{
color
:
'red'
}}
>
아이디는
6
자리
이상
14
자리
이하
소문자와
숫자로
입력해주세요
.
<
/div>
}
<
/div
>
<
div
className
=
"input-area"
>
<
input
placeholder
=
"비밀번호"
type
=
"text"
value
=
{
Password
}
onChange
=
{
onPasswordHandler
}
/
>
<
/div
>
<
div
className
=
"check-variable"
>
{
checkPasswordError
&&
<
div
style
=
{{
color
:
'red'
}}
>
알파벳과
숫자
,
특수문자를
포함하여
8
자리
이상
입력해주세요
.
<
/div>
}
<
/div
>
<
div
className
=
"btn-area"
onClick
=
{
onSubmitHandler
}
>
<
button
className
=
"login-btn"
>
로그인
<
/button
>
<
/div
>
<
div
className
=
"check-variable"
>
{
checkLoginError
&&
<
div
style
=
{{
color
:
'red'
}}
>
정보를
제대로
입력해주세요
.
<
/div>
}
<
/div
>
<
/div
>
<
/div
>
);
}
export
default
LoginPage
;
\ No newline at end of file
...
...
weather_briefing/src/component/views/style/LoginPage.scss
View file @
8cbc3ff
*
{
margin
:
0
;
padding
:
0
;
box-sizing
:
border-box
;
background-color
:
rgb
(
245
,
235
,
223
);
}
#body
{
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
border-top
:
2px
solid
;
border-bottom
:
2px
solid
;
.login-box
{
border
:
2px
solid
;
width
:
35%
;
height
:
60%
;
margin-top
:
30px
;
margin-bottom
:
30px
;
h2
{
text-align
:
center
;
margin-top
:
20px
;
margin-bottom
:
20px
;
}
}
.input-area
{
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
margin-bottom
:
5px
;
input
{
padding
:
10px
0
.1rem
;
background-color
:
rgb
(
255
,
255
,
255
);
}
}
.check-variable
{
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
margin-bottom
:
5px
;
}
.btn-area
{
display
:
flex
;
justify-content
:
center
;
margin-top
:
30px
;
margin-bottom
:
35px
;
button
{
width
:
120px
;
height
:
40px
;
font-size
:
large
;
font-weight
:
bold
;
background-color
:rgb
(
255
,
253
,
238
)
;
cursor
:
pointer
;
}
}
}
...
...
Please
register
or
login
to post a comment