Merge pull request #54 from rbqks529/ui/#53-group_qa

[UI] 모임방 페이지 QA

Author: rbqks529

app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoom.kt

@@ -61,7 +61,7 @@ fun CardItemRoom(
             )
             .clickable { onClick() },
         colors = CardDefaults.cardColors(
-            containerColor = colors.DarkGrey50
+            containerColor = colors.DarkGrey
         ),
         shape = RoundedCornerShape(12.dp)
     ) {
@@ -88,7 +88,7 @@ fun CardItemRoom(
                     }
                 }
 
-                Spacer(modifier = Modifier.width(16.dp))
+                Spacer(modifier = Modifier.width(12.dp))
 
                 Column(
                     modifier = Modifier
@@ -148,8 +148,6 @@ fun CardItemRoom(
                                     style = typography.menu_sb600_s12,
                                     color = colors.White
                                 )
-                                Spacer(modifier = Modifier.width(2.dp))
-
                                 Text(
                                     text = stringResource(R.string.card_item_participant_string),
                                     style = typography.info_m500_s12,

app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoomSmall.kt

@@ -52,7 +52,7 @@ fun CardItemRoomSmall(
         modifier
             .width(232.dp)
     }
-    val bgColor = if (isWide) colors.Black else colors.DarkGrey50
+    val bgColor = if (isWide) colors.Black else colors.DarkGrey
 
     Card(
         modifier = cardModifier
@@ -100,8 +100,9 @@ fun CardItemRoomSmall(
                 Column(
                     modifier = Modifier.fillMaxWidth()
                 ) {
-                    Spacer(modifier = Modifier.height(4.dp))
+
                     Text(
+                        modifier = Modifier.padding(top = 4.dp),
                         text = title,
                         color = colors.White,
                         style = if (isWide) typography.smalltitle_sb600_s18_h24 else typography.menu_sb600_s14_h24,
@@ -142,7 +143,7 @@ fun CardItemRoomSmall(
                             )
                         }
                     }
-                    Spacer(modifier = Modifier.height(4.dp))
+                    Spacer(modifier = Modifier.height(7.dp))
 
                     endDate?.let {
                         Text(

app/src/main/java/com/texthip/thip/ui/common/cards/CardRoomBook.kt

@@ -134,9 +134,9 @@ fun CardRoomBook(
                         )
 
                     }
-                    Spacer(modifier = Modifier.height(21.dp))
 
                     Text(
+                        modifier = Modifier.padding(top = 21.dp),
                         text = stringResource(R.string.card_book_explain),
                         color = colors.White,
                         style = typography.info_m500_s12,

app/src/main/java/com/texthip/thip/ui/common/forms/SearchBookTextField.kt

@@ -89,7 +89,7 @@ fun SearchBookTextField(
 
             if (text.isNotEmpty()) {
                 Icon(
-                    painter = painterResource(id = R.drawable.ic_x_circle_grey),
+                    painter = painterResource(id = R.drawable.ic_x_circle_grey02),
                     contentDescription = "Clear text",
                     modifier = Modifier
                         .clickable { onValueChange("") },

app/src/main/java/com/texthip/thip/ui/common/forms/WarningTextField.kt

@@ -82,19 +82,12 @@ fun WarningTextField(
                 ),
                 trailingIcon = {
                     if (showIcon) {
-                        if (value.isNotEmpty()) {
-                            Icon(
-                                painter = painterResource(id = R.drawable.ic_x_circle_white),
-                                contentDescription = "Clear text",
-                                modifier = Modifier.clickable { onValueChange("")},
-                                tint = Color.Unspecified
-                            )
-                        } else {
-                            Icon(
-                                painter = painterResource(id = R.drawable.ic_x_circle),
-                                contentDescription = "Clear text"
-                            )
-                        }
+                        Icon(
+                            painter = painterResource(id = R.drawable.ic_x_circle_grey),
+                            contentDescription = "Clear text",
+                            modifier = Modifier.clickable { onValueChange("") },
+                            tint = Color.Unspecified
+                        )
                     }
                 },
                 singleLine = true,
@@ -159,9 +152,8 @@ fun WarningTextFieldPreviewNormal() {
         contentAlignment = Alignment.Center
     ) {
         WarningTextField(
-
             value = text,
-            onValueChange  = { text = it },
+            onValueChange = { text = it },
             hint = "인풋 텍스트",
             showWarning = false,
             showIcon = true,

app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupBookListWithScrollbar.kt

@@ -39,21 +39,23 @@ fun GroupBookListWithScrollbar(
                 .verticalScroll(scrollState)
                 .drawVerticalScrollbar(scrollState)
         ) {
-            books.forEach { book ->
+            books.forEachIndexed { index, book ->
                 CardBookSearch(
                     title = book.title,
                     imageRes = book.imageRes,
                     onClick = { onBookClick(book) }
                 )
 
-                Spacer(modifier = Modifier.height(12.dp))
-                Spacer(modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(end = 6.dp)
-                    .height(1.dp)
-                    .background(color = colors.Grey02)
-                )
-                Spacer(modifier = Modifier.height(12.dp))
+                if (index < books.size - 1) {
+                    Spacer(modifier = Modifier.height(12.dp))
+                    Spacer(modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(end = 6.dp)
+                        .height(1.dp)
+                        .background(color = colors.Grey02)
+                    )
+                    Spacer(modifier = Modifier.height(12.dp))
+                }
             }
         }
     }

app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupBookSearchBottomSheet.kt

@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
@@ -33,15 +34,29 @@ fun GroupBookSearchBottomSheet(
     savedBooks: List<BookData> = emptyList(),
     groupBooks: List<BookData> = emptyList()
 ) {
-    // 책이 있는지 여부 체크
     val hasBooks = savedBooks.isNotEmpty() || groupBooks.isNotEmpty()
     var selectedTab by rememberSaveable { mutableIntStateOf(0) }
     val tabs = listOf(
         stringResource(R.string.group_saved_book), stringResource(R.string.group_book)
     )
-    val books = if (selectedTab == 0) savedBooks else groupBooks
+
     var searchText by rememberSaveable { mutableStateOf("") }
 
+    val currentBooks = if (selectedTab == 0) savedBooks else groupBooks
+
+    val filteredBooks by remember(currentBooks, searchText) {
+        derivedStateOf {
+            if (searchText.isEmpty()) {
+                currentBooks
+            } else {
+                currentBooks.filter { book ->
+                    book.title.contains(searchText, ignoreCase = true) ||
+                            (book.author?.contains(searchText, ignoreCase = true) == true)
+                }
+            }
+        }
+    }
+
     CustomBottomSheet(
         onDismiss = onDismiss
     ) {
@@ -55,7 +70,7 @@ fun GroupBookSearchBottomSheet(
                 hint = stringResource(R.string.group_book_search_hint),
                 text = searchText,
                 onValueChange = { searchText = it },
-                onSearch = { /* 검색 구현 */ },
+                onSearch = { /* 이미 실시간으로 필터링됨 */ },
             )
             Spacer(Modifier.height(20.dp))
         }
@@ -64,7 +79,10 @@ fun GroupBookSearchBottomSheet(
             HeaderMenuBarTab(
                 titles = tabs,
                 selectedTabIndex = selectedTab,
-                onTabSelected = { selectedTab = it },
+                onTabSelected = {
+                    selectedTab = it
+                    // searchText = ""
+                },
                 indicatorColor = ThipTheme.colors.White,
                 modifier = Modifier.fillMaxWidth()
             )
@@ -75,13 +93,23 @@ fun GroupBookSearchBottomSheet(
                     .padding(start = 20.dp, end = 20.dp, bottom = 20.dp)
             ) {
                 Spacer(Modifier.height(20.dp))
-                if (books.isEmpty()) {
-                    EmptyBookSheetContent(onRequestBook = onRequestBook)
-                } else {
-                    GroupBookListWithScrollbar(
-                        books = books,
-                        onBookClick = onBookSelect
-                    )
+
+                when {
+                    currentBooks.isEmpty() -> {
+                        EmptyBookSheetContent(onRequestBook = onRequestBook)
+                    }
+                    filteredBooks.isEmpty() && searchText.isNotEmpty() -> {
+                        SearchEmptyContent(
+                            searchText = searchText,
+                            onRequestBook = onRequestBook
+                        )
+                    }
+                    else -> {
+                        GroupBookListWithScrollbar(
+                            books = filteredBooks,
+                            onBookClick = onBookSelect
+                        )
+                    }
                 }
             }
         } else {
@@ -97,7 +125,16 @@ fun GroupBookSearchBottomSheet(
     }
 }
 
-
+// 검색 결과가 없을 때 표시할 컴포넌트 (필요시 구현)
+@Composable
+private fun SearchEmptyContent(
+    searchText: String,
+    onRequestBook: () -> Unit
+) {
+    // 검색 결과가 없을 때의 UI
+    // 예: "'{searchText}'에 대한 검색 결과가 없습니다" 메시지와 책 요청 버튼
+    EmptyBookSheetContent(onRequestBook = onRequestBook)
+}
 
 @Preview(showBackground = true)
 @Composable

app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupDatePicker.kt

@@ -39,10 +39,14 @@ fun GroupDatePicker(
     val month = selectedDate.monthValue
     val day = selectedDate.dayOfMonth
 
-    // 유효한 범위 계산
-    val years = (minDate.year..maxDate.year).toList()
-    val months = (1..12).toList()
-    val days = (1..selectedDate.lengthOfMonth()).toList()
+    // 유효한 범위 계산 - 날짜 변경 시 안정성을 위해 remember 사용
+    val years = remember(minDate.year, maxDate.year) { 
+        (minDate.year..maxDate.year).toList() 
+    }
+    val months = remember { (1..12).toList() }
+    val days = remember(year, month) { 
+        (1..LocalDate.of(year, month, 1).lengthOfMonth()).toList() 
+    }
 
     Row(
         modifier = modifier.fillMaxWidth(),
@@ -105,7 +109,7 @@ fun GroupDatePicker(
             GroupWheelPicker(
                 modifier = Modifier.width(32.dp),
                 items = days,
-                selectedItem = day,
+                selectedItem = day.coerceAtMost(days.max()),
                 onItemSelected = { newDay ->
                     val newDate = LocalDate.of(year, month, newDay)
                     onDateSelected(newDate)

app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupEmptyBookSheetContent.kt

@@ -19,6 +19,7 @@ import com.texthip.thip.R
 import com.texthip.thip.ui.common.buttons.ActionMediumButton
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
 fun EmptyBookSheetContent(
@@ -30,16 +31,16 @@ fun EmptyBookSheetContent(
             .padding(bottom = 30.dp),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        Icon(
-            painter = painterResource(id = R.drawable.ic_notification),
-            contentDescription = null,
-            tint = colors.Grey02
+        Text(
+            text = stringResource(R.string.group_register_book_comment_1),
+            color = colors.Grey,
+            style = typography.copy_m500_s14_h20
         )
-        Spacer(Modifier.height(12.dp))
+
         Text(
-            text = stringResource(R.string.group_register_book_comment),
-            color = ThipTheme.colors.Grey02,
-            style = ThipTheme.typography.copy_m500_s14_h20
+            text = stringResource(R.string.group_register_book_comment_2),
+            color = colors.Grey,
+            style = typography.copy_m500_s14_h20
         )
         Spacer(Modifier.height(24.dp))
 

app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupMemberLimitPicker.kt

@@ -10,13 +10,11 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.texthip.thip.R
@@ -25,7 +23,7 @@ import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
-fun MemberLimitPicker(
+fun GroupMemberLimitPicker(
     modifier: Modifier = Modifier,
     selectedCount: Int = 30,
     onCountSelected: (Int) -> Unit = { }
@@ -76,7 +74,7 @@ fun MemberLimitPickerPreview() {
     ThipTheme {
         var selectedCount by remember { mutableIntStateOf(30) }
 
-        MemberLimitPicker(
+        GroupMemberLimitPicker(
             selectedCount = selectedCount,
             onCountSelected = { selectedCount = it }
         )