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