[feat/#24] Progressbar&화면 구조 개편

depromeet · Jan 12, 2024 · 6c8574c · 6c8574c
1 parent 2d4a3b6
commit 6c8574c
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 97 deletions.
diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimAddress.kt b/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimAddress.kt
@@ -25,30 +25,34 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.teumteum.base.component.compose.TeumDivider
 import com.teumteum.base.component.compose.TmMarginVerticalSpacer
+import com.teumteum.base.component.compose.TmScaffold
 import com.teumteum.base.component.compose.theme.TmTypo
 import com.teumteum.base.component.compose.theme.TmtmColorPalette
 import com.teumteum.teumteum.R
 
 @Composable
-fun MoimAddress(viewModel: MoimViewModel) {
+fun MoimAddress(viewModel: MoimViewModel, onClick: () -> Unit) {
     val people by viewModel.title.collectAsState()
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(color = TmtmColorPalette.current.GreyWhite),
-        horizontalAlignment = Alignment.Start,
-        verticalArrangement = Arrangement.Top,
-    ) {
-        CreateMoimTitle(string = stringResource(id = R.string.moim_address_title))
-        TmMarginVerticalSpacer(size = 28)
-        MoimAddress1Column()
-        TmMarginVerticalSpacer(size = 20)
-        MoimAddress2Column()
+    TmScaffold(onClick = {onClick()}) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(color = TmtmColorPalette.current.GreyWhite),
+            horizontalAlignment = Alignment.Start,
+            verticalArrangement = Arrangement.Top,
+        ) {
+            TmMarginVerticalSpacer(size = 48)
+            CreateMoimTitle(string = stringResource(id = R.string.moim_address_title))
+            TmMarginVerticalSpacer(size = 28)
+            MoimAddress1Column()
+            TmMarginVerticalSpacer(size = 20)
+            MoimAddress2Column()
 
-        TeumDivider()
-        MoimCreateBtn(text = stringResource(id = R.string.moim_next_btn), isEnabled = people.isNotEmpty() , viewModel = viewModel)
-        TmMarginVerticalSpacer(size = 24)
+            TeumDivider()
+            MoimCreateBtn(text = stringResource(id = R.string.moim_next_btn), isEnabled = people.isNotEmpty() , viewModel = viewModel)
+            TmMarginVerticalSpacer(size = 24)
 
+        }
     }
 
 }

diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimCreateName.kt b/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimCreateName.kt
@@ -13,27 +13,31 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.teumteum.base.component.compose.TeumDivider
 import com.teumteum.base.component.compose.TmMarginVerticalSpacer
+import com.teumteum.base.component.compose.TmScaffold
 import com.teumteum.base.component.compose.theme.TmTypo
 import com.teumteum.base.component.compose.theme.TmtmColorPalette
 import com.teumteum.teumteum.R
 
 @Composable
-fun MoimCreateName(viewModel: MoimViewModel) {
+fun MoimCreateName(viewModel: MoimViewModel, onClick: () ->Unit) {
     val title by viewModel.title.collectAsState()
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(color = TmtmColorPalette.current.GreyWhite),
-        horizontalAlignment = Alignment.Start,
-        verticalArrangement = Arrangement.Top,
-    ) {
-        CreateMoimTitle(string = stringResource(id = R.string.moim_name_title))
-        TmMarginVerticalSpacer(size = 28)
-        CreateNameContent(viewModel)
-        Spacer(modifier = Modifier.weight(1f))
-        TeumDivider()
-        MoimCreateBtn(text= stringResource(id = R.string.moim_next_btn), viewModel = viewModel, isEnabled = title.length in 2..32)
-        TmMarginVerticalSpacer(size = 24)
+    TmScaffold(onClick = {onClick()}) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(color = TmtmColorPalette.current.GreyWhite),
+            horizontalAlignment = Alignment.Start,
+            verticalArrangement = Arrangement.Top,
+        ) {
+            TmMarginVerticalSpacer(size = 48)
+            CreateMoimTitle(string = stringResource(id = R.string.moim_name_title))
+            TmMarginVerticalSpacer(size = 28)
+            CreateNameContent(viewModel)
+            Spacer(modifier = Modifier.weight(1f))
+            TeumDivider()
+            MoimCreateBtn(text= stringResource(id = R.string.moim_next_btn), viewModel = viewModel, isEnabled = title.length in 2..32)
+            TmMarginVerticalSpacer(size = 24)
+        }
     }
 }
 

diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimCreateTopic.kt b/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimCreateTopic.kt
@@ -34,28 +34,32 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import com.teumteum.base.component.compose.TeumDivider
 import com.teumteum.base.component.compose.TmMarginVerticalSpacer
+import com.teumteum.base.component.compose.TmScaffold
 import com.teumteum.teumteum.R
 import com.teumteum.base.component.compose.theme.TmTypo
 import com.teumteum.base.component.compose.theme.TmtmColorPalette
 
 @Composable
-fun MoimCreateTopic(viewModel: MoimViewModel) {
+fun MoimCreateTopic(viewModel: MoimViewModel, onClick: ()->Unit) {
     val topicIndex = remember { mutableStateOf(-1) }
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(color = TmtmColorPalette.current.GreyWhite),
-        horizontalAlignment = Alignment.Start,
-        verticalArrangement = Arrangement.Top,
-    ) {
-        TmMarginVerticalSpacer(size = 48)
-        CreateMoimTitle(string = stringResource(id = R.string.moim_topic_title))
-        CreateTopicContent(viewModel, topicIndex)
-        Spacer(modifier = Modifier.weight(1f))
-        TeumDivider()
-        MoimCreateBtn(text = stringResource(id = R.string.moim_next_btn), isEnabled = topicIndex.value >=0, viewModel = viewModel)
-        TmMarginVerticalSpacer(size = 24)
+    TmScaffold(onClick = { onClick() }) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(color = TmtmColorPalette.current.GreyWhite),
+            horizontalAlignment = Alignment.Start,
+            verticalArrangement = Arrangement.Top,
+        ) {
+            TmMarginVerticalSpacer(size = 48)
+            CreateMoimTitle(string = stringResource(id = R.string.moim_topic_title))
+            CreateTopicContent(viewModel, topicIndex)
+            Spacer(modifier = Modifier.weight(1f))
+            TeumDivider()
+            MoimCreateBtn(text = stringResource(id = R.string.moim_next_btn), isEnabled = topicIndex.value >=0, viewModel = viewModel)
+            TmMarginVerticalSpacer(size = 24)
+        }
     }
+
 }
 
 @Composable

diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimDateTime.kt b/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimDateTime.kt
@@ -26,6 +26,7 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import com.teumteum.base.component.compose.TeumDivider
 import com.teumteum.base.component.compose.TmMarginVerticalSpacer
+import com.teumteum.base.component.compose.TmScaffold
 import com.teumteum.base.component.compose.theme.TmTypo
 import com.teumteum.base.component.compose.theme.TmtmColorPalette
 import com.teumteum.teumteum.R
@@ -37,28 +38,31 @@ import java.util.Locale
 
 
 @Composable
-fun MoimDateTime(viewModel: MoimViewModel) {
+fun MoimDateTime(viewModel: MoimViewModel, onClick: ()->Unit) {
     val time by viewModel.time.collectAsState()
     val date by viewModel.date.collectAsState()
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(color = TmtmColorPalette.current.GreyWhite),
-        horizontalAlignment = Alignment.Start,
-        verticalArrangement = Arrangement.Top,
-    ) {
-        CreateMoimTitle(string = stringResource(id = R.string.moim_datetime_title))
-        TmMarginVerticalSpacer(size = 28)
-        MoimDateColumn(viewModel)
-        TmMarginVerticalSpacer(size = 20)
-        MoimTimeColumn(viewModel)
-        Spacer(modifier = Modifier.weight(1f))
-        TeumDivider()
-        MoimCreateBtn(
-            text = stringResource(id = R.string.moim_next_btn),
-            viewModel = viewModel,
-            isEnabled = time.isNotEmpty() && date.isNotEmpty())
-        TmMarginVerticalSpacer(size = 24)
+    TmScaffold(onClick = {onClick()}) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(color = TmtmColorPalette.current.GreyWhite),
+            horizontalAlignment = Alignment.Start,
+            verticalArrangement = Arrangement.Top,
+        ) {
+            TmMarginVerticalSpacer(size = 48)
+            CreateMoimTitle(string = stringResource(id = R.string.moim_datetime_title))
+            TmMarginVerticalSpacer(size = 28)
+            MoimDateColumn(viewModel)
+            TmMarginVerticalSpacer(size = 20)
+            MoimTimeColumn(viewModel)
+            Spacer(modifier = Modifier.weight(1f))
+            TeumDivider()
+            MoimCreateBtn(
+                text = stringResource(id = R.string.moim_next_btn),
+                viewModel = viewModel,
+                isEnabled = time.isNotEmpty() && date.isNotEmpty())
+            TmMarginVerticalSpacer(size = 24)
+        }
     }
 }
 

diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimFragment.kt b/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimFragment.kt
@@ -42,12 +42,12 @@ class MoimFragment :
         binding.composeMoim.setContent {
             val screenState by viewModel.screenState.collectAsState()
             when (screenState) {
-                ScreenState.Topic -> MoimCreateTopic(viewModel)
-                ScreenState.Name -> MoimCreateName(viewModel)
-                ScreenState.Introduce -> MoimIntroduce(viewModel = viewModel)
-                ScreenState.DateTime -> MoimDateTime(viewModel)
-                ScreenState.Address -> MoimAddress(viewModel)
-                ScreenState.People -> MoimPeople(viewModel)
+                ScreenState.Topic -> MoimCreateTopic(viewModel) { goFrontScreen() }
+                ScreenState.Name -> MoimCreateName(viewModel) { goFrontScreen() }
+                ScreenState.Introduce -> MoimIntroduce(viewModel) { goFrontScreen()}
+                ScreenState.DateTime -> MoimDateTime(viewModel) { goFrontScreen()}
+                ScreenState.Address -> MoimAddress(viewModel) { goFrontScreen()}
+                ScreenState.People -> MoimPeople(viewModel) { goFrontScreen()}
                 else -> {}
             }
         }
@@ -60,7 +60,7 @@ class MoimFragment :
         }
     }
 
