[refactor/#21] tag 아이템 수정

SOPT-all · Jan 16, 2025 · bef10ca · bef10ca
1 parent 73c5ca1
commit bef10ca
Showing 1 changed file with 65 additions and 35 deletions.
diff --git a/app/src/main/java/org/memento/ui/MementoTagBottomSheetItem.kt b/app/src/main/java/org/memento/ui/MementoTagBottomSheetItem.kt
@@ -7,8 +7,11 @@ 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.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -38,33 +41,33 @@ fun MementoTagBottomSheetItem(
 ) {
     Row(
         modifier =
-            Modifier
-                .fillMaxWidth()
-                .background(
-                    color = if (isActive) activeBgColor else darkModeColors.gray09,
-                )
-                .noRippleClickable {
-                    onClick()
-                }
-                .padding(vertical = 7.dp, horizontal = 12.dp),
+        Modifier
+            .fillMaxWidth()
+            .background(
+                color = if (isActive) activeBgColor else darkModeColors.gray09,
+            )
+            .noRippleClickable {
+                onClick()
+            }
+            .padding(vertical = 7.dp, horizontal = 12.dp),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.spacedBy(10.dp),
     ) {
         Box(
             modifier =
-                Modifier
-                    .size(10.dp)
-                    .background(
-                        color = tagColor,
-                        shape = CircleShape,
-                    ),
+            Modifier
+                .size(10.dp)
+                .background(
+                    color = tagColor,
+                    shape = CircleShape,
+                ),
         )
         Text(
             text = option,
             style =
-                MementoTheme.typography.body_r_16.copy(
-                    color = if (isActive) activeContentColor else darkModeColors.gray07,
-                ),
+            MementoTheme.typography.body_r_16.copy(
+                color = if (isActive) activeContentColor else darkModeColors.gray07,
+            ),
         )
     }
 }
@@ -77,21 +80,36 @@ fun TagSelectorContent(
 
     val options = getDummyTagData()
 
-    options.forEachIndexed { index, option ->
-        MementoTagBottomSheetItem(
-            option = option.text,
-            isActive = activeIndex == index,
-            activeBgColor = darkModeColors.gray08,
-            activeContentColor = darkModeColors.gray02,
-            tagColor = changeHexToColor(option.color),
-            onClick = {
-                if (activeIndex != index) {
-                    activeIndex = index
-                    onTagSelected(option.color, option.text)
-                }
-            },
-        )
+    var itemHeight by remember { mutableIntStateOf(0) }
+    val maxHeight = if (itemHeight > 0) (itemHeight * 5.5).dp else 25.dp
+
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .heightIn(maxHeight)
+    ) {
+        LazyColumn(
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            itemsIndexed(options) { index, option ->
+                MementoTagBottomSheetItem(
+                    option = option.text,
+                    isActive = activeIndex == index,
+                    activeBgColor = darkModeColors.gray08,
+                    activeContentColor = darkModeColors.gray02,
+                    tagColor = changeHexToColor(option.color),
+                    onClick = {
+                        if (activeIndex != index) {
+                            activeIndex = index
+                            onTagSelected(option.color, option.text)
+                        }
+                    },
+                )
+            }
+        }
     }
+
 }
 
 fun getDummyTagData(): List<ColorTagData> {
@@ -100,6 +118,18 @@ fun getDummyTagData(): List<ColorTagData> {
         ColorTagData("SOPT", "#33FF57"),
         ColorTagData("Fitness", "#3357FF"),
         ColorTagData("Project", "#FFD700"),
+        ColorTagData("Untitled", "#FF5733"),
+        ColorTagData("SOPT", "#33FF57"),
+        ColorTagData("Fitness", "#3357FF"),
+        ColorTagData("Project", "#FFD700"),
+        ColorTagData("Untitled", "#FF5733"),
+        ColorTagData("SOPT", "#33FF57"),
+        ColorTagData("Fitness", "#3357FF"),
+        ColorTagData("Project", "#FFD700"),
+        ColorTagData("Untitled", "#FF5733"),
+        ColorTagData("SOPT", "#33FF57"),
+        ColorTagData("Fitness", "#3357FF"),
+        ColorTagData("Project", "#FFD700"),
     )
 }
 
@@ -108,9 +138,9 @@ fun getDummyTagData(): List<ColorTagData> {
 fun MementoTagBottomSheetItemPreview() {
     Column(
         modifier =
-            Modifier
-                .fillMaxSize()
-                .padding(16.dp),
+        Modifier
+            .fillMaxSize()
+            .padding(16.dp),
         verticalArrangement = Arrangement.spacedBy(space = 5.dp),
     ) {
         TagSelectorContent(