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

로그인 input focus 추가

Browse Source
This commit is contained in:
김창수 2024-10-23 11:14:32 +09:00
parent 7a9b35c1ec
commit b079f03bef
2 changed files with 40 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/app/login/page.jsx
View File

@ -8,6 +8,10 @@ import { useState } from 'react'
export default function LoginPage(){ export default function LoginPage(){
const [passwordVisible, setPasswordVisible] = useState(false); const [passwordVisible, setPasswordVisible] = useState(false);
const [passwordReset, setPasswordReset] = useState(1); const [passwordReset, setPasswordReset] = useState(1);
// focus state
const [idFocus, setIdFocus] = useState(false);
const [secFocus, setSecFocus] = useState(false);
return( return(
<div className="login-wrap"> <div className="login-wrap">
<div className="login-inner"> <div className="login-inner">
@ -22,12 +26,23 @@ export default function LoginPage(){
太陽光発電システム図面管理サイト 太陽光発電システム図面管理サイト
</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 type="text" className='login-input' placeholder='IDを入力してください'/> <input
type="text"
className='login-input'
placeholder='IDを入力してください'
onFocus={() => setIdFocus(true)}
onBlur={() => setIdFocus(false)}
/>
<button className='id-delete'></button> <button className='id-delete'></button>
</div> </div>
<div className="login-area password"> <div className={`login-area password ${secFocus ? 'focus' : ''}`}>
<input type="password" className='login-input' /> <input
type="password"
className='login-input'
onFocus={() => setSecFocus(true)}
onBlur={() => setSecFocus(false)}
/>
<button className={`password-hidden ${passwordVisible ? 'visible' : ''}`} onClick={() => setPasswordVisible(!passwordVisible)}></button> <button className={`password-hidden ${passwordVisible ? 'visible' : ''}`} onClick={() => setPasswordVisible(!passwordVisible)}></button>
</div> </div>
<div className="d-check-box login"> <div className="d-check-box login">
@ -56,12 +71,24 @@ export default function LoginPage(){
パスワードを初期化するIDとEメールアドレスを入力してください。 パスワードを初期化するIDとEメールアドレスを入力してください。
</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 type="text" className='login-input' defaultValue={'IDを入力してください'}/> <input
type="text"
className='login-input'
placeholder={'IDを入力してください'}
onFocus={() => setIdFocus(true)}
onBlur={() => setIdFocus(false)}
/>
<button className='id-delete'></button> <button className='id-delete'></button>
</div> </div>
<div className="login-area email"> <div className={`login-area email ${secFocus ? 'focus' : ''}`}>
<input type="email" className='login-input' defaultValue={'メールを入力してください'}/> <input
type="email"
className='login-input'
placeholder={'メールを入力してください'}
onFocus={() => setSecFocus(true)}
onBlur={() => setSecFocus(false)}
/>
<button className='id-delete'></button> <button className='id-delete'></button>
</div> </div>
<div className='pwreset-btn-box'> <div className='pwreset-btn-box'>

5
src/styles/_main.scss
View File

@ -405,10 +405,15 @@
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid #E5E9EF; border: 1px solid #E5E9EF;
border-radius: 4px;
height: 45px; height: 45px;
padding-left: 40px; padding-left: 40px;
padding-right: 15px; padding-right: 15px;
margin-bottom: 15px; margin-bottom: 15px;
transition: border .15s ease-in-out;
&.focus{
border-color: #A8B6C7;
}
.login-input{ .login-input{
flex: 1; flex: 1;
height: 100%; height: 100%;