[Feature/#928] 로그인 중앙화 UI 구현 #1008

leeeyubin · 2024-12-25T00:04:59Z

closed [Feat] LoginActivity 제작 #928

What is this issue?

로그인 중앙화 UI 작업
로그인 화면 Compose로 마이그레이션

Screenshot

로그인 화면 `AuthActivity`	회원 인증 화면 `CertificateMemberScreen`
Screen_Recording_20241225_070137_SOPT.DEBUG.mp4	Screen_Recording_20241225_073953_SOPT.DEBUG.mp4

로그인 오류 화면 `AuthErrorScreen`	전화번호 인증 화면 `CertificateAccountScreen`	소셜계정 설정 화면 `ChangeAccountScreen`

To Reviewers

작업을 하다보니 코드량이 너무 길어져서ㅠㅠ 중간에 끊었다가 갈게요..!
아직 UI가 전부 나온 게 아니라서 나온 부분만 구현했어요
각 화면마다 여러 UI 케이스들이 있는데 이건 서버통신 연동하면서 더 구현할게요!

l2hyunwoo · 2024-12-25T15:42:55Z

app/src/main/java/org/sopt/official/feature/auth/AuthActivity.kt

+                modifier = Modifier.padding(horizontal = 8.dp)
+            )
+            HorizontalDivider(
+                thickness = 0.6.dp,


여기도 마찬가지

l2hyunwoo · 2024-12-25T15:43:50Z

app/src/main/java/org/sopt/official/feature/auth/AuthViewModel.kt

+    private val _action = MutableStateFlow<Boolean?>(null)
+    val action: StateFlow<Boolean?> = _action.asStateFlow()


혹시 이건 StateFlow로 구현한 이유가 있을까요? 이건 이벤트쪽인 것 같아서 State보단 Shared로 구현하는게 더 자연스러울 것 같아서요...!!

SharedFlow로 구현하면 이를 LaunchedEffectf로 수집해야하는데 LaunchedEffect 안에서는 컴포저블 함수를 사용할 수가 없더라구요..!
다이얼로그는 컴포저블 함수이기 때문에 일단 StateFlow를 사용했습니다ㅜㅜ 다른 방법이 있을까요..?

아 그런 요구사항이 있었구만유, 그런 경우에는 action이란 표현 대신에 isLoginErrorPopupVisible 정도로 축약해도 좋을 것 같아요. 아니면, 이건 UI단에서만 알고 있어도 되는 정보이니, setContent안에

var isErrorDialogVisible by remember { mutableStateOf(false) }

로 사용해도 괜찮을듯합니다! 상태값 업데이트 코드는 AuthUiEvent가 Failure일 때 LaunchedEffect에서 작성하면 될 것 같구요

app/src/main/java/org/sopt/official/feature/auth/component/AuthButton.kt

l2hyunwoo · 2024-12-25T15:45:26Z

app/src/main/java/org/sopt/official/feature/auth/component/AuthTextField.kt

+            if (text.isEmpty())
+                Text(
+                    text = hintText,
+                    color = Gray100,
+                    style = SoptTheme.typography.body14M
+                )


Suggested change

if (text.isEmpty())

Text(

text = hintText,

color = Gray100,

style = SoptTheme.typography.body14M

)

if (text.isEmpty()) {

Text(

text = hintText,

color = Gray100,

style = SoptTheme.typography.body14M

)

}

l2hyunwoo · 2024-12-25T15:49:34Z

app/src/main/java/org/sopt/official/feature/auth/component/AuthTextField.kt

+@Composable
+internal fun AuthTextField(
+    text: String,
+    hintText: String,


https://m3.material.io/components/text-fields/guidelines

labelText(or placeHolder)라는 네이밍은 어떨까요? Material3 보니까 기본 placeHolder가 labelText로 되어있네요

app/src/main/java/org/sopt/official/feature/auth/component/LoginErrorDialog.kt

app/src/main/java/org/sopt/official/feature/auth/component/PhoneCertification.kt

...ain/java/org/sopt/official/feature/auth/feature/certificatemember/CertificateMemberScreen.kt

l2hyunwoo · 2024-12-25T15:58:32Z

...ain/java/org/sopt/official/feature/auth/feature/certificatemember/CertificateMemberScreen.kt

+    val onShowSnackBar: () -> Unit = {
+        coroutineScope.launch {
+            snackBarHostState.showSnackbar("인증번호가 전송되었어요.")
+        }
+    }


Suggested change

val onShowSnackBar: () -> Unit = {

coroutineScope.launch {

snackBarHostState.showSnackbar("인증번호가 전송되었어요.")

}

}

val onShowSnackBar: () -> Unit = remember { {

coroutineScope.launch {

snackBarHostState.showSnackbar("인증번호가 전송되었어요.")

}

} }

(혹시 모르는데) 이 함수가 리컴포지션될때마다 매번 리컴포지션 범위에 포함되어서 다시 함수객체가 만들어질 수 있으니 remember로 감싸주면 좋을 것 같아요

l2hyunwoo

고생하셨어요 🙇🏻 리뷰 남겼습니다

leeeyubin · 2024-12-30T16:31:53Z

코드리뷰 반영했습니다! 확인부탁드려요! @l2hyunwoo

l2hyunwoo · 2024-12-30T18:25:33Z

app/src/main/java/org/sopt/official/feature/auth/AuthActivity.kt

+                LaunchedEffect(true) {
+                    if (dataStore.accessToken.isNotEmpty()) {
+                        startActivity(
+                            HomeActivity.getIntent(context, HomeActivity.StartArgs(UserStatus.of(dataStore.userStatus)))
+                        )
+                    }
+                }


토큰 있는 경우에는 어떻게 동작하나요...?

l2hyunwoo · 2024-12-30T18:27:26Z

app/src/main/java/org/sopt/official/feature/auth/AuthActivity.kt

-        initAnimation()
-        collectUiEvent()
-    }
+                val action by viewModel.loginDialogAction.collectAsStateWithLifecycle()


Suggested change

val action by viewModel.loginDialogAction.collectAsStateWithLifecycle()

val loginDialogAction by viewModel.loginDialogAction.collectAsStateWithLifecycle()

저게 액션일까요?

collectAsStateWithLifecycle이 필요할까?

ViewModel에 변수로 선언해야하는가?

l2hyunwoo · 2024-12-30T18:34:02Z

app/src/main/java/org/sopt/official/feature/auth/AuthActivity.kt

+                        enableLights(false)
+                        enableVibration(false)
+                        lockscreenVisibility = NotificationCompat.VISIBILITY_PUBLIC
+                        (getSystemService(NOTIFICATION_SERVICE) as NotificationManager).createNotificationChannel(this)


Suggested change

(getSystemService(NOTIFICATION_SERVICE) as NotificationManager).createNotificationChannel(this)

getSystemService<NotificationManager>?.createNotificationChannel(this)

l2hyunwoo · 2024-12-30T18:35:39Z

app/src/main/java/org/sopt/official/feature/auth/AuthActivity.kt

+                            authDataSource = object : PlaygroundAuthDatasource {
+                                override suspend fun oauth(code: String): Result<OAuthToken> {
+                                    return kotlin.runCatching {
+                                        authService
+                                            .authenticate(AuthRequest(code, dataStore.pushToken))
+                                            .toOAuthToken()
+                                    }
+                                }
+                            }


오래된 잔재....이건 제가 건드려야될 것 같군요 ㅠ

l2hyunwoo · 2024-12-30T18:40:37Z

app/src/main/java/org/sopt/official/feature/auth/component/AuthButton.kt

+    containerColor: Color = White,
+    contentColor: Color = Black,
+    isEnabled: Boolean = true,
+    disabledContainerColor: Color = Black80,
+    disabledContentColor: Color = Gray60,


Suggested change

containerColor: Color = White,

contentColor: Color = Black,

isEnabled: Boolean = true,

disabledContainerColor: Color = Black80,

disabledContentColor: Color = Gray60,

isEnabled: Boolean = true,

containerColor: Color = White,

contentColor: Color = Black,

disabledContainerColor: Color = Black80,

disabledContentColor: Color = Gray60,

~Defaults object를 활용해서 컬러 시스템을 하나의 객체 안에서 관리할 수 있게하는 패턴이 있습니당!

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/src/commonMain/kotlin/androidx/compose/material/TextFieldDefaults.kt?q=TextFieldDefaults

나중에 이거 참고해서 리팩토링해도 괜찮을 듯 (우선순위 하~최하)

This reverts commit d719334.

leeeyubin added 30 commits November 4, 2024 10:00

[feature/#928] add auth error activity

13296b9

[feature/#928] add text spanStyle

82fb6df

[feature/#928] add auth button file

b681ad6

[feature/#928] make auth button

e43b7a0

[feature/#928] make textWithButton component

d40874c

[feature/#928] make LoginErrorDialog

5deee0f

[feature/#928] 텍스트 함수화

252718e

[feature/#928] refactor auth file

743a7a6

[feature/#928] refactor auth file

a4d74a3

[feature/#928] make error dialog

410dc86

[feature/#928] Unnecessary code deletion

a5d75f9

[feature/#928] make sopt logo animation

4c2c683

[feature/#928] make Auth Screen UI

2d63166

[feature/#928] rename AuthTextWithArrow function

df75058

[feature/#928] make DialogTitle function

bb1f22a

[feature/#928] fix sopt logo animation

fc64af7

[feature/#928] login error dialog -> PopUp

8b2ace5

[feature/#928] delete XML animation function

bb1d309

[feature/#928] make google login available

4a36f5b

[feature/#928] delete AuthActivity UI XML file

e95f984

[feature/#928] git pull from develop

e8685e9

[feature/#928] make authCertification component

0f8a5e1

[feature/#928] phone certification's component

ec5e2bd

[feature/#928] phone certification UI

87443e1

[feature/#928] fix to AuthCertificationActivity

ead4af8

[feature/#928] add AuthCertificationActivity in manifest

bbc3a8e

[feature/#928] change AuthCertificationScreen function name

515a55e

[feature/#928] changing UI

960510e

[feature/#928] 회원인증 모든 경우의 UI

f6872f5

[feature/#928] activity -> screen

803751b