인증샷 업로드시 로딩 화면 추가

core/design-system/src/main/res/drawable/ic_big_plane.xml

@@ -0,0 +1,47 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="164dp"
+    android:height="134dp"
+    android:viewportWidth="164"
+    android:viewportHeight="134">
+  <path
+      android:pathData="M59.78,88.96C56.92,88.85 54.34,90.38 52.77,92.81C51.4,90.28 48.95,88.54 46.09,88.44C45.8,88.42 45.49,88.44 45.2,88.46C39.59,88.92 36.62,96.52 40.54,101.37L49.6,110.81C50.88,112.15 52.99,112.23 54.39,111L64.25,102.29C68.59,97.74 66.23,89.93 60.67,89.06C60.38,89.02 60.09,88.99 59.81,88.98L59.78,88.96Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#FF96AD"
+      android:strokeColor="#171717"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M32.65,72.67C30.7,72.72 29.02,73.87 28.06,75.59C27.02,73.94 25.28,72.86 23.34,72.92C23.14,72.92 22.93,72.94 22.73,72.98C18.95,73.53 17.26,78.82 20.14,81.94L26.7,87.94C27.63,88.8 29.06,88.76 29.96,87.87L36.27,81.52C39.01,78.24 37.07,73.04 33.26,72.7C33.06,72.68 32.86,72.68 32.67,72.68L32.65,72.67Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#FF96AD"
+      android:strokeColor="#171717"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M140.52,26.12L53.23,45.98L79.69,61.67L140.52,26.12Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#ffffff"
+      android:strokeColor="#171717"/>
+  <path
+      android:pathData="M79.86,84.62V61.53L140.55,26.1L79.86,84.62Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#ECECEC"
+      android:strokeColor="#171717"/>
+  <path
+      android:pathData="M80.01,84.9L89.16,67.76H105.13L80.01,84.9Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#C6C6C6"
+      android:strokeColor="#171717"/>
+  <path
+      android:pathData="M97.6,72.9L89.16,67.76L140.54,26.2L115.87,84.02L97.6,72.9Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M89.16,67.76L115.87,84.02M89.16,67.76L140.54,26.2L115.87,84.02M89.16,67.76L97.6,72.9L115.87,84.02"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#171717"/>
+</vector>

core/design-system/src/main/res/values/strings.xml

@@ -104,6 +104,8 @@
     <string name="task_certification_take_picture">인증샷 찍기</string>
     <string name="task_certification_upload_fail">인증샷 등록에 실패했습니다.</string>
     <string name="task_certification_image_translate_fail">이미지 변환에 실패했습니다.</string>
+    <string name="task_certification_loading">인증샷 업로드 중...</string>
+    <string name="task_certification_plz_waiting">잠시만 기다려 주세요.</string>
     <string name="comment_error_message">코멘트는 5글자로 입력해주세요!</string>
 
     <!-- 인증샷 보기 화면 !-->

feature/task-certification/src/main/java/com/twix/task_certification/certification/TaskCertificationScreen.kt

@@ -39,6 +39,7 @@ import com.twix.domain.model.enums.AppTextStyle
 import com.twix.task_certification.certification.component.CameraControlBar
 import com.twix.task_certification.certification.component.CameraPreviewBox
 import com.twix.task_certification.certification.component.CommentErrorText
+import com.twix.task_certification.certification.component.LoadingContent
 import com.twix.task_certification.certification.component.TaskCertificationTopBar
 import com.twix.task_certification.certification.contract.TaskCertificationIntent
 import com.twix.task_certification.certification.contract.TaskCertificationSideEffect
@@ -95,48 +96,53 @@ fun TaskCertificationRoute(
                     ),
                 )
             }
+
             TaskCertificationSideEffect.NavigateToBack -> navigateToBack()
             TaskCertificationSideEffect.NavigateToDetail -> navigateToDetail()
         }
     }
 
-    TaskCertificationScreen(
-        uiState = uiState,
-        cameraPreview = cameraPreview,
-        onClickClose = navigateToBack,
-        onCaptureClick = {
-            coroutineScope.launch {
-                camera
-                    .takePicture()
-                    .onSuccess {
-                        viewModel.dispatch(TaskCertificationIntent.TakePicture(it))
-                    }.onFailure {
-                        viewModel.dispatch(TaskCertificationIntent.TakePicture(null))
-                    }
-            }
-        },
-        onToggleCameraClick = {
-            viewModel.dispatch(TaskCertificationIntent.ToggleLens)
-        },
-        onClickFlash = {
-            viewModel.dispatch(TaskCertificationIntent.ToggleTorch)
-        },
-        onClickGallery = {
-            pickMedia.launch(PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly))
-        },
-        onClickRefresh = {
-            viewModel.dispatch(TaskCertificationIntent.RetakePicture)
-        },
-        onCommentChanged = {
-            viewModel.dispatch(TaskCertificationIntent.UpdateComment(it))
-        },
-        onFocusChanged = {
-            viewModel.dispatch(TaskCertificationIntent.CommentFocusChanged(it))
-        },
-        onClickUpload = {
-            viewModel.dispatch(TaskCertificationIntent.TryUpload)
-        },
-    )
+    if (uiState.isLoading) {
+        LoadingContent()
+    } else {
+        TaskCertificationScreen(
+            uiState = uiState,
+            cameraPreview = cameraPreview,
+            onClickClose = navigateToBack,
+            onCaptureClick = {
+                coroutineScope.launch {
+                    camera
+                        .takePicture()
+                        .onSuccess {
+                            viewModel.dispatch(TaskCertificationIntent.TakePicture(it))
+                        }.onFailure {
+                            viewModel.dispatch(TaskCertificationIntent.TakePicture(null))
+                        }
+                }
+            },
+            onToggleCameraClick = {
+                viewModel.dispatch(TaskCertificationIntent.ToggleLens)
+            },
+            onClickFlash = {
+                viewModel.dispatch(TaskCertificationIntent.ToggleTorch)
+            },
+            onClickGallery = {
+                pickMedia.launch(PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly))
+            },
+            onClickRefresh = {
+                viewModel.dispatch(TaskCertificationIntent.RetakePicture)
+            },
+            onCommentChanged = {
+                viewModel.dispatch(TaskCertificationIntent.UpdateComment(it))
+            },
+            onFocusChanged = {
+                viewModel.dispatch(TaskCertificationIntent.CommentFocusChanged(it))
+            },
+            onClickUpload = {
+                viewModel.dispatch(TaskCertificationIntent.TryUpload)
+            },
+        )
+    }
 }
 
 @Composable

