refactor: 로그인 기능 개선 및 리팩터링

[Junyoung-WON]

🤮 As Is

리팩터링하고자 하는 파트와 이유를 구체적으로 설명해주세요.

로그인 입력 값 검증을 클라이언트에서!

얼마 전 폭포의 지인으로부터 아래와 같은 내용의 피드백을 받았습니다.

올바르지 않은 닉네임 형식입니다. 라고 메시지가 떠서, 닉네임의 어떤 부분이 잘못된 것인지 알기가 힘듭니다.

해당 피드백으로부터 파악할 수 있는 문제점은,

1. 입력 값에 대한 적절한 가이드가 존재하지 않습니다.
2. 어떤 부분이 잘못되었는지 피드백을 받기 어렵습니다.
3. 사용자는 닉네임의 입력 값을 검증하기 위해 서버로 요청을 보내야만 합니다.

그리하여 닉네임 검증을 위해 서버에게 요청을 보내지 않고,
클라이언트 측에서 직접 입력 값을 검증하여 사용자에게 즉각적으로 피드백을 주도록 개선하고자 합니다.
다음과 같은 이점을 가져올 수 있을 것 같아요!

• 서버에게 닉네임 검증을 위해 요청을 보내지 않아도 됩니다.
  • 입력한 닉네임 검증이 실패하는 경우는 중복인 경우만 해당되겠네요.
• 사용자는 입력 값이 유효한지 바로 확인 받을 수 있어요.
• 닉네임 입력 형식을 보다 구체적으로 알 수 있습니다.

텍스트 입력 필드는 사용자와의 상호작용이 자주 발생하는 UI 입니다.

따라서 상호작용에 대해 올바르고 빠른 피드백을 줄 수 있어야 한다고 생각합니다.
이후에도 닉네임 뿐 아니라 다른 화면의 텍스트 입력 필드에서도, 앱이 사용자에게 올바른 피드백을 보여주도록 개선하면 좋을 것 같습니다.

🤩 To Be

리팩터링 방향을 구체적으로 공유해주세요.

UI 개선

사용자의 입력에 따라 아래 예시와 같이 지속적으로 UI에서 피드백을 줍니다.
입력한 값이 올바른 형식이 아닌 경우, "시작하기" 버튼은 비활성화 상태입니다.
피드백 문구의 경우는 하나로 통일할지, 경우에 따라 다양한 피드백을 남겨줄지 고민 중이에요!

개선 전 화면	개선 후 예상 화면	개선 후 예상 화면 2

도메인 로직 추가

닉네임에 대한 도메인을 생성하고, 검증 로직을 추가합니다.

닉네임에 대한 테스트와 입력에 대한 UI 테스트 추가

테스트를 추가하여 안정성을 확보합니다.
(되도록이면 TDD로 진행해보려구요!)

😇 이때까지 끝낼게요!

리팩터링 완료 예상 날짜를 작성해주세요. 신중하게 생각해요!

1월 14일까지 끝내겠습니다!

😵 참고 자료(선택)

🙇‍♀️이슈 확인했어요:)

팀원에게 이슈 확인을 부탁해요!

• @s6m1n
• @hxeyexn
• @BurningFalls
• @linirini
• @Ho-Tea

[Junyoung-WON]

UI 디자인이나 클라이언트 측에서 직접 검증하는 방식에 대해서 다른 의견이 있으시면 언제든지 코멘트로 남겨주세요! 😄

[BurningFalls]

개선 후 예상 화면 2처럼 메시지를 하나로 통일하는 것이 좋은 것 같습니다! 인스타그램도 확인해보니까 그렇게 되어있더라구요.
만약에 개선 후 예상 화면 1처럼 한다고 하면, 사용자가 메시지를 보고 나서도 나머지 규칙에 대한 내용을 확인할 수 없어서, 또 다시 잘못 입력할 가능성이 있습니다. 따라서 추가적으로 규칙에 대한 메시지를 띄워주어야 하므로, 그렇게 할 바에는 방안 2가 낫다고 생각합니다.