[feat/#118] 뒤집기 애니메이션 swip으로 추가

depromeet · Feb 12, 2024 · 92e7578 · 92e7578
1 parent a2dc709
commit 92e7578
Showing 1 changed file with 40 additions and 22 deletions.
diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/mypage/MyPageScreen.kt b/app/src/main/java/com/teumteum/teumteum/presentation/mypage/MyPageScreen.kt
@@ -1,11 +1,14 @@
 package com.teumteum.teumteum.presentation.mypage
 
+import android.graphics.drawable.GradientDrawable
 import android.util.Log
+import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
@@ -16,9 +19,14 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.FractionalThreshold
+import androidx.compose.material.rememberSwipeableState
+import androidx.compose.material.swipeable
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -49,6 +57,11 @@ import com.teumteum.teumteum.util.custom.view.model.BackCard
 import com.teumteum.teumteum.util.custom.view.model.FrontCard
 import com.teumteum.teumteum.util.custom.view.model.Interest
 
+
+enum class CardFace {
+    Front, Back
+}
+@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun MyPageScreen(
     navController: NavController,
@@ -61,13 +74,24 @@ fun MyPageScreen(
     val userName by viewModel.userName.collectAsState()
     val isFrontCardShown by myPageViewModel.isFrontCardShown.collectAsState()
     val backCard by myPageViewModel.backCardState.collectAsState()
-    Log.d("backCardState", backCard.toString())
+
+    val density = LocalDensity.current.density
+    val state = rememberSwipeableState(initialValue = CardFace.Front)
+    val anchors = mapOf(0f to CardFace.Front, with(LocalDensity.current) { -300.dp.toPx() } to CardFace.Back)
+    val rotationYAnim = remember { Animatable(0f) }
 
     val friends = when (userInfoState) {
         is UserInfoUiState.Success -> "추천한 친구 ${(userInfoState as UserInfoUiState.Success).data.friends}명"
         else -> "로딩 중..."
     }
 
+    LaunchedEffect(state.targetValue) {
+        rotationYAnim.animateTo(
+            targetValue = if (state.targetValue == CardFace.Back) 180f else 0f,
+            animationSpec = tween(durationMillis = 500)
+        )
+    }
+
     val rotation by animateFloatAsState(
         targetValue = if (isFrontCardShown) 0f else 180f,
         animationSpec = tween(durationMillis = 500), label = ""
@@ -92,32 +116,26 @@ fun MyPageScreen(
         ) {
             item {
                 TmMarginVerticalSpacer(size = 78)
-                Box(modifier = Modifier
-                    .clickable { myPageViewModel.toggleCardState() }
-                    .graphicsLayer {
-                        rotationY = rotation
-                        cameraDistance = 12f * density
-                    }
+                Box(
+                    modifier = Modifier
+                        .swipeable(
+                            state = state,
+                            anchors = anchors,
+                            orientation = Orientation.Horizontal,
+                            thresholds = { _, _ -> FractionalThreshold(0.3f) }
+                        )
+                        .graphicsLayer {
+                            rotationY = rotationYAnim.value
+                            cameraDistance = 12f * density
+                        }
                 ) {
-                    if (isFrontCardShown) {
+                    if (state.progress.to == CardFace.Front) {
+                        // 앞면 카드 컨텐츠 표시
                         MyPageFrontCard(frontCard = frontCardState)
-                        Image(
-                            painter = painterResource(id = R.drawable.ic_floating_edit),
-                            contentDescription = "Character Image",
-                            modifier = Modifier
-                                .align(Alignment.BottomEnd)
-                                .offset(x = (-24).dp, y = (-22).dp)
-                                .clickable { navController.navigate(R.id.fragment_edit_card) }
-                        )
                     } else {
-                        with(LocalDensity.current) {
-                            Modifier.graphicsLayer {
-                                rotationY = if (rotation == 180f) -180f else 0f
-                            }
-                        }
+                        // 뒷면 카드 컨텐츠 표시
                         MyPageBackCard(backCard = backCard)
                     }
-
                 }
                 TmMarginVerticalSpacer(size = 22)
                 SettingBtn(friends, navController, myPageViewModel)