Merge pull request #92 from YAPP-Github/feature/jaino/#91

#91 : 쪽지 로띠 적용 및 로딩 에니메이션 적용

Author: jeongjaino

app/src/main/kotlin/com/bff/wespot/AppNavGraphs.kt

@@ -15,19 +15,20 @@ import androidx.navigation.NavGraph
 import androidx.navigation.NavHostController
 import com.bff.wespot.entire.screen.screen.destinations.AccountSettingScreenDestination
 import com.bff.wespot.entire.screen.screen.destinations.BlockListScreenDestination
-import com.bff.wespot.entire.screen.screen.destinations.CharacterEditScreenDestination
 import com.bff.wespot.entire.screen.screen.destinations.EntireScreenDestination
 import com.bff.wespot.entire.screen.screen.destinations.NotificationSettingScreenDestination
-import com.bff.wespot.entire.screen.screen.destinations.ProfileEditScreenDestination
 import com.bff.wespot.entire.screen.screen.destinations.RevokeConfirmScreenDestination
 import com.bff.wespot.entire.screen.screen.destinations.RevokeScreenDestination
 import com.bff.wespot.entire.screen.screen.destinations.SettingScreenDestination
+import com.bff.wespot.entire.screen.screen.destinations.ProfileEditScreenDestination
+import com.bff.wespot.entire.screen.screen.destinations.CharacterEditScreenDestination
 import com.bff.wespot.message.screen.destinations.MessageEditScreenDestination
 import com.bff.wespot.message.screen.destinations.MessageScreenDestination
 import com.bff.wespot.message.screen.destinations.MessageWriteScreenDestination
 import com.bff.wespot.message.screen.destinations.ReceiverSelectionScreenDestination
 import com.bff.wespot.message.screen.destinations.ReservedMessageScreenDestination
 import com.bff.wespot.message.viewmodel.SendViewModel
+import com.bff.wespot.model.ToastState
 import com.bff.wespot.notification.screen.destinations.NotificationScreenDestination
 import com.bff.wespot.navigation.Navigator
 import com.bff.wespot.vote.screen.destinations.CharacterSettingScreenDestination
@@ -126,7 +127,13 @@ object AppNavGraphs {
     }
 }
 
