FEAT: 프로필 설정 필터 버튼 구현 (#101)

presentation/src/main/java/com/kusitms/presentation/model/profile/edit/ProfileEditUiState.kt

@@ -0,0 +1,5 @@
+package com.kusitms.presentation.model.profile.edit
+
+data class ProfileEditUiState(
+    val currentSelectedProfileFilter: String = "",
+)

presentation/src/main/java/com/kusitms/presentation/model/profile/edit/ProfileEditViewModel.kt

@@ -0,0 +1,28 @@
+package com.kusitms.presentation.model.profile.edit
+
+import androidx.lifecycle.ViewModel
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import javax.inject.Inject
+
+@HiltViewModel
+class ProfileEditViewModel @Inject constructor(
+
+) : ViewModel() {
+    private val _uiState = MutableStateFlow(ProfileEditUiState())
+    val uiState: StateFlow<ProfileEditUiState> = _uiState.asStateFlow()
+
+    private val _expanded = MutableStateFlow(false)
+    val expended: StateFlow<Boolean> = _expanded.asStateFlow()
+
+    fun changeSelectProfileFilter(category: String) {
+        _uiState.value = _uiState.value.copy(currentSelectedProfileFilter = category)
+        _expanded.value = false
+    }
+
+    fun toggleExpanded() {
+        _expanded.value = !_expanded.value
+    }
+}

presentation/src/main/java/com/kusitms/presentation/model/profile/edit/ProfileFilterList.kt

@@ -0,0 +1,11 @@
+package com.kusitms.presentation.model.profile.edit
+
+data class ProfileFilterList(
+    val id: Int,
+    val name: String,
+)
+
+val categories = listOf(
+    ProfileFilterList(1, name = "기본 프로필"),
+    ProfileFilterList(2, name = "추가 프로필"),
+)

presentation/src/main/java/com/kusitms/presentation/navigation/NavGraph.kt

@@ -2,7 +2,6 @@ package com.kusitms.presentation.navigation
 
 import ProfileDetailScreen
 import android.os.Build
-import androidx.annotation.RequiresApi
 import androidx.compose.animation.AnimatedContentScope
 import androidx.compose.animation.AnimatedContentTransitionScope
 import androidx.compose.animation.EnterTransition
@@ -389,7 +388,9 @@ fun MainNavigation() {
                 }
 
                 kusitmsComposableWithAnimation(NavRoutes.ProfileEdit.route) {
-                    ProfileEditScreen()
+                    ProfileEditScreen(
+                        onBack = { navController.navigateUp() }
+                    )
                 }
 
 

presentation/src/main/java/com/kusitms/presentation/ui/profile/edit/ProfileEditScreen.kt

@@ -2,26 +2,57 @@ package com.kusitms.presentation.ui.profile.edit
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.kusitms.presentation.R
+import com.kusitms.presentation.common.ui.KusitmsMarginVerticalSpacer
 import com.kusitms.presentation.common.ui.KusitsmTopBarBackTextWithIcon
 import com.kusitms.presentation.common.ui.theme.KusitmsColorPalette
 import com.kusitms.presentation.common.ui.theme.KusitmsTypo
+import com.kusitms.presentation.model.profile.edit.ProfileEditViewModel
+import com.kusitms.presentation.model.profile.edit.ProfileFilterList
+import com.kusitms.presentation.model.profile.edit.categories
+import com.kusitms.presentation.ui.ImageVector.icons.KusitmsIcons
+import com.kusitms.presentation.ui.ImageVector.icons.kusitmsicons.ArrowDown
+import kotlinx.coroutines.ExperimentalCoroutinesApi
 
+@OptIn(ExperimentalCoroutinesApi::class)
 @Composable
 fun ProfileEditScreen(
+    viewModel: ProfileEditViewModel = hiltViewModel(),
+    onBack: () -> Unit,
 ) {
+    val expanded by viewModel.expended.collectAsStateWithLifecycle()
+
     Column {
         KusitsmTopBarBackTextWithIcon(
             text = stringResource(id = R.string.profile_edit_toolbar),
-            onBackClick = {},
+            onBackClick = {
+                          onBack()
+            },
         ) {
             Text(
                 text = stringResource(id = R.string.profile_edit_modify),
@@ -32,6 +63,31 @@ fun ProfileEditScreen(
                 }
             )
         }
+        KusitmsMarginVerticalSpacer(size = 32)
+        Card(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp)
+                .clickable {
+                    viewModel.toggleExpanded()
+                },
+            shape = RoundedCornerShape(8.dp),
+            colors = CardDefaults.cardColors(
+                containerColor = KusitmsColorPalette.current.Grey700,
+                contentColor = KusitmsColorPalette.current.Grey100
+            )
+        ) {
+            ProfileFilterButton(
+                expanded = expanded,
+                viewModel = viewModel
+            )
+            if (expanded) {
+                AllProfileFilterList(
+                    partNameList = categories,
+                    viewModel = viewModel
+                )
+            }
+        }
         LazyColumn(
             modifier = Modifier
                 .fillMaxSize()
@@ -40,11 +96,80 @@ fun ProfileEditScreen(
 
         }
     }
+}
+
+
+@OptIn(ExperimentalCoroutinesApi::class)
+@Composable
+private fun ProfileFilterButton(
+    expanded: Boolean,
+    viewModel: ProfileEditViewModel,
+) {
+    val uiState by viewModel.uiState.collectAsState()
+
+
+    Row(
+        modifier = Modifier
+            .height(48.dp)
+            .fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Text(
+            text = uiState.currentSelectedProfileFilter.takeIf { it.isNotEmpty() }
+                ?: stringResource(id = R.string.profile_edit_basic),
+            style = KusitmsTypo.current.Text_Medium,
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp),
+            color = KusitmsColorPalette.current.Grey100,
+        )
+        Icon(
+            imageVector = KusitmsIcons.ArrowDown,
+            contentDescription = stringResource(id = R.string.profile_edit_filter),
+            tint = KusitmsColorPalette.current.Grey400,
+            modifier = Modifier
+                .rotate(if (expanded) 180f else 0f)
+                .padding(horizontal = 16.dp)
+        )
+    }
+}
+
 
+
+@Composable
+fun AllProfileFilterList(
+    partNameList: List<ProfileFilterList>,
+    viewModel: ProfileEditViewModel,
+    modifier: Modifier = Modifier,
+) {
+    Column(modifier = modifier) {
+        partNameList.forEach { profile ->
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 16.dp, vertical = 16.dp)
+                    .clickable {
+                        viewModel.changeSelectProfileFilter(profile.name)
+
+                    },
+                contentAlignment = Alignment.CenterStart
+            ) {
+                Text(
+                    text = profile.name,
+                    style = KusitmsTypo.current.Text_Medium,
+                    color = KusitmsColorPalette.current.Grey400,
+                )
+            }
+        }
+    }
 }
 
+
+
+
 @Preview(showBackground = true, showSystemUi = true)
 @Composable
 fun ProfileEditScreenPreview() {
-    ProfileEditScreen()
+    ProfileEditScreen(
+        onBack = {}
+    )
 }

presentation/src/main/res/values/strings.xml

@@ -232,6 +232,9 @@
     <!-- ProfileEdit-->
     <string name="profile_edit_toolbar">프로필 설정</string>
     <string name="profile_edit_modify">수정</string>
+    <string name="profile_edit_filter">프로필 선택 필터</string>
+    <string name="profile_edit_basic">기본 프로필</string>
+    <string name="profile_edit_add">추가 프로필</string>