Feat: 제보 화면 상태에 따른 UI 분리 및 제출 로직 개선

- ReportState, ReportSideEffect, SubmitState를 model 패키지로 분리
- 제보 제출(submitReportWithImages) 시, 최소 1초의 딜레이 보장

Author: wjdrjs00

presentation/src/main/java/com/threegap/bitnagil/presentation/report/ReportScreen.kt

@@ -5,6 +5,12 @@ import android.net.Uri
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.PickVisualMediaRequest
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.AnimatedContentTransitionScope
+import androidx.compose.animation.SizeTransform
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.spring
+import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -50,6 +56,12 @@ import com.threegap.bitnagil.presentation.report.component.PhotoItem
 import com.threegap.bitnagil.presentation.report.component.ReportCategoryBottomSheet
 import com.threegap.bitnagil.presentation.report.component.ReportCategorySelector
 import com.threegap.bitnagil.presentation.report.component.ReportField
+import com.threegap.bitnagil.presentation.report.component.template.CompleteReportContent
+import com.threegap.bitnagil.presentation.report.component.template.SubmittingReportContent
+import com.threegap.bitnagil.presentation.report.model.ReportSideEffect
+import com.threegap.bitnagil.presentation.report.model.ReportState
+import com.threegap.bitnagil.presentation.report.model.SubmitState
+import com.threegap.bitnagil.presentation.report.model.uiTitle
 import org.orbitmvi.orbit.compose.collectAsState
 import org.orbitmvi.orbit.compose.collectSideEffect
 
@@ -130,17 +142,48 @@ fun ReportScreenContainer(
         )
     }
 
