[ISSUE-160] 약속 생성 시간대선택, 약속 확정, 약속 응답 에러 로딩 화면 처리

buildSrc/src/main/java/Versions.kt

@@ -26,6 +26,7 @@ object Versions {
     const val OKHTTP = "4.3.1"
     const val RETROFIT = "2.7.1"
     const val SECRETS_GRADLE = "2.0.1"
+    const val SHIMMER = "1.0.3"
     const val TIMBER = "5.0.1"
     const val MOSHI = "1.13.0"
     const val INJECT = "1"

buildSrc/src/main/java/app/ModuleDependencies.kt

@@ -176,6 +176,13 @@ object ModuleDependencies {
             Method.IMPLEMENTATION)
     )
 
+    val shimmer = arrayOf(
+        DependencyInfo("com.valentinilk.shimmer:compose-shimmer",
+            Versions.SHIMMER,
+            Method.IMPLEMENTATION
+        )
+    )
+
     const val FIREBASE_BOM = "com.google.firebase:firebase-bom:${Versions.FIREBASE_BOM}"
     const val FIREBASE_ANALYTICS = "com.google.firebase:firebase-analytics-ktx"
     const val FIREBASE_CRASHLYTICS = "com.google.firebase:firebase-crashlytics-ktx"

presentation/build.gradle.kts

