10 UI 작성 로그인 페이지 UI 작성

[brownglasses]

요약

• [Add : 체크박스 컴포넌트 ]
• [Add : 텍스트필드 컴포넌트]
• [Add: 둥근 모서리 버튼]
• [Add: 로그인 스크린]
• [Add: 회원가입 스크린]
• [Add: 이메일 회원가입 스크린]

이슈 번호

• UI 작성 - 로그인 페이지 UI 작성 #10

작업 내용

• 피그마 1~3 페이지 UI 를 코드로 작성하였습니다.

스크린샷

2024-01-01.100243.mp4

커밋 메세지의 resolve 부분을 실수로 10이 아닌 1로 적었습니다
참고해서 봐주세요

[fridayCCC]

수고하셨습니다. 현재 내용을 그대로 main으로 머지하고 다음과 같은 테스크를 이어서 하는 것을 제안해 봅니다. 이유는 하단에 적어두었습니다. 다수가 동의하면 해당 이슈를 생성해 추후 진행하면 될 것 같습니다.

1. lib/shared/uikit 폴더를 만드는 것을 제안합니다.

• ui 라이브러리를 가져와 사용하는 것처럼 페이지에서 중복해서 쓰는 디자인된 위젯을 한곳에 모아두는 것을 제안합니다.
  • shared 폴더는 우리가 마치 라이브러리를 가져와서 사용하는 것처럼 현재 프로젝트와 독립되어 다른 프로젝트에서도 쓸 수 있는 코드셋을 모아두기 위함입니다.
  • shared/uikit 폴더 밑에 ui를 모아두면 추후 ui를 교체할 때, storybook을 적용해서 디자이너와 협업 할 때 이점이 있을 것으로 생각됩니다.
  • shared/uikit에 ui component, animation function, theme 등 ui에 관련된 정보를 넣어두는 것을 제안합니다.
    참고: https://github.com/erickzanardo/nes_ui

2. Flutter easy_localization을 제안합니다.

• '회원가입', '비밀번호확인' 등 텍스트를 그대로 ui 컴포넌트에 하드 코딩 하는 것은 한/영을 지원하거나 텍스트가 전체적인 수정이 있을 경우 수정에 번거로움을 초래합니다.
• 현재 한/영 지원을 하지 않더라도 추후 수정을 용이하게 하고, 컴포넌트 재사용성을 높이기 위해 텍스트 관리 class를 만드는 것을 제안합니다.
• 해당 라이브러리를 사용해도 좋고, 직접 구현하는 방식을 선택해도 좋을 것 같습니다.
  참고: https://pub.dev/packages/easy_localization?source=post_page-----8fa5f50a3fd2--------------------------------

3. lib/shared/helpers/form 폴더를 만드는 것을 제안합니다.

• 현재 프로젝트에는 굉장히 다양한 form이 재사용될 것으로 추측됩니다. (로그인, signup, 팀 만들기, task 만들기 등)
• 재사용성과 테스트 용이성을 위해 formValidationMixin을 만드는 것을 추천합니다.
• shared 폴더로 넣은 이유는 form이 우리 프로젝트로 한정된 기능이 아니기 때문이고, helpers은 추후 범용적인 mixin, util등을 만들었을 때 용이할 것 같아서 제안합니다.
  참고: https://blog.nonstopio.com/form-validation-with-mixins-in-flutter-e9a425bca5d1

4. 이름 규칙에 대한 논의가 필요할 것으로 생각됩니다.

• hinted_textfield, rounded_elvatedbutton, checkbox_text_row 등 widget에 대한 이름 규칙이 우선 필요할 것으로 생각됩니다.

[fridayCCC]

확인했습니다.

[brownglasses]

수고하셨습니다. 현재 내용을 그대로 main으로 머지하고 다음과 같은 테스크를 이어서 하는 것을 제안해 봅니다. 이유는 하단에 적어두었습니다. 다수가 동의하면 해당 이슈를 생성해 추후 진행하면 될 것 같습니다.

1. lib/shared/uikit 폴더를 만드는 것을 제안합니다.

• ui 라이브러리를 가져와 사용하는 것처럼 페이지에서 중복해서 쓰는 디자인된 위젯을 한곳에 모아두는 것을 제안합니다.

  • shared 폴더는 우리가 마치 라이브러리를 가져와서 사용하는 것처럼 현재 프로젝트와 독립되어 다른 프로젝트에서도 쓸 수 있는 코드셋을 모아두기 위함입니다.
  • shared/uikit 폴더 밑에 ui를 모아두면 추후 ui를 교체할 때, storybook을 적용해서 디자이너와 협업 할 때 이점이 있을 것으로 생각됩니다.
  • shared/uikit에 ui component, animation function, theme 등 ui에 관련된 정보를 넣어두는 것을 제안합니다.
    참고: https://github.com/erickzanardo/nes_ui

2. Flutter easy_localization을 제안합니다.

• '회원가입', '비밀번호확인' 등 텍스트를 그대로 ui 컴포넌트에 하드 코딩 하는 것은 한/영을 지원하거나 텍스트가 전체적인 수정이 있을 경우 수정에 번거로움을 초래합니다.
• 현재 한/영 지원을 하지 않더라도 추후 수정을 용이하게 하고, 컴포넌트 재사용성을 높이기 위해 텍스트 관리 class를 만드는 것을 제안합니다.
• 해당 라이브러리를 사용해도 좋고, 직접 구현하는 방식을 선택해도 좋을 것 같습니다.
  참고: https://pub.dev/packages/easy_localization?source=post_page-----8fa5f50a3fd2--------------------------------

3. lib/shared/helpers/form 폴더를 만드는 것을 제안합니다.

• 현재 프로젝트에는 굉장히 다양한 form이 재사용될 것으로 추측됩니다. (로그인, signup, 팀 만들기, task 만들기 등)
• 재사용성과 테스트 용이성을 위해 formValidationMixin을 만드는 것을 추천합니다.
• shared 폴더로 넣은 이유는 form이 우리 프로젝트로 한정된 기능이 아니기 때문이고, helpers은 추후 범용적인 mixin, util등을 만들었을 때 용이할 것 같아서 제안합니다.
  참고: https://blog.nonstopio.com/form-validation-with-mixins-in-flutter-e9a425bca5d1

4. 이름 규칙에 대한 논의가 필요할 것으로 생각됩니다.

• hinted_textfield, rounded_elvatedbutton, checkbox_text_row 등 widget에 대한 이름 규칙이 우선 필요할 것으로 생각됩니다.

리뷰 정말 감사합니다! 많은 도움이 되었습니다,
말씀하신 내용 검토하도록 하겠습니다