feat: 로그인 페이지 ID Save 체크박스 기능 추가

This commit is contained in:
Daseul Kim 2025-07-01 14:51:16 +09:00
parent b031af0556
commit b4aa4716a6

View File

@ -28,12 +28,37 @@ export default function Login() {
const { session, setSession } = useSessionStore()
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 [account, setAccount] = useReducer(reducer, {
loginId: '',
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 emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
return emailRegex.test(email)
@ -102,6 +127,15 @@ export default function Login() {
setValue({
indivisualData: account.pwd,
})
// ID Save 체크박스 체크 시 저장
idSave
? setSavedLoginData({
loginId: account.loginId,
idSaveEnabled: true,
})
: removeSavedLoginData()
// 세션 정보 저장
console.log('🚀 ~ Login ~ loginData:', loginData)
setSession({
@ -158,7 +192,7 @@ export default function Login() {
</div>
<div className="login-check-warp">
<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>
</div>
<div className="toggle-form">