-    private fun goFrontScreen() {
+    fun goFrontScreen() {
         if (viewModel.screenState.value == ScreenState.Topic) {
             findNavController().navigate(R.id.action_moimFragment_to_homeFragment)
             (activity as MainActivity).showBottomNavi()

diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimIntroduce.kt b/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimIntroduce.kt
@@ -49,6 +49,7 @@ import com.teumteum.base.component.compose.TeumDivider
 import com.teumteum.base.component.compose.TmMarginHorizontalSpacer
 import com.teumteum.teumteum.R
 import com.teumteum.base.component.compose.TmMarginVerticalSpacer
+import com.teumteum.base.component.compose.TmScaffold
 import com.teumteum.base.component.compose.TmSnackBar
 import com.teumteum.base.component.compose.theme.TmTypo
 import com.teumteum.base.component.compose.theme.TmtmColorPalette
@@ -57,6 +58,7 @@ import kotlinx.coroutines.delay
 @Composable
 fun MoimIntroduce(
     viewModel: MoimViewModel,
+    onClick: () -> Unit
 ) {
     val introduce by viewModel.introduction.collectAsState()
     val photo by viewModel.imageUri.collectAsState()
@@ -83,16 +85,15 @@ fun MoimIntroduce(
 
     TmSnackBar(snackbarHostState = snackbarHostState)
 
-    Scaffold(
-    ) { innerPadding->
+    TmScaffold(onClick = {onClick()}) {
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(innerPadding)
                 .background(color = TmtmColorPalette.current.GreyWhite),
             horizontalAlignment = Alignment.Start,
             verticalArrangement = Arrangement.Top,
         ) {
+            TmMarginVerticalSpacer(size = 48)
             CreateMoimTitle(string= stringResource(id = R.string.moim_introduce_title))
             TmMarginVerticalSpacer(size = 28)
             MoimIntroColumn(viewModel)

diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimPeople.kt b/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimPeople.kt
@@ -38,32 +38,36 @@ import androidx.compose.ui.unit.dp
 import com.teumteum.base.component.compose.TeumDivider
 import com.teumteum.base.component.compose.TmMarginHorizontalSpacer
 import com.teumteum.base.component.compose.TmMarginVerticalSpacer
+import com.teumteum.base.component.compose.TmScaffold
 import com.teumteum.base.component.compose.theme.TmTypo
 import com.teumteum.base.component.compose.theme.TmtmColorPalette
 import com.teumteum.teumteum.R
 import kotlinx.coroutines.launch
 
 @Composable
-fun MoimPeople(viewModel: MoimViewModel) {
+fun MoimPeople(viewModel: MoimViewModel, onClick: () -> Unit) {
     val people by viewModel.people.collectAsState()
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(color = TmtmColorPalette.current.GreyWhite),
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Top,
-    ) {
-        CreateMoimTitle(string = stringResource(id = R.string.moim_people_title))
-        TmMarginVerticalSpacer(size = 28)
+    TmScaffold(onClick = { onClick()}) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(color = TmtmColorPalette.current.GreyWhite),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Top,
+        ) {
+            TmMarginVerticalSpacer(size = 48)
+            CreateMoimTitle(string = stringResource(id = R.string.moim_people_title))
+            TmMarginVerticalSpacer(size = 28)
 
-        PeopleContent(viewModel)
-        TmMarginVerticalSpacer(size = 39)
-        PeopleSystemText()
+            PeopleContent(viewModel)
+            TmMarginVerticalSpacer(size = 39)
+            PeopleSystemText()
 
-        Spacer(modifier= Modifier.weight(1f))
-        TeumDivider()
-        MoimCreateBtn(text = stringResource(id = R.string.moim_next_btn), isEnabled = people in 3..6, viewModel = viewModel)
-        TmMarginVerticalSpacer(size = 24)
+            Spacer(modifier= Modifier.weight(1f))
+            TeumDivider()
+            MoimCreateBtn(text = stringResource(id = R.string.moim_next_btn), isEnabled = people in 3..6, viewModel = viewModel)
+            TmMarginVerticalSpacer(size = 24)
+        }
     }
 }
 

diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimViewModel.kt b/app/src/main/java/com/teumteum/teumteum/presentation/moim/MoimViewModel.kt
@@ -31,7 +31,7 @@ class MoimViewModel @Inject constructor(
     private val _screenState = MutableStateFlow<ScreenState>(ScreenState.Topic)
     val screenState: StateFlow<ScreenState> = _screenState.asStateFlow()
 
-    private val _currentStep = MutableStateFlow<Int>(1)
+    private val _currentStep = MutableStateFlow<Int>(0)
     val currentStep: StateFlow<Int> = _currentStep.asStateFlow()
 
     private val _topic = MutableStateFlow<TopicType?>(null)
@@ -201,7 +201,7 @@ class MoimViewModel @Inject constructor(
 
     fun goToNextStep() {
         val nextStep = _currentStep.value + 1
-        _currentStep.value = nextStep.coerceIn(1, 6)
+        _currentStep.value = nextStep.coerceIn(0, 5)
     }
 
     fun goToPreviousStep() {

diff --git a/app/src/main/res/layout/fragment_moim.xml b/app/src/main/res/layout/fragment_moim.xml
@@ -15,14 +15,17 @@
             android:id="@+id/compose_moim"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            app:layout_constraintTop_toTopOf="@id/progress_bar"/>
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"/>
 
         <ProgressBar
             android:id="@+id/progress_bar"
             style="@style/Widget.AppCompat.ProgressBar.Horizontal"
             android:visibility="visible"
             android:layout_width="0dp"
             android:layout_height="4dp"
+            android:layout_marginTop="56dp"
             android:max="700"
             android:progress="100"
             android:progressDrawable="@drawable/progress_bar_color"

diff --git a/core/base/src/main/java/com/teumteum/base/component/compose/TmScaffold.kt b/core/base/src/main/java/com/teumteum/base/component/compose/TmScaffold.kt
@@ -24,7 +24,7 @@ import com.teumteum.base.R
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun TmScaffold(
-    topbarText: String,
+    topbarText: String = "",
     onClick: (() -> Unit)? = null,
     content: @Composable (PaddingValues) -> Unit,
 ) {