[#420] [Refactor] 소셜로그인 버튼 애니메이션 적용

[language7606]

#️⃣연관된 이슈

#420

📝작업 내용

소셜로그인 버튼에 애니메이션 적용했습니다!

스크린샷

2025_01_02_._._.webm

💬리뷰 요구사항

2025_01_02_._._._.webm

위 영상 처럼 애니메이션을 '이메일로 로그인' 텍스트 버튼에도 적용해야할 지 고민이네요 ㅎㅎ 티는 별로 안나는데 버튼이라서 적용은 해놨습니다. 그대로 두는 게 나을까요??

[ums1212]

pointerInput modifier를 각 버튼에 적용해주고 있으니까 요걸 최상위 함수로 따로 빼면 어떨까요?

// CustomModifierSnippets.kt

fun Modifier.animateButton(
    setPressed: (Boolean) -> Unit,
    onClick: () -> Unit
) = pointerInput(Unit) {
    detectTapGestures(
        onPress = {
            setPressed(true)
            tryAwaitRelease()
            setPressed(false)
            onClick()
        },
        onTap = {
            setPressed(false)
            onClick()
        },
    )
}

isPressed 는 함수 파라미터로 전달을 해도 사용하기가 어려운 것 같아서
구조분해로 2개 변수에 할당 받으면 두번째 변수가 값을 할당해주는 람다를 받으니까 파라미터로 전달을 할 수 있을거같아요

var isPressed by remember { mutableStateOf(false) }

val (isPressed, setPressed) = remember { mutableStateOf(false) }


Box(
    modifier = modifier
        .fillMaxSize()
        .padding(horizontal = 16.dp)
        .animateButton(setPressed, onClick),
)

제가 브랜치 체크아웃해서 테스트해보니까 버튼 애니메이션 동작은 하는데 onClick 실행하는 부분이 묘하게 이상한 것 같아서 제가 뭘 놓치고 있나봅니다;;

[language7606]

몇가지 궁금한 게 있습니다!

1. 현재 제시해주신 코드가 컴포저블 어노테이션 없이 하나의 확장함수 추가 개념인가요?

2. 저도 코드 적용하니 애니메이션은 작동하는 것 같습니다. 근데 묘하게 이상하다는 게 어떤 부분인지는 모르겠네요 ㅠ 좀 더 자세히 설명해 주실 수 있으실까요?

제 기억을 더듬어보면 이 버튼 동작 코드가 동일한 동작으로 얼마나 많은 곳에 사용되는가를 생각할 때 이 곳 외에는 없어보이기도 해서 일단 버튼별로 다 넣었던 것 같네요.

아래는 다른 코드지만,

@Composable
fun Modifier.animateEnterExit(): Modifier {
    val infiniteTransition = rememberInfiniteTransition(label = "")
    val offsetY by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 10f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 800, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        ),
        label = ""
    )
    return this.offset(y = offsetY.dp)
}

애니메이션을 컴포저블로 따로 빼서 확장하는 방식을 썼긴한데, 확장함수 방식과 컴포저블 방식을 둘 다 적용해보고 말씀드릴게요!

[ums1212]

1. 공식 문서에 저랑 성원님이 작성한 2가지 방식이 그대로 나오네요 https://developer.android.com/develop/ui/compose/custom-modifiers
   성원님이 작성하신 composable modifier factory 방식이 더 발전?된 방식인 것 같아보입니다

2. 저는 에뮬레이터에서 테스트했는데 버튼 클릭 시 에러?취소할때 나와야 하는 alert다이얼로그가 미리 튀어나오고 브라우저 로그인 화면으로 넘어가더라구요

[language7606]

1. 오호 공식문서에 있군요 역시 ㄷㄷ 저도 민식님 덕에 공부 더 해볼 수 있겠네요! ㅎ 일단 이 부분은 그럼 수정하는 방식을 컴포저블로 한 번 해보겠습니다!

2. 음 제가 할 때는 재현되지 않은 부분인데... 확인해볼게요! 감사해요!

[zunione]

동영상 재생이 안 되는데 저만 그런가요? ㅠㅠ

그리고 modifier를 각 함수에서 용도에 맞게 바꿔 사용하고 있는 것 같은데 파라미터로 전달하는 이유가 있을까요?

[language7606]

동영상 재생이 안 되는데 저만 그런가요? ㅠㅠ

그리고 modifier를 각 함수에서 용도에 맞게 바꿔 사용하고 있는 것 같은데 파라미터로 전달하는 이유가 있을까요?

@zunione 동영상 저는 재생 잘 되는 것 같습니다ㅠㅠ 제 노트북도 확인 해봤는데 재생 잘 되는 것 같아요! 이전에도 희원님 비슷한 문제가 있었던 것 같은데 왜 안되는 지 저도 한 번 고민해볼게요!

솔직히 말해 해당 PR 올릴 때는 뭔가 알고 modifier를 전달한 것은 아니지만...ㅎㅎ 지금 email 로그인 쪽 하면서 적용중인 것은

1. 컴포넌트의 재사용성을 위해서 modifier를 Screen에서부터 전달하는 것
2. 예전 xml때 각 레이아웃에 마진 주던것 처럼 Screen에서 패딩값을 지정해서 컴포넌트의 위치를 잡아주고 각 컴포넌트에서 UI를 그리는 것에만 집중하도록 하기 위해 전달하는 것

이렇게 두 가지 이유를 가지고 전달하고 있어요!
저도 해보면서 중간중간 새롭게 알게되는게 많아서 아직 소셜에 적용하지는 못했는데, 이제 하나하나 적용해보려고요!