From 45cf97fa8e50471e25b94cfdc5ba981947bcf568 Mon Sep 17 00:00:00 2001 From: t1nm1ksun Date: Thu, 12 Sep 2024 15:55:29 +0900 Subject: [PATCH] =?UTF-8?q?[chore]=20#251=20=EB=A1=9C=EB=94=A9=20=EB=B7=B0?= =?UTF-8?q?=20lottie=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/build.gradle.kts | 2 +- app/src/main/assets/loading.json | 494 ++++++++++++++++++ .../ui/component/view/DateRoadLoadingView.kt | 62 ++- .../presentation/ui/profile/ProfileScreen.kt | 49 +- 4 files changed, 550 insertions(+), 57 deletions(-) create mode 100644 app/src/main/assets/loading.json diff --git a/app/build.gradle.kts b/app/build.gradle.kts index a5e5ec33..5bd757b1 100644 --- a/app/build.gradle.kts +++ b/app/build.gradle.kts @@ -121,7 +121,7 @@ dependencies { // Amplitude implementation(libs.amplitude) - //Lottie + // Lottie implementation(libs.lottie.compose) } diff --git a/app/src/main/assets/loading.json b/app/src/main/assets/loading.json new file mode 100644 index 00000000..85684c5d --- /dev/null +++ b/app/src/main/assets/loading.json @@ -0,0 +1,494 @@ +{ + "assets": [], + "ddd": 0, + "fr": 30, + "h": 360, + "ip": 0, + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": "Oval 1", + "hd": false, + "sr": 1, + "ks": { + "a": { + "a": 0, + "k": [ + 0, + 0 + ] + }, + "o": { + "a": 0, + "k": 100 + }, + "p": { + "a": 0, + "k": [ + 180, + 180 + ] + }, + "r": { + "a": 0, + "k": 0 + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ] + }, + "sk": { + "a": 0, + "k": 0 + }, + "sa": { + "a": 0, + "k": 0 + } + }, + "ao": 0, + "ip": 0, + "op": 43, + "st": 0, + "bm": 0, + "shapes": [ + { + "ty": "sh", + "hd": false, + "nm": "Oval 1", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [ + -8.284, + 0 + ], + [ + 0, + -8.284 + ], + [ + 8.284, + 0 + ], + [ + 0, + 8.284 + ] + ], + "o": [ + [ + 8.284, + 0 + ], + [ + 0, + 8.284 + ], + [ + -8.284, + 0 + ], + [ + 0, + -8.284 + ] + ], + "v": [ + [ + 0, + -15 + ], + [ + 15, + 0 + ], + [ + 0, + 15 + ], + [ + -15, + 0 + ] + ] + } + } + }, + { + "ty": "st", + "hd": false, + "bm": 0, + "c": { + "a": 0, + "k": [ + 0.29, + 0.235, + 0.937 + ] + }, + "lc": 2, + "lj": 1, + "ml": 28.96, + "o": { + "a": 0, + "k": 100 + }, + "w": { + "a": 0, + "k": 7 + } + }, + { + "ty": "tm", + "hd": false, + "bm": 0, + "e": { + "a": 1, + "k": [ + { + "t": 0, + "s": [ + 1 + ], + "i": { + "x": 0.56, + "y": 1 + }, + "o": { + "x": 0.44, + "y": 0 + } + }, + { + "t": 30, + "s": [ + 100 + ], + "i": { + "x": 0.75, + "y": 0.75 + }, + "o": { + "x": 0.25, + "y": 0.25 + } + }, + { + "t": 42, + "s": [ + 100 + ], + "i": { + "x": 0, + "y": 0 + }, + "o": { + "x": 1, + "y": 1 + } + } + ] + }, + "o": { + "a": 0, + "k": 0 + }, + "s": { + "a": 1, + "k": [ + { + "t": 0, + "s": [ + 0 + ], + "i": { + "x": 0.44, + "y": 0.98 + }, + "o": { + "x": 0.6, + "y": 0.01 + } + }, + { + "t": 42, + "s": [ + 99 + ], + "i": { + "x": 0, + "y": 0 + }, + "o": { + "x": 1, + "y": 1 + } + } + ] + }, + "m": 1 + } + ] + }, + { + "ddd": 0, + "ind": 2, + "ty": 4, + "nm": "Oval 2", + "hd": false, + "sr": 1, + "ks": { + "a": { + "a": 0, + "k": [ + 15, + 15 + ] + }, + "o": { + "a": 0, + "k": 100 + }, + "p": { + "a": 0, + "k": [ + 180, + 180 + ] + }, + "r": { + "a": 0, + "k": 0 + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ] + }, + "sk": { + "a": 0, + "k": 0 + }, + "sa": { + "a": 0, + "k": 0 + } + }, + "ao": 0, + "ip": 0, + "op": 43, + "st": 0, + "bm": 0, + "shapes": [ + { + "ty": "el", + "hd": false, + "nm": "Oval 2", + "p": { + "a": 0, + "k": [ + 15, + 15 + ] + }, + "s": { + "a": 0, + "k": [ + 30, + 30 + ] + }, + "d": 1 + }, + { + "ty": "st", + "hd": false, + "bm": 0, + "c": { + "a": 0, + "k": [ + 0.922, + 0.922, + 0.953 + ] + }, + "lc": 1, + "lj": 1, + "ml": 28.96, + "o": { + "a": 0, + "k": 100 + }, + "w": { + "a": 0, + "k": 7 + } + } + ] + }, + { + "ddd": 0, + "ind": 3, + "ty": 4, + "nm": "Screen", + "hd": false, + "sr": 1, + "ks": { + "a": { + "a": 0, + "k": [ + 180, + 180 + ] + }, + "o": { + "a": 0, + "k": 100 + }, + "p": { + "a": 0, + "k": [ + 180, + 180 + ] + }, + "r": { + "a": 0, + "k": 0 + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ] + }, + "sk": { + "a": 0, + "k": 0 + }, + "sa": { + "a": 0, + "k": 0 + } + }, + "ao": 0, + "ip": 0, + "op": 43, + "st": 0, + "bm": 0, + "shapes": [ + { + "ty": "gr", + "hd": false, + "nm": "Screen Group", + "bm": 0, + "it": [ + { + "ty": "rc", + "hd": false, + "nm": "Screen", + "d": 1, + "p": { + "a": 0, + "k": [ + 180, + 180 + ] + }, + "r": { + "a": 0, + "k": 0 + }, + "s": { + "a": 0, + "k": [ + 360, + 360 + ] + } + }, + { + "ty": "fl", + "hd": false, + "bm": 0, + "c": { + "a": 0, + "k": [ + 1, + 1, + 1 + ] + }, + "r": 1, + "o": { + "a": 0, + "k": 100 + } + }, + { + "ty": "tr", + "nm": "Transform", + "a": { + "a": 0, + "k": [ + 0, + 0 + ] + }, + "o": { + "a": 0, + "k": 100 + }, + "p": { + "a": 0, + "k": [ + 0, + 0 + ] + }, + "r": { + "a": 0, + "k": 0 + }, + "s": { + "a": 0, + "k": [ + 100, + 100 + ] + }, + "sk": { + "a": 0, + "k": 0 + }, + "sa": { + "a": 0, + "k": 0 + } + } + ], + "np": 0 + } + ] + } + ], + "meta": { + "g": "@phase-software/lottie-exporter 0.7.0" + }, + "nm": "", + "op": 42, + "v": "5.6.0", + "w": 360 +} \ No newline at end of file diff --git a/app/src/main/java/org/sopt/dateroad/presentation/ui/component/view/DateRoadLoadingView.kt b/app/src/main/java/org/sopt/dateroad/presentation/ui/component/view/DateRoadLoadingView.kt index e379709c..8bad557b 100644 --- a/app/src/main/java/org/sopt/dateroad/presentation/ui/component/view/DateRoadLoadingView.kt +++ b/app/src/main/java/org/sopt/dateroad/presentation/ui/component/view/DateRoadLoadingView.kt @@ -1,48 +1,46 @@ package org.sopt.dateroad.presentation.ui.component.view -import androidx.compose.foundation.Image -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.layout.ContentScale -import androidx.compose.ui.res.painterResource -import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview -import org.sopt.dateroad.R -import org.sopt.dateroad.ui.theme.DateRoadTheme +import com.airbnb.lottie.compose.LottieAnimation +import com.airbnb.lottie.compose.LottieClipSpec +import com.airbnb.lottie.compose.LottieCompositionSpec +import com.airbnb.lottie.compose.LottieConstants +import com.airbnb.lottie.compose.rememberLottieAnimatable +import com.airbnb.lottie.compose.rememberLottieComposition @Composable fun DateRoadLoadingView() { - Column( - modifier = Modifier - .fillMaxSize() - .background(color = DateRoadTheme.colors.white), - horizontalAlignment = Alignment.CenterHorizontally - ) { - Spacer(modifier = Modifier.weight(125f)) - Image( - modifier = Modifier - .fillMaxWidth(), - painter = painterResource(id = R.drawable.ic_loading_server), - contentDescription = null, - contentScale = ContentScale.FillWidth + val composition by rememberLottieComposition( + LottieCompositionSpec.Asset("loading.json") + ) + val lottieAnimatable = rememberLottieAnimatable() + + LaunchedEffect(composition) { + lottieAnimatable.animate( + composition = composition, + clipSpec = LottieClipSpec.Frame(0, 1200), + initialProgress = 0f, + iteration = LottieConstants.IterateForever ) - Text( - modifier = Modifier - .fillMaxWidth(), - text = stringResource(id = R.string.loading_view_server), - color = DateRoadTheme.colors.gray500, - style = DateRoadTheme.typography.titleBold18, - textAlign = TextAlign.Center + } + + Box( + modifier = Modifier.fillMaxSize(), + contentAlignment = Alignment.Center + ) { + LottieAnimation( + composition = composition, + progress = lottieAnimatable.progress, + contentScale = ContentScale.FillHeight ) - Spacer(modifier = Modifier.weight(155f)) } } diff --git a/app/src/main/java/org/sopt/dateroad/presentation/ui/profile/ProfileScreen.kt b/app/src/main/java/org/sopt/dateroad/presentation/ui/profile/ProfileScreen.kt index 3e0a3157..5db448c2 100644 --- a/app/src/main/java/org/sopt/dateroad/presentation/ui/profile/ProfileScreen.kt +++ b/app/src/main/java/org/sopt/dateroad/presentation/ui/profile/ProfileScreen.kt @@ -123,30 +123,31 @@ fun ProfileRoute( } } else { when (uiState.editProfileLoadState) { - LoadState.Idle -> { - ProfileScreen( - profileUiState = uiState, - onImageButtonClicked = { viewModel.setEvent(ProfileContract.ProfileEvent.OnImageButtonClicked) }, - onNicknameValueChanged = { name -> viewModel.setEvent(ProfileContract.ProfileEvent.OnNicknameValueChanged(name = name)) }, - onDateChipClicked = { tag -> viewModel.setEvent(ProfileContract.ProfileEvent.OnDateChipClicked(tag = tag.name)) }, - onBottomSheetDismissRequest = { viewModel.setEvent(ProfileContract.ProfileEvent.OnBottomSheetDismissRequest) }, - onNicknameButtonClicked = { - viewModel.getNicknameCheck(uiState.editProfile.name) - }, - onEnrollButtonClicked = { - viewModel.patchEditProfile(uiState.editProfile) - }, - selectPhoto = { - if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU) { - getGalleryLauncher.launch("image/*") - } else { - getPhotoPickerLauncher.launch(PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly)) - } - }, - deletePhoto = { viewModel.setEvent(ProfileContract.ProfileEvent.SetEditProfileImage(image = "")) }, - popUpBackStack = { popBackStack() } - ) - } + LoadState.Idle -> DateRoadLoadingView() +// { +// ProfileScreen( +// profileUiState = uiState, +// onImageButtonClicked = { viewModel.setEvent(ProfileContract.ProfileEvent.OnImageButtonClicked) }, +// onNicknameValueChanged = { name -> viewModel.setEvent(ProfileContract.ProfileEvent.OnNicknameValueChanged(name = name)) }, +// onDateChipClicked = { tag -> viewModel.setEvent(ProfileContract.ProfileEvent.OnDateChipClicked(tag = tag.name)) }, +// onBottomSheetDismissRequest = { viewModel.setEvent(ProfileContract.ProfileEvent.OnBottomSheetDismissRequest) }, +// onNicknameButtonClicked = { +// viewModel.getNicknameCheck(uiState.editProfile.name) +// }, +// onEnrollButtonClicked = { +// viewModel.patchEditProfile(uiState.editProfile) +// }, +// selectPhoto = { +// if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU) { +// getGalleryLauncher.launch("image/*") +// } else { +// getPhotoPickerLauncher.launch(PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly)) +// } +// }, +// deletePhoto = { viewModel.setEvent(ProfileContract.ProfileEvent.SetEditProfileImage(image = "")) }, +// popUpBackStack = { popBackStack() } +// ) +// } LoadState.Loading -> DateRoadLoadingView() LoadState.Success -> navigationToMyPage()