Skip to content

Conversation

@language7606
Copy link
Collaborator

#️⃣연관된 이슈

#421

📝작업 내용

  1. 이메일 로그인 화면 컴포즈로 전환
  2. 기존 EmailLoginFragment에 연결되어있던 ViewModel을 EmailLoginScreen에 연결

💬리뷰 요구사항(선택)

컴포넌트는 재사용가능성이 있을만한 것만 최대한 추려서 작업하고있습니다. (아직도 고민중인게 많아서 변경이 잦을 것 같네요 ㅎㅎ)
뷰모델은 제가 이전 코드리뷰때 프래그먼트에 연결되는 게 좋을 것 같다고 계속 달았던 것 같은데, 지금 생각하니 아닌 것 같네요..
배우기 전이라 바로 붙이는 게 어려울 줄 알았기도 하고... 좀 조심스러웠는데, 어렵지도 않고 또 추후에 완전히 전환할 때 더 걸림돌이 될 것 같습니다 ㅎㅎ 회의때 다시 언급하겠지만, 스크린에 그대로 작업하시는게 전체적으로 봤을 때 더 빠를 것 같아요! (대신 수정할 것은 많긴 합니다 ㅎㅎ)

테마적용을 아직 안해서 Box 컴포넌트에 modifier 속성으로 백그라운드 컬러 화이트를 준 상태입니다. 이후 이슈에서 테마작업도 병행해보겠습니다.

이 외에도 의견 있으시면 편하게, 자유롭게 말씀해주세요!

1. 이메일 로그인 화면의 '로그인 버튼' 과 이름이 겹치지 않도록 소셜로그인의 이메일로 가기 버튼명 변경(EmailLoginButton -> NavigateToEmailLoginButton)
2. 이메일 로그인 스크린 생성
3. onCreateView에서 컴포즈뷰로 생성한 스크린을 리턴
4. 컴포넌트 패키지 생성
1. 이메일 로그인 화면 타이틀, 서브 타이틀 적용
2. 소셜로그인 화면과 구분되도록 이름 변경 (LoginTitle -> SocialLoginTitle, LoginSubTitle -> SocialLoginSubTitle)
3. 시스템 폰트크기 적용을 피할 수 있도록 dpToSp 함수를 각 스크린에 적용.
4. Modifier 매개변수 위치 조정
1. 소셜 로그인에서 뷰모델 참조는 프래그먼트에서만 하도록 뷰모델 관찰 코드 위치 변경 및 매개변수 수정 (UI에 전적으로 의존하는 상태 제외 ex. scrollState 등)
1. 뷰모델 참조를 프래그먼트에서 하도록 변경
2. 라이브데이터 관찰을 컴포즈로 변경(LaunchedEffect, observeAsState)
3. 테스트를 위한 프리뷰 코드 매개변수도 변경
1. 체크박스 구현
2. 체크박스 옆 텍스트 구현
3. isChecked 상태 전달 구현
1. FindEmailTextButton 컴포넌트 구현
2. FindPasswordTextButton 컴포넌트 구현
3. 화면전환 상태 구현
1. EmailLoginButton 컴포넌트 적용
2. 돌아가기 버튼, 회원가입 버튼 컴포넌트 적용
3. 필요한 상태 매개변수 적용
1. 기존 observeVewmodel() 코드 삭제
2. 이메일 로그인 버튼 클릭 시 로그인하는 로직 적용
 - email 및 password 텍스트필드 값 전달
 - autoLoginValue 값 전달
 - email 과 password 텍스트필드에 값이 모두 있을 때 버튼 활성화 적용 (isEnabled)
3. 코드 정리 (컨벤션)
1. 상위 컴포넌트에서 하위 컴포넌트의 Modifier를 제어하는게 가능하도록 계층 적용
2. 필요 이상으로 분리했던 컴포넌트 병합 및 재배치
3. 텍스트 '|' 로 적용했던 디바이더 머터리얼3에서 제공하는 VerticalDivider API 로 변경
1. 상위 컴포넌트에서 하위 컴포넌트의 Modifier를 제어하는게 가능하도록 계층 적용
2. 필요 이상으로 분리했던 컴포넌트 병합 및 재배치
3. 컴포넌트 프리뷰 구현
1. 중복해서 사용하고 있는 컴포넌트만 추출
2. 이메일, 소셜 로그인 화면 각각의 컴포넌트 패키지를 상위(login)의 컴포넌트 패키지로 통합
3. 유틸 패키지 추가
4. 헷갈릴 수 있는 이름들 수정
1. 뷰바인딩 삭제
2. 뷰모델 코드 EmailLoginScreen 으로 이동
1. LiveData 코드 Flow로 전환
2. 유효성 검사 및 상태 코드들 ViewModel에서 관리
3. 에러메세지 및 다이얼로그 추가
1. 보라빛이 도는 기본 배경색 수정
@language7606 language7606 added the 리팩터링 아키텍처 구조 변경 등 리팩터링 작업 label Mar 24, 2025
@language7606 language7606 requested review from dmeiei and ums1212 March 24, 2025 12:11
@language7606 language7606 requested a review from zunione March 24, 2025 12:11
@language7606 language7606 self-assigned this Mar 24, 2025
@language7606 language7606 linked an issue Mar 24, 2025 that may be closed by this pull request
6 tasks
…t-modigm into 421-refactor-이메일-로그인-화면-컴포즈-적용

# Conflicts:
#	app/src/main/java/kr/co/lion/modigm/ui/login/social/component/EmailLoginButton.kt
#	app/src/main/java/kr/co/lion/modigm/ui/login/social/component/GithubLoginButton.kt
#	app/src/main/java/kr/co/lion/modigm/ui/login/social/component/KakaoLoginButton.kt
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

리팩터링 아키텍처 구조 변경 등 리팩터링 작업

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Refactor] 이메일 로그인 화면 컴포즈 적용

2 participants