-    ReportScreen(
-        uiState = uiState,
-        onReportTitleChange = viewModel::updateReportTitle,
-        onReportContentChange = viewModel::updateReportContent,
-        onShowImageSourceBottomSheet = viewModel::showImageSourceBottomSheet,
-        onShowReportCategoryBottomSheet = viewModel::showReportCategoryBottomSheet,
-        onRemoveImage = viewModel::removeImage,
-        onGetCurrentLocationClick = locationPermissionHandler::requestPermission,
-        onSubmitClick = viewModel::submitReportWithImages,
-        onBackClick = viewModel::navigateToBack,
-    )
+    AnimatedContent(
+        modifier = Modifier
+            .fillMaxSize()
+            .statusBarsPadding(),
+        targetState = uiState.submitState,
+        label = "ReportSlideAnimation",
+        transitionSpec = {
+            (
+                slideIntoContainer(
+                    animationSpec = spring(stiffness = Spring.StiffnessMediumLow),
+                    towards = AnimatedContentTransitionScope.SlideDirection.Start,
+                ) togetherWith slideOutOfContainer(
+                    animationSpec = spring(stiffness = Spring.StiffnessMediumLow),
+                    towards = AnimatedContentTransitionScope.SlideDirection.Start,
+                )
+                )
+                .using(SizeTransform(clip = true))
+        },
+    ) { submitState ->
+        when (submitState) {
+            SubmitState.IDLE -> {
+                ReportScreen(
+                    uiState = uiState,
+                    onReportTitleChange = viewModel::updateReportTitle,
+                    onReportContentChange = viewModel::updateReportContent,
+                    onShowImageSourceBottomSheet = viewModel::showImageSourceBottomSheet,
+                    onShowReportCategoryBottomSheet = viewModel::showReportCategoryBottomSheet,
+                    onRemoveImage = viewModel::removeImage,
+                    onGetCurrentLocationClick = locationPermissionHandler::requestPermission,
+                    onSubmitClick = viewModel::submitReportWithImages,
+                    onBackClick = viewModel::navigateToBack,
+                )
+            }
+            SubmitState.SUBMITTING -> SubmittingReportContent()
+            SubmitState.COMPLETE -> {
+                CompleteReportContent(
+                    uiState = uiState,
+                    onConfirmClick = viewModel::navigateToBack,
+                )
+            }
+        }
+    }
 }
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -161,7 +204,6 @@ private fun ReportScreen(
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .statusBarsPadding()
             .windowInsetsPadding(WindowInsets.ime),
     ) {
         BitnagilTopBar(

presentation/src/main/java/com/threegap/bitnagil/presentation/report/ReportViewModel.kt

@@ -9,15 +9,19 @@ import com.threegap.bitnagil.domain.report.model.Report
 import com.threegap.bitnagil.domain.report.model.ReportCategory
 import com.threegap.bitnagil.domain.report.usecase.SubmitReportUseCase
 import com.threegap.bitnagil.presentation.common.file.convertUriToImageFile
+import com.threegap.bitnagil.presentation.report.model.ReportSideEffect
+import com.threegap.bitnagil.presentation.report.model.ReportState
+import com.threegap.bitnagil.presentation.report.model.SubmitState
 import dagger.hilt.android.lifecycle.HiltViewModel
 import dagger.hilt.android.qualifiers.ApplicationContext
-import javax.inject.Inject
 import kotlinx.coroutines.async
 import kotlinx.coroutines.awaitAll
 import kotlinx.coroutines.coroutineScope
+import kotlinx.coroutines.delay
 import org.orbitmvi.orbit.Container
 import org.orbitmvi.orbit.ContainerHost
 import org.orbitmvi.orbit.viewmodel.container
+import javax.inject.Inject
 
 @HiltViewModel
 class ReportViewModel @Inject constructor(
@@ -114,111 +118,67 @@ class ReportViewModel @Inject constructor(
 
     fun submitReportWithImages() {
         intent {
+            reduce { state.copy(submitState = SubmitState.SUBMITTING) }
+
             val category = state.selectedCategory ?: return@intent
             val address = state.currentAddress ?: return@intent
             val latitude = state.currentLatitude ?: return@intent
             val longitude = state.currentLongitude ?: return@intent
 
-            reduce { state.copy(submitState = SubmitState.SUBMITTING) }
+            coroutineScope {
+                val minDelayJob = async {
+                    delay(1000L)
+                }
 
-            val imageFiles = coroutineScope {
-                state.reportImages
-                    .map { uri ->
-                        async {
-                            convertUriToImageFile(uri = uri, prefix = "report", context = context)
+                val processingJob = async {
+                    val imageFiles = state.reportImages
+                        .map { uri ->
+                            async { convertUriToImageFile(uri, "report", context) }
                         }
-                    }
-                    .awaitAll()
-                    .filterNotNull()
-            }
+                        .awaitAll()
+                        .filterNotNull()
 
-            if (imageFiles.size < state.reportImages.size) {
-                reduce { state.copy(submitState = SubmitState.ERROR) }
-                return@intent
-            }
+                    if (imageFiles.size < state.reportImages.size) {
+                        return@async Result.failure(Exception("Image conversion failed"))
+                    }
 
-            val uploadedPaths = uploadReportImagesUseCase(imageFiles).getOrElse { error ->
-                reduce { state.copy(submitState = SubmitState.ERROR) }
-                return@intent
+                    val uploadedPaths = uploadReportImagesUseCase(imageFiles)
+                        .getOrElse { return@async Result.failure(it) }
+
+                    val submitResult = submitReportUseCase(
+                        Report(
+                            title = state.reportTitle,
+                            content = state.reportContent,
+                            category = category,
+                            address = address,
+                            latitude = latitude,
+                            longitude = longitude,
+                            imageUrls = uploadedPaths,
+                        ),
+                    )
+
+                    submitResult.map { uploadedPaths }
+                }
+
+                minDelayJob.await()
+                val result = processingJob.await()
+
+                result.fold(
+                    onSuccess = { paths ->
+                        reduce {
+                            state.copy(
+                                submitState = SubmitState.COMPLETE,
+                                uploadedImagePaths = paths,
+                            )
+                        }
+                    },
+                    onFailure = { error -> },
+                )
             }
-
-            reduce { state.copy(uploadedImagePaths = uploadedPaths) }
-
-            submitReportUseCase(
-                Report(
-                    title = state.reportTitle,
-                    content = state.reportContent,
-                    category = category.toDomain(),
-                    address = address,
-                    latitude = latitude,
-                    longitude = longitude,
-                    imageUrls = uploadedPaths,
-                ),
-            ).fold(
-                onSuccess = {
-                    reduce { state.copy(submitState = SubmitState.SUCCESS) }
-                },
-                onFailure = { it ->
-                    reduce { state.copy(submitState = SubmitState.ERROR) }
-                },
-            )
         }
     }
 
     companion object {
         const val MAX_IMAGE_COUNT = 3
     }
 }
-
-data class ReportState(
-    val reportImages: List<Uri>,
-    val reportTitle: String,
-    val reportContent: String,
-    val selectedCategory: ReportCategoryUi?,
-    val imageSourceBottomSheetVisible: Boolean,
-    val reportCategoryBottomSheetVisible: Boolean,
-    val currentAddress: String?,
-    val currentLatitude: Double?,
-    val currentLongitude: Double?,
-    val uploadedImagePaths: List<String>,
-    val submitState: SubmitState,
-) {
-    val canAddMoreImages: Boolean
-        get() = reportImages.size < ReportViewModel.MAX_IMAGE_COUNT
-
-    val isSubmittable: Boolean
-        get() = reportImages.isNotEmpty() &&
-            reportTitle.isNotEmpty() &&
-            reportContent.isNotEmpty() &&
-            selectedCategory != null &&
-            currentAddress != null &&
-            currentLatitude != null &&
-            currentLongitude != null
-
-    companion object {
-        val Init = ReportState(
-            reportImages = emptyList(),
-            reportTitle = "",
-            reportContent = "",
-            selectedCategory = null,
-            imageSourceBottomSheetVisible = false,
-            reportCategoryBottomSheetVisible = false,
-            currentAddress = null,
-            currentLatitude = null,
-            currentLongitude = null,
-            uploadedImagePaths = emptyList(),
-            submitState = SubmitState.IDLE,
-        )
-    }
-}
-
-enum class SubmitState {
-    IDLE,
-    SUBMITTING,
-    SUCCESS,
-    ERROR,
-}
-
-sealed interface ReportSideEffect {
-    data object NavigateToBack : ReportSideEffect
-}

presentation/src/main/java/com/threegap/bitnagil/presentation/report/component/template/CompleteReportContent.kt

@@ -24,14 +24,14 @@ import com.threegap.bitnagil.designsystem.R
 import com.threegap.bitnagil.designsystem.component.atom.BitnagilIcon
 import com.threegap.bitnagil.designsystem.component.atom.BitnagilTextButton
 import com.threegap.bitnagil.designsystem.component.atom.BitnagilTextButtonColor
-import com.threegap.bitnagil.presentation.report.ReportState
 import com.threegap.bitnagil.presentation.report.component.CompleteReportCard
+import com.threegap.bitnagil.presentation.report.model.ReportState
 
 @Composable
 fun CompleteReportContent(
     uiState: ReportState,
     onConfirmClick: () -> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     val scrollState = rememberScrollState()
 
@@ -47,32 +47,32 @@ fun CompleteReportContent(
             tint = null,
             modifier = Modifier
                 .padding(bottom = 12.dp)
-                .size(40.dp)
+                .size(40.dp),
         )
 
         Text(
             text = "제보가 완료되었습니다.",
             color = BitnagilTheme.colors.coolGray10,
             style = BitnagilTheme.typography.title2Bold,
-            modifier = Modifier.padding(bottom = 16.dp)
+            modifier = Modifier.padding(bottom = 16.dp),
         )
 
         Text(
             text = "빛나길에서 접수 후 완료되면\n신고를 진행합니다.",
             color = BitnagilTheme.colors.coolGray40,
             style = BitnagilTheme.typography.body1Medium,
-            textAlign = TextAlign.Center
+            textAlign = TextAlign.Center,
         )
 
         Box(
-            contentAlignment = Alignment.TopCenter
+            contentAlignment = Alignment.TopCenter,
         ) {
             Image(
                 painter = painterResource(R.drawable.onboarding_character),
                 contentDescription = null,
                 modifier = Modifier
                     .padding(top = 34.dp)
-                    .size(134.dp, 148.dp)
+                    .size(134.dp, 148.dp),
             )
 
             CompleteReportCard(
@@ -109,6 +109,6 @@ fun CompleteReportContent(
 private fun Preview() {
     CompleteReportContent(
         uiState = ReportState.Init,
-        onConfirmClick = {}
+        onConfirmClick = {},
     )
 }

presentation/src/main/java/com/threegap/bitnagil/presentation/report/component/template/SubmittingReportContent.kt

@@ -20,7 +20,7 @@ import com.threegap.bitnagil.designsystem.component.atom.BitnagilIcon
 
 @Composable
 fun SubmittingReportContent(
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     Column(
         modifier = modifier
@@ -31,28 +31,28 @@ fun SubmittingReportContent(
         BitnagilIcon(
             id = R.drawable.ic_loading,
             tint = null,
-            modifier = Modifier.padding(bottom = 12.dp)
+            modifier = Modifier.padding(bottom = 12.dp),
         )
 
         Text(
             text = "제보중...",
             color = BitnagilTheme.colors.coolGray10,
             style = BitnagilTheme.typography.title2Bold,
-            modifier = Modifier.padding(bottom = 16.dp)
+            modifier = Modifier.padding(bottom = 16.dp),
         )
 
         Text(
             text = "포모가 열심\n제보하고 있어요",
             color = BitnagilTheme.colors.coolGray40,
             style = BitnagilTheme.typography.body1Medium,
-            textAlign = TextAlign.Center
+            textAlign = TextAlign.Center,
         )
 
         Spacer(modifier = Modifier.height(72.dp))
 
         Image(
             painter = painterResource(R.drawable.img_pomo_loading),
-            contentDescription = null
+            contentDescription = null,
         )
     }
 }

presentation/src/main/java/com/threegap/bitnagil/presentation/report/model/ReportSideEffect.kt

@@ -0,0 +1,5 @@
+package com.threegap.bitnagil.presentation.report.model
+
+sealed interface ReportSideEffect {
+    data object NavigateToBack : ReportSideEffect
+}