[refactor]: 장르 칩 UI 깨짐 수정 (#127)

Author: rbqks529

app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipRow.kt

@@ -1,18 +1,24 @@
 package com.texthip.thip.ui.common.buttons
 
+import android.annotation.SuppressLint
 import androidx.compose.foundation.layout.Arrangement
+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.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.texthip.thip.ui.theme.ThipTheme
 
+@SuppressLint("ConfigurationScreenWidthHeight")
 @Composable
 fun GenreChipRow(
     modifier: Modifier = Modifier.width(4.dp),
@@ -21,35 +27,95 @@ fun GenreChipRow(
     onSelect: (Int) -> Unit,
     horizontalArrangement: Arrangement.Horizontal = Arrangement.Center
 ) {
-    Row(
-        modifier = Modifier.fillMaxWidth(),
-        horizontalArrangement = horizontalArrangement
-    ) {
-        genres.forEachIndexed { idx, genre ->
-            OptionChipButton(
-                modifier = Modifier
-                    .clip(RoundedCornerShape(20.dp)), // 버튼 모양에 맞게 클리핑
-                text = genre,
-                isFilled = true,
-                isSelected = selectedIndex == idx,
-                onClick = {
-                    if (selectedIndex == idx) {
-                        onSelect(-1)
-                    } else {
-                        onSelect(idx)
+    val configuration = LocalConfiguration.current
+    val screenWidthDp = configuration.screenWidthDp
+    
+    if (screenWidthDp < 360) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Row(
+                horizontalArrangement = Arrangement.Center
+            ) {
+                genres.take(3).forEachIndexed { idx, genre ->
+                    OptionChipButton(
+                        modifier = Modifier
+                            .clip(RoundedCornerShape(20.dp)),
+                        text = genre,
+                        isFilled = true,
+                        isSelected = selectedIndex == idx,
+                        onClick = {
+                            if (selectedIndex == idx) {
+                                onSelect(-1)
+                            } else {
+                                onSelect(idx)
+                            }
+                        }
+                    )
+                    if (idx < 2) {
+                        Spacer(modifier = modifier)
+                    }
+                }
+            }
+            Spacer(modifier = Modifier.height(8.dp))
+
+            Row(
+                horizontalArrangement = Arrangement.Center
+            ) {
+                genres.drop(3).forEachIndexed { relativeIdx, genre ->
+                    val idx = relativeIdx + 3
+                    OptionChipButton(
+                        modifier = Modifier
+                            .clip(RoundedCornerShape(20.dp)),
+                        text = genre,
+                        isFilled = true,
+                        isSelected = selectedIndex == idx,
+                        onClick = {
+                            if (selectedIndex == idx) {
+                                onSelect(-1)
+                            } else {
+                                onSelect(idx)
+                            }
+                        }
+                    )
+                    if (relativeIdx < genres.drop(3).size - 1) {
+                        Spacer(modifier = modifier)
                     }
                 }
-            )
-            if (idx < genres.size - 1) {
-                Spacer(modifier = modifier)
+            }
+        }
+    } else {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = horizontalArrangement
+        ) {
+            genres.forEachIndexed { idx, genre ->
+                OptionChipButton(
+                    modifier = Modifier
+                        .clip(RoundedCornerShape(20.dp)),
+                    text = genre,
+                    isFilled = true,
+                    isSelected = selectedIndex == idx,
+                    onClick = {
+                        if (selectedIndex == idx) {
+                            onSelect(-1)
+                        } else {
+                            onSelect(idx)
+                        }
+                    }
+                )
+                if (idx < genres.size - 1) {
+                    Spacer(modifier = modifier)
+                }
             }
         }
     }
 }
 
-@Preview()
+@Preview(name = "Normal Screen (>=360dp)", widthDp = 400)
 @Composable
-fun PreviewGenreChipRow() {
+fun PreviewGenreChipRowNormal() {
     ThipTheme {
         GenreChipRow(
             genres = listOf("문학", "과학·IT", "사회과학", "인문학", "예술"),
@@ -58,3 +124,15 @@ fun PreviewGenreChipRow() {
         )
     }
 }
+
+@Preview(name = "Small Screen (<360dp)", widthDp = 320)
+@Composable
+fun PreviewGenreChipRowSmall() {
+    ThipTheme {
+        GenreChipRow(
+            genres = listOf("문학", "과학·IT", "사회과학", "인문학", "예술"),
+            selectedIndex = 2,
+            onSelect = {}
+        )
+    }
+}

app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupDeadlineRoomSection.kt

@@ -113,15 +113,16 @@ fun GroupRoomDeadlineSection(
                             ),
                             shape = RoundedCornerShape(14.dp)
                         )
-                        .padding(vertical = 20.dp, horizontal = 20.dp)
+                        .padding(vertical = 20.dp)
                 ) {
                     Column(
                         horizontalAlignment = Alignment.CenterHorizontally
                     ) {
                         Text(
                             text = sectionTitle,
                             style = typography.title_b700_s20_h24,
-                            color = colors.White
+                            color = colors.White,
+                            modifier = Modifier.padding(horizontal = 20.dp)
                         )
                         Spacer(Modifier.height(40.dp))
 
@@ -137,6 +138,7 @@ fun GroupRoomDeadlineSection(
                             modifier = Modifier
                                 .fillMaxWidth()
                                 .height(584.dp)
+                                .padding(horizontal = 20.dp)
                         ) {
                             when {
                                 // 에러 상태