qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

로그인 페이지 focus 추가

Browse Source
This commit is contained in:
leeyongjae 2024-10-23 13:33:55 +09:00
parent bf35c1182d
commit 9e2e4bff58
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/auth/Login.jsx
View File

@ -71,6 +71,10 @@ export default function Login() {
const { promisePost, promisePatch, post } = useAxios(globalLocaleState)
// focus state
const [idFocus, setIdFocus] = useState(false)
const [secFocus, setSecFocus] = useState(false)
// login process
const loginProcess = async (e) => {
e.preventDefault()
@ -191,7 +195,7 @@ export default function Login() {
{getMessage('site.sub_name')}
</div>
<div className="login-input-wrap">
<div className="login-area id">
<div className={`login-area id ${idFocus ? 'focus' : ''}`}>
<input
type="text"
className="login-input"
@ -203,6 +207,8 @@ export default function Login() {
onChange={(e) => {
setUserId(e.target.value)
}}
onFocus={() => setIdFocus(true)}
onBlur={() => setIdFocus(false)}
/>
<button
type="button"
@ -212,7 +218,7 @@ export default function Login() {
}}
></button>
</div>
<div className="login-area password">
<div className={`login-area password ${secFocus ? 'focus' : ''}`}>
<input
type={passwordVisible ? 'text' : 'password'}
className="login-input"
@ -224,6 +230,8 @@ export default function Login() {
onChange={(e) => {
setPasswordVisible(passwordVisible)
}}
onFocus={() => setSecFocus(true)}
onBlur={() => setSecFocus(false)}
/>
<button
className={`password-hidden ${passwordVisible ? 'visible' : ''}`}
@ -275,7 +283,7 @@ export default function Login() {
{getMessage('login.init_password.sub_title')}
</div>
<div className="login-input-wrap">
<div className="login-area id">
<div className={`login-area id ${idFocus ? 'focus' : ''}`}>
<input
type="text"
id="checkId"
@ -287,6 +295,8 @@ export default function Login() {
onChange={(e) => {
setCheckId(e.target.value)
}}
onFocus={() => setIdFocus(true)}
onBlur={() => setIdFocus(false)}
/>
<button
type="button"
@ -296,7 +306,7 @@ export default function Login() {
}}
></button>
</div>
<div className="login-area email">
<div className={`login-area email ${secFocus ? 'focus' : ''}`}>
<input
id="checkEmail"
name="checkEmail"
@ -308,6 +318,8 @@ export default function Login() {
setCheckEmail(e.target.value)
}}
placeholder={getMessage('login.init_password.email.placeholder')}
onFocus={() => setSecFocus(true)}
onBlur={() => setSecFocus(false)}
/>
<button
type="button"