[#284] 그룹 홈 화면 - 그룹보기 정렬 추가

presentation/src/main/java/com/mashup/gabbangzip/sharedalbum/presentation/ui/main/grouphome/GroupHomeScreen.kt

@@ -10,6 +10,7 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -20,6 +21,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.LazyColumn
@@ -42,6 +44,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.painter.ColorPainter
@@ -59,6 +62,7 @@ import com.mashup.gabbangzip.sharedalbum.presentation.theme.Gray0
 import com.mashup.gabbangzip.sharedalbum.presentation.theme.Gray100
 import com.mashup.gabbangzip.sharedalbum.presentation.theme.Gray20
 import com.mashup.gabbangzip.sharedalbum.presentation.theme.Gray40
+import com.mashup.gabbangzip.sharedalbum.presentation.theme.Gray50
 import com.mashup.gabbangzip.sharedalbum.presentation.theme.Gray60
 import com.mashup.gabbangzip.sharedalbum.presentation.theme.Gray80
 import com.mashup.gabbangzip.sharedalbum.presentation.theme.Malibu
@@ -76,6 +80,7 @@ import com.mashup.gabbangzip.sharedalbum.presentation.ui.main.grouphome.model.Cl
 import com.mashup.gabbangzip.sharedalbum.presentation.ui.main.grouphome.model.FilterTag
 import com.mashup.gabbangzip.sharedalbum.presentation.ui.main.grouphome.model.GroupHomeUiState
 import com.mashup.gabbangzip.sharedalbum.presentation.ui.main.grouphome.model.GroupInfo
+import com.mashup.gabbangzip.sharedalbum.presentation.ui.main.grouphome.model.ViewType
 import com.mashup.gabbangzip.sharedalbum.presentation.ui.model.GroupKeyword
 import com.mashup.gabbangzip.sharedalbum.presentation.ui.model.GroupStatusType
 import com.mashup.gabbangzip.sharedalbum.presentation.ui.model.PicPhotoFrame
@@ -112,6 +117,7 @@ fun GroupHomeScreen(
                     .padding(innerPadding),
                 groupList = groupHomeUiState.groupList,
                 filterTagList = groupHomeUiState.filterTagList,
+                currentViewType = groupHomeUiState.viewType,
                 onClickGroupDetail = onClickGroupDetail,
                 onClickEventMake = onClickEventMake,
                 onClickMyPage = onClickMyPage,
@@ -121,6 +127,7 @@ fun GroupHomeScreen(
                 onNavigateVote = onNavigateVote,
                 onNavigateGallery = onNavigateGallery,
                 onClickFilterTag = viewModel::clickedFilterTag,
+                onClickViewType = viewModel::clickedViewType,
             )
         }
 
@@ -142,6 +149,7 @@ fun GroupHomeScreen(
     modifier: Modifier,
     groupList: ImmutableList<GroupInfo>,
     filterTagList: ImmutableList<FilterTag>,
+    currentViewType: ViewType,
     onClickGroupDetail: (id: Long) -> Unit,
     onClickEventMake: (Long) -> Unit,
     onClickMyPage: () -> Unit,
@@ -151,6 +159,7 @@ fun GroupHomeScreen(
     onNavigateGallery: (eventId: Long) -> Unit,
     onNavigateVote: (eventId: Long) -> Unit,
     onClickFilterTag: (FilterTag) -> Unit,
+    onClickViewType: (ViewType) -> Unit,
 ) {
     Box {
         Column(
@@ -164,13 +173,23 @@ fun GroupHomeScreen(
                 rightIconClicked = onClickMyPage,
             )
 
-            TagFilter(
+            Box(
                 modifier = Modifier
                     .fillMaxWidth()
                     .wrapContentHeight(),
-                filterTagList = filterTagList,
-                onTagClicked = onClickFilterTag,
-            )
+            ) {
+                TagFilter(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .wrapContentHeight(),
+                    filterTagList = filterTagList,
+                    onTagClicked = onClickFilterTag,
+                )
+                ViewTypeWithGradient(
+                    currentViewType = currentViewType,
+                    onClickViewType = onClickViewType,
+                )
+            }
 
             Spacer(
                 modifier = Modifier
@@ -180,33 +199,23 @@ fun GroupHomeScreen(
                     .background(Gray20),
             )
 
-            LazyColumn {
-                itemsIndexed(groupList) { index, groupInfo ->
-                    GroupContainer(
-                        modifier = if (index == 0) {
-                            Modifier.padding(top = 24.dp)
-                        } else if (index == groupList.lastIndex) {
-                            Modifier.padding(bottom = 16.dp)
-                        } else {
-                            Modifier
-                        },
-                        groupInfo = groupInfo,
-                        onGroupDetailClick = onClickGroupDetail,
-                        onClickSendFcmButton = onClickSendFcmButton,
+            when (currentViewType) {
+                ViewType.List -> {
+                    GroupContainerList(
+                        groupList = groupList,
+                        onClickGroupDetail = onClickGroupDetail,
                         onClickEventMake = onClickEventMake,
-                        onNavigateVote = onNavigateVote,
+                        onClickSendFcmButton = onClickSendFcmButton,
                         onNavigateGallery = onNavigateGallery,
+                        onNavigateVote = onNavigateVote,
                     )
+                }
 
-                    if (groupList.lastIndex != index) {
-                        Spacer(
-                            modifier = Modifier
-                                .padding(top = 46.dp, bottom = 24.dp)
-                                .height(8.dp)
-                                .fillMaxWidth()
-                                .background(color = Gray20),
-                        )
-                    }
+                ViewType.Grid -> {
+                    GroupContainerGrid(
+                        groupList = groupList,
+                        onClickGroupDetail = onClickGroupDetail,
+                    )
                 }
             }
         }
@@ -221,6 +230,154 @@ fun GroupHomeScreen(
     }
 }
 
+@Composable
+private fun BoxScope.ViewTypeWithGradient(
+    currentViewType: ViewType,
+    onClickViewType: (ViewType) -> Unit,
+) {
+    Box(
+        modifier = Modifier
+            .width(100.dp)
+            .wrapContentHeight()
+            .background(
+                brush = Brush.linearGradient(
+                    listOf(
+                        Color.Transparent,
+                        Gray0,
+                        Gray0,
+                    ),
+                ),
+            )
+            .align(Alignment.CenterEnd),
+    ) {
+        ViewTypeButton(
+            modifier = Modifier
+                .noRippleClickable {
+                    when (currentViewType) {
+                        ViewType.List -> onClickViewType(ViewType.Grid)
+                        ViewType.Grid -> onClickViewType(ViewType.List)
+                    }
+                }
+                .padding(top = 11.dp, bottom = 11.dp, end = 20.dp)
+                .wrapContentSize()
+                .align(Alignment.CenterEnd),
+            currentViewType = currentViewType,
+        )
+    }
+}
+
+@Composable
+private fun ViewTypeButton(
+    modifier: Modifier,
+    currentViewType: ViewType,
+) {
+    StableImage(
+        modifier = modifier,
+        drawableResId = when (currentViewType) {
+            ViewType.List -> R.drawable.align_grid
+            ViewType.Grid -> R.drawable.align_list
+        },
+        contentDescription = stringResource(
+            id = when (currentViewType) {
+                ViewType.List -> R.string.align_grid
+                ViewType.Grid -> R.string.align_list
+            },
+        ),
+        colorFilter = ColorFilter.tint(color = Gray50),
+    )
+}
+
+@Composable
+private fun GroupContainerList(
+    groupList: ImmutableList<GroupInfo>,
+    onClickGroupDetail: (id: Long) -> Unit,
+    onClickEventMake: (Long) -> Unit,
+    onClickSendFcmButton: (eventId: Long) -> Unit,
+    onNavigateGallery: (eventId: Long) -> Unit,
+    onNavigateVote: (eventId: Long) -> Unit,
+) {
+    LazyColumn {
+        itemsIndexed(groupList) { index, groupInfo ->
+            GroupContainer(
+                modifier = if (index == 0) {
+                    Modifier.padding(top = 24.dp)
+                } else if (index == groupList.lastIndex) {
+                    Modifier.padding(bottom = 16.dp)
+                } else {
+                    Modifier
+                },
+                groupInfo = groupInfo,
+                onGroupDetailClick = onClickGroupDetail,
+                onClickSendFcmButton = onClickSendFcmButton,
+                onClickEventMake = onClickEventMake,
+                onNavigateVote = onNavigateVote,
+                onNavigateGallery = onNavigateGallery,
+            )
+
+            if (groupList.lastIndex != index) {
+                Spacer(
+                    modifier = Modifier
+                        .padding(top = 46.dp, bottom = 24.dp)
+                        .height(8.dp)
+                        .fillMaxWidth()
+                        .background(color = Gray20),
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun GroupContainerGrid(
+    groupList: ImmutableList<GroupInfo>,
+    onClickGroupDetail: (id: Long) -> Unit,
+) {
+    LazyVerticalGrid(
+        columns = GridCells.Fixed(2),
+        contentPadding = PaddingValues(vertical = 18.dp, horizontal = 16.dp),
+        verticalArrangement = Arrangement.spacedBy(18.dp),
+        horizontalArrangement = Arrangement.spacedBy(21.dp),
+    ) {
+        items(items = groupList) { groupInfo ->
+            GroupContainerGridItem(
+                groupInfo = groupInfo,
+                onClickGroupDetail = onClickGroupDetail,
+            )
+        }
+    }
+}
+
+@Composable
+private fun GroupContainerGridItem(
+    groupInfo: GroupInfo,
+    onClickGroupDetail: (id: Long) -> Unit,
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .wrapContentHeight()
+            .noRippleClickable { onClickGroupDetail(groupInfo.id) },
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        FrontCardImage(
+            modifier = Modifier.fillMaxSize(),
+            frameResId = groupInfo.frontImageFrame.frameResId,
+            imageUrl = groupInfo.cardFrontImageUrl,
+            backgroundColor = Gray0,
+        )
+        Text(
+            text = groupInfo.name,
+            style = PicTypography.headBold16,
+            color = Gray80,
+        )
+        GroupTag(
+            modifier = Modifier.fillMaxWidth(),
+            keyword = groupInfo.keyword,
+            statusDesc = groupInfo.statusDescription,
+        )
+    }
+}
+
 @Composable
 private fun TagFilter(
     modifier: Modifier,
@@ -230,7 +387,7 @@ private fun TagFilter(
     LazyRow(
         modifier = modifier,
         horizontalArrangement = Arrangement.spacedBy(6.dp),
-        contentPadding = PaddingValues(horizontal = 10.dp),
+        contentPadding = PaddingValues(start = 10.dp, end = 70.dp),
     ) {
         itemsIndexed(filterTagList, key = { _, item -> item.name }) { _, tagInfo ->
             PicTag(
@@ -747,6 +904,7 @@ private fun GroupHomeScreenPreview() {
                 ),
             ),
         ),
+        currentViewType = ViewType.List,
         onClickGroupDetail = {},
         onClickEventMake = {},
         onClickMyPage = {},
@@ -756,5 +914,6 @@ private fun GroupHomeScreenPreview() {
         onNavigateGallery = {},
         onNavigateVote = {},
         onClickFilterTag = {},
+        onClickViewType = {},
     )
 }

presentation/src/main/java/com/mashup/gabbangzip/sharedalbum/presentation/ui/main/grouphome/GroupHomeViewModel.kt

@@ -6,6 +6,7 @@ import com.mashup.gabbangzip.sharedalbum.domain.usecase.group.GetGroupListUseCas
 import com.mashup.gabbangzip.sharedalbum.presentation.R
 import com.mashup.gabbangzip.sharedalbum.presentation.ui.main.grouphome.model.FilterTag
 import com.mashup.gabbangzip.sharedalbum.presentation.ui.main.grouphome.model.GroupHomeUiState
+import com.mashup.gabbangzip.sharedalbum.presentation.ui.main.grouphome.model.ViewType
 import com.mashup.gabbangzip.sharedalbum.presentation.ui.main.grouphome.model.toFilterTag
 import com.mashup.gabbangzip.sharedalbum.presentation.ui.main.grouphome.model.toUiModel
 import com.mashup.gabbangzip.sharedalbum.presentation.ui.model.GroupKeyword
@@ -26,8 +27,9 @@ class GroupHomeViewModel @Inject constructor(
 ) : ViewModel() {
     private val groupUiState = getGroupListUseCase()
     private val selectedTagFlow = MutableStateFlow(FilterTag.getTotalFilter())
+    private val viewTypeFlow = MutableStateFlow(ViewType.List)
 
-    val uiState = groupUiState.combine(selectedTagFlow) { groupList, selectedTag ->
+    val uiState = combine(groupUiState, selectedTagFlow, viewTypeFlow) { groupList, selectedTag, viewType ->
         if (groupList.isEmpty()) {
             GroupHomeUiState.NoGroup
         } else {
@@ -50,6 +52,7 @@ class GroupHomeViewModel @Inject constructor(
                             .toFilterTag(isSelected = it.keyword == selectedTag.name)
                     }.distinct(),
                 ),
+                viewType = viewType,
             )
         }
     }.catch {
@@ -72,4 +75,10 @@ class GroupHomeViewModel @Inject constructor(
             selectedTagFlow.emit(filterTag)
         }
     }
+
+    fun clickedViewType(viewType: ViewType) {
+        viewModelScope.launch {
+            viewTypeFlow.emit(viewType)
+        }
+    }
 }

presentation/src/main/java/com/mashup/gabbangzip/sharedalbum/presentation/ui/main/grouphome/model/GroupHomeUiState.kt

@@ -10,6 +10,8 @@ sealed class GroupHomeUiState {
     data class GroupList(
         val groupList: ImmutableList<GroupInfo> = ImmutableList(emptyList()),
         val filterTagList: ImmutableList<FilterTag> = ImmutableList(emptyList()),
+        val viewType: ViewType = ViewType.List,
     ) : GroupHomeUiState()
+
     data class Error(@StringRes val errorMessage: Int) : GroupHomeUiState()
 }

presentation/src/main/java/com/mashup/gabbangzip/sharedalbum/presentation/ui/main/grouphome/model/ViewType.kt

@@ -0,0 +1,5 @@
+package com.mashup.gabbangzip.sharedalbum.presentation.ui.main.grouphome.model
+
+enum class ViewType {
+    List, Grid
+}

presentation/src/main/res/drawable/align_grid.xml

@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="18dp"
+    android:viewportWidth="18"
+    android:viewportHeight="18">
+  <path
+      android:pathData="M2,0L6,0A2,2 0,0 1,8 2L8,6A2,2 0,0 1,6 8L2,8A2,2 0,0 1,0 6L0,2A2,2 0,0 1,2 0z"
+      android:fillColor="#D9D9D9"/>
+  <path
+      android:pathData="M12,0L16,0A2,2 0,0 1,18 2L18,6A2,2 0,0 1,16 8L12,8A2,2 0,0 1,10 6L10,2A2,2 0,0 1,12 0z"
+      android:fillColor="#D9D9D9"/>
+  <path
+      android:pathData="M2,10L6,10A2,2 0,0 1,8 12L8,16A2,2 0,0 1,6 18L2,18A2,2 0,0 1,0 16L0,12A2,2 0,0 1,2 10z"
+      android:fillColor="#D9D9D9"/>
+  <path
+      android:pathData="M12,10L16,10A2,2 0,0 1,18 12L18,16A2,2 0,0 1,16 18L12,18A2,2 0,0 1,10 16L10,12A2,2 0,0 1,12 10z"
+      android:fillColor="#D9D9D9"/>
+</vector>