feature/task-certification/src/main/java/com/twix/task_certification/certification/TaskCertificationViewModel.kt

@@ -125,7 +125,9 @@ class TaskCertificationViewModel(
     }
 
     private fun upload(image: ByteArray) {
+        reduce { copy(isLoading = true) }
         launchResult(
+            onStart = { reduce { copy(isLoading = true) } },
             block = {
                 photologRepository.uploadPhotologImage(
                     goalId = navArgs.goalId,
@@ -145,6 +147,7 @@ class TaskCertificationViewModel(
             onError = {
                 showToast(R.string.task_certification_upload_fail, ToastType.ERROR)
             },
+            onFinally = { reduce { copy(isLoading = false) } },
         )
     }
 
@@ -171,8 +174,10 @@ class TaskCertificationViewModel(
         when (navArgs.from) {
             NavRoutes.TaskCertificationRoute.From.HOME ->
                 goalRefreshBus.notifyGoalListChanged()
+
             NavRoutes.TaskCertificationRoute.From.DETAIL ->
                 detailRefreshBus.notifyChanged(TaskCertificationRefreshBus.Publisher.PHOTOLOG)
+
             NavRoutes.TaskCertificationRoute.From.EDITOR -> Unit
         }
         tryEmitSideEffect(TaskCertificationSideEffect.NavigateToBack)

feature/task-certification/src/main/java/com/twix/task_certification/certification/component/LoadingContent.kt

@@ -0,0 +1,115 @@
+package com.twix.task_certification.certification.component
+
+import androidx.compose.animation.core.EaseInOut
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.twix.designsystem.R
+import com.twix.designsystem.components.text.AppText
+import com.twix.designsystem.theme.CommonColor
+import com.twix.designsystem.theme.GrayColor
+import com.twix.designsystem.theme.TwixTheme
+import com.twix.domain.model.enums.AppTextStyle
+
+@Composable
+internal fun LoadingContent() {
+    Column(
+        modifier =
+            Modifier
+                .fillMaxSize()
+                .background(CommonColor.White),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        FloatingPlane()
+
+        Spacer(Modifier.height(6.dp))
+
+        AppText(
+            text = stringResource(R.string.task_certification_loading),
+            style = AppTextStyle.H1,
+            color = GrayColor.C500,
+        )
+
+        Spacer(Modifier.height(10.dp))
+
+        AppText(
+            text = stringResource(R.string.task_certification_plz_waiting),
+            style = AppTextStyle.T2,
+            color = GrayColor.C300,
+        )
+    }
+}
+
+@Composable
+private fun FloatingPlane() {
+    val planeXOffset = 6f
+    val planeYOffset = 8f
+    val planeRotation = 6f
+    val transition = rememberInfiniteTransition(label = "plane")
+
+    val offsetY by transition.animateFloat(
+        -planeYOffset,
+        planeYOffset,
+        infiniteRepeatable(
+            tween(1500, easing = EaseInOut),
+            RepeatMode.Reverse,
+        ),
+    )
+
+    val offsetX by transition.animateFloat(
+        -planeXOffset,
+        planeXOffset,
+        infiniteRepeatable(
+            tween(2200, easing = LinearEasing),
+            RepeatMode.Reverse,
+        ),
+    )
+
+    val rotation by transition.animateFloat(
+        -planeRotation,
+        planeRotation,
+        infiniteRepeatable(
+            tween(1300, easing = EaseInOut),
+            RepeatMode.Reverse,
+        ),
+    )
+
+    Image(
+        painter = painterResource(R.drawable.ic_big_plane),
+        contentDescription = null,
+        modifier =
+            Modifier.graphicsLayer {
+                translationX = offsetX
+                translationY = offsetY
+                rotationZ = rotation
+            },
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun LoadingContentPreview() {
+    TwixTheme {
+        LoadingContent()
+    }
+}

feature/task-certification/src/main/java/com/twix/task_certification/certification/contract/TaskCertificationUiState.kt

@@ -17,6 +17,7 @@ data class TaskCertificationUiState(
     val preview: CameraPreview? = null,
     val comment: CommentUiModel = CommentUiModel(),
     val showCommentError: Boolean = false,
+    val isLoading: Boolean = false,
 ) : State {
     val hasMaxCommentLength: Boolean
         get() = comment.hasMaxCommentLength