-private val tabScreenNames = listOf(
+private val bottomBarScreenNames = listOf(
+    "vote/vote_home_screen",
+    "message/message_screen?isMessageSent={isMessageSent}",
+    "entire/entire_screen",
+)
+
+private val topBarScreenNames = listOf(
     "vote/vote_home_screen",
     "message/message_screen?isMessageSent={isMessageSent}&type={type}&messageId={messageId}",
 )
@@ -143,15 +150,15 @@ fun NavDestination.navGraph(): NavGraphSpec {
     throw ClassNotFoundException("Unknown nav graph for destination $route")
 }
 
-fun NavDestination.checkDestination(): Boolean {
-    hierarchy.forEach { destination ->
-        tabScreenNames.forEach { name ->
-            if (destination.route == name) {
-                return true
-            }
-        }
+internal fun NavDestination.checkDestination(position: NavigationBarPosition): Boolean {
+    val screenNames = when (position) {
+        NavigationBarPosition.BOTTOM -> bottomBarScreenNames
+        NavigationBarPosition.TOP -> topBarScreenNames
+    }
+
+    return hierarchy.any { destination ->
+        screenNames.any { name -> destination.route == name }
     }
-    return false
 }
 
 fun DestinationScopeWithNoDependencies<*>.currentNavigator(): CommonNavGraphNavigator {
@@ -165,6 +172,7 @@ fun DestinationScopeWithNoDependencies<*>.currentNavigator(): CommonNavGraphNavi
 internal fun AppNavigation(
     navController: NavHostController,
     modifier: Modifier = Modifier,
+    showToast: (ToastState) -> Unit,
     navigator: Navigator,
 ) {
     val engine = rememberNavHostEngine(
@@ -187,7 +195,7 @@ internal fun AppNavigation(
             dependency(navigator)
             dependency(sendViewModel)
             dependency(votingViewModel)
-            dependency(navigator)
+            dependency(showToast)
         },
     )
 }

app/src/main/kotlin/com/bff/wespot/MainActivity.kt

@@ -29,6 +29,7 @@ import androidx.compose.runtime.State
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.painter.Painter
@@ -43,9 +44,11 @@ import androidx.navigation.compose.rememberNavController
 import com.ramcosta.composedestinations.dynamic.within
 import com.bff.wespot.designsystem.R
 import com.bff.wespot.designsystem.component.header.WSTopBar
+import com.bff.wespot.designsystem.component.indicator.WSToast
 import com.bff.wespot.designsystem.theme.StaticTypeScale
 import com.bff.wespot.designsystem.theme.WeSpotTheme
 import com.bff.wespot.designsystem.theme.WeSpotThemeManager
+import com.bff.wespot.model.ToastState
 import com.bff.wespot.message.screen.MessageScreenArgs
 import com.bff.wespot.message.screen.destinations.MessageScreenDestination
 import com.bff.wespot.message.screen.destinations.ReceiverSelectionScreenDestination
@@ -118,13 +121,15 @@ data class MainScreenNavArgs(
 @Composable
 private fun MainScreen(navigator: Navigator, navArgs: MainScreenNavArgs) {
     val navController = rememberNavController()
+    var toast by remember { mutableStateOf(ToastState()) }
 
-    val checkScreen by navController.checkCurrentScreen()
+    val isTopNavigationScreen by navController.checkCurrentScreen(NavigationBarPosition.TOP)
+    val isBottomNavigationScreen by navController.checkCurrentScreen(NavigationBarPosition.BOTTOM)
 
     Scaffold(
         modifier = Modifier.fillMaxSize(),
         topBar = {
-            if (checkScreen) {
+            if (isTopNavigationScreen) {
                 WSTopBar(
                     title = "",
                     navigation = {
@@ -157,7 +162,7 @@ private fun MainScreen(navigator: Navigator, navArgs: MainScreenNavArgs) {
             }
         },
         bottomBar = {
-            if (checkScreen) {
+            if (isBottomNavigationScreen) {
                 val currentSelectedItem by navController.currentScreenAsState()
                 BottomNavigationTab(
                     selectedNavigation = currentSelectedItem,
@@ -172,11 +177,25 @@ private fun MainScreen(navigator: Navigator, navArgs: MainScreenNavArgs) {
         AppNavigation(
             navController = navController,
             modifier = Modifier.padding(it),
-            navigator = navigator
+            navigator = navigator,
+            showToast = { toastState -> toast = toastState }
         )
 
         navigateScreenFromNavArgs(navArgs, navController)
     }
+
+    if (toast.show) {
+        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.TopCenter) {
+            WSToast(
+                text = stringResource(toast.message),
+                showToast = toast.show,
+                toastType = toast.type,
+                closeToast = {
+                    toast = toast.copy(show = false)
+                },
+            )
+        }
+    }
 }
 
 @Composable
@@ -230,12 +249,12 @@ private fun NavController.currentScreenAsState(): State<NavGraphSpec> {
 
 @Stable
 @Composable
-private fun NavController.checkCurrentScreen(): State<Boolean> {
+private fun NavController.checkCurrentScreen(position: NavigationBarPosition): State<Boolean> {
     val showBar = remember { mutableStateOf(false) }
 
     DisposableEffect(this) {
         val listener = NavController.OnDestinationChangedListener { _, destination, _ ->
-            showBar.value = destination.checkDestination()
+            showBar.value = destination.checkDestination(position)
         }
 
         addOnDestinationChangedListener(listener)

app/src/main/kotlin/com/bff/wespot/NavigationBarPosition.kt

@@ -0,0 +1,5 @@
+package com.bff.wespot
+
+internal enum class NavigationBarPosition {
+    BOTTOM, TOP,
+}

core/ui/build.gradle.kts

@@ -18,4 +18,5 @@ dependencies {
     implementation(libs.coil.core)
     implementation(libs.coil.compose)
     implementation(libs.timber)
+    implementation(libs.lottie)
 }

core/ui/src/main/kotlin/com/bff/wespot/ui/LoadingAnimation.kt

@@ -0,0 +1,33 @@
+package com.bff.wespot.ui
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.airbnb.lottie.compose.LottieAnimation
+import com.airbnb.lottie.compose.LottieCompositionSpec
+import com.airbnb.lottie.compose.LottieConstants
+import com.airbnb.lottie.compose.rememberLottieComposition
+
+@Composable
+fun LoadingAnimation(isBackgroundClicked: Boolean = false) {
+    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))
+
+    Box(
+        modifier = Modifier
+            .clickable(enabled = isBackgroundClicked) { }
+            .fillMaxSize(),
+        contentAlignment = Alignment.Center,
+    ) {
+        LottieAnimation(
+            modifier = Modifier.size(80.dp),
+            composition = composition,
+            iterations = LottieConstants.IterateForever,
+        )
+    }
+}

core/ui/src/main/res/raw/loading.json

@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.5.9","a":"","k":"","d":"","tc":""},"fr":30,"ip":0,"op":59,"w":800,"h":800,"nm":"4.로딩","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 1 Outlines 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[90]},{"t":60,"s":[450]}],"ix":10},"p":{"a":0,"k":[400,400,0],"ix":2},"a":{"a":0,"k":[482.723,482.723,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,128.529],[-128.53,0],[0,-128.529],[128.529,0]],"o":[[0,-128.529],[128.529,0],[0,128.529],[-128.53,0]],"v":[[-232.723,0],[0.001,-232.723],[232.723,0],[0.001,232.723]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.898846794577,0.926102941176,0.534296671549,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":100,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[482.723,482.723],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":23,"s":[0]},{"t":60,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":35,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":59,"st":0,"bm":0}],"markers":[]}

feature/entire/src/main/java/com/bff/wespot/entire/screen/common/constants.kt feature/entire/src/main/java/com/bff/wespot/entire/common/constants.kt

@@ -52,7 +52,6 @@ import com.ramcosta.composedestinations.annotation.Destination
 import org.orbitmvi.orbit.compose.collectAsState
 
 interface EntireNavigator {
-    fun navigateUp()
     fun navigateToSetting()
     fun navigateToProfileEditScreen(args: ProfileEditNavArgs)
 }
@@ -71,8 +70,6 @@ internal fun EntireScreen(
         topBar = {
             WSTopBar(
                 title = "",
-                canNavigateBack = true,
-                navigateUp = { navigator.navigateUp() },
                 action = {
                     Icon(
                         modifier = Modifier

feature/entire/src/main/java/com/bff/wespot/entire/screen/component/EntireListItem.kt feature/entire/src/main/java/com/bff/wespot/entire/component/EntireListItem.kt

@@ -1,16 +1,12 @@
 package com.bff.wespot.entire.screen.screen.edit
 
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Scaffold
 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.hilt.navigation.compose.hiltViewModel
 import com.bff.wespot.designsystem.component.header.WSTopBar
@@ -19,6 +15,7 @@ import com.bff.wespot.entire.screen.state.edit.EntireEditSideEffect
 import com.bff.wespot.entire.screen.viewmodel.EntireEditViewModel
 import com.bff.wespot.model.user.response.ProfileCharacter
 import com.bff.wespot.ui.CharacterScreen
+import com.bff.wespot.ui.LoadingAnimation
 import com.ramcosta.composedestinations.annotation.Destination
 import org.orbitmvi.orbit.compose.collectAsState
 import org.orbitmvi.orbit.compose.collectSideEffect
@@ -57,9 +54,7 @@ fun CharacterEditScreen(
         state.backgroundColorList.isEmpty() ||
         state.profile.name.isEmpty()
     ) {
-        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-            CircularProgressIndicator()
-        }
+        LoadingAnimation()
         return
     }
 
@@ -89,13 +84,6 @@ fun CharacterEditScreen(
     }
 
     if (state.isLoading) {
-        Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .clickable(enabled = false) { },
-            contentAlignment = Alignment.Center,
-        ) {
-            CircularProgressIndicator()
-        }
+        LoadingAnimation()
     }
 }

feature/entire/src/main/java/com/bff/wespot/entire/screen/screen/EntireScreen.kt feature/entire/src/main/java/com/bff/wespot/entire/screen/EntireScreen.kt

@@ -16,7 +16,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -55,6 +54,7 @@ import com.bff.wespot.entire.screen.state.edit.EntireEditSideEffect
 import com.bff.wespot.entire.screen.viewmodel.EntireEditViewModel
 import com.bff.wespot.model.ToastState
 import com.bff.wespot.ui.LetterCountIndicator
+import com.bff.wespot.ui.LoadingAnimation
 import com.bff.wespot.util.hexToColor
 import com.ramcosta.composedestinations.annotation.Destination
 import kotlinx.coroutines.delay
@@ -240,14 +240,7 @@ fun ProfileEditScreen(
     }
 
     if (state.isLoading) {
-        Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .clickable(enabled = false) { },
-            contentAlignment = Alignment.Center,
-        ) {
-            CircularProgressIndicator()
-        }
+        LoadingAnimation()
     }
 
     LaunchedEffect(Unit) {

feature/entire/src/main/java/com/bff/wespot/entire/screen/screen/edit/CharacterEditScreen.kt feature/entire/src/main/java/com/bff/wespot/entire/screen/edit/CharacterEditScreen.kt

@@ -1,14 +1,10 @@
 package com.bff.wespot.entire.screen.screen.setting
 
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -18,7 +14,6 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -30,6 +25,7 @@ import com.bff.wespot.designsystem.theme.WeSpotThemeManager
 import com.bff.wespot.entire.R
 import com.bff.wespot.entire.screen.state.EntireAction
 import com.bff.wespot.entire.screen.viewmodel.EntireViewModel
+import com.bff.wespot.ui.LoadingAnimation
 import com.bff.wespot.ui.ReservedMessageItem
 import com.ramcosta.composedestinations.annotation.Destination
 import org.orbitmvi.orbit.compose.collectAsState
@@ -105,14 +101,7 @@ fun BlockListScreen(
     }
 
     if (state.isLoading) {
-        Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .clickable(enabled = false) { },
-            contentAlignment = Alignment.Center,
-        ) {
-            CircularProgressIndicator()
-        }
+        LoadingAnimation()
     }
 
     LaunchedEffect(Unit) {

feature/entire/src/main/java/com/bff/wespot/entire/screen/screen/edit/ProfileEditScreen.kt feature/entire/src/main/java/com/bff/wespot/entire/screen/edit/ProfileEditScreen.kt

@@ -18,6 +18,7 @@ dependencies {
     implementation(libs.bundles.orbit)
     implementation(libs.junit)
     implementation(libs.androidx.junit)
+    implementation(libs.lottie)
     implementation(libs.coil.core)
     implementation(libs.coil.compose)
 }