Merge pull request #108 from SOPT-all/feat/#103-report-ui-finish

[Feat/#103] 신고하기 페이지 대략적인 UI 마무리
spooooony · Jan 21, 2025 · d2d33ce · d2d33ce
2 parents 9bcd09c + 2788488
commit d2d33ce
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 14 deletions.
diff --git a/app/src/main/java/com/spoony/spoony/presentation/main/MainNavigator.kt b/app/src/main/java/com/spoony/spoony/presentation/main/MainNavigator.kt
@@ -57,6 +57,10 @@ class MainNavigator(
         navController.navigateToReport(navOptions)
     }
 
+    fun navigateToExplore(navOptions: NavOptions? = null) {
+        navController.navigateToExplore(navOptions)
+    }
+
     fun navigateUp() {
         navController.navigateUp()
     }

diff --git a/app/src/main/java/com/spoony/spoony/presentation/main/MainScreen.kt b/app/src/main/java/com/spoony/spoony/presentation/main/MainScreen.kt
@@ -58,7 +58,11 @@ fun MainScreen(
                 navigateToReport = navigator::navigateToReport
             )
 
-            reportNavGraph()
+            reportNavGraph(
+                paddingValues = innerPadding,
+                navigateUp = navigator::navigateUp,
+                navigateToExplore = navigator::navigateToExplore
+            )
 
             mapSearchNavGraph(
                 paddingValues = innerPadding

diff --git a/app/src/main/java/com/spoony/spoony/presentation/report/ReportRoute.kt b/app/src/main/java/com/spoony/spoony/presentation/report/ReportRoute.kt
@@ -2,13 +2,12 @@ package com.spoony.spoony.presentation.report
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -39,47 +38,64 @@ import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme
 import com.spoony.spoony.core.designsystem.type.ButtonSize
 import com.spoony.spoony.core.designsystem.type.ButtonStyle
 import com.spoony.spoony.core.util.extension.addFocusCleaner
+import com.spoony.spoony.presentation.report.component.ReportCompleteDialog
 import com.spoony.spoony.presentation.report.component.ReportRadioButton
 import com.spoony.spoony.presentation.report.type.ReportOption
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.toImmutableList
 
 @Composable
 fun ReportRoute(
+    paddingValues: PaddingValues,
+    navigateUp: () -> Unit,
+    navigateToExplore: () -> Unit,
     viewModel: ReportViewModel = hiltViewModel()
 ) {
     val lifecycleOwner = LocalLifecycleOwner.current
 
     val state by viewModel.state.collectAsStateWithLifecycle(lifecycleOwner = lifecycleOwner)
+    var reportSuccessDialogVisibility by remember { mutableStateOf(false) }
 
     ReportScreen(
+        paddingValues = paddingValues,
         reportOptions = state.reportOptions,
         selectedReportOption = state.selectedReportOption,
         reportContext = state.reportContext,
+        reportButtonEnabled = state.reportButtonEnabled,
         onReportOptionSelected = viewModel::updateSelectedReportOption,
         onContextChanged = viewModel::updateReportContext,
-        onBackButtonClick = {},
-        onReportClick = {}
+        onBackButtonClick = navigateUp,
+        onOpenDialogClick = { reportSuccessDialogVisibility = true }
     )
+
+    if (reportSuccessDialogVisibility) {
+        ReportCompleteDialog(
+            onClick = {
+                navigateToExplore()
+                reportSuccessDialogVisibility = false
+            }
+        )
+    }
 }
 
 @Composable
 private fun ReportScreen(
+    paddingValues: PaddingValues,
     reportOptions: ImmutableList<ReportOption>,
     selectedReportOption: ReportOption,
     reportContext: String,
+    reportButtonEnabled: Boolean,
     onReportOptionSelected: (ReportOption) -> Unit,
     onContextChanged: (String) -> Unit,
     onBackButtonClick: () -> Unit,
-    onReportClick: () -> Unit
+    onOpenDialogClick: () -> Unit
 ) {
     val focusManager = LocalFocusManager.current
 
     Column(
         modifier = Modifier
             .addFocusCleaner(focusManager)
-            .navigationBarsPadding()
-            .statusBarsPadding()
+            .padding(bottom = paddingValues.calculateBottomPadding())
     ) {
         TitleTopAppBar(
             title = "신고하기",
@@ -163,7 +179,8 @@ private fun ReportScreen(
 
             SpoonyButton(
                 text = "신고하기",
-                onClick = onReportClick,
+                onClick = onOpenDialogClick,
+                enabled = reportButtonEnabled,
                 style = ButtonStyle.Secondary,
                 size = ButtonSize.Xlarge,
                 modifier = Modifier.fillMaxWidth()
@@ -193,7 +210,9 @@ private fun ReportScreenPreview() {
                 reportContext = it
             },
             onBackButtonClick = {},
-            onReportClick = {}
+            paddingValues = PaddingValues(),
+            reportButtonEnabled = false,
+            onOpenDialogClick = {}
         )
     }
 }
diff --git a/app/src/main/java/com/spoony/spoony/presentation/report/ReportState.kt b/app/src/main/java/com/spoony/spoony/presentation/report/ReportState.kt
@@ -7,5 +7,6 @@ import kotlinx.collections.immutable.toImmutableList
 data class ReportState(
     val reportOptions: ImmutableList<ReportOption> = ReportOption.entries.toImmutableList(),
     val selectedReportOption: ReportOption = ReportOption.ADVERTISEMENT,
-    val reportContext: String = ""
+    val reportContext: String = "",
+    val reportButtonEnabled: Boolean = false
 )
diff --git a/app/src/main/java/com/spoony/spoony/presentation/report/ReportViewModel.kt b/app/src/main/java/com/spoony/spoony/presentation/report/ReportViewModel.kt
@@ -9,7 +9,7 @@ import kotlinx.coroutines.flow.StateFlow
 
 @HiltViewModel
 class ReportViewModel @Inject constructor() : ViewModel() {
-    var _state: MutableStateFlow<ReportState> = MutableStateFlow(ReportState())
+    private var _state: MutableStateFlow<ReportState> = MutableStateFlow(ReportState())
     val state: StateFlow<ReportState>
         get() = _state
 
@@ -19,5 +19,13 @@ class ReportViewModel @Inject constructor() : ViewModel() {
 
     fun updateReportContext(newContext: String) {
         _state.value = _state.value.copy(reportContext = newContext)
+        when (isValidLength(newContext)) {
+            true -> _state.value = _state.value.copy(reportButtonEnabled = true)
+            false -> _state.value = _state.value.copy(reportButtonEnabled = false)
+        }
+    }
+
+    private fun isValidLength(input: String, minLength: Int = 1, maxLength: Int = 300): Boolean {
+        return input.length in minLength..maxLength
     }
 }
diff --git a/app/src/main/java/com/spoony/spoony/presentation/report/component/ReportCompleteDialog.kt b/app/src/main/java/com/spoony/spoony/presentation/report/component/ReportCompleteDialog.kt
@@ -0,0 +1,28 @@
+package com.spoony.spoony.presentation.report.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.spoony.spoony.core.designsystem.component.dialog.SingleButtonDialog
+import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme
+
+@Composable
+fun ReportCompleteDialog(
+    onClick: () -> Unit
+) {
+    SingleButtonDialog(
+        message = "신고가 접수되었어요",
+        text = "확인",
+        onClick = onClick,
+        onDismiss = {}
+    )
+}
+
+@Preview
+@Composable
+private fun ScoopDialogPreview() {
+    SpoonyAndroidTheme {
+        ReportCompleteDialog(
+            onClick = {}
+        )
+    }
+}
diff --git a/app/src/main/java/com/spoony/spoony/presentation/report/navigation/ReportNavigation.kt b/app/src/main/java/com/spoony/spoony/presentation/report/navigation/ReportNavigation.kt
@@ -1,5 +1,6 @@
 package com.spoony.spoony.presentation.report.navigation
 
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavOptions
@@ -14,9 +15,17 @@ fun NavController.navigateToReport(
     navigate(Report, navOptions)
 }
 
-fun NavGraphBuilder.reportNavGraph() {
+fun NavGraphBuilder.reportNavGraph(
+    navigateUp: () -> Unit,
+    navigateToExplore: () -> Unit,
+    paddingValues: PaddingValues
+) {
     composable<Report> {
-        ReportRoute()
+        ReportRoute(
+            navigateUp = navigateUp,
+            navigateToExplore = navigateToExplore,
+            paddingValues = paddingValues
+        )
     }
 }