feat: 로그인 페이지 ID Save 체크박스 기능 추가
This commit is contained in:
parent
b031af0556
commit
b4aa4716a6
@ -28,12 +28,37 @@ export default function Login() {
|
|||||||
const { session, setSession } = useSessionStore()
|
const { session, setSession } = useSessionStore()
|
||||||
const [value, setValue, removeValue] = useLocalStorage<{ indivisualData: string }>('hanasysIndivisualState', { indivisualData: '' })
|
const [value, setValue, removeValue] = useLocalStorage<{ indivisualData: string }>('hanasysIndivisualState', { indivisualData: '' })
|
||||||
|
|
||||||
|
// ID Save 기능을 위한 로컬스토리지
|
||||||
|
const [savedLoginData, setSavedLoginData, removeSavedLoginData] = useLocalStorage<{
|
||||||
|
loginId: string
|
||||||
|
idSaveEnabled: boolean
|
||||||
|
}>('hanasysLoginData', {
|
||||||
|
loginId: '',
|
||||||
|
idSaveEnabled: false,
|
||||||
|
})
|
||||||
|
|
||||||
const reducer = (state: AccountState, newState: Partial<AccountState>) => ({ ...state, ...newState })
|
const reducer = (state: AccountState, newState: Partial<AccountState>) => ({ ...state, ...newState })
|
||||||
const [account, setAccount] = useReducer(reducer, {
|
const [account, setAccount] = useReducer(reducer, {
|
||||||
loginId: '',
|
loginId: '',
|
||||||
pwd: '',
|
pwd: '',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 컴포넌트 마운트 시 저장된 로그인 정보 불러오기
|
||||||
|
useEffect(() => {
|
||||||
|
if (savedLoginData.idSaveEnabled) {
|
||||||
|
setIdSave(true)
|
||||||
|
setAccount({ loginId: savedLoginData.loginId })
|
||||||
|
} else {
|
||||||
|
setIdSave(false)
|
||||||
|
setAccount({ loginId: '' })
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// ID Save 체크박스 변경 시 처리 (UI 상태만 변경)
|
||||||
|
const handleIdSaveChange = (checked: boolean) => {
|
||||||
|
setIdSave(checked)
|
||||||
|
}
|
||||||
|
|
||||||
const isValidEmail = (email: string) => {
|
const isValidEmail = (email: string) => {
|
||||||
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
|
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
|
||||||
return emailRegex.test(email)
|
return emailRegex.test(email)
|
||||||
@ -102,6 +127,15 @@ export default function Login() {
|
|||||||
setValue({
|
setValue({
|
||||||
indivisualData: account.pwd,
|
indivisualData: account.pwd,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// ID Save 체크박스 체크 시 저장
|
||||||
|
idSave
|
||||||
|
? setSavedLoginData({
|
||||||
|
loginId: account.loginId,
|
||||||
|
idSaveEnabled: true,
|
||||||
|
})
|
||||||
|
: removeSavedLoginData()
|
||||||
|
|
||||||
// 세션 정보 저장
|
// 세션 정보 저장
|
||||||
console.log('🚀 ~ Login ~ loginData:', loginData)
|
console.log('🚀 ~ Login ~ loginData:', loginData)
|
||||||
setSession({
|
setSession({
|
||||||
@ -158,7 +192,7 @@ export default function Login() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="login-check-warp">
|
<div className="login-check-warp">
|
||||||
<div className="check-form-box">
|
<div className="check-form-box">
|
||||||
<input type="checkbox" id="ch01" checked={idSave} onChange={() => setIdSave(!idSave)} />
|
<input type="checkbox" id="ch01" checked={idSave} onChange={(e) => handleIdSaveChange(e.target.checked)} />
|
||||||
<label htmlFor="ch01">ID Save</label>
|
<label htmlFor="ch01">ID Save</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="toggle-form">
|
<div className="toggle-form">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user