로그인/회원가입 UX 개선 (입력값 자동 유지 및 세션 일관성 확보)

[sgoldenbird]

🎯 개선 목표 (What needs improvement?)

• 회원가입 중 사용자가 뒤로 가기 또는 새로고침을 했을 때, 작성하던 입력값이 사라지는 문제를 개선합니다.
• 로그인 후 뒤로 가기를 눌러도 로그인했던 이메일이 자동으로 폼에 남아있도록 합니다.
• 로그인/회원가입 후에는 상태를 일관되게 초기화하여 세션 간 불일치 문제를 방지합니다.

---

🧭 사용자 시나리오 (User scenario)

1. 회원가입 중 이메일, 닉네임을 작성하다가 실수로 새로고침 or 뒤로 가기를 누름 → 모든 입력이 사라짐
2. 로그인에 성공했지만, 실수로 브라우저 뒤로 가기를 눌렀을 때 → 로그인 폼이 비어있고 어떤 계정으로 로그인했는지 잊음
3. 로그인 후 다른 계정으로 전환하고 싶어 다시 로그인 페이지로 진입

---

🔍 문제의 원인

• 입력값이 새로고침 또는 페이지 이동 시 초기화되기 때문
• 로그인 성공 후 뒤로 가기 시 이전 로그인 폼 상태가 유지되지 않음
• 상태 동기화를 위한 storage 연동 및 초기화 로직이 부족함
• 로그인 성공 후 상태를 전역으로 관리하고 있음에도, 폼에 값을 반영하는 로직이 없었음.

---

💡 개선 제안 (Suggested solution)

• 로그인 폼

  • 로그인 성공 시 전역 상태에 저장된 user.email을 Zustand persist를 통해 localStorage에 유지하고 있는 것 활용
  • 로그인 폼 마운트 시 이 값을 setValue()로 초기값에 반영하여 자동 입력되도록 함.

• 회원가입 폼

  • 사용자가 작성 중인 이메일/닉네임을 sessionStorage에 저장.
  • 실수로 새로고침하거나 뒤로 가도 자동 복구됨.
  • 로그인 성공 또는 회원가입 완료 시 sessionStorage 초기화.

• 비밀번호는 절대 저장하지 않으며, 보안 민감 정보는 전혀 남기지 않음

• 로그인 상태와 무관하게 로그인/회원가입 페이지 접근 가능하게 유지 (계정 전환 용도)

• 이후 UX를 보완할 수 있는 선택지로 “이메일 기억하기” 체크박스 고려 가능

---

🛠 구현 구조 요약 (How it was implemented)

• 로그인 폼
  • 로그인 성공 시 Zustand 전역 상태 setUser(user) 호출.
  • 해당 상태는 persist 미들웨어에 의해 localStorage에 자동 저장됨.
  • 로그인 폼에서는 user.email을 감지해 setValue('email', user.email)로 초기값 자동 설정.
• 회원가입 폼
  • 이메일, 닉네임 입력 시마다 sessionStorage에 저장
  • 폼 마운트 시 sessionStorage에서 해당 값을 불러와 초기값으로 반영
  • 회원가입 또는 로그인 완료 시 sessionStorage를 초기화
• 세션 일관성
  • 로그인 상태 여부와 무관하게 /signin, /signup 접근 허용
  • 로그인 상태가 유지되며, 헤더 등의 UI에서도 일관된 사용자 정보 표시

---

✅ 개선 결과 및 성과 (Results)

• 실수로 인한 입력값 손실을 방지하여 가입/로그인 완료율 향상
• 사용자가 다시 입력해야 하는 불편이 줄어들어 UX가 개선됨.
• 로그인 후 뒤로 가기해도 로그인된 이메일 정보 제공으로 UX 향상
• 새로고침, 페이지 전환에도 상태가 일관되게 유지되어 세션 불일치로 인한 혼란 해소
• 다른 계정으로 로그인 전환이 용이해짐
• 민감 정보(비밀번호 등) 저장 없이 UX 개선 효과 달성

---

🔗 참고자료 / 관련 이슈, PR

• Refactor: 리팩토링3 #461
• [08-03] 데일리 스크럼 - 송시은 #448