@@ -49,6 +49,7 @@ dependencies {
     app.ModuleDependencies.kotlinDateTime.implement(this)
     app.ModuleDependencies.kakaoOAuth.implement(this)
     app.ModuleDependencies.kakaoShare.implement(this)
+    app.ModuleDependencies.shimmer.implement(this)
 
     implementation(platform(app.ModuleDependencies.FIREBASE_BOM))
     implementation(app.ModuleDependencies.FIREBASE_ANALYTICS)

presentation/src/main/java/com/yapp/growth/presentation/component/PlanzAppBar.kt

@@ -2,6 +2,7 @@ package com.yapp.growth.presentation.component
 
 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -19,10 +20,11 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.valentinilk.shimmer.ShimmerBounds
+import com.valentinilk.shimmer.rememberShimmer
+import com.valentinilk.shimmer.shimmer
 import com.yapp.growth.presentation.R
-import com.yapp.growth.presentation.theme.Gray900
-import com.yapp.growth.presentation.theme.MainPurple900
-import com.yapp.growth.presentation.theme.PlanzTypography
+import com.yapp.growth.presentation.theme.*
 
 @Composable
 fun PlanzCreateAppBar(
@@ -60,12 +62,14 @@ fun PlanzColorTextWithExitAppBar(
     modifier: Modifier = Modifier,
     title: String,
     onExitClick: () -> Unit,
+    isLoading: Boolean,
 ) {
     PlanzColorTextAppBar(
         modifier = modifier,
         title = title,
         menu = PlanzAppBarMenu.EXIT,
         onMenuClick = onExitClick,
+        isLoading = isLoading
     )
 }
 
@@ -142,36 +146,53 @@ private fun PlanzColorTextAppBar(
     title: String,
     menu: PlanzAppBarMenu? = null,
     onMenuClick: () -> Unit,
+    isLoading: Boolean = false,
 ) {
-    Box(
-        modifier = modifier
-            .fillMaxWidth()
-            .wrapContentHeight()
-            .padding(top = 20.dp, bottom = 15.dp, start = 20.dp, end = 20.dp)
-    ) {
-
-        Text(
-            modifier = Modifier
+    if (isLoading) {
+        Column(
+            modifier = modifier
                 .fillMaxWidth()
-                .padding()
-                .align(Alignment.CenterStart),
-            text = title,
-            style = PlanzTypography.h2,
-            color = Gray900,
-            maxLines = 1,
-        )
-
-        if(menu != null) {
-            Icon(
-                imageVector = ImageVector.vectorResource(id = menu.icon),
-                tint = Color.Unspecified,
-                contentDescription = stringResource(id = menu.contentDescription),
+                .wrapContentHeight()
+                .padding(top = 20.dp, bottom = 15.dp, start = 20.dp, end = 20.dp)
+                .shimmer()
+        ) {
+            Box(
                 modifier = Modifier
-                    .clip(RoundedCornerShape(30.dp))
-                    .clickable { onMenuClick() }
-                    .align(Alignment.CenterEnd),
+                    .width(80.dp)
+                    .height(22.dp)
+                    .background(Gray200)
             )
         }
+    } else {
+        Box(
+            modifier = modifier
+                .fillMaxWidth()
+                .wrapContentHeight()
+                .padding(top = 20.dp, bottom = 15.dp, start = 20.dp, end = 20.dp)
+        ) {
+            Text(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding()
+                    .align(Alignment.CenterStart),
+                text = title,
+                style = PlanzTypography.h2,
+                color = Gray900,
+                maxLines = 1,
+            )
+
+            if (menu != null) {
+                Icon(
+                    imageVector = ImageVector.vectorResource(id = menu.icon),
+                    tint = Color.Unspecified,
+                    contentDescription = stringResource(id = menu.contentDescription),
+                    modifier = Modifier
+                        .clip(RoundedCornerShape(30.dp))
+                        .clickable { onMenuClick() }
+                        .align(Alignment.CenterEnd),
+                )
+            }
+        }
     }
 }
 
@@ -226,6 +247,7 @@ fun PlanzExitAppBarPreview() {
 fun PreviewPlanzColorTextWithExitAppBar() {
     PlanzColorTextWithExitAppBar(
         title = "식사",
-        onExitClick = { }
+        onExitClick = { },
+        isLoading = true
     )
 }

presentation/src/main/java/com/yapp/growth/presentation/component/PlanzError.kt

@@ -1,31 +1,33 @@
 package com.yapp.growth.presentation.component
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.yapp.growth.presentation.R
 import com.yapp.growth.presentation.theme.Gray500
+import com.yapp.growth.presentation.theme.MainPurple900
 import com.yapp.growth.presentation.theme.PlanzTypography
 
 
 @Composable
-fun PlanzError() {
-    Box(modifier = Modifier.fillMaxSize()) {
+fun PlanzError(
+    modifier: Modifier = Modifier.fillMaxSize(),
+    retryVisible: Boolean = false,
+    onClickRetry: () -> Unit = { },
+) {
+    Box(modifier = modifier) {
         Column(
             modifier = Modifier.fillMaxSize(),
             horizontalAlignment = Alignment.CenterHorizontally,
@@ -35,18 +37,39 @@ fun PlanzError() {
                 imageVector = ImageVector.vectorResource(R.drawable.ic_failed_character_53),
                 contentDescription = null,
             )
-            Spacer(modifier = Modifier.height(12.dp))
+            Spacer(modifier = Modifier.height(20.dp))
             Text(
                 text = stringResource(id = R.string.planz_error_text_01),
                 color = Gray500,
                 style = PlanzTypography.body2,
             )
-            Spacer(modifier = Modifier.height(4.dp))
-            Text(
-                text = stringResource(id = R.string.planz_error_text_02),
-                color = Gray500,
-                style = PlanzTypography.body2,
-            )
+
+            if (retryVisible) {
+                Spacer(modifier = Modifier.height(28.dp))
+                Button(
+                    modifier = Modifier
+                        .width(97.dp)
+                        .height(34.dp),
+                    border = BorderStroke(width = 1.dp, color = MainPurple900),
+                    shape = RoundedCornerShape(7.dp),
+                    colors = ButtonDefaults.outlinedButtonColors(contentColor = MainPurple900),
+                    onClick = { onClickRetry() }
+                ) {
+                    Row(
+                        horizontalArrangement = Arrangement.spacedBy(4.dp),
+                    ) {
+                        Icon(
+                           painter = painterResource(id = R.drawable.ic_refresh_16),
+                           contentDescription = null,
+                        )
+
+                        Text(
+                            text = stringResource(R.string.planz_error_retry_button_title),
+                            style = PlanzTypography.caption,
+                        )
+                    }
+                }
+            }
         }
     }
 }
@@ -57,6 +80,6 @@ fun PreviewPlanError() {
     Surface(
         modifier = Modifier.fillMaxSize()
     ) {
-        PlanzError()
+        PlanzError(retryVisible = true, onClickRetry = { })
     }
 }

presentation/src/main/java/com/yapp/growth/presentation/component/PlanzLoading.kt

@@ -9,8 +9,10 @@ import androidx.compose.ui.Modifier
 import com.yapp.growth.presentation.theme.MainPurple900
 
 @Composable
-fun PlanzLoading() {
-    Box(modifier = Modifier.fillMaxSize()) {
+fun PlanzLoading(
+    modifier: Modifier = Modifier.fillMaxSize(),
+) {
+    Box(modifier = modifier) {
         CircularProgressIndicator(
             modifier = Modifier.align(Alignment.Center),
             color = MainPurple900

presentation/src/main/java/com/yapp/growth/presentation/component/PlanzTimeTable.kt

@@ -21,8 +21,8 @@ import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.valentinilk.shimmer.shimmer
 import com.yapp.growth.domain.entity.CreateTimeTable
 import com.yapp.growth.domain.entity.TimeCheckedOfDay
 import com.yapp.growth.domain.entity.TimeTable
@@ -352,10 +352,50 @@ fun CreateTimeTable(
     }
 }
 
+@Composable
+fun ShimmerLocationAndAvailableColorBox() {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .wrapContentHeight()
+            .padding(bottom = 20.dp, start = 20.dp, end = 16.dp)
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .wrapContentHeight()
+                .shimmer(),
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
+                Box(
+                    modifier = Modifier
+                        .width(130.dp)
+                        .height(16.dp)
+                        .background(Gray200)
+                )
+                Box(
+                    modifier = Modifier
+                        .width(110.dp)
+                        .height(16.dp)
+                        .background(Gray200)
+                )
+            }
+            Box(
+                modifier = Modifier
+                    .width(110.dp)
+                    .height(16.dp)
+                    .background(Gray200)
+                    .align(Alignment.CenterVertically)
+            )
+        }
+    }
+}
+
 @Composable
 fun LocationAndAvailableColorBox(
     modifier: Modifier = Modifier,
-    timeTable: TimeTable
+    timeTable: TimeTable,
 ) {
     Box(
         modifier = modifier

presentation/src/main/java/com/yapp/growth/presentation/ui/createPlan/timetable/CreateTimeTableContract.kt

@@ -1,12 +1,14 @@
 package com.yapp.growth.presentation.ui.createPlan.timetable
 
+import com.yapp.growth.base.LoadState
 import com.yapp.growth.base.ViewEvent
 import com.yapp.growth.base.ViewSideEffect
 import com.yapp.growth.base.ViewState
 import com.yapp.growth.domain.entity.CreateTimeTable
 
 class CreateTimeTableContract {
     data class CreateTimeTableViewState(
+        val loadState: LoadState = LoadState.SUCCESS,
         val createTimeTable: CreateTimeTable = CreateTimeTable(0,"","", emptyList(), emptyList()),
         val clickCount: Int = 0,
         val isDialogVisible: Boolean = false,
@@ -26,5 +28,6 @@ class CreateTimeTableContract {
         object OnClickPreviousDayButton : CreateTimeTableEvent()
         object OnClickDialogPositiveButton : CreateTimeTableEvent()
         object OnClickDialogNegativeButton : CreateTimeTableEvent()
+        object OnClickErrorRetryButton : CreateTimeTableEvent()
     }
 }