[Feature] 그룹 수정 ui 로직 구현

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/view/confirm/ConfirmButton.kt

@@ -4,6 +4,7 @@ import ac.dnd.bookkeeping.android.presentation.common.theme.Body1
 import ac.dnd.bookkeeping.android.presentation.common.theme.Caption2
 import ac.dnd.bookkeeping.android.presentation.common.theme.Gray000
 import ac.dnd.bookkeeping.android.presentation.common.theme.Gray300
+import ac.dnd.bookkeeping.android.presentation.common.theme.Gray400
 import ac.dnd.bookkeeping.android.presentation.common.theme.Gray700
 import ac.dnd.bookkeeping.android.presentation.common.theme.Gray800
 import ac.dnd.bookkeeping.android.presentation.common.theme.Headline2
@@ -21,6 +22,7 @@ import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -30,6 +32,7 @@ fun ConfirmButton(
     modifier: Modifier = Modifier,
     properties: ConfirmButtonProperties,
     isEnabled: Boolean = true,
+    enableBackgroundColor: Color = Gray400,
     onClick: () -> Unit = {},
     content: @Composable RowScope.(TextStyle) -> Unit
 ) {
@@ -41,7 +44,7 @@ fun ConfirmButton(
     }
 
     val backgroundColor = when (properties.type) {
-        ConfirmButtonType.Primary -> Primary4
+        ConfirmButtonType.Primary -> if (isEnabled) Primary4 else enableBackgroundColor
         ConfirmButtonType.Secondary -> Gray300
         ConfirmButtonType.Tertiary -> Primary1
         ConfirmButtonType.Outline -> Gray000

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/common/view/textfield/TypingTextField.kt

@@ -80,7 +80,8 @@ fun TypingTextField(
         TypingTextFieldType.LongSentence -> false
     }
 
-    val currentColor = if (isError) Negative else if (isTextFieldFocused) Primary3 else basicBorderColor
+    val currentColor =
+        if (isError) Negative else if (isTextFieldFocused) Primary3 else basicBorderColor
     val currentColorState = animateColorAsState(
         targetValue = currentColor,
         label = "color state"
@@ -105,7 +106,11 @@ fun TypingTextField(
         ) {
             BasicTextField(
                 value = text,
-                onValueChange = onValueChange,
+                onValueChange = {
+                    if (maxTextLength >= it.length) {
+                        onValueChange(it)
+                    }
+                },
                 enabled = isEnabled,
                 modifier = Modifier.fillMaxWidth(),
                 textStyle = Body1.merge(

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/main/home/common/group/add/AddGroupEvent.kt

@@ -1,7 +1,9 @@
 package ac.dnd.bookkeeping.android.presentation.ui.main.home.common.group.add
 
+import ac.dnd.bookkeeping.android.domain.model.feature.group.Group
+
 sealed interface AddGroupEvent {
     sealed interface AddGroup : AddGroupEvent {
-        data object Success : AddGroup
+        data class Success(val group: Group) : AddGroup
     }
 }

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/main/home/common/group/add/AddGroupScreen.kt

@@ -1,8 +1,17 @@
 package ac.dnd.bookkeeping.android.presentation.ui.main.home.common.group.add
 
+import ac.dnd.bookkeeping.android.domain.model.feature.group.Group
 import ac.dnd.bookkeeping.android.presentation.R
-import ac.dnd.bookkeeping.android.presentation.common.theme.Gray200
+import ac.dnd.bookkeeping.android.presentation.common.theme.Body1
+import ac.dnd.bookkeeping.android.presentation.common.theme.Gray000
+import ac.dnd.bookkeeping.android.presentation.common.theme.Gray600
+import ac.dnd.bookkeeping.android.presentation.common.theme.Gray800
 import ac.dnd.bookkeeping.android.presentation.common.theme.Headline2
+import ac.dnd.bookkeeping.android.presentation.common.theme.Headline3
+import ac.dnd.bookkeeping.android.presentation.common.theme.Space12
+import ac.dnd.bookkeeping.android.presentation.common.theme.Space16
+import ac.dnd.bookkeeping.android.presentation.common.theme.Space20
+import ac.dnd.bookkeeping.android.presentation.common.theme.Space8
 import ac.dnd.bookkeeping.android.presentation.common.util.ErrorObserver
 import ac.dnd.bookkeeping.android.presentation.common.util.LaunchedEffectWithLifecycle
 import ac.dnd.bookkeeping.android.presentation.common.util.coroutine.event.EventFlow
@@ -17,17 +26,19 @@ import ac.dnd.bookkeeping.android.presentation.common.view.textfield.TypingTextF
 import ac.dnd.bookkeeping.android.presentation.common.view.textfield.TypingTextFieldType
 import ac.dnd.bookkeeping.android.presentation.ui.main.ApplicationState
 import ac.dnd.bookkeeping.android.presentation.ui.main.rememberApplicationState
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -37,6 +48,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -49,7 +61,7 @@ import kotlinx.coroutines.CoroutineExceptionHandler
 fun AddGroupScreen(
     appState: ApplicationState,
     onDismissRequest: () -> Unit,
-    onResult: () -> Unit,
+    onResult: (Group) -> Unit,
     viewModel: AddGroupViewModel = hiltViewModel()
 ) {
     val model: AddGroupModel = Unit.let {
@@ -73,22 +85,20 @@ fun AddGroupScreen(
 }
 
 @Composable
-@OptIn(ExperimentalMaterialApi::class)
 private fun AddGroupScreen(
     appState: ApplicationState,
     model: AddGroupModel,
     event: EventFlow<AddGroupEvent>,
     intent: (AddGroupIntent) -> Unit,
     handler: CoroutineExceptionHandler,
     onDismissRequest: () -> Unit,
-    onResult: () -> Unit,
+    onResult: (Group) -> Unit,
 ) {
     var text by remember { mutableStateOf("") }
-
     fun addGroup(event: AddGroupEvent.AddGroup) {
         when (event) {
-            AddGroupEvent.AddGroup.Success -> {
-                onResult()
+            is AddGroupEvent.AddGroup.Success -> {
+                onResult(event.group)
                 onDismissRequest()
             }
         }
@@ -106,17 +116,34 @@ private fun AddGroupScreen(
         Column(
             modifier = Modifier
                 .wrapContentHeight()
-                .background(Gray200)
-                .padding(20.dp),
-            horizontalAlignment = Alignment.Start,
-            verticalArrangement = Arrangement.Center
+                .background(Gray000)
+                .padding(horizontal = Space20)
         ) {
-            Spacer(modifier = Modifier.height(16.dp))
+            Spacer(modifier = Modifier.height(Space20))
+            Box(
+                modifier = Modifier
+                    .padding(Space8)
+                    .fillMaxWidth()
+            ) {
+                Image(
+                    painter = painterResource(R.drawable.ic_close),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .align(Alignment.CenterEnd)
+                        .clickable {
+                            onDismissRequest()
+                        }
+                )
+            }
             Text(
                 text = "새 그룹 추가",
-                style = Headline2
+                style = Headline2.merge(
+                    color = Gray800,
+                    fontWeight = FontWeight.SemiBold
+                ),
+                modifier = Modifier.padding(vertical = Space8)
             )
-            Spacer(modifier = Modifier.height(28.dp))
+            Spacer(modifier = Modifier.height(Space20))
             TypingTextField(
                 text = text,
                 textType = TypingTextFieldType.Basic,
@@ -127,24 +154,38 @@ private fun AddGroupScreen(
                 modifier = Modifier.height(48.dp),
                 maxTextLength = 8,
                 trailingIconContent = {
-                    if (text.isNotEmpty()) {
-                        IconButton(
-                            onClick = {
-                                text = ""
-                            }
-                        ) {
-                            Icon(
-                                painter = painterResource(id = R.drawable.ic_close),
-                                contentDescription = null
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Text(
+                            text = "${text.length}/8",
+                            style = Body1.merge(
+                                color = Gray600,
+                                fontWeight = FontWeight.Normal
+                            )
+                        )
+                        Spacer(modifier = Modifier.width(7.dp))
+                        if (text.isNotEmpty()) {
+                            Image(
+                                painter = painterResource(id = R.drawable.ic_close_circle),
+                                contentDescription = null,
+                                modifier = Modifier
+                                    .size(Space20)
+                                    .clickable {
+                                        text = ""
+                                    }
                             )
                         }
+                        Spacer(modifier = Modifier.width(Space16))
                     }
                 }
             )
-            Spacer(modifier = Modifier.height(10.dp))
+            Spacer(modifier = Modifier.height(12.dp))
 
             ConfirmButton(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = Space12),
                 properties = ConfirmButtonProperties(
                     size = ConfirmButtonSize.Xlarge,
                     type = ConfirmButtonType.Primary
@@ -153,13 +194,15 @@ private fun AddGroupScreen(
                 onClick = {
                     intent(AddGroupIntent.OnConfirm(text))
                 }
-            ) { style ->
+            ) {
                 Text(
                     text = "등록",
-                    style = style
+                    style = Headline3.merge(
+                        color = Gray000,
+                        fontWeight = FontWeight.SemiBold
+                    )
                 )
             }
-            Spacer(modifier = Modifier.height(10.dp))
         }
     }
 
@@ -172,10 +215,9 @@ private fun AddGroupScreen(
     }
 }
 
-// TODO : Preview 안보임.
-@Preview
+@Preview(apiLevel = 33)
 @Composable
-fun AddGroupScreenPreview() {
+private fun AddGroupScreenPreview() {
     AddGroupScreen(
         appState = rememberApplicationState(),
         model = AddGroupModel(state = AddGroupState.Init),

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/main/home/common/group/add/AddGroupViewModel.kt

@@ -1,6 +1,7 @@
 package ac.dnd.bookkeeping.android.presentation.ui.main.home.common.group.add
 
 import ac.dnd.bookkeeping.android.domain.model.error.ServerException
+import ac.dnd.bookkeeping.android.domain.model.feature.group.Group
 import ac.dnd.bookkeeping.android.domain.usecase.feature.group.AddGroupUseCase
 import ac.dnd.bookkeeping.android.presentation.common.base.BaseViewModel
 import ac.dnd.bookkeeping.android.presentation.common.base.ErrorEvent
@@ -40,9 +41,18 @@ class AddGroupViewModel @Inject constructor(
             _state.value = AddGroupState.Loading
             addGroupUseCase(
                 name = name
-            ).onSuccess {
+            ).onSuccess { groupId ->
                 _state.value = AddGroupState.Init
-                _event.emit(AddGroupEvent.AddGroup.Success)
+                _event.emit(
+                    AddGroupEvent
+                        .AddGroup
+                        .Success(
+                            Group(
+                                id = groupId,
+                                name = name
+                            )
+                        )
+                )
             }.onFailure { exception ->
                 _state.value = AddGroupState.Init
                 when (exception) {

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/main/home/common/group/edit/EditGroupEvent.kt

@@ -0,0 +1,9 @@
+package ac.dnd.bookkeeping.android.presentation.ui.main.home.common.group.edit
+
+import ac.dnd.bookkeeping.android.domain.model.feature.group.Group
+
+sealed interface EditGroupEvent {
+    sealed interface EditGroup : EditGroupEvent {
+        data class Success(val group: Group) : EditGroup
+    }
+}

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/main/home/common/group/edit/EditGroupIntent.kt

@@ -0,0 +1,8 @@
+package ac.dnd.bookkeeping.android.presentation.ui.main.home.common.group.edit
+
+sealed interface EditGroupIntent {
+    data class OnEdit(
+        val groupId: Long,
+        val name: String
+    ) : EditGroupIntent
+}

presentation/src/main/kotlin/ac/dnd/bookkeeping/android/presentation/ui/main/home/common/group/edit/EditGroupModel.kt

@@ -0,0 +1,10 @@
+package ac.dnd.bookkeeping.android.presentation.ui.main.home.common.group.edit
+
+import ac.dnd.bookkeeping.android.domain.model.feature.group.Group
+import androidx.compose.runtime.Immutable
+
+@Immutable
+class EditGroupModel(
+    val state: EditGroupState,
+    val group: Group
+)