Merge pull request 'feat: 로그인 페이지 ID Save 체크박스 기능 추가' (#84) from feature/login into dev

Reviewed-on: #84

src/components/Login.tsx

@@ -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">